Shopify Buy Button - make image clickable

Question

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"
                   }
                 }
               }
             }
           },
        });
      });

I think you may try a simple Javascript click event over the image that triggers the related buy button click. — Onkar, Jan 29 '21 at 03:12
That's exactly what I've got, the click event is working on the image, I just can't open the modal. — Chris Nicholson, Jan 29 '21 at 09:09

score 2 · Accepted Answer · answered Jan 29 '21 at 12:41

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.

"events": {
    beforeInit: function (product) {
        Object.defineProperty(product, "isButton", {
            get: function () {
                return true;
            }
        });
        Object.defineProperty(product, "options", {
            get: function () {
                return this.config[this.typeKey];
            }
        });
        var actualOnButtonClick = product.onButtonClick;
        product.onButtonClick = function (event, target) {
            event.stopImmediatePropagation();
            this.options.buttonDestination = "modal";
            actualOnButtonClick.call(this, event, target);
        };
    }
},

Amazing, thank you! Do you know if it would be possible to fire open one modal from another? So in the description of one of the products it could link to another as a sort of 'you may also be interested' type thing? — Chris Nicholson, Jan 29 '21 at 14:37

Shopify Buy Button - make image clickable

1 Answers1