Develop Reference

Shopify buy button not appearing in a bootstrap modal

`
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<div id='product-component-1675363103707'>aaa</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: 'cafe-bereka.myshopify.com',
storefrontAccessToken: '0e2879fb9b75ac98ece2c2eac29f5711',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '8088691802389',
node: document.getElementById('product-component-1675363103707'),
moneyFormat: '%24%20%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"font-family": "Avant Garde, sans-serif",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
"color": "#381010",
":hover": {
"color": "#381010",
"background-color": "#6aae46"
},
"background-color": "#76c14e",
":focus": {
"background-color": "#6aae46"
},
"border-radius": "0px"
},
"quantityInput": {
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px"
}
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "Add to cart"
}
},
"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-family": "Avant Garde, sans-serif",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
"color": "#381010",
":hover": {
"color": "#381010",
"background-color": "#6aae46"
},
"background-color": "#76c14e",
":focus": {
"background-color": "#6aae46"
},
"border-radius": "0px"
},
"quantityInput": {
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px"
}
},
"text": {
"button": "Add to cart"
}
},
"option": {},
"cart": {
"styles": {
"button": {
"font-family": "Avant Garde, sans-serif",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
"color": "#381010",
":hover": {
"color": "#381010",
"background-color": "#6aae46"
},
"background-color": "#76c14e",
":focus": {
"background-color": "#6aae46"
},
"border-radius": "0px"
},
"cart": {
"background-color": "#e1d3d3"
},
"footer": {
"background-color": "#e1d3d3"
}
},
"text": {
"total": "Subtotal",
"empty": "Tu carrito está vacío.",
"button": "Checkout"
},
"contents": {
"note": true
}
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Avant Garde, sans-serif",
"background-color": "#76c14e",
":hover": {
"background-color": "#6aae46"
},
":focus": {
"background-color": "#6aae46"
}
},
"count": {
"font-size": "16px",
"color": "#381010",
":hover": {
"color": "#381010"
}
},
"iconPath": {
"fill": "#381010"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
</div>
</div>
</div>
</div>
`I am building a webpage with bootstrap5. It is my first time using bootstrap.
I am adding a shopify buy button inside a modal. The problem is, it does not show up when opening the modal. Strange thing is: the button is correctly rendered in the DOM, and if I resize the screen either way, then it shows up.
I do not have this problem adding the button elsewhere in my webpage. Only in the modal. Once I resize the window even a single px either way, it shows up.
The button is inside an iframe which gets rendered with a height of 0. When the window is resized, the iframe's height gets re-rendered with a height of 71 and the button becomes visible.
I've tried resizing the modal, adding the script in the header,and other solutions related to race condition.
I've tried this in mobile (android) and google chrome.

how can I used a variable inside the chart ( the chart gets the values in json formats)

I have a chart in my side nav and I want to show some data on the chart, but when I used the variable it said that the variable is undefined. I used the https://www.zingchart.com/ library for my chart. I want to know what should I do to set the my value in the chart.
here is my code:
const a = 100;
const b = 200;
var myConfig = {
"type": "funnel",
"scale-y": {
"placement": "opposite",
"labels": ["Arash", "Trial Downloads", "Quote Requests", "Sales", "Renewals"],
"item": {
"font-color": "#999999",
"font-family": "Georgia"
}
},
"plot": {
"value-box": {
"text": "%v",
"placement": "left-out", //"auto"/"in", "top", "bottom", "left", "right", "left-out", or "right-out"
"font-color": "gray",
"font-family": "Georgia",
"font-size": 12,
"font-weight": "normal"
},
"min-exit": "10%",
"hover-state": {
"background-color": "purple",
"border-color": "gray",
"border-width": 3,
"line-style": "dashdot"
}
},
"series": [{
"values": [a],
"text": "Arash-arash",
"background-color": "red"
},
{
"values": [b],
"text": "arash2",
"background-color": "orange"
},
{
"values": [90],
"text": "Quote Requests",
"background-color": "yellow"
},
{
"values": [30],
"text": "Sales",
"background-color": "green"
},
{
"values": [15],
"text": "Renewals",
"background-color": "blue"
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});

screenshot from zingchart documentation
you are not defining the property correctly, in the screenshot above from the documentation, it should be scaleY rather scale-y as defined in your code above

Shopify add to cart button redirection to and Upsell Page

I have the buy button code which works just fine. What I need to do is after click on button the page redirects to another page, an upsell page. The sell page is outside shopify, so I use the buy button code shopify offers. The issue is I need the page where button is embeded redirect to another page after the button is clicked, so the product is added to the cart before the redirection.
This is the buy button code
<div id='product-component-NUMBER'></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: 'THESHOP.myshopify.com',
apiKey: 'APIKEY',
appId: '6',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [8888888888],
node: document.getElementById('product-component-NUMBER'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"variantId": "all",
"width": "380px",
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"description": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
}
},
"button": {
"background-color": "#e43030",
"font-family": "Lato, sans-serif",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
"padding-left": "50px",
"padding-right": "50px",
":hover": {
"background-color": "#cd2b2b"
},
":focus": {
"background-color": "#cd2b2b"
},
"font-weight": "bold"
},
"quantityInput": {
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px"
},
"compareAt": {
"font-size": "12px"
}
},
"googleFonts": [
"Lato"
]
},
"cart": {
"contents": {
"button": true
},
"styles": {
"button": {
"background-color": "#e43030",
"font-family": "Lato, sans-serif",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
":hover": {
"background-color": "#cd2b2b"
},
":focus": {
"background-color": "#cd2b2b"
},
"font-weight": "bold"
},
"footer": {
"background-color": "#ffffff"
}
},
"googleFonts": [
"Lato"
]
},
"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": "#e43030",
"font-family": "Lato, sans-serif",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
"padding-left": "50px",
"padding-right": "50px",
":hover": {
"background-color": "#cd2b2b"
},
":focus": {
"background-color": "#cd2b2b"
},
"font-weight": "bold"
},
"quantityInput": {
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px"
}
},
"googleFonts": [
"Lato"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Lato, sans-serif",
"background-color": "#e43030",
":hover": {
"background-color": "#cd2b2b"
},
":focus": {
"background-color": "#cd2b2b"
},
"font-weight": "bold"
},
"count": {
"font-size": "18px"
}
},
"googleFonts": [
"Lato"
]
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>

You can use jQuery as Shopify loads it in all their themes. Then just use preventDefault() and then send the shopper wherever you'd like. The click event would look like this:
$("#idOfMyButton").click(function(event){
event.preventDefault();
window.location.href = "http://sendtowherever.com";
});

How to render object data in D3?

I have this object in D3
data: {
items: [
{
name: "my name",
position: "lead",
contact_info: {
phone: "54665",
},
},
{
name: "my other name",
position: "IDK",
contact_info: {
phone: "32435",
},
},
],
eval: function (item) {console.log(item); return item.contact_info.phone;},
myFn: function (item) {console.log('item'); return item.contact_info.phone;},
classed: function (item) {return item.name.split(" ").join("");}
},
and I need to render the info inside contact_info, for now I am trying with contact_info.phone, but I am not getting.
This is the chart: http://bl.ocks.org/phuonghuynh/54a2f97950feadb45b07
And here is the full code
$(document).ready(function () {
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
size: 600,
innerRadius: 600 / 3.5,
radiusMin: 50,
data: {
items: [
{
name: "my name",
position: "Lead",
contact_info: {
phone: "32435",
},
},
{
name: "my other name",
position: "IDK",
contact_info: {
phone: "657657",
},
},
],
eval: function (item) {console.log(item); return item.contact_info.phone;},
myFn: function (item) {console.log('item'); return item.contact_info.phone;},
classed: function (item) {return item.name.split(" ").join("");}
},
plugins: [
{
name: "central-click",
options: {
text: "(See more detail)",
style: {
"font-size": "12px",
"font-style": "italic",
"font-family": "Source Sans Pro, sans-serif",
//"font-weight": "700",
"text-anchor": "middle",
"fill": "white"
},
attr: {dy: "65px"},
centralClick: function() {
alert("Here is more details!!");
}
}
},
{
name: "lines",
options: {
format: [
{// Line #0
textField: "position",
classed: {position: true},
style: {
"font-size": "28px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "0px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
},
{// Line #1 // THE OTHER 2 LINES WORKS, BUT THIS ONE IS NOT!!!
textField: "contact_info.phone",
classed: {contact_info : {phone: true}},
style: {
"font-size": "22px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "20px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
},
{// Line #2
textField: "name",
classed: {name: true},
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "20px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
}
],
centralFormat: [
{// Line #0
style: {"font-size": "50px"},
attr: {}
},
{// Line #1
style: {"font-size": "30px"},
attr: {dy: "40px"}
},
{// Line #2
style: {"font-size": "20px"},
attr: {dy: "40px"}
}
]
}
}]
});
});
Look at the note: // THE OTHER 2 LINES WORKS, BUT THIS ONE IS NOT!!!
because that is the line which is not working

You can achieve this with a few overrides.
Change1:
When you have nested data pass textField as a function like this:
{// Line #1 // THE OTHER 2 LINES WORKS, BUT THIS ONE IS NOT!!!
textField: function(d){return d.contact_info.phone},
classed: {contact_info : {phone: true}},
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "red"
},
attr: {
dy: "20px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
},
Change2
Instead of this script
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
Write a function to get the textField like this:
function getText(d,f){
if(d.item[f.textField])
return d.item[f.textField];
else
return f.textField(d.item);
}
In my plunk check the lines.js where I have over ridden a few things.
Working fiddle here
Note that the two script:
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
Are meant to be overriden by you as per your requirement...which is what i have done.

Interactive javascript chart without jQuery and with cursor plotting

I'm trying to find a free charting library for JS that does not require jQuery and is able to add vertical cursor bars at indicated locations. Interactivity would be nice. I only need a line chart, no doughnuts required. Anyone know if this creature exists?

var chartJSON = {
"type": "line",
"background-color": "#fff",
"border-color": "#dae5ec",
"border-width": "1px",
"title": {
"margin-top": "7px",
"margin-left": "12px",
"text": "TODAY'S SALES",
"background-color": "none",
"shadow": 0,
"text-align": "left",
"font-family": "Arial",
"font-size": "11px",
"font-color": "#707d94"
},
"plot": {
"animation": {
"effect": "ANIMATION_SLIDE_LEFT"
}
},
"plotarea": {
"margin": "50px 25px 70px 46px"
},
"scale-y": {
"values": "0:100:25",
"line-color": "none",
"guide": {
"line-style": "solid",
"line-color": "#d2dae2",
"line-width": "1px",
"alpha": 0.5
},
"tick": {
"visible": false
},
"item": {
"font-color": "#8391a5",
"font-family": "Arial",
"font-size": "10px",
"padding-right": "5px"
}
},
"scale-x": {
"line-color": "#d2dae2",
"line-width": "2px",
"values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"tick": {
"line-color": "#d2dae2",
"line-width": "1px"
},
"guide": {
"visible": "false"
},
"markers": [{
"type": "area",
"range": [5, 7],
"background-color": "red",
"alpha": 0.3,
"label": {
"text": "Summer Sale",
"alpha": 0.5
}
}],
"item": {
"font-color": "#8391a5",
"font-family": "Arial",
"font-size": "10px",
"padding-top": "5px"
}
},
"legend": {
"layout": "2x2",
"background-color": "none",
"shadow": 0,
"margin": "auto auto 15 auto",
"border-width": 0,
"item": {
"font-color": "#707d94",
"font-family": "Arial",
"padding": "0px",
"margin": "0px",
"font-size": "9px"
},
"marker": {
"show-line": "true",
"type": "match",
"font-family": "Arial",
"font-size": "10px",
"size": 4,
"line-width": 2,
"padding": "3px"
}
},
"crosshair-x": {
"lineWidth": 1,
"line-color": "#707d94",
"plotLabel": {
"shadow": false,
"font-color": "#ffffff",
"font-family": "Arial",
"font-size": "10px",
"padding": "5px 10px",
"border-radius": "5px",
"alpha": 1
},
"scale-label": {
"font-color": "#ffffff",
"background-color": "#707d94",
"font-family": "Arial",
"font-size": "10px",
"padding": "5px 10px",
"border-radius": "5px"
}
},
"tooltip": {
"visible": false
},
"series": [{
"values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
"text": "Kenmore",
"line-color": "#4dbac0",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#36a2a8",
"shadow": 0
},
"palette": 0
}, {
"values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
"text": "Craftsman",
"line-width": "2px",
"line-color": "#25a6f7",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#1993e0",
"shadow": 0
},
"palette": 1,
"visible": 1
}, {
"values": [42, 43, 30, 50, 31, 48, 55, 46, 48, 32, 50, 38],
"text": "DieHard",
"line-color": "#ad6bae",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#975098",
"shadow": 0
},
"palette": 2,
"visible": 1
}, {
"values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
"text": "Land's End",
"line-color": "#f3950d",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#d37e04",
"shadow": 0
},
"palette": 3
}]
}
zingchart.render({
id: "myChart",
height: 300,
width: 500,
data: chartJSON
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
Are you referring to something like this? This was done with ZingChart, which is free to use. A marker was set on the x-axis with a range and lowered opacity.
Let me know if you were looking for something else and I'll put together another demo. I'm on the team at ZingChart and happy to help :)

You can do this with amCharts, here is a stacked area chart demo. If you don't need a fill, simply set fillAlphas to 0. and stackType of value axis to "none"
Disclaimer: I am the author of amCharts.

Here is an example made with D3js Framework, it might interest you..