BYOB js variables for customizations
Here are the js variables that can be used for customizations. When the js variable is defined in the byob product template, the corresponding feature is activated.
You can add a custom liquid section with the JavaScript inside. Just put this section above the BYOB app blocks:
<script>
var activate_this_feature = true;
</script>
The variables:
- showCompareAtPriceOnCard
- show the compare at price on a product card
- canToggleTab
- By default, the tab can be toggled. You can set canToogle = false and the tab cannot be toggled to open and close.
- openAllTabs
- By default, only the 1st tab is opened. You can set openAllTabs = true to open all tabs when the page is opened
- byob_currency_option
- the default currency option is default_currency_option= {style:'currency', currency: currencyCode}
- byob_locale
- the default locale is {{ request.locale.iso_code }, e.g. 'en'
- customDecimalPlace
- the decimal place is shown on the price of the product card. The default value is 2
- byob_single_purchase_by_variant
- enable single purchase by the bundle variant on the subscription pop-up. By default, only the individual items are added to the cart for subscription integration.
- enableQuickviewByImage
- set var enableQuickviewByImage = true. The quick view pop-up can be triggered by clicking the product card image
- same_as_footer_format
- set the product card price to have the same price format as the footer total price, e.g. the footer price is HK$90.00, the product card price will be changed to HK$50.00 when this variable is defined
- byob_footer_remove_quantity
- set the decrement quantity when the footer remove icon is clicked, e.g. when you set `var byob_footer_remove_quantity = 5;`, 5 of the same variants are removed at once
- increment_quantity
- set the add-to-bundle button quantity, e.g. when you set it to 5, e.g. 5 variants are added to the bundle at once when the customer clicks the add-to-bundle button on a product card. Here's the sample code:
var byob_footer_remove_quantity = 5; // set the footer removal quantity to match with increment quantity function initBYOBBundle(vm) { vm.buildrules[0].increment_quantity = 5; // set the first bundle condition's increment quantity to 5 }
- set the add-to-bundle button quantity, e.g. when you set it to 5, e.g. 5 variants are added to the bundle at once when the customer clicks the add-to-bundle button on a product card. Here's the sample code: