Tagged: cornerstone
-
AuthorPosts
-
November 25, 2016 at 2:26 pm #1270851
Hi there,
In your child theme’s functions.php, I changed the javascript code to this
jQuery ( 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: 'jewelry-arts-inc.myshopify.com', apiKey: '59ab05aad1a84466225b343f1d2e5374', appId: '6', }); ShopifyBuy.UI.onReady(client).then(function (ui) { $(".shopify-item").each( function() { ui.createComponent('product', { id: [8888579270], node: $(this).get(0), 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 }, "styles": { "button": { "font-size": "15px" }, "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "20px", "margin-bottom": "50px" } }, "compareAt": { "font-size": "12px" } } }, "cart": { "contents": { "button": true }, "text": { "total": "Total" }, "styles": { "footer": { "background-color": "#ffffff" } } }, "modalProduct": { "contents": { "variantTitle": false, "buttonWithQuantity": false, "quantity": false }, "styles": { "button": { "font-size": "15px" }, "product": { "@media (min-width: 601px)": { "max-width": "100%", "margin-left": "0px", "margin-bottom": "0px" } } } }, "productSet": { "styles": { "products": { "@media (min-width: 601px)": { "margin-left": "-20px" } } } } } }); } ); }); } } );
Then you can now simply add this
<div>
to any content.<div id="product-component-1c2c5cd67bf" class="shopify-item"></div>
A sample is here http://jewelryarts.com/x-theme-test-page/
Cheers!
November 29, 2016 at 7:41 am #1274623Hi,
Is anyone still helping me with this problem?
I haven’t heard back in 4 days or so.
JeanetteNovember 29, 2016 at 7:51 am #1274633Hi Jaeanette,
Since we didn“t hear from you, we thought the solution provided by Rad had worked.
Did you try to follow his recommendations on hist last post?
Let us know,
Joao
November 29, 2016 at 9:40 am #1274767This reply has been marked as private.November 29, 2016 at 9:10 pm #1275484Hi There,
On Rad’s reply, he did update the javascript code. Then added the div on your test page. I can see the button on your test page. See attached screenshot.
November 30, 2016 at 4:11 am #1275765No, I added the entire button outside cornerstone in the text editor which was the only way I could get it to appear at all.
Please try to add the Div section within cornerstone text areas and see that the button will not appear live.
JNovember 30, 2016 at 5:06 am #1275845Hi J,
I did try to create a sample page. Using text element and raw content element, I have added the code. The buttons appear on the frontend. See this:http://jewelryarts.com/shop-button-x-test/ and this: http://screencast-o-matic.com/watch/cDXvX1Q6Pi
Hope this helps.
November 30, 2016 at 6:46 pm #1276788Hi Lely,
Thanks, the button does now appear. The only problem I’m having now is that no matter where I paste the code (in the right hand side of a Block grid, for example) as I did on your test page the button shows up on the extreme left of the page, out of position. I made sure the button code wasn’t set to align left, in case that affected things.
Can you figure it out?
Thanks, JeanetteNovember 30, 2016 at 7:48 pm #1276864Hi Jeanette,
Unfortunately, we cannot control how it appears on the page. Since this is a third party script/code. It is generating an iframe. It would be better if you can ask them if they have a settings for div rather than iframe. It would be best if you could consult the author of the code. Thank you for understanding.
December 5, 2016 at 9:49 am #1281703Hi Lely,
Shopify says they can’t help and it seems the X theme should work to place code where I want it since that is what themes do.
Please let me know if there is any progress on this issue.
I am now working on this page http://jewelryarts.com/customized-classes/ and trying to get my shopify button to appear before the Features headline. To try to overcome the automatic left positioning of the mini button, I’m using the full width of page code<div id=’product-component-645363aac80′></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: ‘jewelry-arts-inc.myshopify.com’,
apiKey: ’59ab05aad1a84466225b343f1d2e5374′,
appId: ‘6’,
});ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent(‘product’, {
id: [4318259014],
node: document.getElementById(‘product-component-645363aac80’),
moneyFormat: ‘%24%7B%7Bamount%7D%7D’,
options: {
“product”: {
“layout”: “horizontal”,
“variantId”: “all”,
“width”: “100%”,
“contents”: {
“variantTitle”: false,
“description”: true,
“buttonWithQuantity”: false,
“quantity”: false
},
“styles”: {
“product”: {
“text-align”: “right”,
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0”,
“margin-bottom”: “50px”
}
},
“button”: {
“font-size”: “15px”
},
“title”: {
“font-size”: “26px”
},
“price”: {
“font-size”: “18px”
},
“compareAt”: {
“font-size”: “15px”
}
}
},
“cart”: {
“contents”: {
“button”: true
},
“text”: {
“total”: “Total”
},
“styles”: {
“footer”: {
“background-color”: “#ffffff”
}
}
},
“modalProduct”: {
“contents”: {
“variantTitle”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0px”,
“margin-bottom”: “0px”
}
},
“button”: {
“font-size”: “15px”
}
}
},
“productSet”: {
“styles”: {
“products”: {
“@media (min-width: 601px)”: {
“margin-left”: “-20px”
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>
and entering it in the text editor after finishing with cornerstone like I did on this page http://jewelryarts.com/signup/
but I can’t get the button to appear, whether using just the div portion or the full code. Can you please help me to get it to appear?December 5, 2016 at 9:31 pm #1282519Hi There,
For this page: http://jewelryarts.com/customized-classes/, I got this error:
[Bugsnag] Ignoring cross-domain script error. See https://bugsnag.com/docs/notifiers/js/corsCan you try updating this part:
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
To this:
var scriptURL = '//sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
Then try again.
-
AuthorPosts