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

question from:https://stackoverflow.com/questions/65939387/shopify-buy-button-make-image-clickable

Answer 1

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