Showing Bundle Discounts Per Line Item
By default our app just shows the Bundle Discount before checkout in the Cart Page, we replace the current total of your cart page with the Bundle values( more info here).
But besides showing just the total, some Shops want to show the discount per line item, instead of just showing the total.
There are 2 ways to do this:
1. Using Revy Classes:
In the screenshot above you can see that we have replaced the default line item prices with Bundle Total prices. To do this, firstly you need to have a parent HTML element in each line item with the attribute data-cart-item-key
and the value of this attribute will be the line item key(this comes from your liquid), here is an example:
<tr data-cart-item-key="{{ item.key }}" ...>
This is how we gonna localize each line item in your template, now we need to map more 2 values inside the parent element:
- Line item total price
- Line item unit price
To map the line item total price add the selector .revy-line-item-price
to the line item price element.
And to map the line item unit price add the selector .revy-line-item-unit-price
to the line item unit price element.
PS: Some themes do not show the unit price for each line item, it uses just the total line item price, for these themes ignore the line item unit price part.
If you need any help please contact us at [email protected] and we will help you have this done ;).
2. Using Totals API
The Totals API gives more flexibility because is possible to use this API in any page of your Store, it is ideal to use if you have a Mini-Cart / Slide Cart/ Float Cart and you want to populate this snippet with the Bundle Discount values. We have a detailed guide showing how to use this API:
Totals API - Showing Bundle totals and discounts on your theme