spree_frontend 4.3.0 → 4.5.0

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

@@ -21,7 +21,7 @@ Spree.ready(function($) {
       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.burgerButton.addEventListener('click', this.onBurgerClick, false);
       this.closeButton.addEventListener('click', this.onCloseClick, false);
@@ -77,7 +77,7 @@ 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
@@ -89,7 +89,7 @@ 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');
     }
@@ -101,7 +101,7 @@ Spree.ready(function($) {
   }
 
   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);

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

@@ -8,7 +8,7 @@ this.initializeQueryParamsCheck = function () {
 
 function verifyVariantIdMatch() {
   this.variants.forEach(function(variant) {
-    if (parseInt(variant.id) === parseInt(variantIdFromUrl)) this.urlQueryMatchFound = true
+    if (variant.id.toString() === variantIdFromUrl.toString()) this.urlQueryMatchFound = true
   })
 }
 
@@ -23,7 +23,7 @@ this.setSelectedVariantFromUrl = function () {
 
 this.getVariantOptionsById = function(variantIdFromUrl) {
   this.variants.forEach(function(variant) {
-    if (parseInt(variant.id) === parseInt(variantIdFromUrl)) this.sortOptionValues(variant.option_values)
+    if (variant.id.toString() === variantIdFromUrl.toString()) this.sortOptionValues(variant.option_values)
   })
 }
 
@@ -36,7 +36,7 @@ function buildArray(item) {
   var target = container.querySelectorAll('.product-variants-variant-values-radio')
 
   target.forEach(function(inputTag) {
-    if (parseInt(inputTag.value) === item.id && inputTag.dataset.presentation === item.presentation) {
+    if (inputTag.value.toString() === item.id.toString() && inputTag.dataset.presentation === item.presentation) {
       this.selectedOptions.push(inputTag)
     }
   })

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

@@ -4,14 +4,13 @@
 //= require bootstrap
 //= require jquery.payment
 //= require cleave
-//= require spree
+//= require spree/frontend/main
 //= require polyfill.min
 //= require fetch.umd
-//= require spree/api/main
+//= require spree/frontend/api/main
 //= require ./lazysizes.config
 //= require lazysizes.min
 //= require accounting.min
-//= require turbolinks
 //= require spree/frontend/account
 //= require spree/frontend/api_tokens
 //= require spree/frontend/carousel-noconflict
@@ -40,31 +39,25 @@
 //= 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/turbolinks_scroll_fix
+//= require spree/frontend/turbo_scroll_fix
 //= require spree/frontend/main_nav_bar
 //= require spree/frontend/login
 
-Spree.routes.api_tokens = Spree.pathFor('api_tokens')
-Spree.routes.ensure_cart = Spree.pathFor('ensure_cart')
+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.pathFor('locale/set?switch_to_locale=' + locale) }
-Spree.routes.set_currency = function(currency) { return Spree.pathFor('currency/set?switch_to_currency=' + currency) }
-
-Spree.showProgressBar = function () {
-  if (!Turbolinks.supported) { return }
-  Turbolinks.controller.adapter.progressBar.setValue(0)
-  Turbolinks.controller.adapter.progressBar.show()
-}
+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 (!Turbolinks.supported) { return }
+  if (!window.Turbo) { return }
 
-  Turbolinks.clearCache()
+  Turbo.clearCache()
 }
 
 Spree.setCurrency = function (currency) {
@@ -81,5 +74,5 @@ Spree.setCurrency = function (currency) {
 
   SPREE_CURRENCY = currency
 
-  Turbolinks.visit(window.location.pathname + queryString, { action: 'replace' })
+  Turbo.visit(window.location.pathname + queryString, { action: 'replace' })
 }

data/app/controllers/spree/addresses_controller.rb

@@ -10,7 +10,7 @@ module Spree
         flash[:notice] = I18n.t(:successfully_created, scope: :address_book)
         redirect_to spree.account_path
       else
-        render action: 'new'
+        render action: 'new', status: :unprocessable_entity
       end
     end
 
@@ -27,7 +27,7 @@ module Spree
         flash[:notice] = Spree.t(:successfully_updated, scope: :address_book)
         redirect_back_or_default(addresses_path)
       else
-        render :edit
+        render :edit, status: :unprocessable_entity
       end
     end
 
@@ -45,11 +45,11 @@ module Spree
     end
 
     def create_service
-      Spree::Dependencies.account_create_address_service.constantize
+      Spree::Dependencies.address_create_service.constantize
     end
 
     def update_service
-      Spree::Dependencies.account_update_address_service.constantize
+      Spree::Dependencies.address_update_service.constantize
     end
   end
 end

data/app/controllers/spree/checkout_controller.rb

@@ -46,7 +46,7 @@ module Spree
           redirect_to spree.checkout_state_path(@order.state)
         end
       else
-        render :edit
+        render :edit, status: :unprocessable_entity
       end
     end
 
@@ -190,7 +190,7 @@ module Spree
     def rescue_from_spree_gateway_error(exception)
       flash.now[:error] = Spree.t(:spree_gateway_error_flash_for_checkout)
       @order.errors.add(:base, exception.message)
-      render :edit
+      render :edit, status: :unprocessable_entity
     end
 
     def check_authorization

data/app/controllers/spree/locale_controller.rb

@@ -1,6 +1,6 @@
 module Spree
   class LocaleController < Spree::StoreController
-    REDIRECT_TO_ROOT = /\/(#{Spree::Config[:storefront_pages_path]})\//.freeze
+    REDIRECT_TO_ROOT = /\/(pages)\//.freeze
 
     def index
       render :index, layout: false
@@ -27,10 +27,11 @@ module Spree
     private
 
     def should_build_new_url?
+      return false if request.env['HTTP_REFERER'].blank?
       if request.env['HTTP_REFERER'].match(REDIRECT_TO_ROOT)
         false
       else
-        request.env['HTTP_REFERER'].present? && request.env['HTTP_REFERER'] != request.env['REQUEST_URI']
+        request.env['HTTP_REFERER'] != request.env['REQUEST_URI']
       end
     end
   end

data/app/controllers/spree/orders_controller.rb

@@ -25,7 +25,7 @@ module Spree
           end
         end
       else
-        respond_with(@order)
+        respond_with(@order, status: :unprocessable_entity)
       end
     end
 

data/app/controllers/spree/store_controller.rb

@@ -1,7 +1,6 @@
 module Spree
   class StoreController < ApplicationController
     include Spree::Core::ControllerHelpers::Auth
-    include Spree::Core::ControllerHelpers::Common
     include Spree::Core::ControllerHelpers::Search
     include Spree::Core::ControllerHelpers::Store
     include Spree::Core::ControllerHelpers::StrongParameters
@@ -12,10 +11,16 @@ module Spree
 
     respond_to :html
 
+    layout :get_layout
+
     helper 'spree/base'
     helper 'spree/locale'
     helper 'spree/currency'
 
+    helper_method :title
+    helper_method :title=
+    helper_method :accurate_title
+
     skip_before_action :verify_authenticity_token, only: :ensure_cart, raise: false
 
     before_action :redirect_to_default_locale
@@ -43,10 +48,46 @@ module Spree
 
     protected
 
+    # can be used in views as well as controllers.
+    # e.g. <% self.title = 'This is a custom title for this view' %>
+    attr_writer :title
+
+    def title
+      title_string = @title.present? ? @title : accurate_title
+      if title_string.present?
+        if Spree::Frontend::Config[:always_put_site_name_in_title] && !title_string.include?(default_title)
+          [title_string, default_title].join(" #{Spree::Frontend::Config[:title_site_name_separator]} ")
+        else
+          title_string
+        end
+      else
+        default_title
+      end
+    end
+
+    def default_title
+      current_store.name
+    end
+
+    # this is a hook for subclasses to provide title
+    def accurate_title
+      current_store.seo_title
+    end
+
     def config_locale
       Spree::Frontend::Config[:locale]
     end
 
+    # Returns which layout to render.
+    #
+    # You can set the layout you want to render inside your Spree configuration with the +:layout+ option.
+    #
+    # Default layout is: +app/views/spree/layouts/spree_application+
+    #
+    def get_layout
+      layout ||= Spree::Frontend::Config[:layout]
+    end
+
     def store_etag
       [
         current_store,

data/app/helpers/spree/frontend_helper.rb

@@ -9,12 +9,18 @@ module Spree
     end
 
     def logo(image_path = nil, options = {})
-      image_path ||= if current_store.logo.attached? && current_store.logo.variable?
-                       main_app.url_for(current_store.logo.variant(resize: '244x104>'))
-                     elsif current_store.logo.attached? && current_store.logo.image?
-                       main_app.url_for(current_store.logo)
+      logo_attachment = if defined?(Spree::StoreLogo) && current_store.logo.is_a?(Spree::StoreLogo)
+                          current_store.logo.attachment # Spree v5
+                        else
+                          current_store.logo # Spree 4.x
+                        end
+
+      image_path ||= if logo_attachment&.attached? && logo_attachment&.variable?
+                       main_app.cdn_image_url(logo_attachment.variant(resize: '244x104>'))
+                     elsif logo_attachment&.attached? && logo_attachment&.image?
+                       main_app.cdn_image_url(current_store.logo)
                      else
-                       Spree::Config[:logo]
+                       asset_path('logo/spree_50.png')
                      end
 
       path = spree.respond_to?(:root_path) ? spree.root_path : main_app.root_path
@@ -165,7 +171,7 @@ module Spree
       image = default_image_for_product_or_variant(product)
 
       image_url = if image.present?
-                    main_app.url_for(image.url('plp'))
+                    main_app.cdn_image_url(image.url('plp'))
                   else
                     asset_path('noimage/plp.svg')
                   end
@@ -200,7 +206,7 @@ module Spree
       widths = { lg: 1200, md: 992, sm: 768, xs: 576 }
       set = []
       widths.each do |key, value|
-        file = main_app.url_for(image.url("plp_and_carousel_#{key}"))
+        file = main_app.cdn_image_url(image.url("plp_and_carousel_#{key}"))
 
         set << "#{file} #{value}w"
       end
@@ -352,7 +358,7 @@ module Spree
     def spree_social_link(service)
       return '' if current_store.send(service).blank?
 
-      link_to "https://#{service}.com/#{current_store.send(service)}", target: :blank, rel: 'nofollow noopener', 'aria-label': service do
+      link_to "https://#{service}.com/#{current_store.send(service)}", target: '_blank', rel: 'nofollow noopener', 'aria-label': service do
         content_tag :figure, id: service, class: 'px-2' do
           icon(name: service, width: 22, height: 22)
         end
@@ -373,6 +379,24 @@ module Spree
       content_tag :span, nil, class: "flag-icon flag-icon-#{country_iso_code.downcase}"
     end
 
+    def product_wysiwyg_editor_enabled?
+      defined?(Spree::Backend) && Spree::Backend::Config[:product_wysiwyg_editor_enabled]
+    end
+
+    def taxon_wysiwyg_editor_enabled?
+      defined?(Spree::Backend) && Spree::Backend::Config[:taxon_wysiwyg_editor_enabled]
+    end
+
+    # converts line breaks in product description into <p> tags (for html display purposes)
+    def product_description(product)
+      description = if Spree::Frontend::Config[:show_raw_product_description] || product_wysiwyg_editor_enabled?
+                      product.description
+                    else
+                      product.description.to_s.gsub(/(.*?)\r?\n\r?\n/m, '<p>\1</p>')
+                    end
+      description.blank? ? Spree.t(:product_has_no_description) : description
+    end
+
     private
 
     def formatted_price(value)

data/app/helpers/spree/navigation_helper.rb

@@ -26,7 +26,7 @@ module Spree
       DEPRECATION
 
       @spree_nav_cache_key = begin
-        keys = base_cache_key + [current_store, spree_navigation_data_cache_key, Spree::Config[:logo], stores&.cache_key_with_version, section]
+        keys = base_cache_key + [current_store, spree_navigation_data_cache_key, stores&.cache_key_with_version, section]
         Digest::MD5.hexdigest(keys.join('-'))
       end
     end
@@ -67,7 +67,7 @@ module Spree
                         "/#{I18n.locale}"
                       end
 
-      if Spree::MenuItem::DYNAMIC_RESOURCE_TYPE.include? item.linked_resource_type
+      if ['Spree::Product', 'Spree::Taxon', 'Spree::CmsPage'].include?(item.linked_resource_type)
         output_locale.to_s + item.link
       elsif item.linked_resource_type == 'Home Page'
         "/#{locale_param}"

data/app/helpers/spree/products_filters_helper.rb

@@ -67,7 +67,7 @@ module Spree
             }
           end
         else
-          filter_content_tag(option_value.name, opts.merge(is_selected: is_selected))
+          filter_content_tag(option_value.presentation, opts.merge(is_selected: is_selected))
         end
       end
     end

data/app/helpers/spree/store_helper.rb

@@ -28,7 +28,7 @@ module Spree
     end
 
     def should_render_store_chooser?
-      Spree::Config.show_store_selector && stores.size > 1
+      Spree::Frontend::Config[:show_store_selector] && stores.size > 1
     end
 
     def store_link(store = nil, html_opts = {})

data/app/services/spree/build_localized_redirect_url.rb

@@ -0,0 +1,101 @@
+require 'uri'
+
+module Spree
+  class BuildLocalizedRedirectUrl
+    prepend Spree::ServiceModule::Base
+
+    LOCALE_REGEX = /^\/[A-Za-z]{2}\/|^\/[A-Za-z]{2}-[A-Za-z]{2}\/|^\/[A-Za-z]{2}$|^\/[A-Za-z]{2}-[A-Za-z]{2}$/.freeze
+
+    SUPPORTED_PATHS_REGEX = /\/(products|t\/|cart|checkout|addresses|content|pages)/.freeze
+
+    # rubocop:disable Lint/UnusedMethodArgument
+    def call(url:, locale:, default_locale: nil)
+      run :initialize_url_object
+      run :generate_new_path
+      run :append_locale_param
+      run :build_url
+    end
+    # rubocop:enable Lint/UnusedMethodArgument
+
+    protected
+
+    def initialize_url_object(url:, locale:, default_locale:)
+      success(
+        url: URI(url),
+        locale: locale,
+        default_locale_supplied: default_locale_supplied?(locale, default_locale)
+      )
+    end
+
+    def generate_new_path(url:, locale:, default_locale_supplied:)
+      unless supported_path?(url.path)
+        return success(
+          url: url,
+          locale: locale,
+          path: cleanup_path(url.path),
+          default_locale_supplied: default_locale_supplied,
+          locale_added_to_path: false
+        )
+      end
+
+      new_path = if default_locale_supplied
+                   maches_locale_regex?(url.path) ? url.path.gsub(LOCALE_REGEX, '/') : url.path
+                 else
+                   maches_locale_regex?(url.path) ? url.path.gsub(LOCALE_REGEX, "/#{locale}/") : "/#{locale}#{url.path}"
+                 end
+
+      success(
+        url: url,
+        locale: locale,
+        path: cleanup_path(new_path),
+        default_locale_supplied: default_locale_supplied,
+        locale_added_to_path: true
+      )
+    end
+
+    def append_locale_param(url:, locale:, path:, default_locale_supplied:, locale_added_to_path:)
+      return success(url: url, path: path, query: url.query) if locale_added_to_path
+
+      query_params = Rack::Utils.parse_nested_query(url.query)
+
+      if default_locale_supplied
+        query_params.delete('locale')
+      else
+        query_params.merge!('locale' => locale)
+      end
+
+      query_string = query_params.any? ? query_params.to_query : nil
+
+      success(url: url, path: path, query: query_string)
+    end
+
+    def build_url(url:, path:, query:)
+      localized_url = builder_class(url).build(host: url.host, port: url.port, path: path, query: query).to_s
+      success(localized_url)
+    end
+
+    private
+
+    def supported_path?(path)
+      return true if path.blank? || path == '/' || maches_locale_regex?(path)
+
+      path.match(SUPPORTED_PATHS_REGEX)
+    end
+
+    def maches_locale_regex?(path)
+      path.match(LOCALE_REGEX)[0].gsub('/', '') if path.match(LOCALE_REGEX)
+    end
+
+    def default_locale_supplied?(locale, default_locale)
+      default_locale.present? && default_locale.to_s == locale.to_s
+    end
+
+    def cleanup_path(path)
+      path.chomp('/').gsub('//', '/')
+    end
+
+    def builder_class(url)
+      url.scheme == 'http' ? URI::HTTP : URI::HTTPS
+    end
+  end
+end

data/app/views/spree/checkout/_delivery.html.erb

@@ -35,7 +35,7 @@
       <% end %>
     </div>
 
-    <% if Spree::Config[:shipping_instructions] %>
+    <% if Spree::Frontend::Config[:shipping_instructions] %>
       <div id="minstrs" data-hook>
         <h4 class="h5">
           <%= Spree.t(:shipping_instructions) %>

data/app/views/spree/checkout/edit.html.erb

@@ -33,7 +33,7 @@ end
   </div>
 
   <div class="row checkout-content" data-hook="checkout_content">
-    <%= form_for @order, url: spree.update_checkout_path(@order.state), html: { id: "checkout_form_#{@order.state}", class: "w-100 d-lg-flex align-items-lg-baseline  flex-wrap position-relative" } do |form| %>
+    <%= form_for @order, url: spree.update_checkout_path(@order.state), html: { id: "checkout_form_#{@order.state}", class: "w-100 d-lg-flex align-items-lg-baseline  flex-wrap position-relative", data: { turbo: false } } do |form| %>
       <div class="<%= if @order.state != 'confirm' then 'col-lg-6' else 'col-md-12' end %>" data-hook="checkout_form_wrapper">
         <%= form.hidden_field :state_lock_version %>
         <%= render @order.state, form: form %>

data/app/views/spree/checkout/registration.html.erb

@@ -15,7 +15,7 @@
           </div>
           <% path = spree.respond_to?(:update_checkout_registration_path) ? spree.update_checkout_registration_path : spree_signup_path %>
 
-          <%= form_for @order, url: path, method: :put, html: { id: 'checkout_form_registration' } do |f| %>
+          <%= form_for @order, url: path, method: :put, html: { id: 'checkout_form_registration', data: { turbo: false } } do |f| %>
             <div class="form-group">
               <p class="form-group checkout-content-inner-field">
                 <%= f.email_field :email, class: 'spree-flat-input', placeholder: Spree.t(:email) %>

data/app/views/spree/orders/_line_item.html.erb

@@ -16,7 +16,7 @@
         <% variant.option_values.sort { |ov| ov.option_type.position }.each do |ov| %>
           <li class="item-details">
             <% # TODO: rework option values so options_text method can be used here %>
-            <%= "#{ov.option_type.presentation}: #{ov.name.titleize}" %>
+            <%= "#{ov.option_type.presentation}: #{ov.presentation}" %>
           </li>
         <% end %>
       </ul>

data/app/views/spree/orders/_line_item_data.html.erb

@@ -22,7 +22,7 @@
 <% end %>
 
 <div class="shopping-cart-item-delete <%= additional_classes %>" data-hook="cart_item_delete">
-  <%= link_to '#', class: 'delete', id: "delete_#{dom_id(line_item)}", data: { turbolinks: false, id: dom_id(line_item), variant_sku: line_item.sku, variant_name: line_item.name, variant_price: line_item.price, variant_options: line_item.options_text }, aria: { label: Spree.t('cart_page.remove_from_cart') } do %>
+  <%= link_to '#', class: 'delete', id: "delete_#{dom_id(line_item)}", data: { turbo: false, id: dom_id(line_item), variant_sku: line_item.sku, variant_name: line_item.name, variant_price: line_item.price, variant_options: line_item.options_text }, aria: { label: Spree.t('cart_page.remove_from_cart') } do %>
     <%= icon(name: 'garbage',
              classes: 'shopping-cart-item-delete-icon',
              width: 18.9,

data/app/views/spree/products/_color_option_type.html.erb

@@ -9,14 +9,14 @@
         <li>
           <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
             class: "m-1 m-sm-2 m-md-1 color-select-label",
-            title: option_value[:name]&.humanize,
+            title: option_value[:presentation],
             data: { toggle: "tooltip", placement: "bottom" } do %>
 
             <%= radio_button_tag "variant_option_value_id_#{option_type[:id]}",
               option_value[:id],
               option_value[:is_default] && index == 0,
               class: "product-variants-variant-values-radio",
-              aria: { label: option_value[:name] },
+              aria: { label: option_value[:presentation] },
               data: {
                 "option-type-index" => index,
                 "presentation" => option_value[:presentation],

data/app/views/spree/products/_description.html.erb

@@ -1,6 +1,6 @@
 <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Spree.t(:description) %></h3>
 
-<% if Spree::Config[:show_raw_product_description] || product_wysiwyg_editor_enabled? %>
+<% if Spree::Frontend::Config[:show_raw_product_description] || product_wysiwyg_editor_enabled? %>
   <div id="product-description-long" class="m-0 text-break product-description" data-hook="description">
     <%= raw product_description(@product) %>
   </div>

data/app/views/spree/products/_filters_desktop.html.erb

@@ -9,7 +9,7 @@
           <% option_type_name = ot_filter_param.titleize %>
           <% collapsed = params[ot_filter_param].blank? %>
 
-          <button class="card-header <%= 'collapsed' if collapsed %> px-1 plp-filters-card-header" id="filters<%= option_type_name %>" data-toggle="collapse" data-target="#collapseFilter<%= option_type_name %>" aria-expanded="<%= !collapsed %>" aria-controls="collapseFilter<%= option_type_name %>" role="heading" aria-level="2">
+          <button class="card-header <%= 'collapsed' if collapsed %> px-1 plp-filters-card-header" id="filters<%= ot_filter_param %>" data-toggle="collapse" data-target="#collapseFilter<%= ot_filter_param %>" aria-expanded="<%= !collapsed %>" aria-controls="collapseFilter<%= ot_filter_param %>" role="heading" aria-level="2">
             <%= option_type.presentation %>
             <%= icon(name: 'plus',
                     classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
@@ -20,7 +20,7 @@
                     width: 16,
                     height: 16) %>
           </button>
-          <div id="collapseFilter<%= option_type_name %>" class="collapse <%= 'show' unless collapsed %>" aria-labelledby="filters<%= option_type_name %>">
+          <div id="collapseFilter<%= ot_filter_param %>" class="collapse <%= 'show' unless collapsed %>" aria-labelledby="filters<%= ot_filter_param %>">
             <div class="card-body px-0 pt-1">
               <%= render 'spree/shared/option_values',
                 option_type: option_type,
@@ -36,7 +36,7 @@
             <% property_name = property.name %>
             <% collapsed = params.dig(:properties, property.filter_param).blank? %>
             <button class="card-header <%= 'collapsed' if collapsed %> px-1 plp-filters-card-header" id="filters<%= property_name %>" data-toggle="collapse" data-target="#collapseFilter<%= property_name %>" aria-expanded="<%= !collapsed %>" aria-controls="collapseFilter<%= property_name %>" role="heading" aria-level="2">
-              <%= property.presentation.titleize %>
+              <%= property.presentation %>
               <%= icon(name: 'plus',
                       classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
                       width: 16,

data/app/views/spree/products/_filters_mobile.html.erb

@@ -16,7 +16,7 @@
 
           <div class="card plp-overlay-card">
             <div class="card-header text-uppercase <%= 'collapsed' if params[ot_downcase_name].blank? %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= option_type_name %>" data-target="#collapseFilterMobile<%= option_type_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= option_type_name %>" role="heading" aria-level="3">
-              <%= option_type_name %>
+              <%= option_type.presentation %>
               <%= icon(name: 'arrow-right',
                       classes: 'spree-icon-arrow spree-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',
                       width: 16,
@@ -36,7 +36,7 @@
             <% collapsed = params.dig(:properties, property.filter_param).blank? %>
             <div class="card plp-overlay-card">
               <div class="card-header text-uppercase <%= 'collapsed' if collapsed %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= property_name %>" data-target="#collapseFilterMobile<%= property_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= property_name %>" role="heading" aria-level="3">
-                <%= property_name %>
+                <%= property.presentation %>
                 <%= icon(name: 'arrow-right',
                          classes: 'spree-icon-arrow spree-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',
                          width: 16,

data/app/views/spree/products/_thumbnails.html.erb

@@ -3,7 +3,7 @@
   <ul id="product-thumbnails" class="thumbnails d-flex w-100 pl-0 my-4" data-hook>
     <% @product.images.each do |i| %>
       <li class='tmb-all mr-2 tmb-<%= i.viewable.id %>'>
-        <%= link_to(image_tag(main_app.url_for(i.url(:mini)), class: "img-thumbnail d-inline-block"), main_app.url_for(i.url(:product))) %>
+        <%= link_to(image_tag(main_app.cdn_image_url(i.url(:mini)), class: "img-thumbnail d-inline-block"), main_app.cdn_image_url(i.url(:product))) %>
       </li>
     <% end %>
 
@@ -11,7 +11,7 @@
       <% @product.variant_images.each do |i| %>
         <% next if @product.images.include?(i) %>
         <li class='vtmb mr-2 tmb-<%= i.viewable.id %>'>
-          <%= link_to(image_tag(main_app.url_for(i.url(:mini)), class: "img-thumbnail"), main_app.url_for(i.url(:product))) %>
+          <%= link_to(image_tag(main_app.cdn_image_url(i.url(:mini)), class: "img-thumbnail"), main_app.cdn_image_url(i.url(:product))) %>
         </li>
       <% end %>
     <% end %>