spree_storefront 5.0.0.rc1

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

@@ -0,0 +1,62 @@
+<% image_height ||= nil %>
+<% image_width ||= theme_setting('product_listing_image_width') %>
+<% selected_variant ||= product.first_or_default_variant(current_currency) %>
+
+<div class="swiper-slide w-full">
+  <div
+    class="product-card flex h-full flex-col w-full gap-2 relative"
+    data-controller="plp-variant-picker"
+    id="product-card-<%= product&.id %>">
+    <%= link_to spree.product_path(product), id: "product-#{product&.id}", class: "group w-full flex flex-col", data: { turbo_frame: "_top", "plp-variant-picker-target": "link" } do %>
+      <div
+        class="mb-3 relative w-full product-card-featured-image"
+        <% if image_height %>
+        style="min-height: <%= image_height %>px;"
+        <% end %>>
+        <div class="overflow-hidden relative">
+          <div data-plp-variant-picker-target="featuredImageContainer" class="h-full">
+            <%= render 'spree/products/featured_image',
+              object: product,
+              height: image_height,
+              width: image_width %>
+          </div>
+        </div>
+        <%= render 'spree/products/label', product: product %>
+      </div>
+      <div class="product-card-inner">
+        <% if product.brand_name.present? %>
+          <h3 class="text-xs font-semibold uppercase inline-block product-card-brand">
+            <%= product.brand_name %>
+          </h3>
+        <% end %>
+        <h3 class="line-clamp-1 product-card-title">
+          <% if product %>
+            <%= product.name %>
+          <% else %>
+            <div class="grid grid-cols-3 gap-4">
+              <div class="h-5 bg-accent rounded col-span-2"></div>
+            </div>
+          <% end %>
+        </h3>
+
+        <% if product %>
+          <div data-plp-variant-picker-target="priceContainer">
+            <%= render 'spree/products/price',
+              product: product,
+              selected_variant: selected_variant,
+              use_variant: false,
+              price_class: "mt-2 font-light product-card-price" %>
+          </div>
+        <% else %>
+          <div class="mt-2 grid grid-cols-3 gap-4">
+            <div class="h-7 bg-accent rounded col-span-1"></div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+    <div class="absolute right-1 top-1 z-10" data-plp-variant-picker-target="addToWishlist">
+      <%= render 'spree/products/add_to_wishlist', variant: product.first_or_default_variant(current_currency) if product %>
+    </div>
+    <%= render 'spree/products/color_swatches', product: product if product && (defined?(show_variant_picker) ? show_variant_picker : true) %>
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+<% selected_variant ||= nil %>
+<p class="quantity-selector-label text-sm tracking-widest uppercase py-2"><%= Spree.t(:quantity) %></p>
+<div class="inline-block">
+  <div class="quantity-picker" data-controller="quantity-picker">
+    <%= button_tag class: 'decrease-quantity',
+                     type: 'button',
+                     data: { action: 'click->quantity-picker#decrease',
+                            'quantity-picker-target': 'decrease' } do %>
+      <%= render 'spree/shared/icons/minus' %>
+    <% end %>
+    <%= number_field_tag :quantity, 1,
+                          min: 1,
+                          max: selected_variant&.backorderable? ? nil : selected_variant&.total_on_hand,
+                          class: 'quantity-input',
+                          'aria-label': 'Quantity',
+                          data: { 'quantity-picker-target': 'quantity' } %>
+    <%= button_tag class: 'increase-quantity',
+                     type: 'button',
+                     data: { action: 'click->quantity-picker#increase',
+                            'quantity-picker-target': 'increase' } do %>
+      <%= render 'spree/shared/icons/plus' %>
+    <% end %>
+  </div>
+</div>
+<%= hidden_field_tag :variant_id, selected_variant&.id %>
+<% if selected_variant && !selected_variant.backorderable? %>
+  <% if selected_variant.total_on_hand.between?(1, 4) %>
+    <p class="text-red-500 text-center text-sm mt-1" style="width: 117px">
+      <%= Spree.t(:only_left, count: selected_variant.total_on_hand) %>
+    </p>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,22 @@
+<div
+  data-modal-target="container"
+  data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
+  class="hidden animate-fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]"
+  style="animation-duration: 150ms;">
+  <div class="w-full lg:w-[800px] relative h-[100dvh] lg:h-auto lg:max-h-screen">
+    <div class="mx-0 bg-background">
+      <div class="px-8 py-6">
+        <div class="flex justify-between uppercase mb-4">
+          <%= Spree.t(:returns_policy) %>
+          <button data-action="click->modal#close">
+            <%= render 'spree/shared/icons/close' %>
+            <span class="sr-only"><%= Spree.t(:close) %></span>
+          </button>
+        </div>
+        <div class="text-sm overflow-auto">
+          <%= returns_policy %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+<% unless storefront_products.last_page? %>
+  <%= turbo_frame_tag "next_page", src: url_for(params.to_unsafe_h.merge(page: storefront_products.next_page, format: :turbo_stream)), class: "block relative w-full", data: { controller: "infinite-scroll", infinite_scroll_offset_value: "1350px" }, loading: "lazy" do %>
+    <span class="flex justify-center gap-2 items-center py-4 left-0 w-full h-full">
+        <%= render 'spree/shared/icons/spinner' %>
+      <%= Spree.t(:loading) %>...
+    </span>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,45 @@
+<div data-controller="dropdown" data-action="click->dropdown#toggle click@window->dropdown#hide">
+  <div id="dropdown-button" class="relative inline-block">
+    <%= button_tag type: 'button', role: 'button', tabindex: '0', data: { dropdown_target: 'button', test_id: 'sort-button' }, class: 'flex gap-2 text-sm items-center py-3' do %>
+      <span class='hidden lg:inline opacity-50'><%= Spree.t(:sort_by) %>:</span>
+      &nbsp;
+      <span class="font-semibold">
+        <% taxons_sort_options.each do |option| %>
+          <% if option[:value] == products_sort %>
+            <%= option[:name] %>
+          <% end %>
+        <% end %>
+      </span>
+
+      <%= render 'spree/shared/icons/chevron_down' %>
+    <% end %>
+    <div data-dropdown-target="menu"
+         data-transition-enter="transition ease-out"
+         data-transition-enter-from="opacity-0 translate-y-1"
+         data-transition-enter-to="opacity-100 translate-y-0"
+         data-transition-leave="transition ease-in"
+         data-transition-leave-from="opacity-100 translate-y-0"
+         data-transition-leave-to="opacity-0 translate-y-1"
+         class="hidden absolute top-7 right-0 z-[9999] mt-5 flex w-screen max-w-max">
+      <div class="bg-background border-default border overflow-hidden w-72">
+        <%= form_with url: canonical_path, method: :get, data: { controller: 'auto-submit' } do |f| %>
+          <%= f.hidden_field :q, value: params[:q] %>
+          <%= filter_form_fields %>
+          <% taxons_sort_options.each do |option| %>
+            <%= f.radio_button :sort_by, option[:value],
+                               id: "sort-#{option[:value]}",
+                               class: 'hidden',
+                               data: { action: 'change->auto-submit#submit' },
+                               checked: option[:value] == products_sort %>
+            <%= f.label "sort-#{option[:value]}", class: 'text-sm cursor-pointer flex items-center justify-between px-4 py-2.5 hover:bg-accent focus:outline-none focus:bg-accent transition ease-in-out' do %>
+              <%= option[:name] %>
+              <% if option[:value] == products_sort %>
+                <%= render 'spree/shared/icons/check' %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,85 @@
+<% desktop_slides ||= 4 %>
+<% slides_per_view ||= desktop_slides %>
+<% arrows_on_top ||= false %>
+<% pagination ||= 'bottom' %>
+<% layout ||= 'swiper' %>
+<% heading ||= nil %>
+
+<% heading_size = case section.try(:preferred_heading_size)
+  when 'small'
+    'text-base font-medium'
+  when 'medium'
+    'text-lg lg:text-xl font-medium'
+  when 'large'
+    'text-xl lg:text-2xl font-medium'
+  else
+    heading_class || ''
+  end %>
+
+<% heading_alignment = case section.try(:preferred_heading_alignment)
+  when 'left'
+    'text-left'
+  when 'center'
+    'text-center'
+  when 'right'
+    'text-right'
+  else
+    ''
+  end %>
+
+<% if heading.present? %>
+  <h3 class='<%= "#{heading_size} font-medium uppercase #{heading_alignment}" %> pb-8'>
+    <%= heading %>
+  </h3>
+<% end %>
+
+<div class='flex h-full relative'>
+  <div
+    class='swiper-container overflow-hidden flex-1 pr-8 lg:pr-0 -mx-4 lg:mx-0 flex flex-col <%= pagination == 'bottom' ? 'lg:flex-col lg:justify-between lg:h-full' : 'lg:flex-col-reverse' %>'
+    data-controller='carousel'
+    data-carousel-options-value='{
+      "slidesPerView": 2,
+      "centeredSlides": false,
+      "spaceBetween": 16,
+      "grabCursor": true,
+      "breakpoints": {
+        "768": {
+          "slidesPerView": <%= slides_per_view %>,
+          "spaceBetween": 24
+        }
+      },
+      "navigation": {
+        "nextEl": ".swiper-custom-button-next-<%= section.id %>",
+        "prevEl": ".swiper-custom-button-prev-<%= section.id %>"
+      }
+    }'>
+    <div class='swiper-wrapper px-4 lg:px-0 h-auto'>
+      <%= render 'spree/shared/products', products: products %>
+    </div>
+    <div class='-mr-8 lg:mr-0 flex <%= arrows_on_top ? 'hidden' : '' %> <%= pagination == 'bottom' ? 'justify-end lg:mt-6' : 'justify-between lg:mb-8 items-end' %> <%= section.try(:heading_alignment) == 'right' && pagination != 'bottom' ? 'lg:flex-row-reverse' : '' %>'>
+      <div class="mt-8 mx-4 lg:m-0 lg:shrink-0 gap-2 w-full flex <%= arrows_on_top ? 'md:hidden' : '' %> items-center <%= section.try(:layout) == 'swiper' && section.try(:show_more_button) ? 'justify-between' : 'lg:w-auto justify-end' %>">
+        <% if section.try(:preferred_layout) == 'swiper' && section.try(:preferred_show_more_button) %>
+          <%= link_to section.try(:preferred_show_all_button_link), class: "#{section.try(:preferred_button_style) == 'primary' ? 'btn-primary' : 'btn-secondary'} w-full lg:w-72 block text-center", data: { turbo_frame: '_top' } do %>
+            <%= section.button_text %>
+          <% end %>
+        <% end %>
+        <% unless arrows_on_top %>
+          <div class='justify-center items-center gap-4 md:flex hidden'>
+            <%= button_tag class: "swiper-custom-button-prev-#{section.id} disabled:opacity-50" do %>
+              <%= render 'spree/shared/icons/chevron' %>
+            <% end %>
+            <%= button_tag class: "swiper-custom-button-next-#{section.id} disabled:opacity-50" do %>
+              <%= render 'spree/shared/icons/chevron_right' %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <%= button_tag class: "absolute p-2 bg-white rounded-full z-10 border border-accent left-0 disabled:hidden hover:border-primary ml-2 lg:ml-0 swiper-custom-button-prev-#{section.id} block #{arrows_on_top ? '' : 'md:hidden'} top-[--top] lg:top-[--desktop-top]", aria: { hidden: true }, style: "--top: calc(#{theme_setting('product_listing_image_height_mobile')}px/2); --desktop-top: calc(#{theme_setting('product_listing_image_height')}px/2); transform: translate(-50%, -50%);" do %>
+      <%= render 'spree/shared/icons/chevron' %>
+    <% end %>
+    <%= button_tag class: "absolute p-2 bg-white rounded-full z-10 border border-accent right-0 disabled:hidden hover:border-primary mr-2 lg:mr-0 swiper-custom-button-next-#{section.id} block #{arrows_on_top ? '' : 'md:hidden'} top-[--top] lg:top-[--desktop-top]", aria: { hidden: true }, style: "--top: calc(#{theme_setting('product_listing_image_height_mobile')}px/2); --desktop-top: calc(#{theme_setting('product_listing_image_height')}px/2); transform: translate(50%, -50%);" do %>
+      <%= render 'spree/shared/icons/chevron_right' %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,71 @@
+<% selected_option =
+  product_selected_option_for_option(
+    option_type,
+    product: product,
+    selected_variant: selected_variant,
+    options_param_name: options_param_name,
+  ) %>
+<% variants_available_arr =
+  product.variants.map do |v|
+    v.purchasable? && v.price_in(current_currency).amount.present?
+  end %>
+<% variants_option1_arr = product.variants.map { |v| v.options.first&.dig(:value) } %>
+<% variants_option2_arr =
+  product.variants.map { |v| v.options.second&.dig(:value) } %>
+<% variants_option3_arr = product.variants.map { |v| v.options.third&.dig(:value) } %>
+<% product_option_values_for_option(option_type, product: product).each_with_index do |value, index| %>
+  <% option_disabled = true %>
+  <% variants_option1_arr.each_with_index do |option1_name, index| %>
+    <% case position %>
+    <% when 0 %>
+      <% if option1_name == value.name && variants_available_arr[index] %>
+        <% option_disabled = false %>
+      <% end %>
+    <% when 1 %>
+      <% if product_selected_option_for_option(product.option_types[0], product: product, options_param_name: options_param_name)&.name == option1_name && variants_option2_arr[index] == value.name && variants_available_arr[index] %>
+        <% option_disabled = false %>
+      <% end %>
+    <% when 2 %>
+      <% if product_selected_option_for_option(product.option_types[0], product: product, options_param_name: options_param_name)&.name == option1_name && variants_option2_arr[index] == product_selected_option_for_option(product.option_types[1], product: product, options_param_name: options_param_name)&.name && variants_option3_arr[index] == value.name && variants_available_arr[index] %>
+        <% option_disabled = false %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if option_type.color? %>
+    <li>
+      <label class="cursor-pointer">
+        <%= radio_button_tag option_type.presentation, value.name, selected_option == value,
+          name: option_type.presentation,
+          id: "product-option-#{product.id}-#{position}-#{index}",
+          class: "sr-only peer color-input",
+          data: {
+            action: 'change->product-form#updateVariant',
+            product_form_target: 'option',
+            option_id: option_type.id
+          }
+        %>
+        <%= render 'spree/products/color_picker', disabled: option_disabled %>
+      </label>
+    </li>
+  <% else %>
+    <%= radio_button_tag option_type.presentation, value.name, selected_option == value,
+      class: class_names('hidden', {'peer/unavailable' => selected_variant.nil?, 'peer/available' => selected_variant.present?}),
+      data: {
+        action: 'change->product-form#updateVariant',
+        product_form_target: 'option',
+        option_id: option_type.id
+      },
+      name: option_type.presentation,
+      id: "product-option-#{product.id}-#{position}-#{index}"
+    %>
+    <label
+      for='product-option-<%= product.id %>-<%= position %>-<%= index %>'
+      class='text-sm cursor-pointer flex items-center justify-between px-4 py-2.5 hover:bg-accent focus:outline-none focus:bg-accent transition duration-150 ease-in-out <%= option_disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent" %>'
+    >
+      <p><%=h value.presentation %></p>
+      <% if selected_option == value %>
+        <%= render 'spree/shared/icons/check', size: 18 %>
+      <% end %>
+    </label>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,50 @@
+<% options_param_name ||= :options %>
+<% if product.has_variants? %>
+  <div id='product-variant-picker' class="flex flex-col gap-y-4 mb-4 mt-2">
+    <% product.option_types.each_with_index do |option_type, index| %>
+      <% selected_option = product_selected_option_for_option(option_type, product: product, selected_variant: selected_variant, options_param_name: options_param_name) %>
+      <% if option_type.color? %>
+        <%= option_type_colors_preview_styles(option_type).html_safe %>
+        <fieldset data-option-id="<%= option_type.id %>" class="flex flex-col gap-y-2">
+          <span class="text-sm leading-4 uppercase tracking-widest"><%= option_type.presentation %>: <%= selected_option.presentation %></span>
+          <ul class="flex items-center flex-wrap gap-1">
+            <%= render 'spree/products/variant_options', product: product, option_type: option_type, position: index, selected_variant: selected_variant, options_param_name: options_param_name %>
+          </ul>
+        </fieldset>
+      <% else %>
+        <fieldset data-option-id="<%= option_type.id %>">
+          <div data-controller="dropdown" class="relative mb-2">
+            <div class="flex items-center justify-between">
+              <button
+                data-action="click->dropdown#toggle click@window->dropdown#hide"
+                type='button'
+                class='text-sm uppercase tracking-widest flex gap-2 items-center border border-default py-2 px-4 rounded-input dropdown-button'
+                data-dropdown-target="button">
+                <legend class="mr-2" id="option-<%= option_type.id %>-value">
+                  <% if selected_option %>
+                    <%= option_type.presentation %>: <span class="option-value-text"><%= selected_option.presentation %></span>
+                  <% else %>
+                    <%= Spree.t('storefront.variant_picker.please_choose', option_type: option_type.presentation) %>
+                  <% end %>
+                </legend>
+                <% render 'spree/shared/icons/chevron_down' %>
+              </button>
+            </div>
+            <div data-dropdown-target="menu"
+                data-transition-enter="transition ease-out"
+                data-transition-enter-from="opacity-0 translate-y-1"
+                data-transition-enter-to="opacity-100 translate-y-0"
+                data-transition-leave="transition ease-in"
+                data-transition-leave-from="opacity-100 translate-y-0"
+                data-transition-leave-to="opacity-0 translate-y-1"
+                class="hidden absolute top-11 left-0 z-[9999] flex w-screen max-w-max shadow-xs">
+              <div class="bg-background border-default border overflow-hidden w-72">
+                <%= render 'spree/products/variant_options', product: product, option_type: option_type, position: index, selected_variant: selected_variant, options_param_name: options_param_name %>
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,32 @@
+<div
+  class="st-accordion"
+  data-controller='accordion'
+  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) %>
+    <%= render 'spree/shared/icons/chevron_down' %>
+  <% end %>
+  <div class='st-accordion__content' data-accordion-id='availability_filter'>
+    <ul class="flex flex-col px-4 lg:px-10">
+      <li>
+        <label class="flex items-center gap-2 cursor-pointer group text-sm h-10">
+          <%= f.check_box "filter[purchasable]", { checked: permitted_products_params.dig(:filter, :purchasable).present?, class: "input-checkbox group-focus-within:outline", id: nil }, true, nil %>
+          <%= Spree.t(:in_stock) %>
+          <span class="opacity-50">
+            (<%= filter_stock_count[:in_stock] %>)
+          </span>
+        </label>
+      </li>
+      <li>
+        <label class="flex items-center gap-2 cursor-pointer group text-sm h-10">
+          <%= f.check_box "filter[out_of_stock]", { checked: permitted_products_params.dig(:filter, :out_of_stock).present?, class: "input-checkbox group-focus-within:outline", id: nil }, true, nil %>
+          <%= Spree.t(:out_of_stock) %>
+          <span class="opacity-50">
+            (<%= filter_stock_count[:out_of_stock] %>)
+          </span>
+        </label>
+      </li>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+<% filter_values = filter_values_for_filter(filter) %>
+
+<% if filter_values.any? %>
+  <div class="st-accordion" data-controller='accordion' data-accordion-close-others-value="false">
+    <%= link_to "#colors_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 params.dig(:filter, :options, :color).present?}", data: { action: 'accordion#toggle:prevent' } do %>
+      <%= Spree.t(:colors) %>
+      <%= render 'spree/shared/icons/chevron_down' %>
+    <% end %>
+    <div class='st-accordion__content' data-accordion-id='colors_filter'>
+      <%= Spree::ColorsPreviewStylesPresenter.new(filter_values.map { |v| v.name }).to_s.html_safe %>
+      <ul class="flex items-center flex-wrap gap-2 px-4 lg:px-10">
+        <% filter_values.each do |value| %>
+          <li>
+            <label class="cursor-pointer">
+              <%= f.check_box 'filter[options][color][]', { class: 'sr-only peer color-input', id: nil, checked: params.dig(:filter, :options, :color)&.include?(value.name), value: value.name }, value.name, nil %>
+              <%= render 'spree/products/color_picker', color: value.presentation, with_name: true %>
+            </label>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,75 @@
+<% filter_values = filter_values_for_filter(filter) %>
+
+<% if filter_values.any? %>
+  <div
+    class="st-accordion"
+    data-controller="accordion"
+    data-accordion-close-others-value="false">
+    <%= link_to "##{filter.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 permitted_products_params.dig(:filter, :options, filter.name).present?}", data: { action: 'accordion#toggle:prevent' } do %>
+      <%= filter.presentation %>
+      <%= render 'spree/shared/icons/chevron_down' %>
+    <% end %>
+    <div
+      class='st-accordion__content'
+      data-accordion-id="<%= filter.id %>"
+      data-controller="searchable-list">
+      <div class="relative mt-3 mx-4 lg:mx-10">
+        <%= f.search_field :search,
+                                    class: "w-full bg-accent focus:ring-primary focus:border-primary pl-10 border-none",
+                                    placeholder: Spree.t(:search),
+                                    data: { searchable_list_target: "input" } %>
+        <span class="absolute left-0 top-0 flex items-center h-full pl-3">
+          <%= render 'spree/shared/icons/search' %>
+        </span>
+      </div>
+      <% main_options, rest_of_the_options = filter_values.partition.with_index { |_, i| i < 5 } %>
+      <ul class="flex flex-col mt-3 px-4 lg:px-10">
+        <% main_options.each do |option| %>
+          <li>
+            <%= f.label "filter_options_#{filter.name}_#{option.name}", class: "flex items-center gap-2 cursor-pointer group text-sm h-10", data: { searchable_list_target: "item", text: option.name } do %>
+              <%= f.check_box "filter[options][#{filter.name}][]",
+                {
+                  id: "filter_options_#{filter.name}_#{option.name}",
+                  checked: permitted_products_params.dig(:filter, :options, filter.name)&.include?(option.name),
+                  class: "input-checkbox group-focus-within:outline"
+                },
+                option.name,
+                nil %>
+              <%= option.presentation %>
+              <span class="opacity-50">
+                (<%= products_count_for_filter(filter.name, option.id) %>)
+              </span>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
+      <% if filter_values.size > 5 %>
+        <ul class='st-accordion__content flex flex-col gap-3 pt-3' data-accordion-id="more_<%= filter.name %>">
+          <% rest_of_the_options.each do |option| %>
+            <li class="px-4 lg:px-10">
+              <%= f.label "filter_options_#{filter.name}_#{option.name}", class: "flex items-center gap-2 cursor-pointer group text-sm h-10", data: { searchable_list_target: "item", text: option.name } do %>
+                <%= f.check_box "filter[options][#{filter.name}][]",
+                  {
+                    id: "filter_options_#{filter.name}_#{option.name}",
+                    checked: permitted_products_params.dig(:filter, :options, filter.name)&.include?(option.name),
+                    class: "input-checkbox group-focus-within:outline"
+                  },
+                  option.name,
+                  nil %>
+                <%= option.presentation %>
+                <span class="opacity-50">
+                  (<%= products_count_for_filter(filter.name, option.id) %>)
+                </span>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+        <%= link_to Spree.t(:show_all), "#more_#{filter.name}",
+                                class: "flex justify-between w-full st-accordion__icon text-sm font-semibold uppercase px-4 lg:px-10 #{'st-accordion__icon--opened' if permitted_products_params.dig(:filter, filter.name)&.present?} mt-3",
+                                data: { action: 'accordion#toggle:prevent',
+                                        accordion_opened_text_param: Spree.t(:show_less),
+                                        accordion_closed_text_param: Spree.t(:show_all) } %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,35 @@
+<div
+  class="st-accordion"
+  data-controller='accordion'
+  data-accordion-close-others-value="false">
+  <%= link_to "#price_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 params.dig(:filter, :min_price).present? || params.dig(:filter, :max_price).present?}", data: { action: 'accordion#toggle:prevent' } do %>
+    <%=Spree.t(:price) %>
+    <%= render 'spree/shared/icons/chevron_down' %>
+  <% end %>
+  <% min_price_value = [params.dig(:filter, :min_price).presence&.to_f, filter_price_range[:min].floor].compact.max %>
+  <% max_price_value = [params.dig(:filter, :max_price).presence&.to_f, filter_price_range[:max].ceil].compact.min %>
+  <div
+    class='st-accordion__content flex flex-col gap-2'
+    data-accordion-id='price_filter'
+    data-controller="no-ui-slider"
+    data-no-ui-slider-start-value="[<%= min_price_value %>, <%= max_price_value %>]"
+    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 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">
+          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] 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">
+          to <%= currency_symbol(current_currency) %>
+        </label>
+      </div>
+    </div>
+    <div class="px-4 lg:px-10 mt-[11px] h-[10px]">
+      <div data-no-ui-slider-target="slider"></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,78 @@
+<% filter_taxons = filter_taxons_for_taxonomy(taxonomy) %>
+
+<% if filter_taxons.any? %>
+  <div
+    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 %>
+      <%= taxonomy.name.singularize %>
+      <%= render 'spree/shared/icons/chevron_down' %>
+    <% end %>
+    <div
+      class='st-accordion__content'
+      data-accordion-id="taxonomy_filter_<%= taxonomy.id %>"
+      data-controller="searchable-list">
+      <div class="relative mt-3 mx-4 lg:mx-10">
+        <%= f.search_field :search,
+          class: "w-full bg-accent focus:ring-primary focus:border-primary pl-10 border-none",
+          placeholder: Spree.t(:search),
+          data: { searchable_list_target: "input" } %>
+        <span class="absolute left-0 top-0 flex items-center h-full pl-3">
+          <%= render 'spree/shared/icons/search' %>
+        </span>
+      </div>
+      <% first_taxons, rest_of_the_taxons = filter_taxons.partition.with_index { |_, i| i < 5 } %>
+      <ul class="flex flex-col px-4 lg:px-10 mt-3">
+        <% 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][]",
+                {
+                  id: "filter_taxon_#{taxon.id}",
+                  checked: permitted_products_params.dig(:filter, :taxon_ids)&.include?(taxon.id.to_s),
+                  class: "input-checkbox group-focus-within:outline"
+                },
+                taxon.id,
+                nil %>
+              <%= taxon.name %>
+              <span class="opacity-50">
+                (<%= products_count_for_taxon(taxon) %>)
+              </span>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
+
+      <% if filter_taxons.size > 5 %>
+        <ul class='st-accordion__content flex flex-col' data-accordion-id="more_taxonomy_filter_<%= taxonomy.id %>">
+          <% 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][]",
+                  {
+                    id: "filter_taxon_#{taxon.id}",
+                    checked: permitted_products_params.dig(:filter, :taxon_ids)&.include?(taxon.id.to_s),
+                    class: "input-checkbox group-focus-within:outline"
+                  },
+                  taxon.id,
+                  nil %>
+                <%= taxon.name %>
+                <span class="opacity-50">
+                  (<%= products_count_for_taxon(taxon) %>)
+                </span>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+        <%= link_to Spree.t(:show_all), "#more_taxonomy_filter_#{taxonomy.id}",
+          class: "flex justify-between w-full st-accordion__icon text-sm font-semibold uppercase px-4 lg:px-10 #{'st-accordion__icon--opened' if permitted_products_params.dig(:filter, :taxon_ids)&.present?} mt-3",
+          data: {
+            action: 'accordion#toggle:prevent',
+            accordion_opened_text_param: Spree.t(:show_less),
+            accordion_closed_text_param: Spree.t(:show_all)
+          } %>
+      <% end %>
+    </div>
+  </div>
+<% end %>