Optimizing DOM Events Integration for Buy Button Channel App on Shopify

Optimizing DOM Events Integration for Buy Button Channel App on Shopify

hvrajput7
Shopify Partner
4 0 0

<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.

Replies 2 (2)

Liam
Shopify Staff
2873 312 821

It may be easier to achieve what you're aiming to do with the Storefront API instead of using a Buy Button. 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

candacgreen
Tourist
3 1 0

To add JavaScript globally across all products in the Shopify Buy Button Channel App, access the Script Editor in your Shopify admin. Navigate to Online Store > Themes, select "Edit code" for your current theme, and locate or create the `theme.js` file in the Assets folder. Add your JavaScript code within a DOMContentLoaded event listener. This ensures your code executes globally. Save the changes, and your JavaScript enhancements will apply universally to all products. Test thoroughly and refer to Shopify's documentation or support for theme-specific guidelines.