spree_frontend 4.1.0.rc3 → 4.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6300d485b7d4f5e1ceab8dc942affa9be2a7fcb0cca1e233837428e230d45742
-  data.tar.gz: b5c81d760faa402320a3f2298f9c4e22eef9ec08c63e938bae635b35c989e529
+  metadata.gz: 5317d2a7a6ca3ca3bfb57ecec0acf3855ac522773bff72c884ee245475c5fda7
+  data.tar.gz: 5b18212fba5963c66c4ef309335f5627506c384fde5ac8f50f84130f1bfdecc1
 SHA512:
-  metadata.gz: dbdb68dfcc5c7a71b48e2e3777428e40bbbc7f86307d3fcf55fb8d5e15070414445ea372f647b3b60819f68adc0dc37bdf6de3fc3db4c45c5e424b5f6b6edb27
-  data.tar.gz: 748be2c488b297951807df6038a97f99f48efbe2b188d19117276eeee8f260ece52dfcf2bfd38dc9bc0b6e14ecbb755c63fa3e4a721563f1fe5230070ded6585
+  metadata.gz: 581b2b7605797cbd41255ae3a7c6039599bfb927ca626081fc90db6ed763a70bc2be1f6e2f8b8f32199f37cdbf165dcea7cb4950ab17efe52c68d2a46782e409
+  data.tar.gz: 4cdc7a0dd326ff60029ea95993a213efd34ff292f01e1a2e5ff497f7d968ee61fde81e784d2993a8a86a97c77015e2e2088d7a2ef9275a0b1d9671019f5bc416

data/app/assets/images/cart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="92" viewBox="0 0 82.6 91.7" width="83"><g fill="currentColor"><path d="M33.6 73.3c0 0 0 0 0 0 -5 0-9.2 4.1-9.2 9.2 0 5 4.1 9.2 9.2 9.2 5 0 9.2-4.1 9.2-9.2 0 0 0 0 0 0 0-5-4.2-9.2-9.2-9.2Zm0 12.4c0 0 0 0 0 0 -1.8 0-3.3-1.5-3.3-3.3 0-1.8 1.5-3.3 3.3-3.3 1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3Z"/><path d="M64.3 73.3c-5 0-9.2 4.1-9.2 9.2 0 5 4.1 9.2 9.2 9.2 5 0 9.2-4.1 9.2-9.2 0 0 0 0 0 0 0-5-4.2-9.2-9.2-9.2Zm0 12.4c-1.8 0-3.3-1.5-3.3-3.3 0-1.8 1.5-3.3 3.3-3.3 1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3Z"/><path d="M82 31.3c-0.6-0.7-1.4-1.2-2.3-1.2l-59.2 0 -2.5-9.6c-0.3-1.3-1.5-2.2-2.9-2.2l-12.2 0c-1.6 0-3 1.3-3 3 0 1.6 1.3 3 3 3l9.9 0 2.5 9.5c0 0.1 0 0.1 0 0.2l9.2 35.3c0.3 1.3 1.5 2.2 2.9 2.2l43.1 0c1.3 0 2.5-0.9 2.9-2.2l9.2-35.3c0.2-0.9 0-1.8-0.5-2.6Zm-13.8 34.2l-38.5 0 -7.6-29.4 53.8 0 -7.6 29.4Z"/></g></svg>

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

@@ -12,24 +12,24 @@ Spree.ready(function ($) {
       }
     }
 
-    $('form#update-cart a.delete').show().one('click', function () {
+    formUpdateCart.find('a.delete').show().one('click', function () {
       $(this).parents('.shopping-cart-item').first().find('input.shopping-cart-item-quantity-input').val(0)
       clearInvalidCouponField()
-      $(this).parents('form').first().submit()
+      formUpdateCart.submit()
       return false
     })
-    $('form#update-cart input.shopping-cart-item-quantity-input').on('keyup', function(e) {
+    formUpdateCart.find('input.shopping-cart-item-quantity-input').on('keyup', function(e) {
       var itemId = $(this).attr('data-id')
       var value = $(this).val()
       var newValue = isNaN(value) || value === '' ? value : parseInt(value, 10)
       var targetInputs = $("form#update-cart input.shopping-cart-item-quantity-input[data-id='" + itemId + "']")
       $(targetInputs).val(newValue)
     })
-    $('form#update-cart input.shopping-cart-item-quantity-input').on('change', function(e) {
+    formUpdateCart.find('input.shopping-cart-item-quantity-input').on('change', function(e) {
       clearInvalidCouponField()
       formUpdateCart.submit()
     })
-    $('form#update-cart button.shopping-cart-item-quantity-decrease-btn').off('click').on('click', function() {
+    formUpdateCart.find('button.shopping-cart-item-quantity-decrease-btn').off('click').on('click', function() {
       var itemId = $(this).attr('data-id')
       var input = $("input[data-id='" + itemId + "']")
       var inputValue = parseInt($(input).val(), 10)
@@ -40,7 +40,7 @@ Spree.ready(function ($) {
         formUpdateCart.submit()
       }
     })
-    $('form#update-cart button.shopping-cart-item-quantity-increase-btn').off('click').on('click', function() {
+    formUpdateCart.find('button.shopping-cart-item-quantity-increase-btn').off('click').on('click', function() {
       var itemId = $(this).attr('data-id')
       var input = $("input[data-id='" + itemId + "']")
       var inputValue = parseInt($(input).val(), 10)
@@ -49,7 +49,7 @@ Spree.ready(function ($) {
       clearInvalidCouponField()
       formUpdateCart.submit()
     })
-    $('form#update-cart button#shopping-cart-coupon-code-button').off('click').on('click', function(event) {
+    formUpdateCart.find('button#shopping-cart-coupon-code-button').off('click').on('click', function(event) {
       var couponCodeField = $('#order_coupon_code');
 
       if (!$.trim(couponCodeField.val()).length) {
@@ -58,7 +58,7 @@ Spree.ready(function ($) {
       }
     })
 
-    $('form#update-cart button#shopping-cart-remove-coupon-code-button').off('click').on('click', function(event) {
+    formUpdateCart.find('button#shopping-cart-remove-coupon-code-button').off('click').on('click', function(event) {
       var input = {
         appliedCouponCodeField: $('#order_applied_coupon_code'),
         couponCodeField: $('#order_coupon_code'),
@@ -81,7 +81,7 @@ Spree.ready(function ($) {
       couponStatus: $('#coupon_status'),
       couponButton: $('#shopping-cart-coupon-code-button')
     }
-    var updateButton = $('form#update-cart #update-button')
+    var updateButton = formUpdateCart.find('#update-button')
     updateButton.attr('disabled', true)
     if ($.trim(input.couponCodeField.val()).length > 0) {
       // eslint-disable-next-line no-undef

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

@@ -0,0 +1,55 @@
+; (function () {
+  // Tell the browser not to handle scrolling when restoring via the history or
+  // when reloading
+  if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual'
+  }
+
+  var SCROLL_POSITION = 'scroll-position'
+  var PAGE_INVALIDATED = 'page-invalidated'
+
+  // Persist the scroll position on refresh
+  addEventListener('beforeunload', function () {
+    sessionStorage.setItem(SCROLL_POSITION, JSON.stringify(scrollData()))
+  });
+
+  // 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) {
+      sessionStorage.setItem(PAGE_INVALIDATED, 'true')
+    }
+    sessionStorage.setItem(SCROLL_POSITION, JSON.stringify(scrollData()))
+  })
+
+  // When a page is fully loaded:
+  // 1. Get the persisted scroll position
+  // 2. If the locations match and the load did not originate from a page
+  // invalidation,
+  // 3. scroll to the persisted position if there, or to the top otherwise
+  // 4. Remove the persisted information
+  addEventListener('turbolinks:load', function (event) {
+    var scrollPosition = JSON.parse(sessionStorage.getItem(SCROLL_POSITION))
+
+    if (shouldScroll(scrollPosition)) {
+      scrollTo(scrollPosition.scrollX, scrollPosition.scrollY)
+    } else {
+      scrollTo(0, 0)
+    }
+    sessionStorage.removeItem(PAGE_INVALIDATED)
+  });
+
+  function shouldScroll(scrollPosition) {
+    return (scrollPosition
+      && scrollPosition.location === location.href
+      && !JSON.parse(sessionStorage.getItem(PAGE_INVALIDATED)))
+  }
+
+  function scrollData() {
+    return {
+      scrollX: scrollX,
+      scrollY: scrollY,
+      location: location.href
+    }
+  }
+})()

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

@@ -9,23 +9,33 @@ Spree.fetchProductCarousel = function (taxonId, htmlContainer) {
   })
 }
 
+Spree.loadCarousel = function (element, div) {
+  var container = $(element)
+  var productCarousel = $(div)
+  var carouselLoaded = productCarousel.attr('data-product-carousel-loaded')
+
+  if (container.length && !carouselLoaded && container.isInViewport()) {
+    var taxonId = productCarousel.attr('data-product-carousel-taxon-id')
+    productCarousel.attr('data-product-carousel-loaded', 'true')
+
+    Spree.fetchProductCarousel(taxonId, container)
+  }
+}
+
+Spree.loadsCarouselElements = function () {
+  $('div[data-product-carousel]').each(function (_index, element) { Spree.loadCarousel(element, this) })
+}
+
 document.addEventListener('turbolinks:load', function () {
   var homePage = $('body#home')
 
   if (homePage.length) {
+    // load Carousels straight away if they are in the viewport
+    Spree.loadsCarouselElements()
+
+    // load additional Carousels when scrolling down
     $(window).on('resize scroll', function () {
-      $('div[data-product-carousel').each(function (_index, element) {
-        var container = $(element)
-        var productCarousel = $(this)
-        var carouselLoaded = productCarousel.attr('data-product-carousel-loaded')
-
-        if (container.length && !carouselLoaded && container.isInViewport()) {
-          var taxonId = productCarousel.attr('data-product-carousel-taxon-id')
-          productCarousel.attr('data-product-carousel-loaded', 'true')
-
-          Spree.fetchProductCarousel(taxonId, container)
-        }
-      })
+      Spree.loadsCarouselElements()
     })
   }
 })

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

@@ -34,7 +34,7 @@ function CartForm($, $cartForm) {
   this.initializeForm = function() {
     if (this.withOptionValues) {
       var $optionValue = this.firstCheckedOptionValue()
-      this.applyCheckedOptionValue($optionValue)
+      this.applyCheckedOptionValue($optionValue, true)
     } else {
       this.updateAddToCart()
       this.triggerVariantImages()
@@ -49,11 +49,12 @@ function CartForm($, $cartForm) {
     this.applyCheckedOptionValue($(event.currentTarget))
   }.bind(this)
 
-  this.applyCheckedOptionValue = function($optionValue) {
+  this.applyCheckedOptionValue = function($optionValue, initialUpdate) {
     this.saveCheckedOptionValue($optionValue)
     this.showAvailableVariants()
     this.updateAddToCart()
-    this.updateVariantAvailability()
+    // we don't want to remove availability status on initial page load
+    if (!initialUpdate) this.updateVariantAvailability()
     this.updateVariantPrice()
     this.updateVariantId()
 
@@ -203,7 +204,11 @@ function CartForm($, $cartForm) {
   this.updateVariantAvailability = function() {
     var variant = this.selectedVariant()
 
-    if (!variant) return
+    if (!variant) {
+      return $cartForm
+        .find('.add-to-cart-form-general-availability .add-to-cart-form-general-availability-value')
+        .html('')
+    }
 
     return $cartForm
       .find('.add-to-cart-form-general-availability .add-to-cart-form-general-availability-value')

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

@@ -1,5 +1,5 @@
-$(function() {
-  $('#product-description-arrow').click(function() {
+document.addEventListener('turbolinks: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')
     document.getElementById('product-description-arrow').classList.remove('d-flex')

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

@@ -1,37 +1,41 @@
 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() })
-
-  $('#filter-by-overlay-show-button').click(function() { $('#filter-by-overlay').show() })
-  $('#filter-by-overlay-hide-button').click(function() { $('#filter-by-overlay').hide() })
+  $('#sort-by-overlay-show-button').click(function() {
+    $('#sort-by-overlay').show();
+  });
+  $('#sort-by-overlay-hide-button').click(function() {
+    $('#sort-by-overlay').hide();
+  });
+
+  $('#filter-by-overlay-show-button').click(function() {
+    $('#filter-by-overlay').show();
+  });
+  $('#filter-by-overlay-hide-button').click(function() {
+    $('#filter-by-overlay').hide();
+  });
 
   function closeNoProductModal() {
-    $('#no-product-available').removeClass('shown')
-    $('#overlay').removeClass('shown')
+    $('#no-product-available').removeClass('shown');
+    $('#overlay').removeClass('shown');
   }
 
-  $('#no-product-available-close-button').click(closeNoProductModal)
-  $('#no-product-available-hide-button').click(closeNoProductModal)
+  $('#no-product-available-close-button').click(closeNoProductModal);
+  $('#no-product-available-hide-button').click(closeNoProductModal);
 
   $('.plp-overlay-card-item').click(function() {
-    $(this).toggleClass('plp-overlay-card-item--selected')
-  })
-
-  $('.color-select').click(function() {
-    var allOptionsBorders = $('.color-select-border')
-    var borderElement = $(this).find('.color-select-border')
+    $(this).toggleClass('plp-overlay-card-item--selected');
+  });
 
-    allOptionsBorders.each(function() {
-      $(this).removeClass('color-select-border--selected')
-    })
-    borderElement.addClass('color-select-border--selected')
-  })
+  $('#filters-accordion .color-select, #plp-filters-accordion .color-select').click(function() {
+    $(this).find('.plp-overlay-color-item').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--active')
+      .removeClass('plp-overlay-ul-li--active')
+      .addClass('plp-overlay-ul-li');
+
+    $(this)
+      .removeClass('plp-overlay-ul-li')
+      .addClass('plp-overlay-ul-li--active');
+  });
+});

data/app/assets/stylesheets/spree/frontend/helpers/spree/frontend_helper.scss

@@ -14,10 +14,12 @@
     @include media-breakpoint-up(lg) {
       font-size: font-px-to-rem(12px);
     }
-    span {
-      a {
-        color: inherit;
-      }
+    a {
+      color: inherit;
     }
   }
 }
+
+.breadcrumb-product-name {
+  padding-right: 9.5px;
+}

data/app/assets/stylesheets/spree/frontend/views/spree/checkout/confirm.scss

@@ -62,11 +62,11 @@
           height: auto;
 
           @include media-breakpoint-up(sm) {
-            width: 206px;
+            width: 120px;
           }
 
           @include media-breakpoint-up(lg) {
-            width: 255px;
+            width: 190px;
           }
         }
 
@@ -185,6 +185,11 @@
   }
 
   &-delivery-informations {
+    div:first-child {
+      flex-shrink: unset;
+      -webkit-flex: unset;
+    }
+
     border-bottom: 1px solid $global-border-style;
     font-weight: 500;
 

data/app/assets/stylesheets/spree/frontend/views/spree/checkout/edit.scss

@@ -25,12 +25,18 @@
       }
       a {
         color: $header-font-color;
-        padding-left: 15px;
         letter-spacing: 0.5px;
+        text-decoration: none;
         @include media-breakpoint-down(sm) {
           padding-left: 0px;
         }
       }
+      &-text {
+        padding-left: 15px;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
     }
     &-title {
       margin: 10px 0;
@@ -499,6 +505,7 @@
       }
 
       @include media-breakpoint-up(lg) {
+        height: 100%;
         padding: 0;
         max-width: 380px;
         align-self: flex-end;

data/app/assets/stylesheets/spree/frontend/views/spree/layouts/spree_application.scss

@@ -12,7 +12,7 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: theme-color('overlay');
+  background-color: theme-color("overlay");
   opacity: 0;
   z-index: 5;
   cursor: pointer;
@@ -24,12 +24,12 @@ body {
   }
 }
 
-
 .dropdown-menu {
   background: $primary-background;
   border-color: $global-border-style;
   .dropdown-item {
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background: $secondary-background;
       color: $secondary-font-color;
     }
@@ -42,3 +42,18 @@ body {
   background: $input-background;
   color: color-yiq($input-background);
 }
+
+@include media-breakpoint-down(md) {
+  input[type="email"],
+  input[type="number"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="text"],
+  input[type="url"],
+  select,
+  select:focus,
+  textarea {
+    font-size: 16px !important;
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/orders/show.scss

@@ -5,8 +5,10 @@
   & > .order-show-check-mark {
     color: $secondary-color;
     margin-bottom: 25px;
+    margin-top: 27px;
     @include media-breakpoint-up(sm) {
       margin-bottom: 42px;
+      margin-top: 84px;
     }
   }
 
@@ -45,7 +47,7 @@
   }
 
   &-number {
-    margin-top: 100px;
+    margin-top: 38px;
     margin-bottom: 38px;
     @include media-breakpoint-up(sm) {
       margin-top: 80px;
@@ -105,7 +107,7 @@
           padding-bottom: 0;
         }
       }
-      
+
       a {
         max-width: 50%;
         margin-right: 20px;
@@ -270,4 +272,3 @@
     }
   }
 }
-