spree_storefront 5.0.5 → 5.1.0.beta

data/app/views/spree/checkout/payment/_gateway.html.erb

@@ -11,7 +11,7 @@
     <div class="form-group mb-3 relative">
       <% options_hash = Rails.env.production? ? {autocomplete: 'off'} : {} %>
       <label for="card_number" class="block text-xs text-neutral-600 mb-1"><%= Spree.t(:card_number) %></label>
-      <%= text_field_tag "#{param_prefix}[number]", '',
+      <%= text_field_tag "#{param_prefix}[number]", '', 
           options_hash.merge(
             id: 'card_number',
             data: { card_validation_target: "number" },
@@ -23,7 +23,7 @@
             required: true
           )
       %>
-      <div class="absolute right-2 top-7"
+      <div class="absolute right-2 top-7" 
            data-card-validation-target="typeContainer"
            id="credit-card-type-container">
       </div>
@@ -32,37 +32,37 @@
     <div class="flex gap-3">
       <div class="form-group">
         <label for="card_expiry" class="block text-xs text-neutral-600 mb-1"><%= Spree.t(:expiration_date) %></label>
-        <%= text_field_tag "#{param_prefix}[expiry]", '',
-            id: 'card_expiry',
+        <%= text_field_tag "#{param_prefix}[expiry]", '', 
+            id: 'card_expiry', 
             class: 'text-input',
             data: {
               card_validation_target: "expiry"
             },
-            placeholder: Spree.t(:card_expiration_placeholder),
+            placeholder: "MM/YYYY",
             required: true
         %>
       </div>
       <div class="form-group">
         <label for="card_code" class="block text-xs text-neutral-600 mb-1"><%= Spree.t(:cvv) %></label>
-        <%= text_field_tag "#{param_prefix}[verification_value]", '',
+        <%= text_field_tag "#{param_prefix}[verification_value]", '', 
             options_hash.merge(
-              id: 'card_code',
-              class: 'text-input',
+              id: 'card_code', 
+              class: 'text-input', 
               data: { card_validation_target: "cvv" },
               size: 4,
               maxlength: 4,
               pattern: '[0-9]*',
               inputmode: 'numeric',
-              placeholder: Spree.t(:cvv),
+              placeholder: Spree.t(:cvv), 
               required: true
-            )
+            ) 
         %>
       </div>
     </div>
 
-    <%= hidden_field_tag "#{param_prefix}[cc_type]", '',
+    <%= hidden_field_tag "#{param_prefix}[cc_type]", '', 
         id: "cc_type",
-        data: { card_validation_target: "ccType" }
+        data: { card_validation_target: "ccType" } 
     %>
 
     <% PaymentIcon.credit_cards.each do |card| %>

data/app/views/spree/line_items/create.turbo_stream.erb

@@ -6,6 +6,7 @@
   <%= turbo_stream.replace_all '.cart-contents' do %>
     <%= turbo_frame_tag cart_id(@order), class: 'cart-contents' do %>
       <%= render 'spree/orders/cart' %>
+      <%= render_storefront_partials(:add_to_cart_partials) %>
     <% end %>
   <% end %>
 

data/app/views/spree/line_items/destroy.turbo_stream.erb

@@ -1,17 +1,13 @@
-<% if flash[:error] %>
-  <%= spree_turbo_update_flashes %>
-<% else %>
-  <%= turbo_stream.replace_all '.cart-contents' do %>
-    <%= turbo_frame_tag cart_id(@order), class: 'cart-contents' do %>
-      <% if @order.line_items.empty? %>
-        <%= render 'spree/orders/empty' %>
-      <% else %>
-        <%= render 'spree/orders/cart' %>
-      <% end %>
-
-      <%= render_storefront_partials(:remove_from_cart_partials) %>
+<%= turbo_stream.replace_all '.cart-contents' do %>
+  <%= turbo_frame_tag cart_id(@order), class: 'cart-contents' do %>
+    <% if @order.line_items.empty? %>
+      <%= render 'spree/orders/empty' %>
+    <% else %>
+      <%= render 'spree/orders/cart' %>
     <% end %>
-  <% end %>
 
-  <%= spree_turbo_update_cart(@order) %>
+    <%= render_storefront_partials(:remove_from_cart_partials) %>
+  <% end %>
 <% end %>
+
+<%= spree_turbo_update_cart(@order) %>

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

@@ -1 +1,2 @@
-<%= render_page(current_page_or_preview, product: @product) %>
+<%= render_page(current_page_or_preview, product: @product) %>
+<%= render_storefront_partials(:product_partials) %>

data/app/views/spree/seo/sitemap.xml.erb

@@ -12,8 +12,8 @@
     <% end %>
   <% end %>
 
-  <% cache [storefront_products_scope, current_currency] do %>
-    <% storefront_products_scope.find_each do |product| %>
+  <% cache [current_store.products, current_currency] do %>
+    <% current_store.products.active(current_currency).find_each do |product| %>
       <url>
         <loc><%= spree_storefront_resource_url(product) %></loc>
         <lastmod><%= product.updated_at.strftime('%Y-%m-%d') %></lastmod>

data/app/views/themes/default/spree/account/_order.html.erb

@@ -8,16 +8,16 @@
       <% if order.payment_state == 'void' %>
         <% if order.order_refunded? %>
           <span class="badge-refunded">
-            <%= Spree.t("payment_states.refunded") %>
+            <%= Spree.t("payment_states.refunded").titleize %>
           </span>
         <% else %>
           <span class="badge-void">
-            <%= Spree.t("payment_states.#{order.payment_state}") %>
+            <%= Spree.t("payment_states.#{order.payment_state}").titleize %>
           </span>
         <% end %>
       <% else %>
         <span class="badge-success">
-          <%= Spree.t("payment_states.#{order.payment_state}") %>
+          <%= Spree.t("payment_states.#{order.payment_state}").titleize %>
         </span>
       <% end %>
     <% end %>
@@ -26,11 +26,11 @@
     <% if order.shipment_state %>
       <% if order.shipment_state == 'shipped' %>
         <span class="badge-success">
-          <%= Spree.t("shipment_states.#{order.shipment_state}") %>
+          <%= Spree.t("shipment_states.#{order.shipment_state}").titleize %>
         </span>
       <% else %>
         <span class="badge-<%= order.shipment_state %>">
-          <%= Spree.t("shipment_states.#{order.shipment_state}") %>
+          <%= Spree.t("shipment_states.#{order.shipment_state}").titleize %>
         </span>
       <% end %>
     <% end %>

data/app/views/themes/default/spree/account/addresses/_address.html.erb

@@ -1,10 +1,20 @@
 <li class="p-4 my-4 border border-accent lg:flex justify-between relative" id="<%= dom_id(address) %>">
   <%= render 'spree/shared/address', address: address %>
   <div class="flex gap-6 h-6 lg:h-10 mt-6 lg:mt-0">
-    <%= link_to spree.edit_address_path(address), class: 'flex gap-2 lg:p-2' do %>
-      <%= render 'spree/shared/icons/edit' %>
-      <span class="uppercase text-sm font-semibold tracking-widest"><%= Spree.t(:edit_address) %></span>
-    <% end %>
+    <div data-controller="modal" data-modal-allow-background-close="true">
+      <%= button_tag type: "button", class: 'flex gap-2 lg:p-2', data: { action: "click->modal#open" } do %>
+        <%= render 'spree/shared/icons/edit' %>
+        <span class="uppercase text-sm font-semibold tracking-widest"><%= Spree.t(:edit) %></span>
+      <% end %>
+      <%= turbo_frame_tag "edit_address_modal_#{address.id}",
+            src: spree.edit_address_path(address),
+            loading: :lazy,
+            data: {
+              modal_target: "container", 
+              action: "click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
+            },
+            class: "hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]" %>
+    </div>
     <div
                   data-controller="modal"
                   data-modal-allow-background-close="true"

data/app/views/themes/default/spree/account/addresses/_edit_address_modal.html.erb

@@ -0,0 +1,38 @@
+<div class="bg-white h-[90vh] lg:h-[70vh] w-full lg:w-1/3 flex flex-col overflow-hidden">
+  <%= form_for @address, method: :put, html: { class: "flex flex-col h-full", data: { turbo_frame: "_top" } } do |f| %>
+    <div class="px-8 py-6 border-b shrink-0">
+      <div class="flex justify-between items-center">
+        <h3 class="text-xl lg:text-2xl font-medium lg:font-semibold capitalize">
+          <%= Spree.t(:edit_address) %>
+        </h3>
+        <button data-action="click->modal#close" class="ml-4">
+          <%= render 'spree/shared/icons/close' %>
+          <span class="sr-only"><%= Spree.t(:close) %></span>
+        </button>
+      </div>
+      <%= render 'spree/shared/error_messages', target: @address, class: 'alert-error text-center mt-4 p-2' %>
+    </div>
+    <div class="overflow-y-auto px-8 py-2 grow">
+      <div class="py-4 text-left">
+        <%= render 'spree/addresses/form',
+          address_name: 'address',
+          address_form: f,
+          address_type: 'shipping',
+          address: @address %>
+      </div>
+      <%= label_tag "default_shipping", class: "flex items-center gap-2 text-sm mb-4" do %>
+        <%= check_box_tag "default_shipping", "true", @address.user_default_shipping?, class: 'input-checkbox input-address-default', disabled: @address.user_default_shipping? %>
+        <%= Spree.t('address_book.set_as_default_delivery_address') %>
+      <% end %>
+      <%= label_tag "default_billing", class: "flex items-center gap-2 text-sm mb-4" do %>
+        <%= check_box_tag "default_billing", "true", @address.user_default_billing?, class: 'input-checkbox input-address-default', disabled: @address.user_default_billing? %>
+        <%= Spree.t('address_book.set_as_default_billing_address') %>
+      <% end %>
+    </div>
+    <div class="border-t border-default px-8 py-4 flex justify-end gap-8 shrink-0">
+      <%= button_tag Spree.t(:cancel), class: 'uppercase text-sm font-semibold', data: { action: 'click->modal#close' } %>
+      <%= hidden_field_tag :from_modal, "true" %>
+      <%= f.submit Spree.t(:update), class: 'btn-primary w-48' %>
+    </div>
+  <% end %>
+</div>

data/app/views/themes/default/spree/account/addresses/_new_address_modal.html.erb

@@ -0,0 +1,38 @@
+<div class="bg-white h-[90vh] lg:h-[70vh] w-full lg:w-1/3 flex flex-col overflow-hidden">
+  <%= form_for @address, html: { class: "flex flex-col h-full", data: { turbo_frame: "_top" } } do |f| %>
+    <div class="px-8 py-6 border-b shrink-0">
+      <div class="flex justify-between items-center">
+        <h3 class="text-xl lg:text-2xl font-medium lg:font-semibold capitalize">
+          <%= Spree.t(:add_address) %>
+        </h3>
+        <button data-action="click->modal#close" class="ml-4">
+          <%= render 'spree/shared/icons/close' %>
+          <span class="sr-only"><%= Spree.t(:close) %></span>
+        </button>
+      </div>
+      <%= render 'spree/shared/error_messages', target: @address, class: 'alert-error text-center mt-4 p-2' %>
+    </div>
+    <div class="overflow-y-auto px-8 py-2 grow">
+      <div class="py-4 text-left">
+        <%= render 'spree/addresses/form',
+          address_name: 'address',
+          address_form: f,
+          address_type: 'shipping',
+          address: @address %>
+      </div>
+      <%= label_tag "default_shipping", class: "flex items-center gap-2 text-sm mb-4" do %>
+        <%= check_box_tag "default_shipping", "true", true, class: 'input-checkbox' %>
+        <%= Spree.t('address_book.set_as_default_delivery_address') %>
+      <% end %>
+      <%= label_tag "default_billing", class: "flex items-center gap-2 text-sm mb-4" do %>
+        <%= check_box_tag "default_billing", "true", true, class: 'input-checkbox' %>
+        <%= Spree.t('address_book.set_as_default_billing_address') %>
+      <% end %>
+    </div>
+    <div class="border-t border-default px-8 py-4 flex justify-end gap-8 shrink-0">
+      <%= button_tag Spree.t(:cancel), class: 'uppercase text-sm font-semibold', data: { action: 'click->modal#close' } %>
+      <%= hidden_field_tag :from_modal, "true" %>
+      <%= f.submit Spree.t(:add), class: 'btn-primary w-48', data: { test_id: 'add-address-button' } %>
+    </div>
+  <% end %>
+</div>

data/app/views/themes/default/spree/account/addresses/index.html.erb

@@ -12,14 +12,34 @@
           <%= render partial: 'spree/account/addresses/address', collection: @addresses, cached: ->a {[*spree_base_cache_scope.call(a), try_spree_current_user.ship_address_id, try_spree_current_user.bill_address_id]}, as: :address %>
         </ul>
         <div class="flex">
-          <%= link_to Spree.t(:add_address), spree.new_address_path, class: 'btn-primary block w-full lg:w-auto' %>
+          <div data-controller="modal" data-modal-allow-background-close="true">
+            <%= button_tag Spree.t(:add), type: "button", class: "btn-primary block w-full lg:w-auto", data: { action: "click->modal#open" } %>
+            <%= turbo_frame_tag :new_address_modal, 
+                  src: spree.new_address_path,
+                  loading: :lazy,
+                  data: { 
+                    modal_target: "container", 
+                    action: "click->modal#closeBackground keyup@window->modal#closeWithKeyboard" 
+                  },
+                  class: "hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]" %>
+          </div>
         </div>
       <% else %>
         <div class="text-center py-6">
           <p class="mb-2 font-medium uppercase"><%= Spree.t('storefront.account.no_addresses_title') %></p>
           <p><%= Spree.t('storefront.account.no_addresses_description') %></p>
           <div class="flex mt-8 justify-center">
-            <%= link_to Spree.t(:add), spree.new_address_path, class: 'btn-primary block' %>
+            <div data-controller="modal" data-modal-allow-background-close="true">
+              <%= button_tag Spree.t(:add), type: "button", class: "btn-primary block", data: { action: "click->modal#open" } %>
+              <%= turbo_frame_tag :new_address_modal,
+                    src: spree.new_address_path,
+                    loading: :lazy,
+                    data: { 
+                      modal_target: "container", 
+                      action: "click->modal#closeBackground keyup@window->modal#closeWithKeyboard" 
+                    },
+                    class: "hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]" %>
+            </div>
           </div>
         </div>
       <% end %>

data/app/views/themes/default/spree/checkout/complete.html.erb

@@ -24,7 +24,7 @@
       <div class="mt-3 border-t pt-3">
         <span class="text-sm"><%= Spree.t(:status) %></span>
         <% if @order.payment_state.present? %>
-          <span class="badge-<%= @order.payment_state %>"><%= Spree.t("payment_states.#{@order.payment_state}") %></span>
+          <span class="badge-<%= @order.payment_state %>"><%= Spree.t("payment_states.#{@order.payment_state}").titleize %></span>
         <% else %>
           <span class="badge-pending"><%= Spree.t(:pending) %></span>
         <% end %>

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

@@ -1,5 +1,5 @@
-<%= turbo_frame_tag dom_id(line_item) do %>
-  <li class="cart-line-item flex items-top py-6 px-4 w-full">
+<%= turbo_frame_tag dom_id(line_item), data: { controller: 'reveal' } do %>
+  <li class="cart-line-item flex items-top py-6 px-4 w-full" data-reveal-target="item">
     <div class="line-item-overlay"></div>
       <div class="cart-product-image flex-shrink-0" id="<%= dom_id(line_item) %>-image" data-turbo-permanent>
         <% image = line_item.variant.default_image %>
@@ -14,7 +14,7 @@
           <%= link_to line_item.name, spree_storefront_resource_url(line_item.product), class: 'font-semibold text-text', data: { 'turbo-frame': '_top' } %>
 
           <%= form_for line_item, url: spree.line_item_url(line_item, order_token: line_item.order.token), method: :delete, data: { controller: 'turbo-stream-form' } do |item_form| %>
-            <%= button_tag type: :submit, class: 'remove-line-item-button h-100', data: { action: "click->cart#disableCart turbo-stream-form:submit-end->cart#enableCart" } do %>
+            <%= button_tag type: :submit, class: 'remove-line-item-button h-100', data: { action: "click->reveal#hide click->cart#disableCart" } do %>
               <%= render 'spree/shared/icons/cross', size: 16 %>
             <% end %>
           <% end %>

data/app/views/themes/default/spree/orders/edit.html.erb

@@ -11,6 +11,8 @@
     <% else %>
       <%= render 'spree/orders/cart' %>
     <% end %>
+
+    <%= render_storefront_partials(:cart_partials) %>
   <% end %>
 
 <% if !turbo_frame_request? && !turbo_stream_request? %>

data/app/views/themes/default/spree/page_sections/_featured_product.html.erb

@@ -89,7 +89,7 @@
                           <% if presenter.product %>
                             <div class="absolute flex" data-controller="copy-input">
                               <div class="has-float-label flex flex-col max-w-[200px]">
-                                <%= text_field_tag "product-#{presenter.product.id}-share-link", spree.product_url(presenter.product, host: current_store.url_or_custom_domain), class: 'text-ellipsis text-input border-r-0 !rounded-r-none !rounded-l-md', readonly: true, type: 'text', onclick: 'this.select()', data: { copy_input_target: 'input' } %>
+                                <%= text_field_tag "product-#{presenter.product.id}-share-link", spree.product_url(presenter.product, host: current_store.url), class: 'text-ellipsis text-input border-r-0 !rounded-r-none !rounded-l-md', readonly: true, type: 'text', onclick: 'this.select()', data: { copy_input_target: 'input' } %>
                                 <%= label_tag "product-#{presenter.product.id}-share-link", Spree.t(:link) %>
                               </div>
                               <button

data/app/views/themes/default/spree/page_sections/_featured_taxon.html.erb

@@ -5,7 +5,7 @@
                       when 'medium' then 'text-lg lg:text-xl font-medium'
                       when 'large' then 'text-xl lg:text-2xl font-medium'
                       end %>
-    <% if section.taxon&.page_builder_image&.attached? && section.preferred_show_taxon_image %>
+    <% if section.taxon&.image&.attached? && section.preferred_show_taxon_image %>
       <% desktop_slides_amount = 2.5 %>
       <% section_with_image = true %>
       <% arrows_on_top = false %>
@@ -47,7 +47,7 @@
           <% if section_with_image %>
             <div class='lg:col-span-5'>
               <%= link_to spree.nested_taxons_path(section.taxon), data: { turbo_frame: "_top" } do %>
-                <%= spree_image_tag(section.taxon.page_builder_image, height: 500, width: 500, class: 'h-full w-full object-cover object-center', loading: :lazy) %>
+                <%= spree_image_tag(section.taxon.image, height: 500, width: 500, class: 'h-full w-full object-cover object-center', loading: :lazy) %>
               <% end %>
             </div>
           <% end %>

data/app/views/themes/default/spree/page_sections/_featured_taxons.html.erb

@@ -12,9 +12,9 @@
     <div class="gap-6 grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 xl:gap-x-8 mb-7 hidden md:grid">
       <% section.links.each do |link| %>
         <%= page_builder_link_to link, title: link.label, class: 'group block overflow-hidden', target: link.open_in_new_tab.presence && '_blank' do %>
-          <% if link.linkable.page_builder_image&.attached? && link.linkable.page_builder_image&.variable? %>
+          <% if link.linkable.image&.attached? && link.linkable.image&.variable? %>
             <div class="flex space-y-2 flex-col">
-              <%= spree_image_tag(link.linkable.page_builder_image, height: 300, width: 300, class: 'h-full w-full object-cover object-center group-hover:opacity-75 rounded-md bg-gray-200', loading: :lazy, alt: link.label) %>
+              <%= spree_image_tag(link.linkable.image, height: 300, width: 300, class: 'h-full w-full object-cover object-center group-hover:opacity-75 rounded-md bg-gray-200', loading: :lazy, alt: link.label) %>
               <span><%= link.label %></span>
             </div>
           <% else %>
@@ -47,9 +47,10 @@
           <% section.links.each do |link| %>
             <div class='swiper-slide w-[200px]'>
               <%= page_builder_link_to link, title: link.label, class: 'group block overflow-hidden', target: link.open_in_new_tab.presence && '_blank' do %>
-                <% if link.linkable.page_builder_image.attached? %>
+                <% if link.linkable.image&.attached? && link.linkable.image&.variable? %>
                   <div class="flex space-y-2 flex-col">
-                    <%= spree_image_tag(link.linkable.page_builder_image, height: 200, width: 200, class: 'h-full w-full object-cover object-center group-hover:opacity-75 rounded-md bg-gray-200', loading: :lazy, alt: link.label) %>
+                    <%= spree_image_tag(link.linkable.image, height: 200, width: 200, class: 'h-full w-full object-cover object-center group-hover:opacity-75 rounded-md bg-gray-200', loading: :lazy, alt: link.label) %>
+                    <span><%= link.label %></span>
                   </div>
                 <% else %>
                   <div class="aspect-1 w-full group-hover:bg-gray-100 bg-gray-200 flex items-center justify-center relative">

data/app/views/themes/default/spree/policies/show.html.erb

@@ -1,15 +1,11 @@
 <div class="page-container py-12">
   <h1 class="text-2xl tracking-tight text-center lg:text-left mb-3 uppercase">
-    <%= Spree.t(params[:id]) %>
+    <%= params[:id].titleize %>
   </h1>
-
-  <% if @policy.present? %>
-    <p class="mb-8 text-center lg:text-left">
-      <%= Spree.t("storefront.policies.last_update_at", date: l(@policy.updated_at.to_date)) %>
-    </p>
-
-    <div class="mb-5">
-      <%= @policy&.to_s %>
-    </div>
-  <% end %>
+  <p class="mb-8 text-center lg:text-left">
+    Last update: <%= @policy&.updated_at&.strftime('%d/%m/%Y') %>
+  </p>
+  <div class="mb-5">
+    <%= @policy&.to_s %>
+  </div>
 </div>

data/app/views/themes/default/spree/posts/_post.html.erb

@@ -1,22 +1,13 @@
-<div class="swiper-slide w-full">
-  <div id="<%= dom_id(post) %>">
-    <%= link_to spree.post_path(post), class: 'block hover:opacity-70 transition-opacity', data: { turbo_frame: '_top' } do %>
-      <div class="h-[200px] w-full bg-gray-100">
-        <% if post.image.attached? && post.image.variable? %>
-          <%= spree_image_tag(
-            post.image,
-            width: 400,
-            height: 200,
-            class: "h-full w-full object-cover object-center",
-            loading: :lazy,
-            alt: post.title,
-          ) %>
-        <% end %>
-      </div>
+<div id="<%= dom_id(post) %>">
+  <%= link_to spree.post_path(post), class: 'block hover:opacity-70 transition-opacity' do %>
+    <div class="h-[200px] w-full bg-gray-100">
+      <% if post.image.attached? && post.image.variable? %>
+        <%= spree_image_tag(post.image, width: 400, height: 200, class: 'h-full w-full object-cover object-center', loading: :lazy, alt: post.title) %>
+      <% end %>
+    </div>
 
-      <h1 class="uppercase text-lg font-medium mt-4"><%= post.title %></h1>
-      <div class="mt-2 text-sm"><%= local_time(post.published_at, "%B %e, %Y") %></div>
-      <div class="mt-4"><%= post.shortened_description %></div>
-    <% end %>
-  </div>
+    <h1 class="uppercase text-lg font-medium mt-4"><%= post.title %></h1>
+    <div class="mt-2 text-sm"><%= local_time(post.published_at, '%B %e, %Y') %></div>
+    <div class="mt-4"><%= post.shortened_description %></div>
+  <% end %>
 </div>

data/app/views/themes/default/spree/products/_add_to_cart_button.html.erb

@@ -16,14 +16,17 @@ variant_not_available = selected_variant.nil? ||
   <%= button_tag type: (variant_not_available || not_all_options_selected ? 'button' : 'submit'),
                   class: 'btn-primary btn-icon w-full h-12 add-to-cart-button',
                   data: {
-                    action: ('modal#open' if variant_not_available),
+                    action: [
+                      'click->product-form#showNotSelectedOptions',
+                      ('click->modal#open' if variant_not_available)
+                    ].compact.join(' '),
                     product_form_target: 'submit'
                   },
                   disabled: product.price_in(current_currency).zero? do %>
     <% if not_selected_options.size == 1 %>
-      <span><%= Spree.t('storefront.variant_picker.please_choose', option_type: not_selected_options[0].presentation) %></span>
+      <span><%= Spree.t(:please_select, option: not_selected_options[0].presentation) %></span>
     <% elsif not_all_options_selected %>
-      <span><%= Spree.t('storefront.variant_picker.please_choose_all_options') %></span>
+      <span><%= Spree.t(:please_select_all_options) %></span>
     <% elsif variant_not_available %>
       <span><%= Spree.t(:notify_me_when_available) %></span>
       <%= render 'spree/shared/icons/bell' %>
@@ -38,14 +41,17 @@ variant_not_available = selected_variant.nil? ||
     <%= button_tag type: (variant_not_available || not_all_options_selected ? 'button' : 'submit'),
                   class: 'btn-primary btn-icon w-full h-12 add-to-cart-button',
                   data: {
-                    action: ('modal#open' if variant_not_available),
+                    action: [
+                      'click->product-form#showNotSelectedOptions',
+                      ('click->modal#open' if variant_not_available)
+                    ].compact.join(' '),
                     product_form_target: 'submit'
                   },
                   disabled: product.price_in(current_currency).zero? do %>
       <% if not_selected_options.size == 1 %>
-        <span><%= Spree.t('storefront.variant_picker.please_choose', option_type: not_selected_options[0].presentation) %></span>
+        <span><%= Spree.t(:please_select, option: not_selected_options[0].presentation) %></span>
       <% elsif not_all_options_selected %>
-        <span><%= Spree.t('storefront.variant_picker.please_choose_all_options') %></span>
+        <span><%= Spree.t(:please_select_all_options) %></span>
       <% elsif variant_not_available %>
         <span><%= Spree.t(:notify_me_when_available) %></span>
         <%= render 'spree/shared/icons/bell' %>

data/app/views/themes/default/spree/products/_details.html.erb

@@ -39,7 +39,7 @@
       </div>
     <% end %>
 
-    <% product_properties(product).each do |product_property| %>
+    <% product.product_properties.joins(:property).merge(Spree::Property.available_on_front_end).sort_by_property_position.each do |product_property| %>
       <div class="product-property py-4 border-b border-default">
 
         <%= link_to "#property_#{product_property.id}", class: 'text-sm uppercase tracking-widest inline-flex w-full justify-between !border-b-transparent', data: { action: 'accordion#toggle' } do %>

data/app/views/themes/default/spree/products/_json_ld.html.erb

@@ -4,7 +4,7 @@
     "@context": "https://schema.org/",
     "@type": "Product",
     "name": <%= product.name.to_json.html_safe %>,
-    "url": <%= spree.product_url(product, host: current_store.url_or_custom_domain).to_json.html_safe %>,
+    "url": <%= spree.product_url(product).to_json.html_safe %>,
   <% if product.featured_image %>
     "image": [
       <%= spree_image_url(product.featured_image, width: 630, height: 630).to_json.html_safe %>

data/app/views/themes/default/spree/products/_json_ld_variant.html.erb

@@ -6,5 +6,5 @@
   "availability": "http://schema.org/<%= variant.available? ? 'InStock' : 'OutOfStock' %>",
   "price": <%= variant.amount_in(current_currency).to_json.html_safe %>,
   "priceCurrency": <%= current_currency.to_json.html_safe %>,
-  "url": <%= spree.product_url(product, variant_id: variant.id, host: current_store.url_or_custom_domain).to_json.html_safe %>
+  "url": <%= spree.product_url(product, variant_id: variant.id).to_json.html_safe %>
 }

data/app/views/themes/default/spree/products/_media_gallery.html.erb

@@ -85,7 +85,8 @@
       <div id='pinch-to-zoom' class='fixed top-0 left-0 p-4 bg-background z-50 flex justify-center items-center flex-col'>
         <div class='w-14 h-14'><%= render 'spree/shared/icons/pinch' %></div>
         <div class='text-sm uppercase pt-4 px-5 text-center !leading-tight'>
-          <%= Spree.t("storefront.products.pinch_to_zoom_html") %>
+          Pinch to <br>
+          zoom
         </div>
       </div>
     <% end %>

data/app/views/themes/default/spree/products/filters/_availability.html.erb

@@ -4,7 +4,7 @@
   data-accordion-close-others-value="false">
   <% availability_filter_opened = permitted_products_params.dig(:filter, :purchasable).present? || permitted_products_params.dig(:filter, :out_of_stock).present? %>
   <%= link_to "#availability_filter", class: "cursor-pointer uppercase flex items-center justify-between h-10 px-4 lg:px-10 text-sm tracking-widest focus:outline-none transition duration-150 ease-in-out #{'st-accordion__icon--opened' if availability_filter_opened}", data: { action: 'accordion#toggle:prevent' } do %>
-    <%= Spree.t(:availability).capitalize %>
+    <%= Spree.t(:availability) %>
     <%= render 'spree/shared/icons/chevron_down' %>
   <% end %>
   <div class='st-accordion__content' data-accordion-id='availability_filter'>

data/app/views/themes/default/spree/products/filters/_price.html.erb

@@ -16,15 +16,15 @@
     data-no-ui-slider-range-value="[<%= filter_price_range[:min].floor %>,<%= filter_price_range[:max].ceil %>]">
     <div class="flex justify-between gap-6 px-4 lg:px-10 lg:text-sm">
       <div class="relative w-1/2">
-        <%= f.number_field filter_price_range[:min].floor, class: "pl-16 text-right without-arrows w-full peer focus:border-primary focus:ring-primary", inputmode: "numeric", name: "filter[min_price]", data: { no_ui_slider_target: "minInput" }, id: "price_from", value: params.dig(:filter, :min_price).present? ? min_price_value.to_i : nil, placeholder: filter_price_range[:min].floor %>
+        <%= f.number_field filter_price_range[:min].floor, class: "pl-16 without-arrows w-full peer focus:border-primary focus:ring-primary", inputmode: "numeric", name: "filter[min_price]", data: { no_ui_slider_target: "minInput" }, id: "price_from", value: params.dig(:filter, :min_price).present? ? min_price_value.to_i : nil, placeholder: filter_price_range[:min].floor %>
         <label class="absolute left-0 top-0 flex pl-3 items-center h-full text-input-text peer-placeholder-shown:opacity-50" for="price_from">
-          <%= Spree.t(:from) %> <%= currency_symbol(current_currency) %>
+          from <%= currency_symbol(current_currency) %>
         </label>
       </div>
       <div class="relative w-1/2">
-        <%= f.number_field filter_price_range[:max].ceil, class: "pl-[2.75rem] text-right without-arrows w-full peer focus:border-primary focus:ring-primary", placeholder: filter_price_range[:max].ceil, inputmode: "numeric", name: "filter[max_price]", data: { no_ui_slider_target: "maxInput" }, id: "price_to", value: params.dig(:filter, :max_price).present? ? max_price_value.to_i : nil %>
+        <%= f.number_field filter_price_range[:max].ceil, class: "pl-[2.75rem] without-arrows w-full peer focus:border-primary focus:ring-primary", placeholder: filter_price_range[:max].ceil, inputmode: "numeric", name: "filter[max_price]", data: { no_ui_slider_target: "maxInput" }, id: "price_to", value: params.dig(:filter, :max_price).present? ? max_price_value.to_i : nil %>
         <label class="absolute left-0 top-0 flex pl-3 items-center h-full text-input-text peer-placeholder-shown:opacity-50" for="price_to">
-          <%= Spree.t(:to) %> <%= currency_symbol(current_currency) %>
+          to <%= currency_symbol(current_currency) %>
         </label>
       </div>
     </div>

data/app/views/themes/default/spree/products/filters/_taxons.erb

@@ -5,7 +5,7 @@
     class="st-accordion"
     data-controller='accordion'
     data-accordion-close-others-value="false">
-    <%= link_to "#taxonomy_filter_#{taxonomy.id}", class: "cursor-pointer uppercase flex items-center justify-between h-10 px-4 lg:px-10 text-sm tracking-widest focus:outline-none transition duration-150 ease-in-out #{'st-accordion__icon--opened' if params[:filter].nil? || current_taxon.present? || permitted_products_params.dig(:filter, :taxon_ids)&.present?}", data: { action: 'accordion#toggle:prevent' } do %>
+    <%= link_to "#taxonomy_filter_#{taxonomy.id}", class: "cursor-pointer uppercase flex items-center justify-between h-10 px-4 lg:px-10 text-sm tracking-widest focus:outline-none transition duration-150 ease-in-out #{'st-accordion__icon--opened' if params[:filter].nil? || current_taxon.present? || permitted_products_params.dig(:filter, :taxonomy_ids, taxonomy.id.to_s, :taxon_ids).present?}", data: { action: 'accordion#toggle:prevent' } do %>
       <%= taxonomy.name.singularize %>
       <%= render 'spree/shared/icons/chevron_down' %>
     <% end %>
@@ -27,10 +27,10 @@
         <% first_taxons.each do |taxon| %>
           <li>
             <%= f.label "filter_taxon_#{taxon.id}", class: "flex items-center gap-2 cursor-pointer group text-sm h-10", data: { searchable_list_target: "item", text: taxon.name } do %>
-              <%= f.check_box "filter[taxon_ids][]",
+              <%= f.check_box "filter[taxonomy_ids][#{taxonomy.id}][taxon_ids][]",
                 {
                   id: "filter_taxon_#{taxon.id}",
-                  checked: permitted_products_params.dig(:filter, :taxon_ids)&.include?(taxon.id.to_s),
+                  checked: permitted_products_params.dig(:filter, :taxonomy_ids, taxonomy.id.to_s, :taxon_ids)&.include?(taxon.id.to_s),
                   class: "input-checkbox group-focus-within:outline"
                 },
                 taxon.id,
@@ -49,10 +49,10 @@
           <% rest_of_the_taxons.each do |taxon| %>
             <li class="px-4 lg:px-10">
               <%= f.label "filter_taxon_#{taxon.id}", class: "flex items-center gap-2 cursor-pointer group text-sm h-10", data: { searchable_list_target: "item", text: taxon.name } do %>
-                <%= f.check_box "filter[taxon_ids][]",
+                <%= f.check_box "filter[taxonomy_ids][#{taxonomy.id}][taxon_ids][]",
                   {
                     id: "filter_taxon_#{taxon.id}",
-                    checked: permitted_products_params.dig(:filter, :taxon_ids)&.include?(taxon.id.to_s),
+                    checked: permitted_products_params.dig(:filter, :taxonomy_ids, taxonomy.id.to_s, :taxon_ids)&.include?(taxon.id.to_s),
                     class: "input-checkbox group-focus-within:outline"
                   },
                   taxon.id,