spree_frontend 4.1.0 → 4.7.0

data/app/assets/javascripts/spree/frontend/main_nav_bar.js

@@ -0,0 +1,86 @@
+Spree.ready(function () {
+  var $navLinks = $('.main-nav-bar .nav-link.dropdown-toggle')
+  var $dropdownMenu = $('.main-nav-bar .dropdown-menu')
+  var SHOW_CLASS = 'show'
+  var DATA_TOGGLE_ATTR = 'data-toggle'
+  var DATA_TOGGLE_VALUE = 'dropdown'
+
+  function handleMouseInOutNavLinks(event) {
+    var $navLink = $(this)
+    var $parent = $navLink.parent()
+    var $dropdown = $navLink.next()
+    var eventType = event.type
+
+    if (eventType === 'mouseenter') {
+      $navLink.removeAttr(DATA_TOGGLE_ATTR)
+      $parent.addClass(SHOW_CLASS)
+      $dropdown.addClass(SHOW_CLASS)
+    } else if (eventType === 'mouseleave') {
+      var isDropdownHovered = $dropdown.filter(':hover').length
+      var isNavLinkHovered = $navLink.filter(':hover').length
+      if (isDropdownHovered || isNavLinkHovered) {
+        return
+      }
+      $navLink.attr(DATA_TOGGLE_ATTR, DATA_TOGGLE_VALUE)
+      $parent.removeClass(SHOW_CLASS)
+      $dropdown.removeClass(SHOW_CLASS)
+    }
+  }
+
+  function handleFocusinNavLink() {
+    var $navLink = $(this)
+    var $parent = $navLink.parent()
+    var $dropdown = $navLink.next()
+
+    $parent.addClass(SHOW_CLASS)
+    $dropdownMenu.removeClass(SHOW_CLASS)
+    $dropdown.addClass(SHOW_CLASS)
+  }
+
+  function handleFocusoutNavLink() {
+    var $navLink = $(this)
+    var $parent = $navLink.parent()
+    var $dropdown = $navLink.next()
+
+    setTimeout(function() {
+      var dropdownHasActiveElement = $.contains($dropdown[0], document.activeElement)
+
+      if (!dropdownHasActiveElement) {
+        $parent.removeClass(SHOW_CLASS)
+        $dropdown.removeClass(SHOW_CLASS)
+      }
+    }, 0)
+
+  }
+
+  function handleMouseleaveDropdown() {
+    var $dropdown = $(this)
+    var isDropdownHovered = $dropdown.filter(':hover').length
+    var isNavLinkHovered = $dropdown.prev().filter(':hover').length
+    if (isDropdownHovered || isNavLinkHovered) {
+      return
+    }
+    $dropdown.parent().removeClass(SHOW_CLASS)
+    $dropdown.removeClass(SHOW_CLASS)
+  }
+
+  function handleFocusoutDropdownItems() {
+    var $dropdownLink = $(this)
+    setTimeout(function() {
+      var $parentDropdown = $dropdownLink.parents('.dropdown-menu')
+      var $navLink = $parentDropdown.parent()
+      var parentHasActiveElement = $.contains($parentDropdown[0], document.activeElement)
+
+      if (!parentHasActiveElement) {
+        $navLink.removeClass(SHOW_CLASS)
+        $parentDropdown.removeClass(SHOW_CLASS)
+      }
+    }, 0)
+  }
+
+  $navLinks.on('mouseenter mouseleave', handleMouseInOutNavLinks);
+  $navLinks.on('focusin', handleFocusinNavLink)
+  $navLinks.on('focusout', handleFocusoutNavLink)
+  $dropdownMenu.on('mouseleave', handleMouseleaveDropdown)
+  $dropdownMenu.on('focusout', '.dropdown-item', handleFocusoutDropdownItems)
+})

data/app/assets/javascripts/spree/frontend/{turbolinks_scroll_fix.js → turbo_scroll_fix.js}

@@ -15,8 +15,8 @@
 
   // Invalidate the page when the next page is different from the current page
   // Persist scroll information across pages
-  document.addEventListener('turbolinks:before-visit', function (event) {
-    if (event.data.url !== location.href) {
+  document.addEventListener('turbo:before-visit', function (event) {
+    if (event.detail.url !== location.href) {
       sessionStorage.setItem(PAGE_INVALIDATED, 'true')
     }
     sessionStorage.setItem(SCROLL_POSITION, JSON.stringify(scrollData()))
@@ -28,7 +28,7 @@
   // invalidation,
   // 3. scroll to the persisted position if there, or to the top otherwise
   // 4. Remove the persisted information
-  addEventListener('turbolinks:load', function (event) {
+  addEventListener('turbo:load', function (event) {
     var scrollPosition = JSON.parse(sessionStorage.getItem(SCROLL_POSITION))
 
     if (shouldScroll(scrollPosition)) {

data/app/assets/javascripts/spree/frontend/views/spree/home/product_carousels.js

@@ -23,13 +23,13 @@ Spree.loadCarousel = function (element, div) {
 }
 
 Spree.loadsCarouselElements = function () {
-  $('div[data-product-carousel]').each(function (_index, element) { Spree.loadCarousel(element, this) })
+  $('div[data-product-carousel-taxon-id]').each(function (_index, element) { Spree.loadCarousel(element, this) })
 }
 
-document.addEventListener('turbolinks:load', function () {
-  var homePage = $('body#home')
+document.addEventListener('turbo:load', function () {
+  var carouselPresent = $('div[data-product-carousel-taxon-id]')
 
-  if (homePage.length) {
+  if (carouselPresent.length) {
     // load Carousels straight away if they are in the viewport
     Spree.loadsCarouselElements()
 

data/app/assets/javascripts/spree/frontend/views/spree/product/related.js

@@ -1,6 +1,6 @@
 //= require spree/frontend/viewport
 
-Spree.fetchRelatedProductcs = function (id, htmlContainer) {
+Spree.fetchRelatedProducts = function (id, htmlContainer) {
   return $.ajax({
     url: Spree.routes.product_related(id)
   }).done(function (data) {
@@ -9,7 +9,7 @@ Spree.fetchRelatedProductcs = function (id, htmlContainer) {
   })
 }
 
-document.addEventListener('turbolinks:load', function () {
+document.addEventListener('turbo:load', function () {
   var productDetailsPage = $('body#product-details')
 
   if (productDetailsPage.length) {
@@ -21,7 +21,7 @@ document.addEventListener('turbolinks:load', function () {
     if (!relatedProductsFetched && relatedProductsContainer.length && relatedProductsEnabled && relatedProductsEnabled === 'true' && productId !== '') {
       $(window).on('resize scroll', function () {
         if (!relatedProductsFetched && relatedProductsContainer.isInViewport()) {
-          Spree.fetchRelatedProductcs(productId, relatedProductsContainer)
+          Spree.fetchRelatedProducts(productId, relatedProductsContainer)
           relatedProductsFetched = true
         }
       })

data/app/assets/javascripts/spree/frontend/views/spree/products/cart_form.js

@@ -1,5 +1,6 @@
-//= require spree/api/storefront/cart
+//= require spree/frontend/api/storefront/cart
 //= require ../shared/product_added_modal
+//= require ../shared/variant_select
 
 var ADD_TO_CART_FORM_SELECTOR = '.add-to-cart-form'
 var VARIANT_ID_SELECTOR = '[name="variant_id"]'
@@ -20,21 +21,36 @@ function CartForm($, $cartForm) {
   }
 
   this.initialize = function() {
+    this.urlQueryMatchFound = false
     this.selectedOptionValueIds = []
     this.variants = JSON.parse($cartForm.attr('data-variants'))
     this.withOptionValues = Boolean($cartForm.find(OPTION_VALUE_SELECTOR).length)
 
     this.$addToCart = $cartForm.find(ADD_TO_CART_SELECTOR)
     this.$price = $cartForm.find('.price.selling')
+    this.$compareAtPrice = $cartForm.find('.compare-at-price')
     this.$variantIdInput = $cartForm.find(VARIANT_ID_SELECTOR)
 
-    this.initializeForm()
+    this.initializeQueryParamsCheck()
+    this.initializeColorVarianTooltip()
+
+    if (this.urlQueryMatchFound) {
+      this.setSelectedVariantFromUrl()
+    } else {
+      this.initializeForm()
+    }
   }
 
   this.initializeForm = function() {
     if (this.withOptionValues) {
       var $optionValue = this.firstCheckedOptionValue()
       this.applyCheckedOptionValue($optionValue, true)
+      var singleOptionValues = this.getSingleOptionValuesFromEachOptionType()
+      if (singleOptionValues.length) {
+        singleOptionValues.forEach(function($value) {
+          this.applyCheckedOptionValue($value, true)
+        })
+      }
     } else {
       this.updateAddToCart()
       this.triggerVariantImages()
@@ -46,7 +62,9 @@ function CartForm($, $cartForm) {
   }
 
   this.handleOptionValueClick = function(event) {
-    this.applyCheckedOptionValue($(event.currentTarget))
+    var currentTarget = $(event.currentTarget)
+    this.applyCheckedOptionValue(currentTarget)
+    currentTarget.blur()
   }.bind(this)
 
   this.applyCheckedOptionValue = function($optionValue, initialUpdate) {
@@ -61,6 +79,8 @@ function CartForm($, $cartForm) {
     if (this.shouldTriggerVariantImage($optionValue)) {
       this.triggerVariantImages()
     }
+
+    if (initialUpdate) $optionValue.prop('checked', true)
   }
 
   this.saveCheckedOptionValue = function($optionValue) {
@@ -69,7 +89,7 @@ function CartForm($, $cartForm) {
     this.selectedOptionValueIds.splice(
       optionTypeIndex,
       this.selectedOptionValueIds.length,
-      parseInt($optionValue.val())
+      $optionValue.val().toString()
     )
   }
 
@@ -84,7 +104,7 @@ function CartForm($, $cartForm) {
         .find(OPTION_VALUE_SELECTOR)
         .each(function(_index, ov) {
           var $ov = $(ov)
-          var id = parseInt($ov.val())
+          var id = $ov.val().toString()
 
           $ov.prop('checked', false)
           $ov.prop('disabled', !availableOptionValueIds.includes(id))
@@ -101,7 +121,7 @@ function CartForm($, $cartForm) {
 
     return this.variants.reduce(function(acc, variant) {
       var optionValues = variant.option_values.map(function(ov) {
-        return ov.id
+        return ov.id.toString()
       })
 
       var isPossibleVariantFound = selectedOptionValueIds.every(function(ov) {
@@ -120,6 +140,17 @@ function CartForm($, $cartForm) {
     return $cartForm.find(OPTION_VALUE_SELECTOR + '[data-option-type-index=0]' + ':checked')
   }
 
+  this.getSingleOptionValuesFromEachOptionType = function() {
+    var singleOptionValues = []
+    this.optionTypes().each(function(_, optionType) {
+      var $optionValues = $(optionType).find(OPTION_VALUE_SELECTOR)
+      if ($optionValues.length === 1) {
+        singleOptionValues.push($optionValues.first())
+      }
+    })
+    return singleOptionValues
+  }
+
   this.shouldTriggerVariantImage = function($optionValue) {
     return $optionValue.data('is-color') || !this.firstCheckedOptionValue().data('is-color')
   }
@@ -149,7 +180,7 @@ function CartForm($, $cartForm) {
 
     if (!this.withOptionValues) {
       return this.variants.find(function(variant) {
-        return variant.id === parseInt(self.$variantIdInput.val())
+        return variant.id && self.$variantIdInput.val() && variant.id.toString() === self.$variantIdInput.val().toString()
       })
     }
 
@@ -159,7 +190,7 @@ function CartForm($, $cartForm) {
 
     return this.variants.find(function(variant) {
       var optionValueIds = variant.option_values.map(function(ov) {
-        return ov.id
+        return ov.id.toString()
       })
 
       return self.areArraysEqual(optionValueIds, self.selectedOptionValueIds)
@@ -220,7 +251,12 @@ function CartForm($, $cartForm) {
 
     if (!variant) return
 
-    this.$price.text(variant.display_price)
+    var shouldDisplayCompareAtPrice = variant.should_display_compare_at_price
+
+    this.$price.html(variant.display_price)
+
+    var compareAtPriceContent = shouldDisplayCompareAtPrice ? variant.display_compare_at_price : ''
+    this.$compareAtPrice.html(compareAtPriceContent)
   }
 
   this.updateVariantId = function() {
@@ -243,29 +279,38 @@ Spree.ready(function($) {
     )
   }
 
+  Spree.addToCartFormSubmissionOptions = function() {
+    return {};
+  }
+
   $('#product-details').on('submit', ADD_TO_CART_FORM_SELECTOR, function(event) {
-    var variantId
-    var quantity
-    var $cartForm = $(event.currentTarget)
-    var $addToCart = $cartForm.find(ADD_TO_CART_SELECTOR)
+    var $cartForm = $(event.currentTarget);
+    var $addToCart = $cartForm.find(ADD_TO_CART_SELECTOR);
+    var variantId = $cartForm.find(VARIANT_ID_SELECTOR).val();
+    var quantity = parseInt($cartForm.find('[name="quantity"]').val());
+    var options = Spree.addToCartFormSubmissionOptions();
 
     event.preventDefault()
-    $addToCart.prop('disabled', true)
-    variantId = $cartForm.find(VARIANT_ID_SELECTOR).val()
-    quantity = parseInt($cartForm.find('[name="quantity"]').val())
+    $addToCart.prop('disabled', true);
     Spree.ensureCart(function() {
       SpreeAPI.Storefront.addToCart(
         variantId,
         quantity,
-        {}, // options hash - you can pass additional parameters here, your backend
+        options, // options hash - you can pass additional parameters here, your backend
         // needs to be aware of those, see API docs:
-        // https://github.com/spree/spree/blob/master/api/docs/v2/storefront/index.yaml#L42
+        // https://github.com/spree/spree/blob/d894358e49b8c3a7f6944e838de7cd92510e31d0/api/docs/v2/storefront/index.yaml#L442
         function(response) {
           $addToCart.prop('disabled', false)
           Spree.fetchCart()
           Spree.showProductAddedModal(JSON.parse(
             $cartForm.attr('data-product-summary')
           ), Spree.variantById($cartForm, variantId))
+          $cartForm.trigger({
+            type: 'product_add_to_cart',
+            variant: Spree.variantById($cartForm, variantId),
+            quantity_increment: quantity,
+            cart: response.attributes
+          })
         },
         function(error) {
           if (typeof error === 'string' && error !== '') {
@@ -285,4 +330,8 @@ Spree.ready(function($) {
 
     CartForm($, $cartForm)
   })
+
+  document.addEventListener('turbo:request-start', function () {
+    Spree.hideProductAddedModal()
+  })
 })

data/app/assets/javascripts/spree/frontend/views/spree/products/description.js

@@ -1,4 +1,4 @@
-document.addEventListener('turbolinks:load', function () {
+document.addEventListener('turbo:load', function () {
   $('#product-description-arrow').click(function () {
     document.getElementById('product-description-long').classList.remove('d-none')
     document.getElementById('product-description-short').classList.add('d-none')

data/app/assets/javascripts/spree/frontend/views/spree/products/index.js

@@ -1,15 +1,15 @@
-Spree.ready(function($) {
-  $('#sort-by-overlay-show-button').click(function() {
+Spree.ready(function ($) {
+  $('#sort-by-overlay-show-button').click(function () {
     $('#sort-by-overlay').show();
   });
-  $('#sort-by-overlay-hide-button').click(function() {
+  $('#sort-by-overlay-hide-button').click(function () {
     $('#sort-by-overlay').hide();
   });
 
-  $('#filter-by-overlay-show-button').click(function() {
+  $('#filter-by-overlay-show-button').click(function () {
     $('#filter-by-overlay').show();
   });
-  $('#filter-by-overlay-hide-button').click(function() {
+  $('#filter-by-overlay-hide-button').click(function () {
     $('#filter-by-overlay').hide();
   });
 
@@ -21,21 +21,82 @@ Spree.ready(function($) {
   $('#no-product-available-close-button').click(closeNoProductModal);
   $('#no-product-available-hide-button').click(closeNoProductModal);
 
-  $('.plp-overlay-card-item').click(function() {
+  function customEncodeURI(value) {
+    return encodeURI(
+      value.replace(/\s/g, '+').replace(/'/g, '%27').replace(/\$/g, '%24')
+    ).replace(/%25/g, '%');
+  }
+
+  function setNewUrl(searchParams) {
+    history.replaceState(
+      {},
+      '',
+      location.pathname +
+        '?' +
+        customEncodeURI(decodeURIComponent(searchParams.toString()))
+    );
+    Turbo.visit(location);
+  }
+
+  function updateFilters(event, $this, removeValue) {
+    event.preventDefault();
+    var data = $this.closest('a[data-params]').data();
+    var searchParams = new URLSearchParams(location.search);
+    var key = data.filterName;
+    var value = data.params[key].toString();
+
+    searchParams.delete('page');
+    if (!searchParams.has('menu_open') && data.params['menu_open']) {
+      searchParams.set('menu_open', data.params['menu_open']);
+    } else if (searchParams.has('menu_open') && !data.params['menu_open']) {
+      searchParams.delete('menu_open');
+    }
+
+    if (searchParams.get(key) === null || !data.multiselect) {
+      searchParams.set(key, value);
+    } else {
+      var arr = searchParams.get(key).toString().split(',');
+      var index = arr.indexOf(data.id.toString());
+
+      if (index > -1 && removeValue) {
+        arr.splice(index, 1);
+      } else {
+        arr.push(data.id.toString());
+      }
+
+      searchParams.set(key, arr.join(','));
+    }
+
+    setNewUrl(searchParams);
+  }
+
+  $('.plp-overlay-card-item').click(function (event) {
+    if (window.URLSearchParams) {
+      updateFilters(
+        event,
+        $(this),
+        $(this).hasClass('plp-overlay-card-item--selected')
+      );
+    }
     $(this).toggleClass('plp-overlay-card-item--selected');
   });
 
-  $('#filters-accordion .color-select, #plp-filters-accordion .color-select').click(function() {
-    $(this).find('.plp-overlay-color-item').toggleClass('color-select-border--selected')
+  $(
+    '#filters-accordion .color-select, #plp-filters-accordion .color-select'
+  ).click(function (event) {
+    var colorItem = $(this).find('.plp-overlay-color-item');
+    if (window.URLSearchParams) {
+      updateFilters(
+        event,
+        $(this),
+        colorItem.hasClass('color-select-border--selected')
+      );
+    }
+    colorItem.toggleClass('color-select-border--selected');
   });
 
   $('.plp-overlay-ul-li').click(function() {
-    $('.plp-overlay-ul-li--active')
-      .removeClass('plp-overlay-ul-li--active')
-      .addClass('plp-overlay-ul-li');
-
-    $(this)
-      .removeClass('plp-overlay-ul-li')
-      .addClass('plp-overlay-ul-li--active');
+    $('.plp-overlay-ul-li').removeClass('plp-overlay-ul-li--active')
+    $(this).addClass('plp-overlay-ul-li--active');
   });
 });

data/app/assets/javascripts/spree/frontend/views/spree/products/price_filters.es6

@@ -0,0 +1,46 @@
+Spree.ready(function() {
+  class PriceRangeFilter {
+    constructor(inputsContainer, filterButton) {
+      this.inputsContainer = inputsContainer
+      this.filterButton = filterButton
+
+      this.priceInputs = inputsContainer.querySelectorAll('input')
+      this.minPriceInput = inputsContainer.querySelector('input[name="min_price"]')
+      this.maxPriceInput = inputsContainer.querySelector('input[name="max_price"]')
+    }
+
+    handlePriceChange() {
+      this.priceInputs.forEach((priceInput) => {
+        priceInput.addEventListener('change', () => {
+          this.updatePricesForFiltering(
+            parseInt(this.minPriceInput.value) || 0,
+            parseInt(this.maxPriceInput.value) || 'Infinity'
+          )
+        })
+      })
+    }
+
+    updatePricesForFiltering(minPrice, maxPrice) {
+      const formattedPriceRange = `${minPrice}-${maxPrice}`
+      const url = new URL(this.filterButton.href)
+
+      url.searchParams.set('price', formattedPriceRange)
+      this.filterButton.href = `${url.pathname}${url.search}`
+    }
+  }
+
+  // we have 2 elements for filtering prices - desktop and mobile
+  const desktopElement = document.getElementById('filterPriceRangeDesktop')
+  if (desktopElement) {
+    const desktopFilterButton = desktopElement.querySelector('a')
+    const desktopPriceRangeFilter = new PriceRangeFilter(desktopElement, desktopFilterButton)
+    desktopPriceRangeFilter.handlePriceChange()
+  }
+
+  const mobileElement = document.getElementById('filterPriceRangeMobile')
+  if (mobileElement) {
+    const mobileFilterButton = document.getElementById('filterProductsButtonMobile')
+    const mobilePriceRangeFilter = new PriceRangeFilter(mobileElement, mobileFilterButton)
+    mobilePriceRangeFilter.handlePriceChange()
+  }
+});

data/app/assets/javascripts/spree/frontend/views/spree/shared/mobile_navigation.js

@@ -6,6 +6,7 @@ Spree.ready(function($) {
     if (this.mobileNavigation !== null) {
       this.burgerButton = document.querySelector('.navbar-toggler');
       this.closeButton = document.querySelector('#mobile-navigation-close-button');
+      this.mobileNavigationList = document.querySelector('.mobile-navigation-list');
       this.categoryLinks = document.querySelectorAll('.mobile-navigation-category-link');
       this.backButton = document.querySelector('#mobile-navigation-back-button');
       this.overlay = document.querySelector('#overlay');
@@ -14,16 +15,14 @@ Spree.ready(function($) {
 
       this.onResize = this.onResize.bind(this);
       this.onCategoryClick = this.onCategoryClick.bind(this);
-      this.onTouchMove = this.onTouchMove.bind(this);
       this.onBurgerClick = this.onBurgerClick.bind(this);
       this.onCloseClick = this.onCloseClick.bind(this);
       this.onBackClick = this.onBackClick.bind(this);
       this.closeAllCategories = this.closeAllCategories.bind(this);
 
       window.addEventListener('resize', this.onResize);
-      window.addEventListener('turbolinks:request-start', this.onCloseClick);
+      window.addEventListener('turbo:request-start', this.onCloseClick);
 
-      this.mobileNavigation.addEventListener('touchmove', this.onTouchMove, false);
       this.burgerButton.addEventListener('click', this.onBurgerClick, false);
       this.closeButton.addEventListener('click', this.onCloseClick, false);
       this.backButton.addEventListener('click', this.onBackClick, false);
@@ -45,10 +44,6 @@ Spree.ready(function($) {
     this.openCategory(category);
   }
 
-  MobileNavigationManager.prototype.onTouchMove = function(e) {
-    e.preventDefault();
-  };
-
   MobileNavigationManager.prototype.onBurgerClick = function() {
     if (this.navigationOpen) {
       this.close();
@@ -82,8 +77,10 @@ Spree.ready(function($) {
 
   MobileNavigationManager.prototype.openCategory = function(category) {
     this.openedCategories.push(category);
-    var subList = document.querySelector('ul[data-category=' + category + ']');
+    var subList = document.querySelector('ul[data-category="' + category + '"]');
     if (subList) {
+      this.mobileNavigationList.classList.add('mobile-navigation-list-subcategory-shown');
+      this.mobileNavigationList.scrollTop = 0
       subList.classList.add('shown');
       this.backButton.classList.add('shown');
     }
@@ -92,18 +89,19 @@ Spree.ready(function($) {
 
   MobileNavigationManager.prototype.closeCurrentCategory = function() {
     var category = this.openedCategories.pop();
-    var subList = document.querySelector('ul[data-category=' + category + ']');
+    var subList = document.querySelector('ul[data-category="' + category + '"]');
     if (subList) {
       subList.classList.remove('shown');
     }
     if (this.openedCategories[this.openedCategories.length - 1] === 'main') {
       this.backButton.classList.remove('shown');
     }
+    this.mobileNavigationList.classList.remove('mobile-navigation-list-subcategory-shown')
     return false;
   }
 
   MobileNavigationManager.prototype.closeCategory = function(category) {
-    var subList = document.querySelector('ul[data-category=' + category + ']');
+    var subList = document.querySelector('ul[data-category="' + category + '"]');
     subList.style.transition = 'none';
     subList.classList.remove('shown');
     setTimeout(function(){ subList.style.transition = ''; }, 500);
@@ -116,6 +114,7 @@ Spree.ready(function($) {
       var category = openedCategories.pop();
       this.closeCategory(category);
     }
+    this.mobileNavigationList.classList.remove('mobile-navigation-list-subcategory-shown')
     this.backButton.classList.remove('shown');
   }
 

data/app/assets/javascripts/spree/frontend/views/spree/shared/product_added_modal.js

@@ -26,3 +26,10 @@ Spree.showProductAddedModal = function(product, variant) {
 
   $modal.modal()
 }
+
+Spree.hideProductAddedModal = function() {
+  var modalSelector = '.product-added-modal'
+  var $modal = $(modalSelector)
+
+  $modal.modal('hide')
+}