I'm using the Buy Button on Shopify, I've embedded a collection and clicking on the buy button opens up the modal, which is fine. I'm trying to make it so that the image is also clickable and that too should open the modal.
I'm halfway there, in fact I can actually fire open the cart using ui.openCart(), but I don't know how to access the modal, I've tried the following but to no avail.
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'harrisons-respiratory-protection.myshopify.com',
storefrontAccessToken: '5548f7e9e0a419188135d4caa368d998',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: '<?php echo $catID; ?>',
node: document.getElementById('collection-component-<?php echo $divID; ?>'),
moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
options: {
"product": {
"events": {
afterInit: function (component) {
var elem = $('img', component.node);
$(elem).click(function() {
e.stopPropagation();
ui.openModal();
});
}
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px",
"width": "calc(25% - 20px)"
},
"img": {
"height": "calc(100% - 15px)",
"position": "absolute",
"left": "0",
"right": "0",
"top": "0"
},
"imgWrapper": {
"padding-top": "calc(75% + 15px)",
"position": "relative",
"height": "0"
}
},
"title": {
"font-size": "20px",
"color": "#555555",
"min-height": "<?php echo $three != '' ? $three : '50px'; $three = ''; ?>"
},
"button": {
"font-weight": "bold",
":hover": {
"background-color": "#48b5dd"
},
"background-color": "#50c9f6",
":focus": {
"background-color": "#48b5dd"
},
"border-radius": "4px",
"padding-left": "47px",
"padding-right": "47px"
},
"price": {
"font-size": "16px",
"color": "#555555"
},
"compareAt": {
"font-size": "13.6px",
"color": "#555555"
},
"unitPrice": {
"font-size": "13.6px",
"color": "#555555"
}
},
"buttonDestination": "modal",
"contents": {
"options": false
},
"text": {
"button": "VIEW PRODUCT"
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px",
"text-align" : "left"
}
}
}
},
"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-weight": "bold",
":hover": {
"background-color": "#48b5dd"
},
"background-color": "#50c9f6",
":focus": {
"background-color": "#48b5dd"
},
"border-radius": "4px",
"padding-left": "47px",
"padding-right": "47px"
},
"title": {
"color": "#555555"
},
"price": {
"color": "#555555"
},
"compareAt": {
"color": "#555555"
},
"quantityInput": {
"-moz-appearance": "textfield"
},
"close": {
"outline": "0"
},
"unitPrice": {
"color": "#555555"
},
"description": {
"color": "#555555"
}
},
"text": {
"button": "BUY NOW"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
":hover": {
"background-color": "#48b5dd"
},
"background-color": "#50c9f6",
":focus": {
"background-color": "#48b5dd"
},
"border-radius": "4px"
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
}
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#50c9f6",
":hover": {
"background-color": "#48b5dd"
},
":focus": {
"background-color": "#48b5dd"
}
}
}
}
},
});
});
Okay, so after checking the script code and making some research, here is the code the modifies the behavior according to your need, you need to modify the before
beforeInit
.