Re: Buy button won't display on smartphone version of web page (javascript issue)

Solved

Buy button won't display on smartphone version of web page (javascript issue)

suga
Visitor
3 0 0

I am trying to add the buy button to my website product page, but I need the button to display twice: once in a PC table and once in a responsive/smartphone table. Because the JavaScript uses "node: document.getElementById" to display the button, it will only display on one of the tables.

 

In order to get around this "getElementById" dilemma, I tried changing it to "getElementsByClassName" and "querySelectorAll" and changed the respective HTML div tags accordingly, but it does not work. 

 

getElementsByClassName

 

<div class="buybutton"></div>
ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '7369316827224',
        node: document.getElementByClassName('buybutton'),

 

 

querySelectorAll

 

<div id="#buybutton"></div>
ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: '7369316827224',
    node: document.querySelectorAll('#buybutton'),

 

 

Is there a way to make this work? If not, is there a cleaner way to do this without copying and pasting the javascript code twice and changing the IDs?

Accepted Solution (1)
Lfbok
Shopify Partner
20 2 3

This is an accepted solution.

I tried the following code and it appears two buttons

 

<div class='product-item'></div>
<div class='product-item'></div>
(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: 'lfbok.myshopify.com',
        storefrontAccessToken: 'ec0b7f9c7362bedf6e1aabe4db6f9be0',
      });
      const btns = document.getElementsByClassName('product-item')
      for (let i = 0; i < btns.length; i++) {
        ShopifyBuy.UI.onReady(client).then(function (ui) {
          ui.createComponent('product', {
            id: '7288498061497',
            node: btns[i],
            moneyFormat: '%C2%A5%7B%7Bamount%7D%7D',
            options: {
              "product": {
                "styles": {
                  "product": {
                    "@media (min-width: 601px)": {
                      "max-width": "calc(25% - 20px)",
                      "margin-left": "20px",
                      "margin-bottom": "50px"
                    }
                  }
                },
                "text": {
                  "button": "Add to cart"
                }
              },
              "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"
                    }
                  }
                },
                "text": {
                  "button": "Add to cart"
                }
              },
              "option": {},
              "cart": {
                "text": {
                  "total": "Subtotal",
                  "button": "Checkout"
                }
              },
              "toggle": {}
            },
          });
        });
      }
    }
  })();

 

banned

View solution in original post

Replies 4 (4)

Lfbok
Shopify Partner
20 2 3
document.getElementsByClassName('buybutton').forEach(node => {
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '7369316827224',
        node,
        //...
  })
banned
suga
Visitor
3 0 0

Thank you for your reply, but after trying this, the button will not appear on either table.

Maybe I did something wrong?

 

This is the javascript edit I made:

 document.getElementsByClassName('buybutton').forEach(node => {
            ShopifyBuy.UI.onReady(client).then(function (ui) {
              ui.createComponent('product', {
                id: '7369316827224',
                node,
                moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',

 

And I used this class twice (one for each table):

<div class="buybutton"></div>

 

Lfbok
Shopify Partner
20 2 3

This is an accepted solution.

I tried the following code and it appears two buttons

 

<div class='product-item'></div>
<div class='product-item'></div>
(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: 'lfbok.myshopify.com',
        storefrontAccessToken: 'ec0b7f9c7362bedf6e1aabe4db6f9be0',
      });
      const btns = document.getElementsByClassName('product-item')
      for (let i = 0; i < btns.length; i++) {
        ShopifyBuy.UI.onReady(client).then(function (ui) {
          ui.createComponent('product', {
            id: '7288498061497',
            node: btns[i],
            moneyFormat: '%C2%A5%7B%7Bamount%7D%7D',
            options: {
              "product": {
                "styles": {
                  "product": {
                    "@media (min-width: 601px)": {
                      "max-width": "calc(25% - 20px)",
                      "margin-left": "20px",
                      "margin-bottom": "50px"
                    }
                  }
                },
                "text": {
                  "button": "Add to cart"
                }
              },
              "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"
                    }
                  }
                },
                "text": {
                  "button": "Add to cart"
                }
              },
              "option": {},
              "cart": {
                "text": {
                  "total": "Subtotal",
                  "button": "Checkout"
                }
              },
              "toggle": {}
            },
          });
        });
      }
    }
  })();

 

banned
suga
Visitor
3 0 0

Thank you so much! 

This worked perfectly.