-
Posts
-
Hi,
I’d like to embed a shopify buy now button into the enfold theme within the accordian widget and the table widget. The buy now button works in the regular editor but not in the advance editor.
For your reference I’ve included a private link in this thread. On the webpage accessible by this link I have embedded a shopify button into the 2nd column last row of the table and into the open accordian near the bottom. If I do a view source the code is there but it won’t display on the page.
Can someone please help. thx
Hey!
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Also, what should be buttons link?
Best regards,
YigitHi,
I posted my login info and here’s the button code that’s not showing up.
<div id=’product-component-d6a0cd464fe’></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: ‘mriclinic.myshopify.com’,
apiKey: ‘a5af87bddf2cd88887f5d96e24909310’,
appId: ‘6’,
});ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent(‘product’, {
id: [8556772993],
node: document.getElementById(‘product-component-d6a0cd464fe’),
moneyFormat: ‘%24%7B%7Bamount%7D%7D’,
options: {
“product”: {
“variantId”: “all”,
“width”: “240px”,
“contents”: {
“img”: false,
“title”: false,
“variantTitle”: false,
“price”: false,
“description”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“text”: {
“button”: “PLACE ORDER”
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0”,
“margin-bottom”: “50px”
}
},
“title”: {
“font-size”: “26px”,
“color”: “#ffffff”
},
“price”: {
“font-size”: “18px”,
“color”: “#ffffff”
},
“compareAt”: {
“font-size”: “15px”,
“color”: “#ffffff”
}
}
},
“cart”: {
“contents”: {
“button”: true
},
“styles”: {
“footer”: {
“background-color”: “#ffffff”
}
}
},
“modalProduct”: {
“contents”: {
“variantTitle”: false,
“buttonWithQuantity”: true,
“button”: false,
“quantity”: false
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0px”,
“margin-bottom”: “0px”
}
}
}
},
“toggle”: {
“styles”: {
“count”: {
“color”: “#ffffff”,
“:hover”: {
“color”: “#ffffff”
}
},
“iconPath”: {
“fill”: “#ffffff”
}
}
},
“productSet”: {
“styles”: {
“products”: {
“@media (min-width: 601px)”: {
“margin-left”: “-20px”
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>Hi,
Here’s the button code that’s not showing up along with my login info.
<div id=’product-component-d6a0cd464fe’></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: ‘mriclinic.myshopify.com’,
apiKey: ‘a5af87bddf2cd88887f5d96e24909310’,
appId: ‘6’,
});ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent(‘product’, {
id: [8556772993],
node: document.getElementById(‘product-component-d6a0cd464fe’),
moneyFormat: ‘%24%7B%7Bamount%7D%7D’,
options: {
“product”: {
“variantId”: “all”,
“width”: “240px”,
“contents”: {
“img”: false,
“title”: false,
“variantTitle”: false,
“price”: false,
“description”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“text”: {
“button”: “PLACE ORDER”
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0”,
“margin-bottom”: “50px”
}
},
“title”: {
“font-size”: “26px”,
“color”: “#ffffff”
},
“price”: {
“font-size”: “18px”,
“color”: “#ffffff”
},
“compareAt”: {
“font-size”: “15px”,
“color”: “#ffffff”
}
}
},
“cart”: {
“contents”: {
“button”: true
},
“styles”: {
“footer”: {
“background-color”: “#ffffff”
}
}
},
“modalProduct”: {
“contents”: {
“variantTitle”: false,
“buttonWithQuantity”: true,
“button”: false,
“quantity”: false
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0px”,
“margin-bottom”: “0px”
}
}
}
},
“toggle”: {
“styles”: {
“count”: {
“color”: “#ffffff”,
“:hover”: {
“color”: “#ffffff”
}
},
“iconPath”: {
“fill”: “#ffffff”
}
}
},
“productSet”: {
“styles”: {
“products”: {
“@media (min-width: 601px)”: {
“margin-left”: “-20px”
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>Hi,
I removed scripts from your custom HTML and added following code to functions.php file in Appearance > Editor – http://pastebin.com/ausMhtmz. However only the one in table is working. That might be because you are adding two buttons on the same page.
Please consider using one button or hire a freelance developer for further customization.Enjoy your holidays!
Best regards,
Yigit
- You must be logged in to reply to this topic.