Streaming live at 10am (PST)

Shopify embedded Buy Button broken


#1

Hi there, we were working on a site a while ago where you could embed shopify products using cms fields. This worked great until we went to use the same method on another project and it didn’t work, and then when we went to look back to the older project for help that was broken too. Any work arounds for this??

The method we’re using is an embed widget with the Buy Button code from shopify and we’re pulling in the Product ID from a field in the CMS collection.

Now the button just won’t show up anymore, here’s the code we’re using.

<div id='product-component-792dede2224'></div>
<script type="text/javascript">
/*<![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: 'ttbikers.myshopify.com',
      apiKey: 'api key',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [DYNAMIC PRODUCT ID],
        node: document.getElementById('product-component-792dede2224'),
        moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "width": "240px",
    "contents": {
      "img": false,
      "imgWithCarousel": false,
      "title": false,
      "variantTitle": false,
      "price": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "text": {
      "button": "PAY DEPOSIT"
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "background-color": "#0e84c9",
        "font-family": "Source Sans Pro, sans-serif",
        "padding-left": "25px",
        "padding-right": "25px",
        ":hover": {
          "background-color": "#0d77b5"
        },
        ":focus": {
          "background-color": "#0d77b5"
        },
        "font-weight": "bold"
      },
      "variantTitle": {
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      },
      "title": {
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      },
      "description": {
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      },
      "price": {
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      },
      "compareAt": {
        "font-size": "12px",
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      }
    },
    "googleFonts": [
      "Source Sans Pro",
      "Source Sans Pro",
      "Source Sans Pro",
      "Source Sans Pro",
      "Source Sans Pro",
      "Source Sans Pro"
    ]
  },
  "cart": {
    "contents": {
      "button": true
    },
    "text": {
      "title": "Your Courses",
      "total": "Subtotal",
      "notice": "",
      "button": "Continue Booking",
      "empty": "You haven't selected any courses"
    },
    "styles": {
      "button": {
        "background-color": "#0e84c9",
        "font-family": "Source Sans Pro, sans-serif",
        ":hover": {
          "background-color": "#0d77b5"
        },
        ":focus": {
          "background-color": "#0d77b5"
        },
        "font-weight": "bold"
      },
      "footer": {
        "background-color": "#ffffff"
      }
    },
    "googleFonts": [
      "Source Sans Pro"
    ]
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "variantTitle": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "background-color": "#0e84c9",
        "font-family": "Source Sans Pro, sans-serif",
        "padding-left": "25px",
        "padding-right": "25px",
        ":hover": {
          "background-color": "#0d77b5"
        },
        ":focus": {
          "background-color": "#0d77b5"
        },
        "font-weight": "bold"
      },
      "variantTitle": {
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      },
      "title": {
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      },
      "description": {
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      },
      "price": {
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      },
      "compareAt": {
        "font-family": "Source Sans Pro, sans-serif",
        "font-weight": "normal"
      }
    },
    "googleFonts": [
      "Source Sans Pro",
      "Source Sans Pro",
      "Source Sans Pro",
      "Source Sans Pro",
      "Source Sans Pro",
      "Source Sans Pro"
    ]
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-family": "Source Sans Pro, sans-serif",
        "background-color": "#0e84c9",
        ":hover": {
          "background-color": "#0d77b5"
        },
        ":focus": {
          "background-color": "#0d77b5"
        },
        "font-weight": "bold"
      },
      "count": {
        "color": "#ffffff",
        ":hover": {
          "color": "#ffffff"
        },
        "font-size": "16px"
      },
      "iconPath": {
        "fill": "#ffffff"
      }
    },
    "googleFonts": [
      "Source Sans Pro"
    ]
  },
  "option": {
    "styles": {
      "label": {
        "font-family": "Source Sans Pro, sans-serif"
      },
      "select": {
        "font-family": "Source Sans Pro, sans-serif"
      }
    },
    "googleFonts": [
      "Source Sans Pro",
      "Source Sans Pro"
    ]
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

Any help is appreciated :smile:

Thanks in advance,
Jamie


Read only link: https://preview.webflow.com/preview/tt-bikers?preview=9824e5b4ab6d5e6b639851536efe5cc8


#4

I’m having the exact same issue. I’ve used this method before with Shopify and with other sites such as Eventbrite without issue. The code from Shopify seems to work perfectly when used without dynamic embeds, but when you assign the variables to the code, the button stops showing up. Any ideas?

Thanks,

Trevor

https://preview.webflow.com/preview/moovin?preview=18089a7b0c2d257638f8d5199232c0d7


#5

Hi Trevor,

Still no fix as far as I can see for this issue, hopefully webflow will come up with a work around soon.


#6

I have the same problem. I’ve tried to implement just products one by one but they are display below each other. Can’t get them horizontal :frowning: