spree_storefront 5.1.8 → 5.2.0.rc1

data/app/views/themes/default/spree/metafields/_short_text.html.erb

@@ -0,0 +1 @@
+<%= metafield.value %>

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

@@ -2,7 +2,7 @@
   <div class="h-full flex flex-col" id="cart-container" data-cart-target="container">
     <%== color_options_style_for_line_items(@line_items) %>
     <ul class="w-full" id="line-items">
-      <%= render collection: @line_items, partial: 'spree/orders/line_item', cached: spree_base_cache_scope %>
+      <%= render collection: @line_items, partial: 'spree/orders/line_item', cached: spree_storefront_base_cache_scope %>
     </ul>
     <%= render 'spree/orders/summary', order: @order %>
   </div>

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

@@ -16,7 +16,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', data: { action: "click->cart#disableCart turbo-stream-form:submit-end->cart#enableCart" } do %>
               <%= render 'spree/shared/icons/cross', size: 16 %>
             <% end %>
           <% end %>

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

@@ -1,4 +1,4 @@
-<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+<% cache_unless page_builder_enabled?, spree_storefront_base_cache_scope.call(section) do %>
   <% if section.present? && section.text.body.to_plain_text.present? %>
     <div
       class='w-full justify-center items-center flex announcement-bar'

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

@@ -0,0 +1,18 @@
+<div style="<%= section_styles(section) %>">
+  <div class="page-container">
+    <nav id="breadcrumbs" aria-label="breadcrumbs">
+      <% if @product.present? %>
+        <% taxons = product_breadcrumb_taxons(@product) %>
+
+        <ul class="inline-flex gap-3 text-sm">
+          <% taxons.each_with_index do |taxon, index| %>
+            <li class="opacity-50"><%= link_to taxon.name, spree.nested_taxons_path(taxon), title: taxon.name %></li>
+            <div class="breadcrumb-square opacity-50 <%= 'hidden md:block' if index == taxons.length - 1 %>"></div>
+          <% end %>
+
+          <li class="hidden lg:block text-text opacity-100"><%= @product.name %></li>
+        </ul>
+      <% end %>
+    </nav>
+  </div>
+</div>

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

@@ -1,4 +1,4 @@
-<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+<% cache_unless page_builder_enabled?, spree_storefront_base_cache_scope.call(section) do %>
   <div style="<%= section_styles(section) %>">
     <%= raw(section.preferred_custom_code) %>
   </div>

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

@@ -41,7 +41,7 @@
         <div class='swiper-wrapper px-4 lg:px-0 h-auto'>
           <%= render partial: "spree/posts/post",
           collection: section.posts,
-          cached: spree_base_cache_scope,
+          cached: spree_storefront_base_cache_scope,
           as: :post %>
         </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 top-[100px]", aria: { label: "Previous posts" }, style: "transform: translate(-50%, -50%);" do %>

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

@@ -1,4 +1,4 @@
-<% cache_unless page_builder_enabled?, [spree_base_cache_key, section.cache_key_with_version, loaded.to_b] do %>
+<% cache_unless page_builder_enabled?, [spree_storefront_base_cache_key, section.cache_key_with_version, loaded.to_b] do %>
   <div style='<%= section_styles(section) %>' class='animate-fadeIn'>
     <div class='page-container'>
       <% heading_size = case section.preferred_heading_size

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

@@ -1,4 +1,4 @@
-<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+<% cache_unless page_builder_enabled?, spree_storefront_base_cache_scope.call(section) do %>
   <div class="page-container py-5" style="<%= section_styles(section) %>">
     <% heading_size = case section.preferred_heading_size
                       when 'small' then 'text-base font-medium'

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

@@ -1,4 +1,4 @@
-<% cache_unless page_builder_enabled?, [*spree_base_cache_scope.call(section), current_store] do %>
+<% cache_unless page_builder_enabled?, [*spree_storefront_base_cache_scope.call(section), current_store] do %>
   <footer
     id='footer'
     <% unless current_theme_preview %>
@@ -32,7 +32,7 @@
             <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="flex flex-wrap gap-2 max-w-48 py-2">
-                <% cache spree_base_cache_scope.call(current_store) do %>
+                <% cache spree_storefront_base_cache_scope.call(current_store) do %>
                   <% Spree::Store::SUPPORTED_SOCIAL_NETWORKS.each do |media| %>
                     <% if current_store.send(media).present? %>
                       <%= link_to current_store.send("#{media}_link") do %>

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

@@ -1,159 +1,160 @@
-<% layout = section.preferred_layout %>
-<header
-  class='header-<%= layout %>'
-  data-controller='header toggle-menu slideover <%= "slideover-account" if show_account_pane? %>'
-  data-toggle-menu-class='hamburger-visible'
-  data-slideover-invisible-class='translate-x-full,opacity-0'
-  data-slideover-visible-class='translate-x-0,opacity-100'
-  data-slideover-active-target='#slideover-cart'
-  data-slideover-account-invisible-class='translate-x-full,opacity-0'
-  data-slideover-account-visible-class='translate-x-0,opacity-100'
-  data-slideover-account-active-target='#slideover-account'
->
-  <nav
-    aria-label='Top'
-    style="<%= section_styles(section) %>"
-    class="relative transition-transform duration-300">
-    <div class='page-container'>
-      <div class='flex items-center<%= " lg:items-end" if layout == "logo-centered" %> <%= " lg:items-center" unless layout == "logo-centered" %> justify-between '>
-        <% unless layout == 'logo-centered' %>
-          <div class='hidden lg:flex' id='header-logo'>
-            <%= render 'spree/shared/logo', logo: section.logo, height: section.preferred_desktop_logo_height %>
-          </div>
-        <% end %>
-        <div class='flex -order-1 flex-1 <%= " lg:flex-none lg:order-1 z-10 lg:mr-8" unless layout == "logo-centered" %>'>
-          <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
-          <button
-            type='button'
-            data-action='click->toggle-menu#toggle touch->toggle-menu#toggle'
-            class='relative w-6 lg:hidden'
-            data-toggle-menu-target='button'
-            >
-            <span class='sr-only'><%= Spree.t(:toggle_menu) %></span>
-            <div
-              class='absolute top-0'
-            >
-              <%= render 'spree/shared/icons/menu', color: section.preferred_text_color %>
-            </div>
-            <div
-              class='absolute top-0 opacity-0'
-            >
-              <%= render 'spree/shared/icons/close', color: section.preferred_text_color %>
+<% cache_unless page_builder_enabled?, [spree_storefront_base_cache_scope.call(section), request.path] do %>
+  <% layout = section.preferred_layout %>
+  <header
+    class='header-<%= layout %>'
+    data-controller='header toggle-menu slideover <%= "slideover-account" if show_account_pane? %>'
+    data-toggle-menu-class='hamburger-visible'
+    data-slideover-invisible-class='translate-x-full,opacity-0'
+    data-slideover-visible-class='translate-x-0,opacity-100'
+    data-slideover-active-target='#slideover-cart'
+    data-slideover-account-invisible-class='translate-x-full,opacity-0'
+    data-slideover-account-visible-class='translate-x-0,opacity-100'
+    data-slideover-account-active-target='#slideover-account'
+  >
+    <nav
+      aria-label='Top'
+      style="<%= section_styles(section) %>"
+      class="relative transition-transform duration-300">
+      <div class='page-container'>
+        <div class='flex items-center<%= " lg:items-end" if layout == "logo-centered" %> <%= " lg:items-center" unless layout == "logo-centered" %> justify-between '>
+          <% unless layout == 'logo-centered' %>
+            <div class='hidden lg:flex' id='header-logo'>
+              <%= render 'spree/shared/logo', logo: section.logo, height: section.preferred_desktop_logo_height %>
             </div>
-          </button>
-          <!-- Search button -->
-          <div class='<%= "lg:relative" unless layout == "logo-centered" %> flex'>
+          <% end %>
+          <div class='flex -order-1 flex-1 <%= " lg:flex-none lg:order-1 z-10 lg:mr-8" unless layout == "logo-centered" %>'>
+            <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
             <button
-              class='flex items-center ml-4 lg:ml-0'
-              id='open-search'
-              data-action='click->toggle-menu#hide touch->toggle-menu#hide'
+              type='button'
+              data-action='click->toggle-menu#toggle touch->toggle-menu#toggle'
+              class='relative w-6 lg:hidden'
+              data-toggle-menu-target='button'
               >
-              <%= render 'spree/shared/icons/search', color: section.preferred_text_color %>
-              <span class='hidden lg:block ml-2 text-sm !leading-6 uppercase'><%= Spree.t(:search) %></span>
+              <span class='sr-only'><%= Spree.t(:toggle_menu) %></span>
+              <div
+                class='absolute top-0'
+              >
+                <%= render 'spree/shared/icons/menu', color: section.preferred_text_color %>
+              </div>
+              <div
+                class='absolute top-0 opacity-0'
+              >
+                <%= render 'spree/shared/icons/close', color: section.preferred_text_color %>
+              </div>
             </button>
+            <!-- Search button -->
+            <div class='<%= "lg:relative" unless layout == "logo-centered" %> flex'>
+              <button
+                class='flex items-center ml-4 lg:ml-0'
+                id='open-search'
+                data-action='click->toggle-menu#hide touch->toggle-menu#hide'
+                >
+                <%= render 'spree/shared/icons/search', color: section.preferred_text_color %>
+                <span class='hidden lg:block ml-2 text-sm !leading-6 uppercase'><%= Spree.t(:search) %></span>
+              </button>
+            </div>
           </div>
-        </div>
-        <div class='flex items-center flex-col<%= " lg:flex-1" unless layout == "logo-centered" %> header-nav-container'>
-          <!-- Logo -->
-          <div class='<%= "flex lg:pb-4" if layout == "logo-centered" %><%= "lg:hidden" unless layout == "logo-centered" %>' id='header-logo'>
-            <%= render 'spree/shared/logo', logo: section.logo, height: section.preferred_desktop_logo_height %>
-          </div>
-          <!-- Desktop Menu -->
-          <% if layout == 'nav-centered' %>
-            <div
-              class='hidden lg:flex absolute top-px left-1/2 -translate-x-1/2 justify-center w-[calc(100%-29rem)] overflow-auto'
-            >
-            <% end %>
-            <div class='hidden lg:flex<%= " w-full px-12" if layout == "left" %>'>
-              <div class='flex flex-wrap justify-center mx-4 h-full'>
-                <%= render 'spree/page_sections/nav/desktop', section: section %>
+          <div class='flex items-center flex-col<%= " lg:flex-1" unless layout == "logo-centered" %> header-nav-container'>
+            <!-- Logo -->
+            <div class='<%= "flex lg:pb-4" if layout == "logo-centered" %><%= "lg:hidden" unless layout == "logo-centered" %>' id='header-logo'>
+              <%= render 'spree/shared/logo', logo: section.logo, height: section.preferred_desktop_logo_height %>
+            </div>
+            <!-- Desktop Menu -->
+            <% if layout == 'nav-centered' %>
+              <div
+                class='hidden lg:flex absolute top-px left-1/2 -translate-x-1/2 justify-center w-[calc(100%-29rem)] overflow-auto'
+              >
+              <% end %>
+              <div class='hidden lg:flex<%= " w-full px-12" if layout == "left" %>'>
+                <div class='flex flex-wrap justify-center mx-4 h-full'>
+                  <%= render 'spree/page_sections/nav/desktop', section: section %>
+                </div>
               </div>
             </div>
-          </div>
-          <% if layout == 'nav-centered' %></div>
-        <% end %>
-        <div
-          class='flex items-center gap-4 flex-1 justify-end<%= " lg:flex-none order-2" unless layout == "logo-centered" %>'
-        >
-          <% if should_render_currency_dropdown? || should_render_locale_dropdown? %>
-            <div
-            data-controller="modal"
-            data-modal-allow-background-close="true"
-            data-modal-
-            class="hidden lg:flex"
-            data-modal-backdrop-color-value="rgba(0,0,0,0.32)">
-              <%= button_tag class: 'flex gap-2 items-center', data: {action: 'modal#open'} do %>
-                <% if should_render_currency_dropdown? %>
-                  <span>
-                    <%= "#{current_currency} (#{currency_money(current_currency).symbol})" %>
-                  </span>
+            <% if layout == 'nav-centered' %></div>
+          <% end %>
+          <div
+            class='flex items-center gap-4 flex-1 justify-end<%= " lg:flex-none order-2" unless layout == "logo-centered" %>'
+          >
+            <% if should_render_currency_dropdown? || should_render_locale_dropdown? %>
+              <div
+              data-controller="modal"
+              data-modal-disable-backdrop="true"
+              class="hidden lg:flex">
+                <%= button_tag class: 'flex gap-2 items-center', data: {action: 'modal#open'} do %>
+                  <% if should_render_currency_dropdown? %>
+                    <span>
+                      <%= "#{current_currency} (#{currency_money(current_currency).symbol})" %>
+                    </span>
+                  <% end %>
+                  <% if should_render_locale_dropdown? %>
+                    <span class="uppercase <%= should_render_currency_dropdown?.presence && "border-l pl-2" %> flex items-center gap-1">
+                      <% country_code = current_locale.to_s.split("-").last %>
+                      <%= svg_country_icon(country_code) %>
+                      <span ><%= country_code %></span>
+                    </span>
+                  <% end %>
                 <% end %>
-                <% if should_render_locale_dropdown? %>
-                  <span class="uppercase <%= should_render_currency_dropdown?.presence && "border-l pl-2" %> flex items-center gap-1">
-                    <% country_code = current_locale.to_s.split("-").last %>
-                    <%= svg_country_icon(country_code) %>
-                    <span ><%= country_code %></span>
-                  </span>
+                <%= turbo_frame_tag :settings_modal, src: spree.settings_path, loading: :lazy  %>
+              </div>
+            <% end %>
+            <!-- Desktop Account -->
+            <div class='hidden lg:flex'>
+              <% if show_account_pane? %>
+                <button
+                  data-action='click->slideover-account#toggle click@window->slideover-account#hide click->toggle-menu#hide touch->toggle-menu#hide'
+                  >
+                  <%= render 'spree/shared/icons/account', color: section.preferred_text_color, section: section %>
+                </button>
+              <% else %>
+                <%= link_to spree.account_path do %>
+                  <%= render 'spree/shared/icons/account', color: section.preferred_text_color, section: section %>
                 <% end %>
               <% end %>
-              <%= turbo_frame_tag :settings_modal, src: spree.settings_path, loading: :lazy  %>
             </div>
-          <% end %>
-          <!-- Desktop Account -->
-          <div class='hidden lg:flex'>
             <% if show_account_pane? %>
-              <button
-                data-action='click->slideover-account#toggle click@window->slideover-account#hide click->toggle-menu#hide touch->toggle-menu#hide'
-                >
-                <%= render 'spree/shared/icons/account', color: section.preferred_text_color, section: section %>
-              </button>
+              <%= form_with url: spree.account_wishlist_path, method: :get, data: { turbo_stream: true } do %>
+                <button
+                  type="submit"
+                  id="wishlist-icon"
+                  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_path do %>
-                <%= render 'spree/shared/icons/account', color: section.preferred_text_color, section: section %>
+              <%= link_to spree.account_wishlist_path, id: "wishlist-icon" do %>
+                <%= render 'spree/shared/wishlist_icon', background_color: section.preferred_background_color %>
               <% end %>
             <% end %>
-          </div>
-          <% if show_account_pane? %>
-            <%= form_with url: spree.account_wishlist_path, method: :get, data: { turbo_stream: true } do %>
-              <button
-                type="submit"
-                id="wishlist-icon"
-                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 %>
-              <%= render 'spree/shared/wishlist_icon', background_color: section.preferred_background_color %>
-            <% end %>
-          <% end %>
-          <!-- Cart -->
-          <div
-            data-action='click->toggle-menu#hide touch->toggle-menu#hide'
-            >
-            <%= render 'spree/shared/cart_icon' %>
+            <!-- Cart -->
+            <div
+              data-action='click->toggle-menu#hide touch->toggle-menu#hide'
+              >
+              <%= render 'spree/shared/cart_icon' %>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </nav>
     <div
-      class='h-0 opacity-0 pointer-events-none hide-on-load'
-      data-toggle-menu-target='toggleable'
-      role='dialog'
-      aria-modal='true'
-    >
-      <div
-        class='flex justify-between flex-col lg:hidden w-full transition-transform translate-x-[-50%] has-[.currency-and-locale-modal:not(.hidden)]:transform-none body header--mobile-menu'
-        data-toggle-menu-target='content'
-        style='background-color: <%= section.preferred_background_color %>; height: calc(100dvh - 38px);'
-        >
-        <%= render 'spree/page_sections/nav/mobile', section: section %>
+        class='h-0 opacity-0 pointer-events-none hide-on-load'
+        data-toggle-menu-target='toggleable'
+        role='dialog'
+        aria-modal='true'
+      >
+        <div
+          class='flex justify-between flex-col lg:hidden w-full transition-transform translate-x-[-50%] has-[.currency-and-locale-modal:not(.hidden)]:transform-none body header--mobile-menu'
+          data-toggle-menu-target='content'
+          style='background-color: <%= section.preferred_background_color %>; height: calc(100dvh - 58px - 36px);'
+          >
+          <%= render 'spree/page_sections/nav/mobile', section: section %>
+        </div>
       </div>
-    </div>
-  </nav>
-  <%= render 'spree/shared/cart_pane', section: section %>
-  <% if show_account_pane? %>
-    <%= render 'spree/shared/account_pane', section: section %>
-  <% end %>
-  <%= render 'spree/shared/search', section: section, logo: section.logo, logo_height: section.preferred_desktop_logo_height %>
-</header>
+
+    <%= render 'spree/shared/cart_pane', section: section %>
+    <% if show_account_pane? %>
+      <%= render 'spree/shared/account_pane', section: section %>
+    <% end %>
+    <%= render 'spree/shared/search', section: section, logo: section.logo, logo_height: section.preferred_desktop_logo_height %>
+  </header>
+<% end %>

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

@@ -1,4 +1,5 @@
-<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+
+<% cache_unless page_builder_enabled?, spree_storefront_base_cache_scope.call(section) do %>
   <div class="w-full relative image-banner" style="<%= section_styles(section) %>;height: <%= section.preferred_height %>px">
     <div class="w-full absolute left-0 image-banner--image-wrapper" style="height: <%= section.preferred_height %>px; opacity: <%= section.preferred_overlay_transparency %>%;">
       <% if section.image.attached? && section.image.variable? %>
@@ -9,7 +10,7 @@
           <source media="(max-width: 1080px)" srcset="<%= spree_image_url(section.image, width: 540, height: nil) %>">
           <source media="(max-width: 1200px)" srcset="<%= spree_image_url(section.image, width: 620, height: nil) %>">
           <source media="(min-width: 1201px)" srcset="<%= spree_image_url(section.image, width: 1000, height: nil) %>">
-          <%= spree_image_tag(section.image, width: 1000, class: "w-full h-full object-cover", loading: "lazy") %>
+          <%= spree_image_tag(section.image, width: 1000, class: "w-full h-full object-cover", loading: "lazy", alt: section.image_alt) %>
         </picture>
       <% end %>
     </div>
@@ -23,7 +24,7 @@
                                   'justify-center'
                                 end
     %>
-    <div class="flex h-full w-full items-center justify-center">
+    <div class="flex justify-center items-center w-full h-full">
       <div class="flex flex-col <%= vertical_alignment_class %> p-5 z-10 w-full gap-y-2 h-full image-banner--block-wrapper">
         <% section.blocks.includes(:rich_text_text, :links).each do |block| %>
           <% case block.type %>
@@ -38,7 +39,7 @@
           <% when 'Spree::PageBlocks::Buttons' %>
             <div <%= block_attributes(block) %> class="w-full text-center image-banner--buttons">
               <div class="inline-block">
-                <div class="flex flex-col lg:flex-row gap-4">
+                <div class="flex flex-col gap-4 lg:flex-row">
                   <% if block.link.present? %>
                     <% if block.link.linkable_url.present? %>
                       <%= page_builder_link_to block.link, label: block.link.label, class: "btn-#{block.preferred_button_style_1}", target: (block.link.open_in_new_tab ? "_blank" : nil) %>

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

@@ -1,4 +1,4 @@
-<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+<% cache_unless page_builder_enabled?, spree_storefront_base_cache_scope.call(section) do %>
   <div style="<%= section_styles(section) %>" class="image-with-text <%= 'right-aligned' if section.preferred_desktop_image_alignment == 'right' %>">
     <div class="page-container">
       <div class="lg:grid lg:grid-cols-12 lg:gap-6 image-with-text--container">
@@ -8,6 +8,7 @@
               <%= image_tag spree_image_url(section.image, width: 1000, height: nil),
                 class: "w-full h-full object-cover",
                 loading: :lazy,
+                alt: section.image_alt,
                 sizes: "(max-width: 1024px) 100vw, 50vw",
                 srcset: [640, 750, 828, 1080, 1200, 2000].map { |width|
                   "#{spree_image_url(section.image, width: width / 2, height: nil)} #{width}w"
@@ -46,7 +47,7 @@
             <% when 'Spree::PageBlocks::Buttons' %>
               <div class="w-full image-with-text--buttons" <%= block_attributes(block) %>>
                 <div class="inline-block">
-                  <div class="flex flex-col lg:flex-row gap-4">
+                  <div class="flex flex-col gap-4 lg:flex-row">
                     <% if block.link %>
                       <%= page_builder_link_to block.link,
                           label: block.link.label,

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

@@ -1,47 +1,51 @@
-<% img = section.image %>
+<% loaded ||= false %>
 
-<div class="w-full flex justify-center items-center relative" style="<%= section_styles(section) %>">
-  <% if img.attached? && img.variable? %>
+<div class="w-full flex justify-center items-center relative min-h-[200px]" style="<%= section_styles(section) %>">
+  <% if loaded %>
+    <% img = section.image %>
+    <% if img.attached? && img.variable? %>
     <img
-      class="w-full h-full absolute top-0 object-cover z-0"
+      class="object-cover absolute top-0 z-0 w-full h-full"
       style="opacity: <%= section.preferred_overlay_transparency %>%"
+      alt="<%= section.image_alt %>"
       src="<%= spree_image_url(img, width: 2000, height: nil) %>" />
-  <% end %>
-  <div class="w-full page-container flex flex-col text-center py-5 px-5 z-10">
-    <% section.blocks.includes(:rich_text_text).each do |block| %>
-      <% case block.type %>
-        <% when 'Spree::PageBlocks::Heading' %>
-          <h2 class='font-medium <%= block.preferred_size == 'small' ? 'text-xl lg:text-2xl' : block.preferred_size == 'medium' ? 'text-xl lg:text-3xl' : 'text-2xl lg:text-3xl' %>' <%= block_attributes(block) %>>
-            <%= block.text.body %>
-          </h2>
-        <% when 'Spree::PageBlocks::Text' %>
-          <div class='text-sm lg:text-base' <%= block_attributes(block) %>>
-            <%= block.text.body %>
-          </div>
-        <% when 'Spree::PageBlocks::NewsletterForm' %>
-          <%= form_for :newsletter, url: spree.newsletter_subscribers_path do |f| %>
-            <div class="flex items-center flex-col md:flex-row w-full <%= block_css_classes(block) %>" <%= block_attributes(block) %>>
-              <div class='relative w-full lg:w-[424px] flex'>
-                <%= hidden_field_tag :section_id, section.id %>
-                <%= f.email_field :email, placeholder: block.preferred_placeholder, required: true, class: 'focus:border-primary focus:ring-primary pr-36 text-sm bg-accent rounded-input border-accent py-2 px-4 w-full relative z-30 !leading-[46px]' %>
-                <div class="absolute right-2 top-1/2 transform -translate-y-1/2 z-40">
-                  <%= f.submit block.preferred_button_text.html_safe, class: "#{block.preferred_button_style == 'secondary' ? 'btn-secondary' : 'btn-primary'} content-center" %>
+    <% end %>
+    <div class="w-full page-container flex flex-col text-center py-5 px-5 z-10">
+      <% section.blocks.includes(:rich_text_text).each do |block| %>
+        <% case block.type %>
+          <% when 'Spree::PageBlocks::Heading' %>
+            <h2 class='font-medium <%= block.preferred_size == 'small' ? 'text-xl lg:text-2xl' : block.preferred_size == 'medium' ? 'text-xl lg:text-3xl' : 'text-2xl lg:text-3xl' %>' <%= block_attributes(block) %>>
+              <%= block.text.body %>
+            </h2>
+          <% when 'Spree::PageBlocks::Text' %>
+            <div class='text-sm lg:text-base' <%= block_attributes(block) %>>
+              <%= block.text.body %>
+            </div>
+          <% when 'Spree::PageBlocks::NewsletterForm' %>
+            <%= form_for :newsletter, url: spree.newsletter_subscribers_path do |f| %>
+              <div class="flex items-center flex-col md:flex-row w-full <%= block_css_classes(block) %>" <%= block_attributes(block) %>>
+                <div class='relative w-full lg:w-[424px] flex'>
+                  <%= hidden_field_tag :section_id, section.id %>
+                  <%= f.email_field :email, placeholder: block.preferred_placeholder, required: true, class: 'focus:border-primary focus:ring-primary pr-36 text-sm bg-accent rounded-input border-accent py-2 px-4 w-full relative z-30 !leading-[46px]' %>
+                  <div class="absolute right-2 top-1/2 transform -translate-y-1/2 z-40">
+                    <%= f.submit block.preferred_button_text.html_safe, class: "#{block.preferred_button_style == 'secondary' ? 'btn-secondary' : 'btn-primary'} content-center" %>
+                  </div>
                 </div>
               </div>
-            </div>
-          <% end %>
-        <% when 'Spree::PageBlocks::Subheading' %>
-          <h3 class='<%= block.size == 'small' ? 'text-lg' : block.size == 'medium' ? 'text-xl' : 'text-xl' %>' <%= block_attributes(block) %>>
-            <%= block.text.body %>
-          </h3>
-        <% when 'Spree::PageBlocks::Image' %>
-          <div <%= block_attributes(block) %> class="flex justify-center w-full">
-            <% if block.image.attached? && block.image.variable? %>
-              <% image_style = "aspect-ratio: #{spree_asset_aspect_ratio(block.image)}; --desktop-height: #{block.preferred_height}px; --mobile-height: #{block.preferred_mobile_height}px;" %>
-              <%= image_tag spree_image_url(block.image, width: 1000, height: 1000), height: block.preferred_height, class: "custom-desktop-height custom-mobile-height", style: image_style %>
             <% end %>
-          </div>
+          <% when 'Spree::PageBlocks::Subheading' %>
+            <h3 class='<%= block.size == 'small' ? 'text-lg' : block.size == 'medium' ? 'text-xl' : 'text-xl' %>' <%= block_attributes(block) %>>
+              <%= block.text.body %>
+            </h3>
+          <% when 'Spree::PageBlocks::Image' %>
+            <div <%= block_attributes(block) %> class="flex justify-center w-full">
+              <% if block.image.attached? && block.image.variable? %>
+                <% image_style = "aspect-ratio: #{spree_asset_aspect_ratio(block.image)}; --desktop-height: #{block.preferred_height}px; --mobile-height: #{block.preferred_mobile_height}px;" %>
+                <%= image_tag spree_image_url(block.image, width: 1000, height: 1000), alt: block.image_alt, height: block.preferred_height, class: "custom-desktop-height custom-mobile-height", style: image_style %>
+              <% end %>
+            </div>
+        <% end %>
       <% end %>
-    <% end %>
-  </div>
-</div>
+    </div>
+  <% end %>
+</div>

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

@@ -1,4 +1,4 @@
-<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+<% cache_unless page_builder_enabled?, spree_storefront_base_cache_scope.call(section) do %>
   <div class="page-container">
     <h1 class="text-xl lg:text-2xl font-medium py-10 lg:pt-16 lg:pb-6" style="<%= section_heading_styles(section) %>">
       <%= section.preferred_title.presence || title %>