Creating Custom DOM Element Based on Add to Cart Button

Shopify Partner
2 0 1

I am using the Storefront API and BuyButton.JS and would like to create a custom DOM element based on the Add to Cart button.  I have been able to follow the Advanced Customization reference on GitHub ( http://shopify.github.io/buy-button-js/advanced ), but I haven't been able to find any documentation on the default Shopify DOM object(s) so that the necessary Mustache expressions can be easily added to the template definition.

 

For example,  {{data.selectedVariant.price}} will give me the price of the selected product variant and {{data.description}} will give me the product description.  But I haven't been able to guess as to how to include the Add to Cart button in a templated variable that can be displayed by adding its key to the order and contents objects. (I want to wrap some custom HTML around elements, Price and Add to Cart button, for styling purposes.

 

Specifically, how can I reference the Add to Cart button in a Mustache expression, but beyond this question, can someone point me to a DOM object reference where I can find out how to access ALL elements?

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
419 56 65

Hey @cgdbrad ,

 

Not sure if I completely understand the question, but from my knowledge the DOM element that corresponds to the 'Add to Cart' button should be "shopify-buy__btn" and to get the template of that you can try "data.classes.product.button"

 

In general, you can see a full list of all components utilized in Buy Button JS here: https://github.com/Shopify/buy-button-js/blob/master/src/defaults/components.js. You can see the templates associated with the product component here: https://github.com/Shopify/buy-button-js/blob/master/src/templates/product.js

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes