<div id='product-component-1706158236750'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src=scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'abc.myshopify.com',
storefrontAccessToken: '----------------',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '7351995007091',
node: document.getElementById('product-component-1706158236750'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
},
"text-align": "left"
},
"title": {
"font-family": "Montserrat, sans-serif",
"font-weight": "normal",
"font-size": "26px"
},
"button": {
"font-family": "Montserrat, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
},
"border-radius": "8px"
},
"price": {
"font-family": "Montserrat, sans-serif",
"font-weight": "bold",
"font-size": "18px"
},
"compareAt": {
"font-family": "Montserrat, sans-serif",
"font-weight": "bold",
"font-size": "15.299999999999999px"
},
"unitPrice": {
"font-family": "Montserrat, sans-serif",
"font-weight": "bold",
"font-size": "15.299999999999999px"
},
"description": {
"font-family": "Montserrat, sans-serif",
"font-size": "15px"
}
},
"layout": "horizontal",
"contents": {
"img": false,
"imgWithCarousel": true,
"description": true
},
"width": "100%",
"text": {
"button": "Add to cart"
},
"googleFonts": [
"Montserrat"
],
DOMEvents: {
'click .shopify-buy__carousel-item': function (evt, target) {
evt.preventDefault();
const selectedImageId = target.getAttribute('data-image-id');
const thisProduct = ui.components.product[0];
const imageList = thisProduct.model.images;
const foundImage = imageList.find((image) => {
return image.id === selectedImageId;
});
if (foundImage) {
thisProduct.selectedImage = foundImage;
thisProduct.cachedImage = foundImage;
// Select option on image click
const variantList = thisProduct.model.variants;
const foundVariant = variantList.find((variant) => {
return variant?.image?.id === selectedImageId;
});
if (foundVariant) {
const selectedOption = foundVariant.selectedOptions[0];
if (selectedOption.name == 'color' || selectedOption.name == 'Color') {
thisProduct.updateVariant(selectedOption.name, selectedOption.value);
}
}
}
thisProduct.view.render();
}
},
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-family": "Montserrat, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
},
"border-radius": "8px"
},
"title": {
"font-family": "Montserrat, sans-serif",
"font-weight": "normal",
"font-size": "26px",
"color": "#4c4c4c"
},
"price": {
"font-family": "Montserrat, sans-serif",
"font-weight": "normal",
"font-size": "18px",
"color": "#4c4c4c"
},
"compareAt": {
"font-family": "Montserrat, sans-serif",
"font-weight": "normal",
"font-size": "15.299999999999999px",
"color": "#4c4c4c"
},
"unitPrice": {
"font-family": "Montserrat, sans-serif",
"font-weight": "normal",
"font-size": "15.299999999999999px",
"color": "#4c4c4c"
},
"description": {
"font-family": "Montserrat, sans-serif",
"font-weight": "normal",
"font-size": "14px",
"color": "#4c4c4c"
}
},
"googleFonts": [
"Montserrat"
],
"text": {
"button": "add to cart"
}
},
"option": {
"styles": {
"label": {
"font-family": "Montserrat, sans-serif"
},
"select": {
"font-family": "Montserrat, sans-serif"
}
},
"googleFonts": [
"Montserrat"
]
},
"cart": {
"styles": {
"button": {
"font-family": "Montserrat, sans-serif",
":hover": {
"background-color": "#000000"
},
"background-color": "#000000",
":focus": {
"background-color": "#000000"
},
"border-radius": "8px"
}
},
"text": {
"title": "cart",
"total": "subtotal",
"empty": "your cart is empty.",
"notice": "",
"button": "checkout"
},
"googleFonts": [
"Montserrat"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Montserrat, sans-serif",
"background-color": "#000000",
":hover": {
"background-color": "#000000"
},
":focus": {
"background-color": "#000000"
}
}
},
"googleFonts": [
"Montserrat"
]
}
},
});
});
}
})();
/*]]>*/
</script>
I am currently working on integrating the Buy Button Channel App on my Shopify store, and I've encountered a situation where I need to add specific DOM events JavaScript for each product individually.
The provided JavaScript code snippet includes DOM events to enhance the functionality for each product, and while it works perfectly, adding this code manually for every product seems a bit time-consuming and repetitive.
I would like to inquire if there is an alternative or more efficient method within the Buy Button Channel App to implement these DOM events globally across all products. This would significantly simplify the process of managing and maintaining the JavaScript code for each product individually.
