In the file customproductbuilder-initializer.liquid find the line:
{{ customproductbuilder.js | asset_url | script_tag }}
Add apostrophes to it, if it doesn't have:
{{ 'customproductbuilder.js' | asset_url | script_tag }}
If it doesn't exist, create a new asset called "customproductbuilder.js"
Open it. If it's a new created file, just paste the code:
(function() {
document.body.addEventListener('CPB_ON_PRODUCT_MOUNTED', init);
function init() {
addAfterPay();
}
function addAfterPay() {
if(!window.Afterpay || !window.jQuery) return;
const productPriceWrapper = document.querySelector('.cpb-panels-container .cpb-product-full-price');
const productPrice = productPriceWrapper.querySelector('.cpb-product-price');
productPriceWrapper.id = 'ProductPrice';
Afterpay.init(jQuery);
const afterpayEl = productPriceWrapper.parentNode.querySelector('.afterpay-paragraph');
let lastPrice = Afterpay.extractPriceFromHTML(productPrice.innerText);
document.body.addEventListener('CPB_ON_OPTIONS_UPDATE', function() {
const currentPrice = Afterpay.extractPriceFromHTML(productPrice.innerText);
if(lastPrice !== currentPrice) {
Afterpay.updateParagraph(jQuery(afterpayEl), currentPrice);
lastPrice = currentPrice;
}
});
}
})();
If it already contains something then you'll need to add the addAfterPay function:
function addAfterPay() {
if(!window.Afterpay || !window.jQuery) return;
const productPriceWrapper = document.querySelector('.cpb-panels-container .cpb-product-full-price');
const productPrice = productPriceWrapper.querySelector('.cpb-product-price');
productPriceWrapper.id = 'ProductPrice';
Afterpay.init(jQuery);
const afterpayEl = productPriceWrapper.parentNode.querySelector('.afterpay-paragraph');
let lastPrice = Afterpay.extractPriceFromHTML(productPrice.innerText);
document.body.addEventListener('CPB_ON_OPTIONS_UPDATE', function() {
const currentPrice = Afterpay.extractPriceFromHTML(productPrice.innerText);
if(lastPrice !== currentPrice) {
Afterpay.updateParagraph(jQuery(afterpayEl), currentPrice);
lastPrice = currentPrice;
}
});
}
And call it when the product is already mounted.
addAfterPay();
Comments
0 comments
Please sign in to leave a comment.