ShopifyBuy js API

dbchap
New Member
1 0 0

Hi all,

I've been attempting to create an "Add all to cart" feature using the buy button js api

My approach has been to set a class on the buy buttons, then to grab those buttons by classname and simulate click on them.  This doesn't work properly, and I've not been able to find any other or better way of doing this.

 

This is how I am adding each buy button, imagine a set of 10 productHandles getting added to the page

 

<span id="my-product-<productHandle>"></span>
    <script>
            ShopifyUI.createComponent('product', {
                id: '<productHandle>',
                node: document.getElementById('my-product-<productHandle>'),
                options: {
                    cart: {
                        startOpen: false,
                    },
                    "product": {
                        iframe: false,
                        "contents": {
                            "img": false,
                            "title": false,
                            "price": false
                        },
                        events: {},
                        "text": {
                            "button": "Add To Cart"
                        },
                        "classes": {
                            button: 'btn-shopify-buybutton',
                        },
                        "styles": {
                            "button": {}
                        }
                    }
                }
            });
    </script>

 

 

I then have an "Add All" button which  triggers the following code:

 

var shopifyBuyButtons = document.getElementsByClassName('btn-shopify-buybutton');
for ( idxBuyButton = 0; idxBuyButton < shopifyBuyButtons.length; ++idxBuyButton ) {
        shopifyBuyButtons[idxBuyButton].click();
}

 

 

As this adds products to the cart, it seems to cancel previous products that are triggered to be added.

 

Can anyone give me a nudge in the right direction?  I am just starting out with Shopify and this is a real need for the project I'm working on. 

 

Thanks,

Don

0 Likes
_JCC_
Shopify Staff
Shopify Staff
160 21 28

Don,

The issue with just calling the click event as shown is that actual adding of the variant doesn't complete before the next request is sent.

An approach that would work in recent browsers (not IE) is async await.

To tweak your example I would declare an array to hold the products on your page, add an async function to add those products to the cart, and in the promise returned from createComponent I would add the product to the array.

const products = []; // Holds the product components generated from calling createComponent

const addAll = async ()=>{
   for(const product of products){
      await product.cart.addVariantToCart(product.selectedVariant);
   }
}
ui.createComponent('product', {
   id: someid,
   options: {
      cart:{
         startOpen:false
       },
       "product": {
            iframe: false,
       }
    }
}).then((product)=>products.push(product)); // Adds the product component to the array

When the Add All button calls the addAll function each product will get added to the cart in succession. 

John C | Developer Support @ 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

0 Likes