From e4dcef32d90f1ed75f5a11190b68d665c267eef0 Mon Sep 17 00:00:00 2001
From: Mario Campa <mcampa@gmail.com>
Date: Mon, 21 Aug 2017 21:01:22 -0700
Subject: [PATCH] STENCIL-3697 Fix bug where product options and add to cart do
 not work on quickview

---
 CHANGELOG.md                              |  1 +
 assets/js/theme/common/product-details.js | 36 ++++++++---------------
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb7f72953c..42b9aa9e8c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Draft
 - Fixes image overlapping details on product page and Quick View on small viewports [#1067](https://github.com/bigcommerce/cornerstone/pull/1067)
 - Allow 'none' to be a default selection on product option pick lists [#1068](https://github.com/bigcommerce/cornerstone/pull/1068)
+- Fixes a bug where product options and add to cart do not work when opened in Quick View modals [#1070](https://github.com/bigcommerce/cornerstone/pull/1070)
 
 ## 1.9.2 (2017-08-16)
 - Hide Info in footer if no address is provided in Store Profile. Hide Brands in footer if Merchant has no brands [#1053](https://github.com/bigcommerce/cornerstone/pull/1053)
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
index 4388dd27c3..f9d71addc5 100644
--- a/assets/js/theme/common/product-details.js
+++ b/assets/js/theme/common/product-details.js
@@ -1,6 +1,3 @@
-/*
- Import all product specific js
- */
 import $ from 'jquery';
 import utils from '@bigcommerce/stencil-utils';
 import 'foundation-sites/js/foundation/foundation';
@@ -10,22 +7,7 @@ import modalFactory from '../global/modal';
 import _ from 'lodash';
 import swal from 'sweetalert2';
 
-// We want to ensure that the events are bound to a single instance of the product details component
-let productSingleton = null;
-
-utils.hooks.on('cart-item-add', (event, form) => {
-    if (productSingleton) {
-        productSingleton.addProductToCart(event, form);
-    }
-});
-
-utils.hooks.on('product-option-change', (event, changedOption) => {
-    if (productSingleton) {
-        productSingleton.productOptionsChanged(event, changedOption);
-    }
-});
-
-export default class Product {
+export default class ProductDetails {
     constructor($scope, context, productAttributesData = {}) {
         this.$overlay = $('[data-cart-item-add] .loadingOverlay');
         this.$scope = $scope;
@@ -39,7 +21,16 @@ export default class Product {
         const $productOptionsElement = $('[data-product-option-change]', $form);
         const hasOptions = $productOptionsElement.html().trim().length;
 
-        // Update product attributes. If we're in quick view and the product has options, then also update the initial view in case items are oos
+        $productOptionsElement.change(event => {
+            this.productOptionsChanged(event);
+        });
+
+        $form.submit(event => {
+            this.addProductToCart(event, $form[0]);
+        });
+
+        // Update product attributes. If we're in quick view and the product has options,
+        // then also update the initial view in case items are oos
         if (_.isEmpty(productAttributesData) && hasOptions) {
             const $productId = $('[name="product_id"]', $form).val();
 
@@ -56,7 +47,6 @@ export default class Product {
         $productOptionsElement.show();
 
         this.previewModal = modalFactory('#previewModal')[0];
-        productSingleton = this;
     }
 
     /**
@@ -104,8 +94,8 @@ export default class Product {
      * Handle product options changes
      *
      */
-    productOptionsChanged(event, changedOption) {
-        const $changedOption = $(changedOption);
+    productOptionsChanged(event) {
+        const $changedOption = $(event.target);
         const $form = $changedOption.parents('form');
         const productId = $('[name="product_id"]', $form).val();