spree_storefront 5.0.0.rc1

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

@@ -0,0 +1,58 @@
+<%
+sticky_button_classes ||= ''
+without_fixed_button ||= false
+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)
+variant_not_available = selected_variant.nil? ||
+                        product.discontinued? ||
+                        selected_variant.discontinued? ||
+                        !selected_variant.purchasable? ||
+                        selected_variant.price_in(current_currency).amount.nil?
+%>
+
+<div class='<%= sticky_button_classes %> bottom-0 flex flex-col gap-4 z-10' data-sticky-button-target='stickyButton'>
+  <%= button_tag type: (variant_not_available || not_all_options_selected ? 'button' : 'submit'),
+                  class: 'btn-primary btn-icon w-full h-12 add-to-cart-button',
+                  data: {
+                    action: ('modal#open' if variant_not_available),
+                    product_form_target: 'submit'
+                  },
+                  disabled: product.price_in(current_currency).zero? do %>
+    <% if not_selected_options.size == 1 %>
+      <span><%= Spree.t(:please_select, option: not_selected_options[0].presentation) %></span>
+    <% elsif not_all_options_selected %>
+      <span><%= Spree.t(:please_select_all_options) %></span>
+    <% elsif variant_not_available %>
+      <span><%= Spree.t(:notify_me_when_available) %></span>
+      <%= render 'spree/shared/icons/bell' %>
+    <% else %>
+      <span><%= Spree.t(:add_to_cart) %></span>
+      <%= render 'spree/shared/icons/cart' %>
+    <% end %>
+  <% end %>
+</div>
+<% unless without_fixed_button %>
+  <div class='p-4 fixed-pdp-button bg-background fixed bottom-0 border-t border-default hidden w-full z-40 left-0' data-sticky-button-target='fixedButton'>
+    <%= button_tag type: (variant_not_available || not_all_options_selected ? 'button' : 'submit'),
+                  class: 'btn-primary btn-icon w-full h-12 add-to-cart-button',
+                  data: {
+                    action: ('modal#open' if variant_not_available),
+                    product_form_target: 'submit'
+                  },
+                  disabled: product.price_in(current_currency).zero? do %>
+      <% if not_selected_options.size == 1 %>
+        <span><%= Spree.t(:please_select, option: not_selected_options[0].presentation) %></span>
+      <% elsif not_all_options_selected %>
+        <span><%= Spree.t(:please_select_all_options) %></span>
+      <% elsif variant_not_available %>
+        <span><%= Spree.t(:notify_me_when_available) %></span>
+        <%= render 'spree/shared/icons/bell' %>
+      <% else %>
+        <span><%= Spree.t(:add_to_cart) %></span>
+        <%= render 'spree/shared/icons/cart' %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,36 @@
+<div
+  data-modal-target="container"
+  data-action="waitlist:created@window->modal#close click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
+  class="hidden animate-fadeIn fixed inset-0 overflow-y-auto flex items-end md:items-center justify-center z-[9999] h-dvh w-full"
+  style="animation-duration: 150ms;">
+  <div class="w-full lg:w-[600px] relative h-auto lg:max-h-screen flex justify-center flex-col gap-4 bg-background p-5 ">
+    <button
+      type="button"
+      data-waitlist-close-button
+      data-action="modal#close"
+      class="absolute top-5 right-5">
+      <%= render 'spree/shared/icons/close' %>
+    </button>
+    <div>
+      <h4 class="text-xl">
+        <%= Spree.t(:product_sold_out)%>
+      </h4>
+      <p>
+        <%= Spree.t(:add_to_waitlist_description) %>
+      </p>
+    </div>
+    <%= form_for :waitlist, url: spree.waitlists_path, method: :post, class: "flex w-full gap-4 flex-col", data: { product_form_target: 'addToWaitlistForm', controller: 'turbo-stream-form enable-button' } do |f| %>
+      <div class="w-full">
+        <%= f.hidden_field :variant_id, value: variant.id %>
+        <%= f.email_field :email, value: try_spree_current_user&.email, class: 'w-full', required: true, placeholder: Spree.t(:email), data: { enable_button_target: 'input' } %>
+      </div>
+      <div class="flex flex-col gap-2">
+        <label class="flex items-center gap-2 cursor-pointer group text-sm">
+          <%= f.check_box :subscribe_to_newsletter, class: 'input-checkbox group-focus-within:outline' %>
+          <%= Spree.t('storefront.newsletter_subscription.join') %>
+        </label>
+        <%= f.button Spree.t(:add_to_waitlist), type: 'submit', class: 'btn-primary w-full btn-icon h-12', disabled: true, data: { enable_button_target: 'button' } %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,33 @@
+<% css_classes ||= 'btn-icon btn--wishlist' %>
+<% icon_size ||= 18 %>
+<% variant ||= nil %>
+<div class="add-to-wishlist">
+  <% if variant %>
+    <div class="wished-item-<%= variant.id %> h-full"
+      data-controller="wished-item"
+      data-wished-item-variant-id-value="<%= variant.id %>"
+    >
+      <%= button_tag type: 'submit',
+          class: "#{css_classes} disabled:animate-pulse",
+          data: { 'wished-item-target': 'add', action: 'wished-item#add' },
+          aria: { label: Spree.t('storefront.wished_items.add') } do %>
+        <%= render 'spree/shared/icons/heart', width: icon_size, height: icon_size %>
+        <span class="sr-only"><%= Spree.t('storefront.wished_items.add') %></span>
+      <% end %>
+      <%= button_tag type: 'submit',
+          class: "#{css_classes} disabled:animate-pulse",
+          data: { 'wished-item-target': 'remove', action: 'wished-item#remove' },
+          aria: { label: Spree.t('storefront.wished_items.remove') } do %>
+        <%= render 'spree/shared/icons/heart', active: true, width: icon_size, height: icon_size %>
+        <span class="sr-only"><%= Spree.t('storefront.wished_items.remove') %></span>
+      <% end %>
+    </div>
+  <% else %>
+    <%= button_tag class: "#{css_classes} disabled:text-accent",
+                   data: { action: 'product-form#showNotSelectedOptions', 'product-form-target': 'addToWishlist' },
+                   aria: { label: Spree.t('storefront.wished_items.select_variant') } do %>
+      <%= render 'spree/shared/icons/heart', width: icon_size, height: icon_size %>
+      <span class="sr-only"><%= Spree.t('storefront.wished_items.select_variant') %></span>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,23 @@
+<nav id="breadcrumbs" aria-label="breadcrumbs">
+  <!-- desktop -->
+  <ul class="hidden md:inline-flex space-x-3 mb-4 lg:mb-5 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"></div>
+    <% end %>
+
+    <li class="text-text opacity-100"><%= product.name %></li>
+  </ul>
+
+  <!-- mobile -->
+  <% if taxons.any? %>
+    <ul class="md:hidden mb-4 text-sm">
+      <li class="opacity-50">
+        <%= link_to spree.nested_taxons_path(taxons.last), title: taxons.last.name, class: 'inline-flex items-center gap-1' do %>
+          <strong><%= render 'spree/shared/icons/chevron', size: 16 %></strong>
+          <%= taxons.last.name %>
+        <% end %>
+      </li>
+    </ul>
+  <% end %>
+</nav>

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

@@ -0,0 +1,19 @@
+<% color_preview_class ||= '' %>
+<% color_preview_container_class ||= '' %>
+<% disabled ||= false %>
+<% with_name ||= false %>
+
+<div class='border border-default peer-checked:border-primary peer-checked:border-solid p-0.5 inline-flex items-center gap-2 label-container hover:border-dashed hover:border-primary rounded-full'>
+  <div class='color-preview w-[24px] h-[24px] shrink-0 lg:block relative rounded-full <%= color_preview_container_class %> <%= 'opacity-50' if disabled %>'>
+    <% if disabled %>
+      <div class='absolute <%= color_preview_class %>'>
+        <%= render 'spree/shared/icons/disabled', stroke: "var(--border-default-color)" %>
+      </div>
+    <% end %>
+  </div>
+  <% if with_name %>
+    <span class='color-label !leading-[30px] text-sm lg:!block lg:pr-2'>
+      <%= h(color) %>
+    </span>
+  <% end %>
+</div>

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

@@ -0,0 +1,61 @@
+<% color_option = product.option_types.find { |option_type| option_type.color? } %>
+<% variants_with_color = product.variants.find_all { |variant| variant.option_values.find { |ov| ov.option_type_id == color_option.id } } if color_option.present? %>
+
+<% if color_option.present? && variants_with_color.length > 0 %>
+  <% cache spree_base_cache_scope.call(variants_with_color) do %>
+    <% color_values = product.option_values.find_all { |ov| ov.option_type_id == color_option.id }.uniq %>
+    <%= raw(Spree::ColorsPreviewStylesPresenter.new(color_values.map { |o| { name: o.presentation, filter_name: o.name } }).to_s) %>
+
+    <div class="product-card-color-swatches pt-2 flex flex-wrap gap-0.5" data-plp-variant-picker-target="colorsContainer">
+      <% color_values.each do |color_value| %>
+        <% selected_variant = variants_with_color.find { |variant| variant.option_values.include?(color_value) } %>
+        <% next if selected_variant.blank? %>
+
+        <% cache spree_base_cache_scope.call(selected_variant) do %>
+          <div
+            data-variant-id="<%= selected_variant.id %>"
+            class="[&:nth-of-type(n+4)]:hidden [&:nth-of-type(n+4)]:md:block [&:nth-of-type(n+8)]:md:hidden cursor-pointer"
+            data-action="mouseenter->plp-variant-picker#handlePreview click->plp-variant-picker#redirectToVariant touch->plp-variant-picker#redirectToVariant"
+            data-color="<%= color_value.presentation %>">
+            <% if selected_variant.available? %>
+              <%= render 'spree/products/color_picker',
+                with_name: false,
+                color: color_value.presentation,
+                color_preview_container_class: "lg:w-[28px] lg:h-[28px]",
+                color_preview_class: "lg:top-[2px] lg:left-[2px]" %>
+            <% else %>
+              <%= render 'spree/products/color_picker',
+                with_name: false,
+                color: color_value.presentation,
+                disabled: true,
+                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 %>
+              <template data-featured-image-template>
+                <%= render 'spree/products/featured_image',
+                  object: selected_variant %>
+              </template>
+            <% end %>
+            <template data-add-to-wishlist-template>
+              <%= render 'spree/products/add_to_wishlist', selected_variant: selected_variant %>
+            </template>
+            <template data-price-template>
+              <%= render 'spree/products/price',
+                product: product,
+                selected_variant: selected_variant,
+                use_variant: true,
+                price_class: "mt-2 font-light product-card-price" %>
+            </template>
+          <% end %>
+        </div>
+      <% end %>
+      <% # Plus Button %>
+      <% colors_count = color_values.length %>
+      <%= button_tag class: "border border-default peer-checked:border-primary peer-checked:border-solid p-0.5 items-center justify-center hover:border-dashed hover:border-primary rounded-full h-[30px] w-[30px] md:h-[34px] md:w-[34px] #{colors_count < 4 ? 'hidden' : 'inline-flex'} #{colors_count < 8 ? 'md:hidden' : 'md:inline-flex'}",
+                     data: { action: "click->plp-variant-picker#showMoreColors" } do %>
+        <%= render 'spree/shared/icons/plus', class: "pointer-events-none" %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,55 @@
+<% cache spree_base_cache_scope.call(product) do %>
+  <% if product.storefront_description.present? %>
+    <% description_text = strip_tags(product.storefront_description) %>
+    <div data-controller="read-more" class="py-4 flex flex-col gap-4" data-read-more-more-text-value="<%= Spree.t(:read_more) %>" data-read-more-less-text-value="Read less">
+      <div class="prose product-description text-sm <%= 'product-description-truncated' if description_text.size > 250 %>" data-read-more-target="content">
+        <%= raw(product.storefront_description) %>
+      </div>
+      <% if description_text.size > 250 %>
+        <%= button_tag Spree.t(:read_more), data: { action: "read-more#toggle" }, class: "font-bold underline text-sm" %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="st-accordion" data-controller="accordion">
+    <% short_description = product.property('short_description') %>
+
+    <% if short_description.present? %>
+      <div class="product-property py-4 border-b border-default">
+        <%= link_to '#property_details', class: 'text-sm uppercase tracking-widest inline-flex w-full justify-between !border-b-transparent', data: { action: 'accordion#toggle' } do %>
+          <%= Spree.t(:details) %>
+          <%= render 'spree/shared/icons/chevron_down' %>
+        <% end %>
+        <div class="text-sm st-accordion__content" data-accordion-id="property_details">
+          <div class="pt-4"><%= product.description %></div>
+        </div>
+      </div>
+    <% end %>
+
+    <% shipping_policy = current_store.customer_shipping_policy %>
+    <% if shipping_policy.present? %>
+      <div class="product-property py-4 border-b border-default">
+        <%= link_to "#property_shipping_policy", class: 'text-sm uppercase tracking-widest inline-flex w-full justify-between !border-b-transparent', data: { action: 'accordion#toggle' } do %>
+          <%= Spree.t(:shipping_policy) %>
+          <%= render 'spree/shared/icons/chevron_down' %>
+        <% end %>
+        <div class="text-sm st-accordion__content" data-accordion-id="property_shipping_policy">
+          <div class="pt-4"><%= shipping_policy %></div>
+        </div>
+      </div>
+    <% end %>
+
+    <% product.product_properties.joins(:property).merge(Spree::Property.available_on_front_end).sort_by_property_position.each do |product_property| %>
+      <div class="product-property py-4 border-b border-default">
+
+        <%= link_to "#property_#{product_property.id}", class: 'text-sm uppercase tracking-widest inline-flex w-full justify-between !border-b-transparent', data: { action: 'accordion#toggle' } do %>
+          <%= product_property.property.presentation %>
+          <%= render 'spree/shared/icons/chevron_down' %>
+        <% end %>
+        <div class="text-sm st-accordion__content" data-accordion-id="property_<%= product_property.id %>">
+          <div class="pt-4"><%= simple_format(product_property.value) %></div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,37 @@
+<% 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') %>
+
+  <figure class="group <%= 'aspect-1' if height == width %> card-product-featured-images-container bg-transparent h-full">
+    <% if with_cover_image %>
+      <% object_class = 'object-cover object-center' %>
+    <% else %>
+      <% object_class = 'object-contain object-top' %>
+    <% end %>
+
+    <% image_variant_options = spree_image_variant_options(resize_and_pad: [width * 2, height * 2, { alpha: true }]) %>
+
+    <% image_hover_class = object.secondary_image.present? && object.secondary_image.attached? ? 
+         "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}" %>
+
+    <%= image_tag main_app.cdn_image_url(object.default_image.variant(image_variant_options)),
+          loading: :lazy,
+          alt: object.default_image.alt,
+          class: image_hover_class %>
+
+    <% if 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}" %>
+
+      <%= image_tag main_app.cdn_image_url(object.secondary_image.variant(image_variant_options)),
+            loading: :lazy,
+            alt: object.secondary_image.alt,
+            class: secondary_image_class %>
+    <% end %>
+  </figure>
+<% else %>
+  <div class="w-full aspect-1 bg-accent"></div>
+<% end %>

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

@@ -0,0 +1,45 @@
+<div
+  id="slideover-filters"
+  data-slideover-target="menu"
+  class="sidebar-pane relative flex-1 !flex flex-col w-full pt-4 bg-background md:border-r border-default transition duration-300 -translate-x-full">
+  <div class="flex-shrink-0 flex items-center justify-between pb-4 px-4 border-b border-default">
+    <span class="text-xl uppercase font-medium"><%= Spree.t(:filter) %></span>
+    <%= button_tag type: 'button',
+                   class: "flex items-center justify-center rounded-full focus:outline-none focus:bg-background",
+                   aria: { label: Spree.t(:close_sidebar) },
+                   data: { action: "slideover#toggle" } do %>
+      <%= render 'spree/shared/icons/cross' %>
+    <% end %>
+  </div>
+  <%= form_with url: canonical_path, method: :get, class: "pt-4 lg:pt-10 flex-1 h-0 overflow-y-auto" do |f| %>
+    <%= f.hidden_field :q, value: params[:q] %>
+    <%= f.hidden_field :sort_by, value: params[:sort_by] %>
+    <nav class="flex flex-col justify-between h-full">
+      <div class="flex flex-col gap-4">
+        <%= render 'spree/products/filters/availability', f: f %>
+        <%= render 'spree/products/filters/price', f: f %>
+
+        <% current_store.taxonomies.order(:position).each do |taxonomy|  %>
+          <%= render 'spree/products/filters/taxons', taxonomy: taxonomy, f: f %>
+        <% end %>
+
+        <% Spree::OptionType.filterable.order(:position).includes(:option_values).each do |filter| %>
+          <% if filter.color? %>
+            <%= render 'spree/products/filters/colors', filter: filter, f: f %>
+          <% else %>
+            <%= render 'spree/products/filters/generic', filter: filter, f: f %>
+          <% end %>
+        <% end %>
+      </div>
+      <div class="bg-accent p-4 lg:py-6 lg:px-10 flex flex-row justify-between gap-8 sticky bottom-0 left-0 mt-4">
+        <%= f.button Spree.t(:apply), class: "btn-primary block text-center flex-grow", type: "submit" %>
+        <% if current_taxon || params[:filter].present? %>
+          <%= link_to url_for(permitted_products_params.except(:page, :filter)), class: "inline-flex items-center justify-center gap-3 font-semibold text-sm tracking-widest", data: { turbo_method: :get, turbo_frame: "_top" } do %>
+            <span><%= Spree.t(:clear_all) %></span>
+            <%= render 'spree/shared/icons/cross', width: 20, height: 20 %>
+          <% end %>
+        <% end %>
+      </div>
+    </nav>
+  <% end %>
+</div>

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

@@ -0,0 +1,38 @@
+<script type="application/ld+json" data-test-id="product-json-ld">
+  <% first_or_default_variant = product.first_or_default_variant(current_currency) %>
+  {
+    "@context": "https://schema.org/",
+    "@type": "Product",
+    "name": <%= product.name.to_json.html_safe %>,
+    "url": <%= spree.product_url(product).to_json.html_safe %>,
+  <% if product.featured_image %>
+    "image": [
+      <%= main_app.cdn_image_url(product.featured_image.variant(spree_image_variant_options(resize_to_limit: [1260, 1260]))).to_json.html_safe %>
+    ],
+  <% end %>
+  <% if product.description.present? %>
+    "description": <%= strip_tags(product.description).to_json.html_safe %>,
+  <% end %>
+  <% if !product.has_variants? %>
+    <% if first_or_default_variant.sku.present? %>"sku": <%= first_or_default_variant.sku.to_json.html_safe %>,<% end %>
+  <% elsif selected_variant %>
+    <% if selected_variant.sku.present? %>"sku": <%= selected_variant.sku.to_json.html_safe %>,<% end %>
+  <% end %>
+  <% if product.brand %>
+    "brand": {
+      "@type": "Brand",
+      "name": <%= product.brand_name.to_json.html_safe %>
+    },
+  <% end %>
+  "offers": [
+  <% if product.has_variants? %>
+    <%= render partial: "spree/products/json_ld_variant", collection: product.variants, as: :variant, locals: { product: product }, cached: spree_base_cache_scope %>
+  <% else %>
+    <%= render "spree/products/json_ld_variant", product: product, variant: first_or_default_variant %>
+  <% end %>
+  ]
+  }
+</script>
+<script type="application/ld+json">
+  <%= product_json_ld_breadcrumbs(product).to_json.html_safe %>
+</script>

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

@@ -0,0 +1,9 @@
+<% cache [spree_base_cache_key, products,'json-ld-list'], expires_in: 1.day do %>
+  <script type="application/ld+json" data-test-id="product-list-json-ld">
+    {
+      "@context": "https://schema.org",
+      "@type": "ItemList",
+      "itemListElement": <%= product_list_json_ld_elements(products.to_a.pluck(:slug)).to_json.html_safe %>
+    }
+  </script>
+<% end %>

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

@@ -0,0 +1,10 @@
+{
+  "@type": "Offer",
+  <% if variant.sku.present? %>
+    "sku": <%= variant.sku.to_json.html_safe %>,
+  <% end %>
+  "availability": "http://schema.org/<%= variant.available? ? 'InStock' : 'OutOfStock' %>",
+  "price": <%= variant.amount_in(current_currency).to_json.html_safe %>,
+  "priceCurrency": <%= current_currency.to_json.html_safe %>,
+  "url": <%= spree.product_url(product, variant_id: variant.id).to_json.html_safe %>
+}

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

@@ -0,0 +1,26 @@
+<% shared_class = "label rounded-full px-3 py-1 text-sm uppercase z-10 left-2 product-label" %>
+<% mobile_pdp ||= false %>
+
+<% if mobile_pdp %>
+  <% shared_class += ' bottom-2' %>
+<% else %>
+  <% shared_class += ' top-2' %>
+<% end %>
+
+<% if !product.available? || (@variant_from_options.present? && !@variant_from_options.in_stock?) %>
+  <div class='<%= shared_class %> bg-neutral-400 text-background product-label--sold-out'>
+    <%= Spree.t(:sold_out) %>
+  </div>
+<% elsif product.on_sale?(current_currency) && !@all_options_selected %>
+  <div class='<%= shared_class %> bg-danger text-background product-label--sale'>
+    <%= Spree.t(:sale) %>
+  </div>
+<% elsif @variant_from_options&.on_sale?(current_currency) && @all_options_selected %>
+  <div class='<%= shared_class %> bg-danger text-background product-label--sale'>
+    <%= Spree.t(:sale) %>
+  </div>
+<% elsif product.taggings.find { |tagging| tagging.context == 'labels' } %>
+  <div class='<%= shared_class %> bg-background border border-primary product-label--custom' data-title="<%= product.labels.first.name.strip.downcase.truncate(20) %>">
+    <%= product.labels.first.name.truncate(20) %>
+  </div>
+<% end %>

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

@@ -0,0 +1,94 @@
+<% desktop ||= false %>
+
+<% cache [*spree_base_cache_scope.call(product), images, desktop].compact do %>
+  <% if desktop == true %>
+    <div
+      class="media-gallery w-full h-full media-gallery-desktop"
+      id="media-gallery-<%= product.id %>-desktop"
+      data-controller="lightbox pdp-desktop-gallery">
+      <div class="grid grid-cols-[6.5rem,_1fr] grid-rows-1 gap-2 w-full media-gallery-desktop__wrapper">
+        <div class="flex flex-col h-full w-full aspect-1 overflow-hidden">
+          <%= button_tag class: "w-full bg-background py-2 flex justify-center items-center disabled:opacity-50 media-gallery-desktop-arrow", data: { pdp_desktop_gallery_target: "prevArrow" } do %>
+            <span class="rotate-180">
+              <%= render 'spree/shared/icons/chevron_down' %>
+            </span>
+          <% end %>
+          <div class="swiper h-full w-full block" data-pdp-desktop-gallery-target="imagesThumbsSlider">
+            <div class="swiper-wrapper w-full h-full block">
+              <% images.each do |image| %>
+                <div class="swiper-slide !h-min cursor-pointer w-full">
+                  <div
+                    class="relative aspect-1 w-full block "
+                    id="thumb-desktop-product-image-<%= image.id %>"
+                    data-turbo-permanent>
+                    <%= image_tag main_app.cdn_image_url(image.variant(spree_image_variant_options(resize_to_fill: [200, 200]))), alt: image_alt(image), class: 'w-full h-full' %>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+          </div>
+          <%= button_tag class: "w-full bg-background py-2 flex justify-center items-center disabled:opacity-50 media-gallery-desktop-arrow", data: { pdp_desktop_gallery_target: "nextArrow" } do %>
+            <%= render 'spree/shared/icons/chevron_down' %>
+          <% end %>
+        </div>
+        <div data-pdp-desktop-gallery-target="imagesSlider" class="overflow-hidden swiper relative w-full h-min">
+          <div class="swiper-wrapper w-full h-min">
+            <% images.each do |image| %>
+              <div class="swiper-slide w-full">
+                <div
+                  class="product-image relative w-full aspect-1"
+                  id="main-desktop-product-image-<%= image.id %>"
+                  data-turbo-permanent>
+                  <%= link_to main_app.cdn_image_url(image.variant(spree_image_variant_options(resize_to_fill: [2000, 2000]))), data: { pswp_width: "2000", pswp_height: "2000" } do %>
+                    <div class="zoom-icon hidden absolute bottom-2 right-2 p-4 bg-background rounded-full opacity-75 hover:opacity-100">
+                      <%= render 'spree/shared/icons/zoom' %>
+                    </div>
+                    <%= image_tag main_app.cdn_image_url(image.variant(spree_image_variant_options(resize_to_fill: [2000, 2000]))), alt: image_alt(image), class: 'w-full h-full' %>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+          </div>
+          <%= render 'spree/products/label', product: product %>
+          <div data-pdp-desktop-gallery-target="imagesSliderPagination" class="swiper-pagination"></div>
+        </div>
+      </div>
+    </div>
+  <% else %>
+    <!-- media gallery for mobile -->
+    <% if images.any? %>
+      <div
+        id="media-gallery-<%= product.id %>-mobile"
+        data-controller="lightbox carousel"
+        class="media-gallery swiper-container relative overflow-hidden"
+        data-carousel-options-value='{
+        "slidesPerView": 1,
+        "centeredSlides": true,
+        "spaceBetween": 10,
+        "grabCursor": true
+      }'>
+        <div class="swiper-wrapper">
+          <% images.each do |image| %>
+            <div class="swiper-slide aspect-1" id="swiper-slide-<%= image.id %>">
+              <%= link_to main_app.cdn_image_url(image.variant(spree_image_variant_options(resize_to_fill: [2000, 2000]))), class: "absolute top-2 right-2 p-2 bg-background rounded-full opacity-75 hover:opacity-100", data: { pswp_width: "2000", pswp_height: "2000" } do %>
+                <%= render 'spree/shared/icons/zoom' %>
+              <% end %>
+              <%= render 'spree/products/label', product: product, mobile_pdp: true %>
+              <%= image_tag main_app.cdn_image_url(image.variant(spree_image_variant_options(resize_to_fill: [720, 720]))), alt: image_alt(image), class: 'h-full w-full object-cover object-center', style: 'min-height: 358px' %>
+            </div>
+          <% end %>
+        </div>
+        <% if images.length > 1 %>
+          <div class="swiper-pagination-product-<%= product.id %> mt-3 items-center flex mx-auto align-center justify-center" data-carousel-target="pagination"></div>
+        <% end %>
+      </div>
+      <div id='pinch-to-zoom' class='fixed top-0 left-0 p-4 bg-background z-50 flex justify-center items-center flex-col'>
+        <div class='w-14 h-14'><%= render 'spree/shared/icons/pinch' %></div>
+        <div class='text-sm uppercase pt-4 px-5 text-center !leading-tight'>
+          Pinch to <br>
+          zoom
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,59 @@
+<% use_variant ||= false %>
+<% sold_out ||= !product.available? %>
+<% price_class ||= ''%>
+<% price_container_class ||= '' %>
+<% selected_variant ||= nil %>
+<div class="<%= price_class %>">
+  <div class="flex flex-col gap-3 <%= price_container_class %>">
+    <%
+      if use_variant
+        target = selected_variant
+        sold_out = selected_variant.nil?
+        if sold_out
+          target = @variant_from_options
+          sold_out = @variant_from_options.nil?
+        end
+      else
+        target = product
+        sold_out = !product.available?
+      end
+
+      target ||= product
+
+      price = target.price_in(current_currency)
+      money_price = price.display_amount
+
+      if target.is_a?(Spree::Product) && !use_variant && product.price_varies?(current_currency)
+        price = target.lowest_price(current_currency)
+        money_price = price.display_amount
+        money_price = "#{Spree.t(:from)}: #{money_price}"
+      end
+    %>
+    <div>
+      <% if price.compare_at_amount.present? && price.compare_at_amount > price.amount %>
+        <span class="hidden">
+          <%= Spree.t(:regular_price) %>
+        </span>
+        <p class="inline pr-2 opacity-50 line-through">
+          <%= price.display_compare_at_amount %>
+        </p>
+        <span class="hidden pr-2">
+          <%= Spree.t(:sale_price) %>
+        </span>
+        <p class="inline text-danger">
+          <%= money_price %>
+        </p>
+      <% else %>
+        <span class="hidden">
+          <%= Spree.t(:regular_price) %>
+        </span>
+
+        <% if price&.amount.nil? %>
+          <span class="uppercase"><%= Spree.t(:not_available) %></span>
+        <% else %>
+          <p><%= money_price %></p>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>