Buy Button.js Is Overriding Other HTML Elements

parkcoder
New Member
2 0 0
 

I have been having a weird issue with the Buy Button.js code. It shows up on my custom html/css/js website on one of the pages just fine, however, it is erasing or hiding my .header class and .maxFooter class. I am using Vue.js as a framework, but I wouldn't think that should change anything. I feel like it has something to do with the '.appendChild(script)' code. Any help please?

 

<div class="header">
         <div>
                <img class="logoSmall" src="icons/parkspassLogo.png" @Click="homeLogoClicked()">
                <div class="helpContainer" @Click="helpClicked()"><img class="helpBtn" src="icons/help.svg"></div>
         </div>
</div>
<div id="shopifyDiv">
         <div id='collection-component-1616174058754'></div>
</div>
<div class="maxFooter"></div>

 

 

 

loadShopifyCollection(){
            /*<![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: 'parkspass.myshopify.com',
                    storefrontAccessToken: 'bb85f79b23cdfa9707c39d555294fde2',
                  });
                  ShopifyBuy.UI.onReady(client).then(function (ui) {
                    ui.createComponent('collection', {
                      id: '261970231470',
                      node: document.getElementById('collection-component-1616174058754'),
                      moneyFormat: '%24%7B%7Bamount%7D%7D',
                      options: {
                        "product": {
                          "styles": {
                            "product": {
                              "@media (min-width: 601px)": {
                                "max-width": "calc(25% - 20px)",
                                "margin-left": "20px",
                                "margin-bottom": "50px",
                                "width": "calc(25% - 20px)"
                              },
                              "img": {
                                "height": "calc(100% - 15px)",
                                "position": "absolute",
                                "left": "0",
                                "right": "0",
                                "top": "0"
                              },
                              "imgWrapper": {
                                "padding-top": "calc(75% + 15px)",
                                "position": "relative",
                                "height": "0"
                              }
                            },
                            "button": {
                              "font-size": "16px",
                              "padding-top": "16px",
                              "padding-bottom": "16px",
                              "border-radius": "40px",
                              "padding-left": "38px",
                              "padding-right": "38px"
                            },
                            "quantityInput": {
                              "font-size": "16px",
                              "padding-top": "16px",
                              "padding-bottom": "16px"
                            }
                          },
                          "buttonDestination": "checkout",
                          "text": {
                            "button": "Buy now"
                          }
                        },
                        "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-size": "16px",
                              "padding-top": "16px",
                              "padding-bottom": "16px",
                              "border-radius": "40px",
                              "padding-left": "38px",
                              "padding-right": "38px"
                            },
                            "quantityInput": {
                              "font-size": "16px",
                              "padding-top": "16px",
                              "padding-bottom": "16px"
                            }
                          },
                          "text": {
                            "button": "Add to cart"
                          }
                        },
                        "option": {},
                        "toggle": {
                          "styles": {
                            "count": {
                              "font-size": "16px"
                            }
                          }
                        }
                      },
                    });
                  });
                }
              })();
        /*]]>*/
        }

 

 
0 Likes
parkcoder
New Member
2 0 0

I figured it out. Let me know if you have any of the same issues.

0 Likes