spree_frontend 4.1.13 → 4.2.0.rc4

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,91 @@ 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()))
+    );
+    Turbolinks.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');
+    $('.plp-overlay-ul-li').removeClass('plp-overlay-ul-li--active')
+    $(this).addClass('plp-overlay-ul-li--active');
+  });
 
-    $(this)
-      .removeClass('plp-overlay-ul-li')
-      .addClass('plp-overlay-ul-li--active');
+  $('.plp-overlay-buttons .done-btn').click(function (event) {
+    if (window.URLSearchParams) {
+      event.preventDefault();
+      var searchParams = new URLSearchParams(location.search);
+      searchParams.delete('menu_open');
+      setNewUrl(searchParams);
+    }
   });
 });

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')
+}

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

@@ -0,0 +1,93 @@
+var getQueryString = window.location.search
+var urlParams = new URLSearchParams(getQueryString)
+var variantIdFromUrl = urlParams.get('variant')
+
+this.initializeQueryParamsCheck = function () {
+  if (urlParams.has('variant')) verifyVariantIdMatch()
+}
+
+function verifyVariantIdMatch() {
+  this.variants.forEach(function(variant) {
+    if (parseInt(variant.id) === parseInt(variantIdFromUrl)) this.urlQueryMatchFound = true
+  })
+}
+
+this.setSelectedVariantFromUrl = function () {
+  this.selectedOptions = []
+
+  this.getVariantOptionsById(variantIdFromUrl)
+  this.sortArrayByOptionTypeIndex(this.selectedOptions)
+  this.clickListOptions(this.selectedOptions)
+  this.updateStructuredData()
+}
+
+this.getVariantOptionsById = function(variantIdFromUrl) {
+  this.variants.forEach(function(variant) {
+    if (parseInt(variant.id) === parseInt(variantIdFromUrl)) this.sortOptionValues(variant.option_values)
+  })
+}
+
+this.sortOptionValues = function(optVals) {
+  optVals.forEach(buildArray)
+}
+
+function buildArray(item) {
+  var container = document.querySelector('ul#product-variants')
+  var target = container.querySelectorAll('.product-variants-variant-values-radio')
+
+  target.forEach(function(inputTag) {
+    if (parseInt(inputTag.value) === item.id && inputTag.dataset.presentation === item.presentation) {
+      this.selectedOptions.push(inputTag)
+    }
+  })
+}
+
+this.sortArrayByOptionTypeIndex = function (arrayOfOptions) {
+  arrayOfOptions.sort(function (a, b) {
+    return a.dataset.optionTypeIndex > b.dataset.optionTypeIndex ? 1 : -1;
+  })
+}
+
+this.clickListOptions = function(list) {
+  list.forEach(function (item) {
+    item.checked = true
+    var $optionListItem = $(item)
+    this.applyCheckedOptionValue($optionListItem)
+  })
+}
+
+this.updateStructuredData = function() {
+  var variant = this.selectedVariant()
+  var host = window.location.host
+  var schemaData = document.body.querySelector("script[type='application/ld+json']")
+  var obj = JSON.parse(schemaData.firstChild.nodeValue)
+  var firstLayer = obj[0]
+  var offers = obj[0].offers
+
+  if (variant.purchasable) {
+    offers.availability = 'InStock'
+  } else {
+    offers.availability = 'OutOfStock'
+  }
+
+  if (variant.sku.length > 1) {
+    firstLayer.sku = variant.sku
+  }
+
+  firstLayer.url = window.location.href
+  offers.url = window.location.href
+  offers.price = variant.price.amount
+
+  if (Array.isArray(variant.images) && (variant.images.length)) {
+    firstLayer.image = host + variant.images[0].url_product
+  }
+
+  schemaData.firstChild.nodeValue = JSON.stringify(obj)
+}
+
+this.initializeColorVarianTooltip = function() {
+  var colorVariants = $('.color-select-label[data-toggle="tooltip"]')
+  colorVariants.tooltip({
+    placement: 'bottom'
+  })
+}

data/app/assets/stylesheets/spree/frontend.css

@@ -1,6 +1,5 @@
 /*
 * This is a manifest file that includes stylesheets for spree_frontend
- *= require spree/frontend/address_book
  *= require spree/frontend/application
  *= require_self
 */

data/app/assets/stylesheets/spree/frontend/application.scss

@@ -8,6 +8,7 @@
 @import "spree/frontend/mixins";
 @import "spree/frontend/functions";
 @import "spree/frontend/margins";
+@import "spree/frontend/flags/flag-icon";
 
 @import "spree/frontend/components-bootstrap/carousel";
 @import "spree/frontend/components-bootstrap/button";
@@ -25,11 +26,13 @@
 @import "spree/frontend/views/spree/shared/header";
 @import "spree/frontend/views/spree/shared/login";
 @import "spree/frontend/views/spree/shared/nav_bar";
+@import "spree/frontend/views/spree/shared/search_form";
 @import "spree/frontend/views/spree/shared/order_details";
 @import "spree/frontend/views/spree/shared/main_nav_bar";
 @import "spree/frontend/views/spree/errors/not_found";
 @import "spree/frontend/views/spree/shared/carousel/thumbnails";
 @import "spree/frontend/views/spree/shared/carousel/single";
+@import "spree/frontend/views/spree/shared/change_store";
 @import "spree/frontend/views/spree/home/index";
 @import "spree/frontend/views/spree/user_passwords/user_passwords";
 @import "spree/frontend/views/spree/user_sessions/new";
@@ -37,6 +40,7 @@
 @import "spree/frontend/components-custom/headers";
 @import "spree/frontend/components-custom/inputs";
 @import "spree/frontend/views/spree/checkout/registration";
+@import "spree/frontend/views/spree/checkout/delivery";
 @import "spree/frontend/views/spree/checkout/confirm";
 @import "spree/frontend/views/spree/checkout/payment";
 @import "spree/frontend/views/spree/orders/edit";

data/app/assets/stylesheets/spree/frontend/components-bootstrap/carousel.scss

@@ -15,6 +15,10 @@
   }
   &-vertically-animated {
     // Source: https://stackoverflow.com/questions/42910076/bootstrap-4-alpha-6-vertical-carousel
+    .carousel-item {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
     .carousel-item-next.carousel-item-left,
     .carousel-item-prev.carousel-item-right {
       -webkit-transform: translate3d(0, 0, 0);

data/app/assets/stylesheets/spree/frontend/components-custom/inputs.scss

@@ -33,6 +33,8 @@
 .spree-flat-select {
   @extend .spree-flat-input;
   appearance: none;
+  padding-top:22px;
+  padding-bottom:21px;
   -webkit-appearance: none;
   -moz-appearance: none;
   &-arrow {
@@ -48,6 +50,12 @@
   }
 }
 
+.field_with_errors {
+  input{
+    border-color: $danger;
+  }
+}
+
 .spree-flat-label {
   color: theme-color("secondary");
   text-transform: uppercase;
@@ -83,7 +91,12 @@
   }
 
   input[type="checkbox"] {
-    display: none;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
   }
 
   label {
@@ -138,6 +151,10 @@
     }
   }
 
+  input[type="checkbox"]:focus + label {
+    border-color: $primary-color;
+  }
+
   input[type="checkbox"]:checked + label {
     background-color: theme-color("secondary");
 
@@ -241,6 +258,10 @@
     opacity: 0;
     height: 0;
     width: 0;
+    &:focus + span {
+      border-radius: 50%;
+      border: 2px solid $primary-color;
+    }
   }
   &-custom-input {
     @include colored-circle-radio($secondary-color);
@@ -264,3 +285,61 @@
     background-size: contain;
   }
 }
+
+//Slide in labels
+@mixin float-label-container {
+  display: block;
+  position: relative;
+}
+
+@mixin float-label {
+  label {
+    position: absolute;
+    left: 1em;
+    top: -0.5em;
+    cursor: text;
+    opacity: 1;
+    background: $input-background;
+    padding: 0 4px;
+    transition: all .2s;
+    @content;
+    &.state-select-label{
+      opacity: 1 !important;
+      left:1em !important;
+    }
+  }
+}
+
+@mixin float-label-input {
+  &::placeholder {
+    opacity: 0;
+    color: $secondary-font-color;
+    transition: all .2s;
+  }
+  &:placeholder-shown:not(:focus)::placeholder {
+      opacity: 0.3;
+      transition: all .2s;
+  }
+}
+
+@mixin float-label-scaled {
+  &:placeholder-shown:not(:focus) + * {
+      @content;
+  }
+}
+
+.has-float-label {
+  @include float-label-container;
+  @include float-label;
+
+  input, textarea {
+    @include float-label-input;
+    @include float-label-scaled {
+      opacity: 0;
+      left: 0em;
+    }
+  }
+  .form-control:focus {
+    box-shadow: none;
+  }
+}

data/app/assets/stylesheets/spree/frontend/flags/_flag-icon-base.scss

@@ -0,0 +1,23 @@
+.flag-icon-background {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+.flag-icon {
+  @extend .flag-icon-background;
+  position: relative;
+  display: inline-block;
+  width: (4 / 3) * 2.3em;
+  &:before {
+    content: "\00a0";
+  }
+}
+
+@mixin flag-icon($country) {
+  .flag-icon-#{$country} {
+    background-image: image-url(
+      "#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg"
+    );
+  }
+}

data/app/assets/stylesheets/spree/frontend/flags/_flag-icon-list.scss

@@ -0,0 +1,265 @@
+@if variable-exists(include) {
+  @each $country in $include {
+    @include flag-icon($country);
+  }
+} @else {
+  @include flag-icon(ad);
+  @include flag-icon(ae);
+  @include flag-icon(af);
+  @include flag-icon(ag);
+  @include flag-icon(ai);
+  @include flag-icon(al);
+  @include flag-icon(am);
+  @include flag-icon(ao);
+  @include flag-icon(aq);
+  @include flag-icon(ar);
+  @include flag-icon(as);
+  @include flag-icon(at);
+  @include flag-icon(au);
+  @include flag-icon(aw);
+  @include flag-icon(ax);
+  @include flag-icon(az);
+  @include flag-icon(ba);
+  @include flag-icon(bb);
+  @include flag-icon(bd);
+  @include flag-icon(be);
+  @include flag-icon(bf);
+  @include flag-icon(bg);
+  @include flag-icon(bh);
+  @include flag-icon(bi);
+  @include flag-icon(bj);
+  @include flag-icon(bl);
+  @include flag-icon(bm);
+  @include flag-icon(bn);
+  @include flag-icon(bo);
+  @include flag-icon(bq);
+  @include flag-icon(br);
+  @include flag-icon(bs);
+  @include flag-icon(bt);
+  @include flag-icon(bv);
+  @include flag-icon(bw);
+  @include flag-icon(by);
+  @include flag-icon(bz);
+  @include flag-icon(ca);
+  @include flag-icon(cc);
+  @include flag-icon(cd);
+  @include flag-icon(cf);
+  @include flag-icon(cg);
+  @include flag-icon(ch);
+  @include flag-icon(ci);
+  @include flag-icon(ck);
+  @include flag-icon(cl);
+  @include flag-icon(cm);
+  @include flag-icon(cn);
+  @include flag-icon(co);
+  @include flag-icon(cr);
+  @include flag-icon(cu);
+  @include flag-icon(cv);
+  @include flag-icon(cw);
+  @include flag-icon(cx);
+  @include flag-icon(cy);
+  @include flag-icon(cz);
+  @include flag-icon(de);
+  @include flag-icon(dj);
+  @include flag-icon(dk);
+  @include flag-icon(dm);
+  @include flag-icon(do);
+  @include flag-icon(dz);
+  @include flag-icon(ec);
+  @include flag-icon(ee);
+  @include flag-icon(eg);
+  @include flag-icon(eh);
+  @include flag-icon(er);
+  @include flag-icon(es);
+  @include flag-icon(et);
+  @include flag-icon(fi);
+  @include flag-icon(fj);
+  @include flag-icon(fk);
+  @include flag-icon(fm);
+  @include flag-icon(fo);
+  @include flag-icon(fr);
+  @include flag-icon(ga);
+  @include flag-icon(gb);
+  @include flag-icon(gd);
+  @include flag-icon(ge);
+  @include flag-icon(gf);
+  @include flag-icon(gg);
+  @include flag-icon(gh);
+  @include flag-icon(gi);
+  @include flag-icon(gl);
+  @include flag-icon(gm);
+  @include flag-icon(gn);
+  @include flag-icon(gp);
+  @include flag-icon(gq);
+  @include flag-icon(gr);
+  @include flag-icon(gs);
+  @include flag-icon(gt);
+  @include flag-icon(gu);
+  @include flag-icon(gw);
+  @include flag-icon(gy);
+  @include flag-icon(hk);
+  @include flag-icon(hm);
+  @include flag-icon(hn);
+  @include flag-icon(hr);
+  @include flag-icon(ht);
+  @include flag-icon(hu);
+  @include flag-icon(id);
+  @include flag-icon(ie);
+  @include flag-icon(il);
+  @include flag-icon(im);
+  @include flag-icon(in);
+  @include flag-icon(io);
+  @include flag-icon(iq);
+  @include flag-icon(ir);
+  @include flag-icon(is);
+  @include flag-icon(it);
+  @include flag-icon(je);
+  @include flag-icon(jm);
+  @include flag-icon(jo);
+  @include flag-icon(jp);
+  @include flag-icon(ke);
+  @include flag-icon(kg);
+  @include flag-icon(kh);
+  @include flag-icon(ki);
+  @include flag-icon(km);
+  @include flag-icon(kn);
+  @include flag-icon(kp);
+  @include flag-icon(kr);
+  @include flag-icon(kw);
+  @include flag-icon(ky);
+  @include flag-icon(kz);
+  @include flag-icon(la);
+  @include flag-icon(lb);
+  @include flag-icon(lc);
+  @include flag-icon(li);
+  @include flag-icon(lk);
+  @include flag-icon(lr);
+  @include flag-icon(ls);
+  @include flag-icon(lt);
+  @include flag-icon(lu);
+  @include flag-icon(lv);
+  @include flag-icon(ly);
+  @include flag-icon(ma);
+  @include flag-icon(mc);
+  @include flag-icon(md);
+  @include flag-icon(me);
+  @include flag-icon(mf);
+  @include flag-icon(mg);
+  @include flag-icon(mh);
+  @include flag-icon(mk);
+  @include flag-icon(ml);
+  @include flag-icon(mm);
+  @include flag-icon(mn);
+  @include flag-icon(mo);
+  @include flag-icon(mp);
+  @include flag-icon(mq);
+  @include flag-icon(mr);
+  @include flag-icon(ms);
+  @include flag-icon(mt);
+  @include flag-icon(mu);
+  @include flag-icon(mv);
+  @include flag-icon(mw);
+  @include flag-icon(mx);
+  @include flag-icon(my);
+  @include flag-icon(mz);
+  @include flag-icon(na);
+  @include flag-icon(nc);
+  @include flag-icon(ne);
+  @include flag-icon(nf);
+  @include flag-icon(ng);
+  @include flag-icon(ni);
+  @include flag-icon(nl);
+  @include flag-icon(no);
+  @include flag-icon(np);
+  @include flag-icon(nr);
+  @include flag-icon(nu);
+  @include flag-icon(nz);
+  @include flag-icon(om);
+  @include flag-icon(pa);
+  @include flag-icon(pe);
+  @include flag-icon(pf);
+  @include flag-icon(pg);
+  @include flag-icon(ph);
+  @include flag-icon(pk);
+  @include flag-icon(pl);
+  @include flag-icon(pm);
+  @include flag-icon(pn);
+  @include flag-icon(pr);
+  @include flag-icon(ps);
+  @include flag-icon(pt);
+  @include flag-icon(pw);
+  @include flag-icon(py);
+  @include flag-icon(qa);
+  @include flag-icon(re);
+  @include flag-icon(ro);
+  @include flag-icon(rs);
+  @include flag-icon(ru);
+  @include flag-icon(rw);
+  @include flag-icon(sa);
+  @include flag-icon(sb);
+  @include flag-icon(sc);
+  @include flag-icon(sd);
+  @include flag-icon(se);
+  @include flag-icon(sg);
+  @include flag-icon(sh);
+  @include flag-icon(si);
+  @include flag-icon(sj);
+  @include flag-icon(sk);
+  @include flag-icon(sl);
+  @include flag-icon(sm);
+  @include flag-icon(sn);
+  @include flag-icon(so);
+  @include flag-icon(sr);
+  @include flag-icon(ss);
+  @include flag-icon(st);
+  @include flag-icon(sv);
+  @include flag-icon(sx);
+  @include flag-icon(sy);
+  @include flag-icon(sz);
+  @include flag-icon(tc);
+  @include flag-icon(td);
+  @include flag-icon(tf);
+  @include flag-icon(tg);
+  @include flag-icon(th);
+  @include flag-icon(tj);
+  @include flag-icon(tk);
+  @include flag-icon(tl);
+  @include flag-icon(tm);
+  @include flag-icon(tn);
+  @include flag-icon(to);
+  @include flag-icon(tr);
+  @include flag-icon(tt);
+  @include flag-icon(tv);
+  @include flag-icon(tw);
+  @include flag-icon(tz);
+  @include flag-icon(ua);
+  @include flag-icon(ug);
+  @include flag-icon(um);
+  @include flag-icon(us);
+  @include flag-icon(uy);
+  @include flag-icon(uz);
+  @include flag-icon(va);
+  @include flag-icon(vc);
+  @include flag-icon(ve);
+  @include flag-icon(vg);
+  @include flag-icon(vi);
+  @include flag-icon(vn);
+  @include flag-icon(vu);
+  @include flag-icon(wf);
+  @include flag-icon(ws);
+  @include flag-icon(ye);
+  @include flag-icon(yt);
+  @include flag-icon(za);
+  @include flag-icon(zm);
+  @include flag-icon(zw);
+
+  // Other flags
+  @include flag-icon(es-ca);
+  @include flag-icon(eu);
+  @include flag-icon(gb-eng);
+  @include flag-icon(gb-nir);
+  @include flag-icon(gb-sct);
+  @include flag-icon(gb-wls);
+  @include flag-icon(un);
+  @include flag-icon(xk);
+}