spree_frontend 3.1.0 → 4.7.0

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

@@ -0,0 +1,35 @@
+Spree.showProductAddedModal = function(product, variant) {
+  var modalSelector = '.product-added-modal'
+  var nameSelector = '.product-added-modal-product-details-name'
+  var priceSelector = '.product-added-modal-product-details-price'
+  var imageSelector = '.product-added-modal-product-image-container-image'
+  var modalNoImageClass = 'product-added-modal--no-image'
+
+  var price = variant.display_price
+  var images = variant && variant.images.length > 0 ? variant.images : product.images
+  var name = product.name
+  var leadImage = images.length === 0 ? null : images[0]
+  var $modal = $(modalSelector)
+
+  $modal.find(nameSelector).text(name)
+  $modal.find(priceSelector).html(price)
+
+  if (leadImage !== null) {
+    $modal
+      .removeClass(modalNoImageClass)
+      .find(imageSelector)
+      .attr('src', leadImage.url_product)
+      .attr('alt', leadImage.alt || name)
+  } else {
+    $modal.addClass(modalNoImageClass)
+  }
+
+  $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/quantity_select.js

@@ -0,0 +1,58 @@
+Spree.ready(function($) {
+  var quantitySelectSelector = '.quantity-select'
+  var quantitySelectDecreaseSelector = '.quantity-select-decrease'
+  var quantitySelectIncreaseSelector = '.quantity-select-increase'
+  var quantitySelectValueSelector = '.quantity-select-value'
+  var body = $('body')
+
+  var onQuantityDecreaseClick = function(event) {
+    var $quantitySelect = $(event.currentTarget).closest(quantitySelectSelector)
+    var $quantitySelectValue = $quantitySelect.find(quantitySelectValueSelector)
+    var min =
+      typeof $quantitySelectValue.attr('min') === 'undefined'
+        ? undefined
+        : parseInt($quantitySelectValue.attr('min'), 10)
+    var value = parseInt($quantitySelectValue.val(), 10)
+
+    if (typeof min === 'undefined' || value > min) {
+      $quantitySelectValue.val(value - 1)
+    }
+  }
+  var onQuantityIncreaseClick = function(event) {
+    var $quantitySelect = $(event.currentTarget).closest(quantitySelectSelector)
+    var $quantitySelectValue = $quantitySelect.find(quantitySelectValueSelector)
+    var max =
+      typeof $quantitySelectValue.attr('max') === 'undefined'
+        ? undefined
+        : parseInt($quantitySelectValue.attr('max'), 10)
+    var value = parseInt($quantitySelectValue.val(), 10)
+
+    if (typeof max === 'undefined' || value < max) {
+      $quantitySelectValue.val(value + 1)
+    }
+  }
+
+  var onValueChange = function(event) {
+    var $quantitySelect = $(event.currentTarget).closest(quantitySelectSelector)
+    var $quantitySelectValue = $quantitySelect.find(quantitySelectValueSelector)
+    var value = parseInt($quantitySelectValue.val(), 10)
+    var min =
+      typeof $quantitySelectValue.attr('min') === 'undefined'
+        ? undefined
+        : parseInt($quantitySelectValue.attr('min'), 10)
+    var max =
+      typeof $quantitySelectValue.attr('max') === 'undefined'
+        ? undefined
+        : parseInt($quantitySelectValue.attr('max'), 10)
+
+    if (value < min) {
+      $quantitySelectValue.val(min)
+    } else if (value > max) {
+      $quantitySelectValue.val(max)
+    }
+  }
+
+  body.off('click', quantitySelectDecreaseSelector).on('click', quantitySelectDecreaseSelector, onQuantityDecreaseClick)
+  body.off('click', quantitySelectIncreaseSelector).on('click', quantitySelectIncreaseSelector, onQuantityIncreaseClick)
+  body.off('change', quantitySelectValueSelector).on('change', quantitySelectValueSelector, onValueChange)
+})

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 (variant.id.toString() === variantIdFromUrl.toString()) 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 (variant.id.toString() === variantIdFromUrl.toString()) 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 (inputTag.value.toString() === item.id.toString() && 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/javascripts/spree/frontend.js

@@ -1,9 +1,78 @@
-//= require bootstrap-sprockets
+//= require jquery3
+//= require jquery_ujs
+//= require popper
+//= require bootstrap
 //= require jquery.payment
-//= require jquery.validate/jquery.validate.min
-//= require spree
+//= require cleave
+//= require spree/frontend/main
+//= require polyfill.min
+//= require fetch.umd
+//= require spree/frontend/api/main
+//= require ./lazysizes.config
+//= require lazysizes.min
+//= require accounting.min
+//= require spree/frontend/account
+//= require spree/frontend/api_tokens
+//= require spree/frontend/carousel-noconflict
 //= require spree/frontend/cart
+//= require spree/frontend/locale
+//= require spree/frontend/currency
 //= require spree/frontend/checkout
 //= require spree/frontend/checkout/address
+//= require spree/frontend/checkout/address_book
 //= require spree/frontend/checkout/payment
-//= require spree/frontend/product
+//= require spree/frontend/checkout/shipment
+//= require spree/frontend/views/spree/home/product_carousels
+//= require spree/frontend/views/spree/layouts/spree_application
+//= require spree/frontend/views/spree/product/related
+//= require spree/frontend/views/spree/products/cart_form
+//= require spree/frontend/views/spree/products/description
+//= require spree/frontend/views/spree/products/index
+//= require spree/frontend/views/spree/products/modal_carousel
+//= require spree/frontend/views/spree/products/price_filters
+//= require spree/frontend/views/spree/shared/carousel
+//= require spree/frontend/views/spree/shared/carousel/single
+//= require spree/frontend/views/spree/shared/carousel/swipes
+//= require spree/frontend/views/spree/shared/carousel/thumbnails
+//= require spree/frontend/views/spree/shared/delete_address_popup
+//= require spree/frontend/views/spree/shared/mobile_navigation
+//= require spree/frontend/views/spree/shared/nav_bar
+//= require spree/frontend/views/spree/shared/product_added_modal
+//= require spree/frontend/views/spree/shared/quantity_select
+//= require spree/frontend/turbo_scroll_fix
+//= require spree/frontend/main_nav_bar
+//= require spree/frontend/login
+
+Spree.routes.api_tokens = Spree.localizedPathFor('api_tokens')
+Spree.routes.ensure_cart = Spree.localizedPathFor('ensure_cart')
+Spree.routes.api_v2_storefront_cart_apply_coupon_code = Spree.localizedPathFor('api/v2/storefront/cart/apply_coupon_code')
+Spree.routes.api_v2_storefront_cart_remove_coupon_code = function(couponCode) { return Spree.localizedPathFor('api/v2/storefront/cart/remove_coupon_code/' + couponCode) }
+Spree.routes.api_v2_storefront_destroy_credit_card = function(id) { return Spree.localizedPathFor('api/v2/storefront/account/credit_cards/' + id) }
+Spree.routes.product = function(id) { return Spree.localizedPathFor('products/' + id) }
+Spree.routes.product_related = function(id) { return Spree.localizedPathFor('products/' + id + '/related') }
+Spree.routes.product_carousel = function (taxonId) { return Spree.localizedPathFor('product_carousel/' + taxonId) }
+Spree.routes.set_locale = function(locale) { return Spree.localizedPathFor('locale/set?switch_to_locale=' + locale) }
+Spree.routes.set_currency = function(currency) { return Spree.localizedPathFor('currency/set?switch_to_currency=' + currency) }
+
+Spree.clearCache = function () {
+  if (!window.Turbo) { return }
+
+  Turbo.clearCache()
+}
+
+Spree.setCurrency = function (currency) {
+  Spree.clearCache()
+
+  var params = (new URL(window.location)).searchParams
+  if (currency === SPREE_DEFAULT_CURRENCY) {
+    params.delete('currency')
+  } else {
+    params.set('currency', currency)
+  }
+  var queryString = params.toString()
+  if (queryString !== '') { queryString = '?' + queryString }
+
+  SPREE_CURRENCY = currency
+
+  Turbo.visit(window.location.pathname + queryString, { action: 'replace' })
+}

data/app/assets/javascripts/spree/lazysizes.config.js

@@ -0,0 +1,8 @@
+window.lazySizesConfig = window.lazySizesConfig || {}
+window.lazySizesConfig.loadMode = 1
+window.lazySizesConfig.init = false
+window.lazySizesConfig.loadHidden = false
+
+Spree.ready(function ($) {
+  window.lazySizes.init()
+})

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

@@ -0,0 +1,58 @@
+@import "spree/frontend/variables/variables";
+@import "bootstrap";
+@import "spree/frontend/bootstrap-patches";
+
+@import "spree/frontend/fonts";
+@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";
+@import "spree/frontend/components-bootstrap/modal";
+@import "spree/frontend/components-bootstrap/alert";
+
+@import "spree/frontend/views/spree/shared/quantity_select";
+@import "spree/frontend/views/spree/layouts/spree_application";
+@import "spree/frontend/helpers/spree/frontend_helper";
+@import "spree/frontend/views/spree/icon";
+@import "spree/frontend/views/spree/shared/images";
+@import "spree/frontend/views/spree/shared/cart";
+@import "spree/frontend/views/spree/shared/category_nav_bar";
+@import "spree/frontend/views/spree/shared/footer";
+@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/cms_sections/_index";
+@import "spree/frontend/views/spree/shared/carousel/thumbnails";
+@import "spree/frontend/views/spree/shared/carousel/single";
+@import "spree/frontend/views/spree/home/index";
+@import "spree/frontend/views/spree/user_passwords/user_passwords";
+@import "spree/frontend/views/spree/user_sessions/new";
+@import "spree/frontend/views/spree/products/index";
+@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";
+@import "spree/frontend/views/spree/orders/show";
+@import "spree/frontend/views/spree/taxons/show";
+@import "spree/frontend/views/spree/users/show";
+@import "spree/frontend/views/spree/checkout/edit";
+@import "spree/frontend/views/spree/shared/product";
+@import "spree/frontend/views/spree/products/show";
+@import "spree/frontend/views/spree/products/cart_form";
+@import "spree/frontend/views/spree/products/gallery_modal";
+@import "spree/frontend/views/spree/shared/product_added_modal";
+@import "spree/frontend/views/spree/shared/mobile_navigation";
+@import "spree/frontend/views/spree/shared/no_product_available";
+@import "spree/frontend/views/spree/shared/color_select";
+@import "spree/frontend/views/spree/shared/dropdown";
+@import "spree/frontend/views/spree/shared/delete_address_popup";

data/app/assets/stylesheets/spree/frontend/bootstrap-patches.scss

@@ -0,0 +1,11 @@
+@mixin make-container-padding-x($padding-x) {
+  padding-right: $padding-x;
+  padding-left: $padding-x;
+}
+
+.container, .container-fluid {
+  // Workaround for https://stackoverflow.com/questions/57098758/why-cant-i-override-the-container-padding-variable-in-bootstrapvue.
+  // As long as horizontal padding is larger than $grid-gutter-width / 2 it should work fine.
+  // TODO: Remove this overwrite and use $container-padding-x after upgrading to Bootstrap 5.
+  @include make-container-padding-x($container-padding);
+}

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

@@ -0,0 +1,3 @@
+.alert {
+  text-align: center;
+}

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

@@ -0,0 +1,16 @@
+.btn {
+  &-primary {
+    &:disabled {
+      background-color: theme-color-level('light', 2);
+      border-color: theme-color-level('light', 2);
+    }
+  }
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}

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

@@ -0,0 +1,89 @@
+.carousel {
+  &-indicators {
+    &-indicator {
+      $size: 6px;
+      border: 1px solid theme-color("secondary");
+      background: theme-color("light");
+      width: $size;
+      height: $size;
+      flex: 0 0 auto;
+      border-radius: 50%;
+      &.active {
+        background: theme-color("secondary");
+      }
+    }
+  }
+  &-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);
+      transform: translate3d(0, 0, 0);
+    }
+    .carousel-item-next,
+    .active.carousel-item-right {
+      -webkit-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+    }
+    .carousel-item-prev,
+    .active.carousel-item-left {
+      -webkit-transform: translate3d(0, -100%, 0);
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+  &-icon {
+    &-control {
+      @mixin arrow {
+        z-index: 1;
+        top: 0;
+        bottom: 42px;
+        @include media-breakpoint-up(md) {
+          bottom: 70px;
+        }
+      }
+      &-rounded {
+        $size: 28px;
+        border-radius: 50%;
+        width: $size;
+        height: $size;
+        background: $secondary-background;
+        color: $secondary-font-color;
+        @include media-breakpoint-up(sm) {
+          $size: 44px;
+          width: $size;
+          height: $size;
+        }
+      }
+      &--previous {
+        left: 7px;
+        @include arrow;
+        @media (min-width: map-get($grid-breakpoints, "xl") + 100px) {
+          left: -30px;
+        }
+      }
+      &--next {
+        right: 7px;
+        @include arrow;
+        @media (min-width: map-get($grid-breakpoints, "xl") + 100px) {
+          right: -30px;
+        }
+      }
+    }
+  }
+  &-items-container {
+    margin-left: 7px;
+    margin-right: 7px;
+    @include media-breakpoint-up(sm) {
+      margin-left: 30px;
+      margin-right: 30px;
+    }
+    @media (min-width: map-get($grid-breakpoints, "xl") + 100px) {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+.modal-backdrop {
+  background: adjust-color(theme-color-level('dark', -5), $alpha: -0.4);
+}
+
+.modal {
+  padding: 0 !important
+}

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

@@ -0,0 +1,28 @@
+.spree-header {
+  font-size: font-px-to-rem(18px);
+  text-transform: uppercase;
+  color: theme-color('dark-text');
+  text-align: center;
+
+  &.header-sm {
+    font-size: font-px-to-rem(14px);
+  }
+
+  @include media-breakpoint-up(sm) {
+    font-size: font-px-to-rem(34px);
+    line-height: 0.91;
+
+    &.header-sm {
+      font-size: font-px-to-rem(27px);
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    font-size: font-px-to-rem(32px);
+    line-height: 0.88;
+
+    &.header-sm {
+      font-size: font-px-to-rem(20px);
+    }
+  }
+}