Buy Button: multiple collections on single page JS bug

New Member
2 0 0

I am setting up Buy Buttons on a WordPress website and need to display multiple collections on a single page. Even though I set up multiple elements, the different collections sporadically get mixed up into different sections. Example here: (if everything looks fine, you may have to reload the page until you see the issue. 

I am using the standard Buy Button JS embed code just altered to display multiple collections and setting iframe: false. 

function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({...});

var ui = ShopifyBuy.UI.init(client);

var options = {...};

<?php for ($i=0; $i < sizeof($shopify_collections); $i++): ?> ui.createComponent('collection', { id: <?php echo $shopify_collections[$i] ?>, node: document.getElementById('collection-component-<?php echo $shopify_collections[$i] ?>'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: options }); <?php endfor; ?>

There doesn't seem to be any rhyme or reason to when or where the additional collection products are moved. The 2nd, 3rd, 4th collections are sometimes in the right div, but sometimes are incorrectly added to the wrong div. I see the JS initializes each node correctly even when it places the products in a previous collection div. 

<div id="collection-component-178746753066" class=" shopify-buy-frame shopify-buy-frame--productSet">
    <div class="shopify-buy__collection">
        <div class="shopify-buy__collection-products"></div>
        <button class="shopify-buy__collection-pagination-button shopify-buy__btn ">Next page</button>

Is there a trick to adding multiple collections to a single page? Is there a bug where the global "node" identifier is overwritten before all products are placed for that collection? Any help you can provide is appreciated.