spree_frontend 3.7.13 → 4.0.0.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 72c117fb5f4d0b23faf3e30aa3a2c647cd39953755c092c11e343cbbd095ffed
-  data.tar.gz: 129ef67f00563302fe330736cd59a60790b1df77f13a7097028000609daca654
+  metadata.gz: 032eb15c7d9d5a00cb97125d37d91cbb268790c76dd89cb24353f40eb8480212
+  data.tar.gz: d01986aec09bef01b96c731618a44da04905f59e985c00437a80c386ee949baf
 SHA512:
-  metadata.gz: '0840847724bf421df0554fa620b0c6c5144ba7f7a30ab682aabc18cd0c2123564c6cbbde9cbfbe50ee16d4463bcdaf169fa7d8a393e0f44fa868daf6548cf660'
-  data.tar.gz: c28d3f57bd7ab0e41446a6399e5de18d9e91b4a6045df5a1bb5c02bdf4615a08a86ab1cff54819179e3756782dfde27af1bf06cefe1a17282a83015f98c38976
+  metadata.gz: 365cddc404a1130ca0588af7d20309095eebcf2c2a4dbb3770b69fa38db9f03bd7b55596b1b53ec0d35c83a32e7c68ffe9b82db292d7d43d0017b55d90b2126c
+  data.tar.gz: 37ad01b825d249d64ef77f4adbdea1fa048aa1206c7882df64be6e97d663e18cd3b121d9fcb4e1fd75c2440d68ce26047ef0cf2f8a01184c4a7a5cf10b61e6b4

data/Gemfile

@@ -1,4 +1,4 @@
-eval(File.read(File.dirname(__FILE__) + '/../common_spree_dependencies.rb'))
+eval_gemfile('../common_spree_dependencies.rb')
 
 gem 'spree_core', path: '../core'
 gem 'spree_api', path: '../api'

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

@@ -1,4 +1,6 @@
-//= require bootstrap-sprockets
+//= require jquery3
+//= require popper
+//= require bootstrap
 //= require jquery.payment
 //= require spree
 //= require polyfill.min
@@ -8,6 +10,7 @@
 //= require spree/frontend/cart
 //= require spree/frontend/checkout
 //= require spree/frontend/checkout/address
+//= require spree/frontend/checkout/address_book
 //= require spree/frontend/checkout/payment
 //= require spree/frontend/product
 

data/app/assets/javascripts/spree/frontend/checkout/address.js

@@ -5,20 +5,48 @@ Spree.ready(function ($) {
         var countryId = getCountryId(region)
         if (countryId != null) {
           if (Spree.Checkout[countryId] == null) {
-            $.get(Spree.routes.states_search, {
-              country_id: countryId
+            $.ajax({
+              async: false, method: 'GET', url: '/api/v2/storefront/countries/' + countryId + '?include=states', dataType: 'json'
             }).done(function (data) {
+              var json = data.included; var xStates = []
+              for (var i = 0; i < json.length; i++) {
+                var obj = json[i]; xStates.push({ 'id': obj.id, 'name': obj.attributes.name })
+              }
               Spree.Checkout[countryId] = {
-                states: data.states,
-                states_required: data.states_required
+                states: xStates,
+                states_required: data.data.attributes.states_required,
+                zipcode_required: data.data.attributes.zipcode_required
               }
               Spree.fillStates(Spree.Checkout[countryId], region)
+              Spree.toggleZipcode(Spree.Checkout[countryId], region)
             })
           } else {
             Spree.fillStates(Spree.Checkout[countryId], region)
+            Spree.toggleZipcode(Spree.Checkout[countryId], region)
           }
         }
       }
+
+      Spree.toggleZipcode = function (data, region) {
+        var zipcodeRequired = data.zipcode_required
+        var zipcodePara = $('#' + region + 'zipcode')
+        var zipcodeInput = zipcodePara.find('input')
+        var zipcodeSpanRequired = zipcodePara.find('abbr')
+
+        if (zipcodeRequired) {
+          zipcodeInput.prop('required', true)
+          zipcodeSpanRequired.show()
+          // zipcodeInput.prop('disabled', false)
+          // zipcodePara.show()
+        } else {
+          zipcodeInput.val('')
+          zipcodeInput.prop('required', false)
+          zipcodeSpanRequired.hide()
+          // zipcodeInput.prop('disabled', true)
+          // zipcodePara.hide()
+        }
+      }
+
       Spree.fillStates = function (data, region) {
         var selected, statesWithBlank
         var statesRequired = data.states_required
@@ -26,16 +54,12 @@ Spree.ready(function ($) {
         var statePara = $('#' + region + 'state')
         var stateSelect = statePara.find('select')
         var stateInput = statePara.find('input')
-        var stateSpanRequired = statePara.find('[id$="state-required"]')
+        var stateSpanRequired = statePara.find('abbr')
+
         if (states.length > 0) {
           selected = parseInt(stateSelect.val())
           stateSelect.html('')
-          statesWithBlank = [
-            {
-              name: '',
-              id: ''
-            }
-          ].concat(states)
+          statesWithBlank = [{name: '', id: ''}].concat(states)
           $.each(statesWithBlank, function (idx, state) {
             var opt = $(document.createElement('option')).attr('value', state.id).html(state.name)
             if (selected === state.id) {
@@ -43,12 +67,17 @@ Spree.ready(function ($) {
             }
             stateSelect.append(opt)
           })
+          stateSelect.prop('required', false)
           stateSelect.prop('disabled', false).show()
           stateInput.hide().prop('disabled', true)
           statePara.show()
-          stateSpanRequired.show()
+          stateSpanRequired.hide()
+          stateSelect.removeClass('required')
+
           if (statesRequired) {
             stateSelect.addClass('required')
+            stateSpanRequired.show()
+            stateSelect.prop('required', true)
           }
           stateSelect.removeClass('hidden')
           stateInput.removeClass('required')
@@ -57,7 +86,7 @@ Spree.ready(function ($) {
           stateInput.show()
           if (statesRequired) {
             stateSpanRequired.show()
-            stateInput.addClass('required')
+            stateInput.addClass('required form-control')
           } else {
             stateInput.val('')
             stateSpanRequired.hide()
@@ -93,7 +122,6 @@ Spree.ready(function ($) {
         Spree.updateState('s')
       }
     }
-
     function getCountryId (region) {
       return $('#' + region + 'country select').val()
     }

data/app/assets/javascripts/spree/frontend/checkout/address_book.js

@@ -0,0 +1,56 @@
+(function ($) {
+  $(document).ready(function () {
+    if ($('.select_address').length > 0) {
+      $('input#order_use_billing').unbind('change')
+
+      hide_address_form('billing')
+      hide_address_form('shipping')
+
+      if ($('input#order_use_billing').is(':checked')) {
+        $('#shipping .select_address').hide()
+      }
+
+      $('input#order_use_billing').click(function () {
+        if ($(this).is(':checked')) {
+          $('#shipping .select_address').hide()
+          hide_address_form('shipping')
+        } else {
+          $('#shipping .select_address').show()
+          if ($("input[name='order[ship_address_id]']:checked").val() == '0') {
+            show_address_form('shipping')
+          } else {
+            hide_address_form('shipping')
+          }
+        }
+      })
+
+      $("input[name='order[bill_address_id]']:radio").change(function () {
+        if ($("input[name='order[bill_address_id]']:checked").val() == '0') {
+          show_address_form('billing')
+        } else {
+          hide_address_form('billing')
+        }
+      })
+
+      $("input[name='order[ship_address_id]']:radio").change(function () {
+        if ($("input[name='order[ship_address_id]']:checked").val() == '0') {
+          show_address_form('shipping')
+        } else {
+          hide_address_form('shipping')
+        }
+      })
+    }
+  })
+
+  function hide_address_form (address_type) {
+    $('#' + address_type + ' .inner').hide()
+    $('#' + address_type + ' .inner input').prop('disabled', true)
+    $('#' + address_type + ' .inner select').prop('disabled', true)
+  }
+
+  function show_address_form (address_type) {
+    $('#' + address_type + ' .inner').show()
+    $('#' + address_type + ' .inner input').prop('disabled', false)
+    $('#' + address_type + ' .inner select').prop('disabled', false)
+  }
+})(jQuery)

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

@@ -3,83 +3,98 @@
 
 Spree.ready(function ($) {
   Spree.addImageHandlers = function () {
-    var thumbnails = $('#product-images ul.thumbnails');
-    ($('#main-image')).data('selectedThumb', ($('#main-image img')).attr('src'));
-    ($('#main-image')).data('selectedThumbAlt', ($('#main-image img')).attr('alt'))
-    thumbnails.find('li').eq(0).addClass('selected')
-
-    thumbnails.find('a').on('click', function (event) {
-      ($('#main-image')).data('selectedThumb', ($(event.currentTarget)).attr('href'));
-      ($('#main-image')).data('selectedThumbId', ($(event.currentTarget)).parent().attr('id'));
-      ($('#main-image')).data('selectedThumbAlt', ($(event.currentTarget)).find('img').attr('alt'))
-      thumbnails.find('li').removeClass('selected');
-      ($(event.currentTarget)).parent('li').addClass('selected')
+    var thumbnails = $("#product-images ul.thumbnails");
+
+    ($("#main-image")).data("selectedThumb", ($("#main-image img")).attr("src"));
+
+    thumbnails
+      .find("li")
+      .eq(0)
+      .addClass("selected")
+      .find('img')
+      .addClass('border-primary');
+
+    thumbnails.find("a").on("click", function (event) {
+      ($("#main-image")).data("selectedThumb", ($(event.currentTarget)).attr("href"));
+      ($("#main-image")).data("selectedThumbId", ($(event.currentTarget)).parent().attr("id"));
+      thumbnails.find("li").removeClass("selected");
+      thumbnails.find('img').removeClass('border-primary');
+      $(this).find('img').addClass('border-primary');
+      ($(event.currentTarget)).parent("li").addClass("selected");
       return false
-    })
+    });
 
     thumbnails.find('li').on('mouseenter', function (event) {
-      return ($('#main-image img'))
-        .attr({ 'src': ($(event.currentTarget)).find('a').attr('href'), 'alt': ($(event.currentTarget)).find('img').attr('alt') })
-    })
+      $(this).find('img').addClass('border-success');
+      return ($('#main-image img')).attr({
+        src: $(event.currentTarget).find('a').attr('href'),
+        alt: $(event.currentTarget).find('img').attr('alt')
+      });
+    });
 
     return thumbnails.find('li').on('mouseleave', function (event) {
-      return ($('#main-image img'))
-        .attr({ 'src': ($('#main-image')).data('selectedThumb'), 'alt': ($('#main-image')).data('selectedThumbAlt') })
-    })
+      $(this).find('img').removeClass('border-success');
+      return $('#main-image img').attr({
+        src: $('#main-image').data('selectedThumb'),
+        alt: $('#main-image').data('selectedThumbAlt')
+      });
+    });
   }
 
   Spree.showVariantImages = function (variantId) {
     ($('li.vtmb')).hide();
-    ($('li.tmb-' + variantId)).show()
-    var currentThumb = $('#' + ($('#main-image')).data('selectedThumbId'))
+    ($('li.tmb-' + variantId)).show();
+    var currentThumb = $('#' + ($('#main-image')).data('selectedThumbId'));
 
     if (!currentThumb.hasClass('vtmb + variantId')) {
-      var thumb = $(($('#product-images ul.thumbnails li:visible.vtmb')).eq(0))
+      var thumb = $(($('#product-images ul.thumbnails li:visible.vtmb')).eq(0));
 
       if (!(thumb.length > 0)) {
-        thumb = $(($('#product-images ul.thumbnails li:visible')).eq(0))
+        thumb = $(($('#product-images ul.thumbnails li:visible')).eq(0));
       }
 
-      var newImg = thumb.find('a').attr('href')
+      var newImg = thumb.find('a').attr('href');
 
       var newAlt = thumb.find('img').attr('alt');
-      ($('#product-images ul.thumbnails li')).removeClass('selected')
+      ($('#product-images ul.thumbnails li')).removeClass('selected');
       thumb.addClass('selected');
       ($('#main-image img')).attr({ 'src': newImg, 'alt': newAlt });
-      ($('#main-image')).data({ 'selectedThumb': newImg, 'selectedThumbAlt': newAlt })
-      return ($('#main-image')).data('selectedThumbId', thumb.attr('id'))
+      ($('#main-image')).data({ 'selectedThumb': newImg, 'selectedThumbAlt': newAlt });
+      return ($('#main-image')).data('selectedThumbId', thumb.attr('id'));
     }
   }
 
   Spree.updateVariantPrice = function (variant) {
-    var variantPrice = variant.data('price')
+    var variantPrice = variant.data('price');
 
     if (variantPrice) {
-      return ($('.price.selling')).text(variantPrice)
+      return ($('.price.selling')).text(variantPrice);
     }
   }
 
   Spree.disableCartForm = function (variant) {
-    var inStock = variant.data('in-stock')
-    return $('#add-to-cart-button').attr('disabled', !inStock)
+    var inStock = variant.data('in-stock');
+    return $('#add-to-cart-button').attr('disabled', !inStock);
   }
 
-  var radios = $("#product-variants input[type='radio']")
+  var radios = $("#product-variants input[type='radio']");
 
   if (radios.length > 0) {
-    var selectedRadio = $("#product-variants input[type='radio'][checked='checked']")
-    Spree.showVariantImages(selectedRadio.attr('value'))
-    Spree.updateVariantPrice(selectedRadio)
-    Spree.disableCartForm(selectedRadio)
+    var selectedRadio = $("#product-variants input[type='radio'][checked='checked']");
+    Spree.showVariantImages(selectedRadio.attr('value'));
+    Spree.updateVariantPrice(selectedRadio);
+    Spree.disableCartForm(selectedRadio);
 
     radios.click(function (event) {
-      Spree.showVariantImages(this.value)
-      Spree.updateVariantPrice($(this))
-      return Spree.disableCartForm($(this))
+      $("#product-variants").find('li.active').removeClass("active");
+      $(this).closest("li").addClass("active");
+      Spree.showVariantImages(this.value);
+      Spree.updateVariantPrice($(this));
+      return Spree.disableCartForm($(this));
     })
   }
 
-  return Spree.addImageHandlers()
+  return Spree.addImageHandlers();
 })
 
 Spree.ready(function () {

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

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

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

@@ -1,4 +1,4 @@
 /*--------------------------------
   Colors
 --------------------------------*/
-$brand-primary: #1c5c92;
+$primary: #1c5c92;

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

@@ -0,0 +1,8 @@
+div#checkout #checkout_form_address {
+  #billing, #shipping {
+    .select_address label { float: none; }
+    input[type=radio] { width: auto; }
+  }
+}
+
+.hidden { display: none; }

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

@@ -1,18 +1,17 @@
 //Add your custom bootstrap variables here, see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss for full list of variables.
 
-@import "bootstrap-sprockets";
-@import "variables";
+@import "./variables";
 @import "bootstrap";
+@import "glyphicons";
 
 // -- Spree Custom Header and Footer ---------------------
 #spree-header {
-  background-color: $brand-primary;
-  margin-bottom: $line-height-computed;
+  background-color: $primary;
+  margin-bottom: $line-height-base;
   padding-top: 0.25em;
 
   #header {
-    background: rgba($gray-darker, 0.4);
-    padding: $line-height-computed 0;
+    background: rgba($gray-900, 0.4);
   }
 
   #logo {
@@ -24,33 +23,17 @@
     }
   }
 
-  @media (max-width: 767px) {
-    .navbar-nav > li > a {
-      padding-top: 0;
-      padding-bottom: 10px;
-      line-height: $line-height-computed;
-    }
+  .navbar {
+    padding: 0;
   }
 
   .nav a {
     color: white;
 
     &:hover, &:focus {
-      background: rgba($gray-darker, 0.4);
+      background: rgba($gray-900, 0.4);
     }
   }
-
-  .navbar {
-    border: 0;
-    margin-bottom: 0;
-  }
-}
-
-#spree-footer {
-  background: $gray-dark;
-  padding-top: $padding-base-horizontal;
-  margin-top: $line-height-computed;
-  color: white;
 }
 
 // -- Spree Layout Custom Rules -------------------------
@@ -59,12 +42,12 @@
 .alert-error { @extend .alert-danger; }
 .alert-alert { @extend .alert-info; }
 
-.product-body {
-  height: 170px;
+.list-unstyled {
+  @include list-unstyled();
 }
 
 .progress-steps {
-  margin-top: $line-height-computed;
+  margin-top: $line-height-base;
 }
 
 h1 {
@@ -92,13 +75,8 @@ table {
   }
 }
 
-// Footer links
-#footer-left a {
-  color: lighten($brand-primary, 20);
-
-  &:hover {
-    color: lighten($brand-primary, 10);
-  }
+#product-thumbnails {
+  list-style: none;
 }
 
 // Updated credit-card image