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
Thanks in advance,
Jamie
Read only link: https://preview.webflow.com/preview/tt-bikers?preview=9824e5b4ab6d5e6b639851536efe5cc8