spree_storefront 5.2.5 → 5.3.0.rc1

data/app/views/spree/shared/_load_more_products.turbo_stream.erb

@@ -3,5 +3,5 @@
 <% end %>
 
 <%= turbo_stream.append "products" do %>
-  <%= render 'spree/shared/products', products: storefront_products.records %>
+  <%= render 'spree/shared/products', products: storefront_products %>
 <% end %>

data/app/views/spree/shared/_product_listing_page.html.erb

@@ -1,11 +1,11 @@
 <% if turbo_frame_request? && current_theme_preview.nil? %>
-  <%= render 'spree/page_sections/product_grid', products: storefront_products.records, section: current_page.sections.find_by(type: 'Spree::PageSections::ProductGrid') %>
+  <%= render 'spree/page_sections/product_grid', products: storefront_products, section: current_page.sections.find_by(type: 'Spree::PageSections::ProductGrid') %>
 <% else %>
   <%= render_page(
     current_page,
     taxon: @taxon,
     collection: @collection,
-    products: storefront_products.records,
+    products: storefront_products,
   ) %>
 <% end %>
 

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

@@ -47,15 +47,15 @@
                   <div <%= block_attributes(block) %>>
                     <% case block.type %>
                     <% when 'Spree::PageBlocks::Products::Brand' %>
-                      <% if presenter.product&.brand&.page_builder_url %>
-                        <%= link_to spree_storefront_resource_url(presenter.product&.brand), title: strip_tags(presenter.product&.brand&.name).strip, data: { turbo_frame: '_top' } do %>
+                      <% if presenter.product&.brand_taxon&.page_builder_url %>
+                        <%= link_to spree_storefront_resource_url(presenter.product&.brand_taxon), title: strip_tags(presenter.product&.brand_taxon&.name).strip, data: { turbo_frame: '_top' } do %>
                           <h3 class="text-sm uppercase font-semibold">
-                            <%= presenter.product&.brand&.name %>
+                            <%= presenter.product&.brand_taxon&.name %>
                           </h3>
                         <% end %>
                       <% else %>
                         <h3 class="text-sm uppercase font-semibold">
-                          <%= presenter.product&.brand&.name %>
+                          <%= presenter.product&.brand_taxon&.name %>
                         </h3>
                       <% end %>
                     <% when 'Spree::PageBlocks::Products::Title' %>

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

@@ -14,11 +14,11 @@
         <%= 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? %>
             <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.page_builder_image, height: 300, width: 300, class: 'h-full w-full object-cover object-center group-hover:opacity-75 rounded-md bg-border', 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 rounded-md flex items-center justify-center relative">
+            <div class="aspect-1 w-full group-hover:bg-gray-100 bg-border rounded-md flex items-center justify-center relative">
               <span><%= link.label %></span>
             </div>
           <% end %>
@@ -49,10 +49,10 @@
               <%= 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? %>
                   <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.page_builder_image, height: 200, width: 200, class: 'h-full w-full object-cover object-center group-hover:opacity-75 rounded-md bg-border', loading: :lazy, alt: link.label) %>
                   </div>
                 <% else %>
-                  <div class="aspect-1 w-full group-hover:bg-gray-100 bg-gray-200 flex items-center justify-center relative">
+                  <div class="aspect-1 w-full group-hover:bg-gray-100 bg-border flex items-center justify-center relative">
                     <span><%= link.label %></span>
                   </div>
                 <% end %>

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

@@ -12,9 +12,9 @@
           </div>
           <div class="grid grid-cols-1 lg:grid-cols-4 grow w-full">
             <% section.blocks.includes(:links).each do |block| %>
-              <div class="flex-grow gap-1 flex flex-col py-6 md:py-0 border-b md:border-none border-default lg:mb-6">
+              <nav class="flex-grow gap-1 flex flex-col py-6 md:py-0 border-b md:border-none border-default lg:mb-6" aria-label="<%= block.preferred_label %>">
                 <div <%= block_attributes(block) %>>
-                  <h3 class="text-sm py-2"><%= block.preferred_label %></h3>
+                  <div class="text-sm py-2"><%= block.preferred_label %></div>
                   <ul class="uppercase text-sm tracking-wider !leading-4 flex flex-col gap-1">
                     <% block.links.each do |link| %>
                       <li class='py-2'>
@@ -25,12 +25,12 @@
                     <% end %>
                   </ul>
                 </div>
-              </div>
+              </nav>
             <% end %>
           </div>
-          <div class="flex-grow gap-4 flex flex-col justify-between lg:w-60">
+          <nav class="flex-grow gap-4 flex flex-col justify-between lg:w-60" aria-label="<%= Spree.t(:follow_us) %>">
             <div class="gap-1 flex flex-col py-6 md:py-0">
-              <h3 class="text-sm py-2"><%= Spree.t(:follow_us) %></h3>
+              <div class="text-sm py-2"><%= Spree.t(:follow_us) %></div>
               <div class="flex flex-wrap gap-2 max-w-48 py-2">
                 <% cache spree_storefront_base_cache_scope.call(current_store) do %>
                   <% Spree::Store::SUPPORTED_SOCIAL_NETWORKS.each do |media| %>
@@ -44,7 +44,7 @@
                 <% end %>
               </div>
             </div>
-          </div>
+          </nav>
         </div>
         <div class="flex justify-end w-full"></div>
       </div>

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

@@ -103,11 +103,12 @@
               <% if show_account_pane? %>
                 <button
                   data-action='click->slideover-account#toggle click@window->slideover-account#hide click->toggle-menu#hide touch->toggle-menu#hide'
+                  aria-label='Open account panel'
                   >
                   <%= render 'spree/shared/icons/account', color: section.preferred_text_color, section: section %>
                 </button>
               <% else %>
-                <%= link_to spree.account_path do %>
+                <%= link_to spree.account_path, 'aria-label': 'Open account panel' do %>
                   <%= render 'spree/shared/icons/account', color: section.preferred_text_color, section: section %>
                 <% end %>
               <% end %>
@@ -117,12 +118,13 @@
                 <button
                   type="submit"
                   id="wishlist-icon"
+                  aria-label='Open wishlist'
                   class="flex items-end">
                   <%= render 'spree/shared/wishlist_icon', wishlist: current_wishlist, background_color: section.preferred_background_color %>
                 </button>
               <% end %>
             <% else %>
-              <%= link_to spree.account_wishlist_path, id: "wishlist-icon" do %>
+              <%= link_to spree.account_wishlist_path, id: "wishlist-icon", 'aria-label': 'Open wishlist' do %>
                 <%= render 'spree/shared/wishlist_icon', background_color: section.preferred_background_color %>
               <% end %>
             <% end %>
@@ -141,6 +143,7 @@
       data-toggle-menu-target='toggleable'
       role='dialog'
       aria-modal='true'
+      aria-label='Mobile menu'
     >
       <div
         class='flex justify-between flex-col lg:hidden w-full transition-transform has-[.currency-and-locale-modal:not(.hidden)]:transform-none body header--mobile-menu'

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

@@ -5,7 +5,7 @@
         <%= render partial: 'spree/posts/post', collection: @posts, cached: true %>
       </div>
 
-      <%= paginate @posts, theme: 'storefront', outer_window: 1, inner_window: 2 %>
+      <%= render 'spree/shared/pagination' %>
     </div>
   <% end %>
 </div>

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

@@ -47,9 +47,9 @@
                       </h1>
                     <% when 'Spree::PageBlocks::Products::Brand' %>
                       <% if product.brand_taxon %>
-                        <%= link_to spree.nested_taxons_path(product.brand_taxon), title: product.brand_name do %>
+                        <%= link_to spree.nested_taxons_path(product.brand_taxon), title: product.brand_taxon.name do %>
                           <h3 class="text-sm lg:mt-0 inline-block mb-1">
-                            <%= product.brand_name %>
+                            <%= product.brand_taxon.name %>
                           </h3>
                         <% end %>
                       <% end %>

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

@@ -1 +1 @@
-<%= paginate @posts, theme: 'storefront', outer_window: 1, inner_window: 2 %>
+<%= render 'spree/shared/pagination' %>

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

@@ -5,11 +5,24 @@ options_param_name ||= :options
 not_selected_options = product_not_selected_options(product, selected_variant, options_param_name: options_param_name)
 all_options_selected = (params[options_param_name].present? || @variant_from_options.present?) && not_selected_options.empty?
 not_all_options_selected = !all_options_selected && product.any_variant_available?(current_currency)
+
+# Build pricing context for selected variant
+if selected_variant
+  variant_pricing_context = pricing_context_for_variant(selected_variant)
+  variant_price = selected_variant.price_for(variant_pricing_context)
+else
+  variant_price = nil
+end
+
 variant_not_available = selected_variant.nil? ||
                         product.discontinued? ||
                         selected_variant.discontinued? ||
                         !selected_variant.purchasable? ||
-                        selected_variant.price_in(current_currency).amount.nil?
+                        variant_price&.amount.nil?
+
+# Build pricing context for product
+product_pricing_context = pricing_context_for_variant(product)
+product_price = product.default_variant.price_for(product_pricing_context)
 %>
 
 <div class='<%= sticky_button_classes %> bottom-0 flex flex-col gap-4 z-10' data-sticky-button-target='stickyButton'>
@@ -22,7 +35,7 @@ variant_not_available = selected_variant.nil? ||
                     ].compact.join(' '),
                     product_form_target: 'submit'
                   },
-                  disabled: product.price_in(current_currency).zero? do %>
+                  disabled: product_price.zero? do %>
     <% if not_selected_options.size == 1 %>
       <span><%= Spree.t('storefront.variant_picker.please_choose', option_type: not_selected_options[0].presentation) %></span>
     <% elsif not_all_options_selected %>
@@ -47,7 +60,7 @@ variant_not_available = selected_variant.nil? ||
                     ].compact.join(' '),
                     product_form_target: 'submit'
                   },
-                  disabled: product.price_in(current_currency).zero? do %>
+                  disabled: product_price.zero? do %>
       <% if not_selected_options.size == 1 %>
         <span><%= Spree.t('storefront.variant_picker.please_choose', option_type: not_selected_options[0].presentation) %></span>
       <% elsif not_all_options_selected %>

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

@@ -31,7 +31,7 @@
                 color_preview_container_class: "lg:w-[28px] lg:h-[28px]",
                 color_preview_class: "lg:top-[2px] lg:left-[2px]" %>
             <% end %>
-            <% if selected_variant.default_image %>
+            <% if selected_variant.has_images? || selected_variant.default_image.present? %>
               <template data-featured-image-template>
                 <%= render 'spree/products/featured_image',
                   object: selected_variant %>

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

@@ -1,5 +1,6 @@
 <% with_cover_image ||= true %>
 <% object ||= product %>
+
 <% if object.default_image.present? && object.default_image.attached? %>
   <% height ||= theme_setting('product_listing_image_height') %>
   <% width ||= theme_setting('product_listing_image_width') %>
@@ -13,7 +14,7 @@
          "w-full group-hover:opacity-0 transition-opacity duration-500 z-10 relative h-full bg-background product-card !max-h-full #{object_class}" :
          "w-full h-full !max-h-full #{object_class}" %>
     <%= spree_image_tag(object.default_image, width: width, height: height, variant: :medium, loading: :lazy, alt: "#{object.name} #{Spree.t('storefront.products.primary_image', default: 'primary image')}", class: image_hover_class) %>
-    <% if object.secondary_image.present? && object.secondary_image.attached? %>
+    <% if object.has_images? && object.image_count > 1 && object.secondary_image.present? && object.secondary_image.attached? %>
       <% secondary_image_class = "w-full absolute top-0 left-0 opacity-100 h-full !max-h-full #{object_class}" %>
       <%= spree_image_tag(object.secondary_image, width: width, height: height, variant: :medium, loading: :lazy, alt: "#{object.name} #{Spree.t('storefront.products.secondary_image', default: 'secondary image')}", class: secondary_image_class) %>
     <% end %>

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

@@ -5,9 +5,9 @@
     "@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 %>,
-  <% if product.featured_image %>
+  <% if product.has_images? %>
     "image": [
-      <%= spree_image_url(product.featured_image, variant: :large).to_json.html_safe %>
+      <%= spree_image_url(product.default_image, variant: :large).to_json.html_safe %>
     ],
   <% end %>
   <% if product.description.present? %>
@@ -18,10 +18,10 @@
   <% elsif selected_variant %>
     <% if selected_variant.sku.present? %>"sku": <%= selected_variant.sku.to_json.html_safe %>,<% end %>
   <% end %>
-  <% if product.brand_name %>
+  <% if product.brand_taxon %>
     "brand": {
       "@type": "Brand",
-      "name": <%= product.brand_name.to_json.html_safe %>
+      "name": <%= product.brand_taxon.name.to_json.html_safe %>
     },
   <% end %>
 "offers": [

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

@@ -20,7 +20,9 @@
 
       target ||= product
 
-      price = target.price_in(current_currency)
+      variant_for_context = target.is_a?(Spree::Product) ? target.default_variant : target
+      pricing_context = pricing_context_for_variant(variant_for_context)
+      price = variant_for_context.price_for(pricing_context)
       money_price = price.display_amount
 
       if target.is_a?(Spree::Product) && !use_variant && product.price_varies?(current_currency)

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

@@ -24,9 +24,9 @@
         <%= render 'spree/products/label', product: product %>
       </div>
       <div class="product-card-inner">
-        <% if product.brand_name.present? %>
+        <% if product.brand_taxon.present? %>
           <h3 class="text-xs font-semibold uppercase inline-block product-card-brand">
-            <%= product.brand_name %>
+            <%= product.brand_taxon.name %>
           </h3>
         <% end %>
         <h3 class="line-clamp-1 product-card-title">
@@ -55,7 +55,7 @@
       </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 %>
+      <%= render 'spree/products/add_to_wishlist', variant: selected_variant %>
     </div>
     <%= render 'spree/products/color_swatches', product: product if product && (defined?(show_variant_picker) ? show_variant_picker : true) %>
   </div>

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

@@ -5,19 +5,21 @@
     <%= button_tag class: 'decrease-quantity',
                      type: 'button',
                      data: { action: 'click->quantity-picker#decrease',
-                            'quantity-picker-target': 'decrease' } do %>
+                            'quantity-picker-target': 'decrease' },
+                    aria: { label: Spree.t('storefront.products.decrease_quantity') } 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' } %>
+                          data: { 'quantity-picker-target': 'quantity' },
+                          aria: { label: Spree.t(:quantity) } %>
     <%= button_tag class: 'increase-quantity',
                      type: 'button',
                      data: { action: 'click->quantity-picker#increase',
-                            'quantity-picker-target': 'increase' } do %>
+                            'quantity-picker-target': 'increase' },
+                     aria: { label: Spree.t('storefront.products.increase_quantity') } do %>
       <%= render 'spree/shared/icons/plus' %>
     <% end %>
   </div>

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

@@ -1,7 +1,7 @@
-<% 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 %>
+<% if storefront_pagy&.next %>
+  <%= turbo_frame_tag "next_page", src: url_for(params.to_unsafe_h.merge(page: storefront_pagy.next, 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' %>
+      <%= render 'spree/shared/icons/spinner' %>
       <%= Spree.t(:loading) %>...
     </span>
   <% end %>

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

@@ -75,10 +75,10 @@
         <% 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 %>
+    <%= 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)", 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 %>
+    <%= 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)", 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>

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

@@ -32,8 +32,8 @@
     <% end %>
   <% end %>
   <% if option_type.color? %>
-    <li>
-      <label class="cursor-pointer">
+    <li role="option" aria-label="<%= value.presentation %>">
+      <label class="cursor-pointer"  aria-label="<%= value.presentation %>">
         <%= radio_button_tag option_type.presentation, value.name, selected_option == value,
           name: option_type.presentation,
           id: "product-option-#{product.id}-#{position}-#{index}",
@@ -56,10 +56,14 @@
         option_id: option_type.id
       },
       name: option_type.presentation,
+      role: 'menuitemradio',
+      aria: { label: value.presentation },
       id: "product-option-#{product.id}-#{position}-#{index}"
     %>
     <label
       for='product-option-<%= product.id %>-<%= position %>-<%= index %>'
+      role="menuitem"
+      aria-label="<%= value.presentation %>"
       class='text-sm cursor-pointer flex items-center justify-between px-4 py-2.5 hover:bg-accent focus:outline-hidden focus:bg-accent transition duration-150 ease-in-out <%= option_disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent" %>'
     >
       <p><%=h value.presentation %></p>

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

@@ -7,19 +7,20 @@
         <%= 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">
+          <ul class="flex items-center flex-wrap gap-1" role="listbox" aria-label="<%= option_type.presentation %>">
             <%= 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 data-controller="dropdown" class="relative mb-2" role="group" aria-label="<%= option_type.presentation %>">
             <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">
+                data-dropdown-target="button"
+                aria-label="<%= selected_option ? option_type.presentation+":"+selected_option.presentation : Spree.t('storefront.variant_picker.please_choose', option_type: option_type.presentation) %>">
                 <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>
@@ -37,6 +38,7 @@
                 data-transition-leave="transition ease-in"
                 data-transition-leave-from="opacity-100 translate-y-0"
                 data-transition-leave-to="opacity-0 translate-y-1"
+                role="menu"
                 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 %>

data/app/views/themes/default/spree/shared/_custom_head.html.erb

@@ -0,0 +1,7 @@
+<link rel="preconnect" href="https://esm.sh" crossorigin>
+<link rel="dns-prefetch" href="https://esm.sh">
+
+<link rel="preload" href="https://esm.sh/swiper@11.2.2/swiper-bundle.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="https://esm.sh/swiper@11.2.2/swiper-bundle.min.css"></noscript>
+<link rel="preload" href="https://esm.sh/flag-icons@7.3.2/css/flag-icons.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="https://esm.sh/flag-icons@7.3.2/css/flag-icons.min.css"></noscript>

data/app/views/themes/default/spree/shared/_line_item_options.html.erb

@@ -1,4 +1,4 @@
-<% options = line_item.variant.option_values.includes(:option_type) %>
+<% options = line_item.variant.option_values %>
 
 <% options.select { |ov| ov.option_type.color? }.each do |option| %>
   <div>

data/app/views/themes/default/spree/shared/_pagination.html.erb

@@ -0,0 +1,7 @@
+<%# Renders pagination - supports both Pagy and Kaminari %>
+<% if Spree::Storefront::Config[:use_kaminari_pagination] %>
+  <%= paginate @posts || @orders || @gift_cards || @store_credit_events || @storefront_products,
+      theme: 'storefront', outer_window: 1, inner_window: 2 %>
+<% elsif @pagy && @pagy.pages > 1 %>
+  <%== @pagy.series_nav(aria_label: 'Pages') %>
+<% end %>

data/app/views/themes/default/spree/shared/_search.html.erb

@@ -1,4 +1,4 @@
-<div id="search-suggestions" role="dialog" aria-modal="true">
+<div id="search-suggestions" role="dialog" aria-label="Search suggestions" aria-modal="true">
   <div class='w-full flex flex-col border-b border-default' data-controller="search-suggestions" data-show-class="h-screen min-h-screen" data-search-suggestions-url-value="<%= spree.search_suggestions_path %>">
     <div class='hidden lg:flex justify-center w-full mt-4 mb-3' id="header-logo">
       <%= render 'spree/shared/logo', logo: logo, height: logo_height %>

data/config/locales/en.yml

@@ -59,6 +59,8 @@ en:
         join: Email me about new products, sales, and more. You can unsubscribe at any time.
         status: You are currently %{status} to the newsletters.
       products:
+        decrease_quantity: Decrease quantity
+        increase_quantity: Increase quantity
         pinch_to_zoom_html: Pinch to<br>zoom
         primary_image: primary image
         secondary_image: secondary image

data/lib/generators/spree/storefront/install/install_generator.rb

@@ -6,6 +6,8 @@ module Spree
       class InstallGenerator < Rails::Generators::Base
         desc 'Installs Spree Storefront'
 
+        class_option :migrate, type: :boolean, default: true, banner: 'Run migrations'
+
         def self.source_paths
           [
             File.expand_path('templates', __dir__),
@@ -14,10 +16,16 @@ module Spree
           ]
         end
 
+        def install_page_builder
+          say_status :installing, 'page builder'
+          migrate_option = options[:migrate] == false ? ' --migrate=false' : ''
+          generate "spree:page_builder:install --force#{migrate_option}"
+        end
+
         def install
           empty_directory Rails.root.join('app/assets/tailwind') if Rails.root && !Rails.root.join('app/assets/tailwind').exist?
-          template 'application.css', 'app/assets/tailwind/application.css'
-          template 'tailwind.config.js', 'config/tailwind.config.js'
+          template 'application.css', 'app/assets/tailwind/application.css', force: options[:force]
+          template 'tailwind.config.js', 'config/tailwind.config.js', force: options[:force]
 
           if Rails.root && Rails.root.join("Procfile.dev").exist?
             append_to_file 'Procfile.dev', "\nstorefront_css: bin/rails tailwindcss:watch" unless File.read('Procfile.dev').include?('storefront_css:')
@@ -40,8 +48,8 @@ module Spree
             append_to_file 'app/assets/config/manifest.js', "\n//= link_tree ../builds" unless File.read('app/assets/config/manifest.js').include?('//= link_tree ../builds')
           end
 
-          # remove static robots.txt as we use robots.txt.erb
-          remove_file Rails.root.join('public/robots.txt') if Rails.root && Rails.root.join('public/robots.txt').exist?
+          # remove static robots.txt as storefront serves it dynamically via seo#robots
+          remove_file 'public/robots.txt'
         end
       end
     end

data/lib/generators/spree/storefront/install/templates/application.css

@@ -1,6 +1,3 @@
-@import url('https://esm.sh/swiper@11.2.2/swiper-bundle.min.css');
-@import url('https://esm.sh/flag-icons@7.3.2/css/flag-icons.min.css');
-
 @import 'tailwindcss';
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
@@ -135,7 +132,7 @@ html {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-body .section-header {
+body:not(.inside-page-builder) > div.section-header {
   @apply sticky top-0 z-50;
 }
 
@@ -1853,3 +1850,47 @@ body:has(.currency-and-locale-modal:not(.hidden)) .page-contents {
     aspect-ratio: 1.77;
   }
 }
+
+/* Pagy pagination styles */
+.pagy.series-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  margin-top: 4rem;
+}
+
+.pagy.series-nav a {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  text-align: center;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+}
+
+.pagy.series-nav a[rel="prev"],
+.pagy.series-nav a[rel="next"] {
+  width: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.pagy.series-nav a[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.pagy.series-nav a[aria-current="page"] {
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.pagy.series-nav a:not([aria-disabled="true"]):hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.pagy.series-nav a[role="separator"] {
+  width: 2rem;
+}

data/lib/spree/storefront/configuration.rb

@@ -9,6 +9,9 @@ module Spree
       preference :products_per_page, :integer, default: 20
 
       preference :search_min_query_length, :integer, default: 2
+
+      # Pagination preference - set to true to use legacy Kaminari pagination
+      preference :use_kaminari_pagination, :boolean, default: false
     end
   end
 end

data/lib/spree/storefront.rb

@@ -1,7 +1,7 @@
-require 'spree_core'
+require 'spree'
+require 'spree_page_builder'
 
 require 'active_link_to'
-require 'canonical-rails'
 require 'heroicon'
 require 'importmap-rails'
 require 'local_time'
@@ -10,6 +10,7 @@ require 'stimulus-rails'
 require 'tailwindcss-rails'
 require 'turbo-rails'
 require 'inline_svg'
+require 'pagy'
 
 require 'spree/storefront/engine'
 require 'spree/core/partials'