spree_frontend 4.2.3.1 → 4.3.0.rc2

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

@@ -0,0 +1,8 @@
+<script>
+  SpreePaths = <%==
+  {
+    mounted_at: Rails.application.routes.url_helpers.spree_path(trailing_slash: true),
+    admin: Spree.admin_path.gsub(/\A(\/)?(.*[^\/])(\/)?\z/, '\\2/')
+  }.to_json
+  %>
+</script>

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

@@ -0,0 +1,4 @@
+<% selected_properties = params.dig(:properties, "#{property.filter_param}")&.split(',') || [] %>
+<% property.uniq_values.each do |value| %>
+  <%= property_value_filter_link(property, value, permitted_params) %>
+<% end %>

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

@@ -4,7 +4,8 @@
         {
           coupon_code_applied: Spree.t(:coupon_code_applied),
           coupon_code_removed: Spree.t(:coupon_code_removed),
-          coupon_code_error_icon: image_path('error.svg')
+          coupon_code_error_icon: image_path('error.svg'),
+          credit_card_remove_confirmation: Spree.t(:credit_card_remove_confirmation)
         }.to_json
                            %>
   });

data/app/views/spree/shared/carousel/_single.html.erb

@@ -43,7 +43,7 @@
     <% images.each_with_index do |image, imageIndex| %>
       <div
         class="carousel-item product-carousel-item<%= ' active' if imageIndex == 0 %>"
-        data-variant-is-master="<%= image.viewable_id == @product.master_id %>"
+        data-variant-is-master="<%= image.viewable_id == @product.master.id %>"
         data-variant-id="<%= image.viewable_id %>">
         <div class="product-carousel-item-squared <%= 'product-carousel-item-squared-only' if images.length == 1 %>">
           <% image_attrs = {

data/app/views/spree/shared/carousel/_thumbnails.html.erb

@@ -17,7 +17,7 @@
               <div
                 class="product-thumbnails-carousel-item-single product-thumbnails-carousel-item-single--visible"
                 data-product-carousel-to-slide="<%= image_index %>"
-                data-variant-is-master="<%= image.viewable_id == @product.master_id %>"
+                data-variant-is-master="<%= image.viewable_id == @product.master.id %>"
                 data-variant-id="<%= image.viewable_id %>">
                 <%= lazy_image(
                   src: main_app.url_for(image.url(:pdp_thumbnail)),

data/app/views/spree/shared/cms/pages/_edit_mode.html.erb

@@ -0,0 +1,13 @@
+<% if edit_mode %>
+  <div class="fixed-bottom text-center">
+    <div class="row">
+      <div id="draftNotice" class="col-12 d-flex w-100 p-4 justify-content-center align-items-center bg-dark">
+        <span class="text-white">
+          <h5 class="mb-0">
+            <%= Spree.t('draft_mode') %>
+          </h5>
+        </span>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/shared/cms/sections/_featured_article.html.erb

@@ -0,0 +1,27 @@
+<% if section.gutters? %>
+  <% section_padding = 'px-3' %>
+<% else %>
+  <% section_padding = 'px-0' %>
+<% end %>
+
+<div class="col-12 <%= section_padding %>">
+  <div class="text-center homepage-fashion-trends-box">
+    <% if section.title.present? %>
+      <div class="homepage-fashion-trends-box-summer-text mb-1"><%= section.title %></div>
+    <% end %>
+
+    <% if section.subtitle.present? %>
+      <div class="homepage-fashion-trends-box-fashion-trends-text mb-2"><%= section.subtitle %></div>
+    <% end %>
+
+    <div class="homepage-fashion-trends-box-description-text text-center mb-3">
+      <div class="mb-3">
+        <%= raw section.rte_content %>
+      </div>
+
+      <% if section.button_text.present? && section.link.present? %>
+        <%= link_to section.button_text, spree_localized_link(section), class: 'btn text-center spree-btn btn-outline-primary w-75' %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/spree/shared/cms/sections/_hero_image.html.erb

@@ -0,0 +1,60 @@
+<% if section.fullscreen? %>
+  <% if section.gutters? %>
+    <% section_padding = 'px-3' %>
+  <% else %>
+    <% section_padding = 'px-0' %>
+  <% end %>
+<% else %>
+  <% section_padding = 'px-2' %>
+<% end %>
+<div class="col-12 homepage-hero-image position-relative p-0 <%= section_padding %>">
+
+  <div class="bg-light" style="--aspect-ratio:12/5;">
+    <% if section.image_one.attached? %>
+
+        <!-- SM to MD -->
+        <img class="d-block d-md-none lazyload"
+          data-src="<%= main_app.url_for(section.img_one_sm) %>"
+          data-srcset="<%= main_app.url_for(section.img_one_sm) %>"
+          alt="<%= section&.title %>">
+
+        <!-- MD to LG -->
+        <img class="d-none d-md-block d-lg-none lazyload"
+          data-src="<%= main_app.url_for(section.img_one_md) %>"
+          data-srcset="<%= main_app.url_for(section.img_one_md) %>"
+          alt="<%= section&.title %>">
+
+        <!-- LG to XL -->
+        <img class="d-none d-lg-block d-xl-none lazyload"
+          data-src="<%= main_app.url_for(section.img_one_lg) %>"
+          data-srcset="<%= main_app.url_for(section.img_one_lg) %>"
+          alt="<%= section&.title %>">
+
+        <!-- XL UP -->
+        <img class="d-none d-xl-block lazyload"
+          data-src="<%= main_app.url_for(section.img_one_xl) %>"
+          data-srcset="<%= main_app.url_for(section.img_one_xl) %>"
+          alt="<%= section&.title %>">
+
+     <% else %>
+       <%= icon( name: 'card-image',
+                 classes: 'text-black-50',
+                 width: 26,
+                 height: 26) %>
+     <% end %>
+
+    <div class="hero-content position-absolute-y-center">
+      <% if section.title.present? %>
+        <div class="homepage-hero-image-text mx-auto pb-0 pb-sm-2 pb-md-3">
+          <%= section.title %>
+        </div>
+      <% end %>
+
+      <% if section.link.present? && section.button_text.present? %>
+        <div>
+          <%= link_to section.button_text, spree_localized_link(section), class: 'btn btn-primary spree-btn px-5' %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/spree/shared/cms/sections/_image_gallery.html.erb

@@ -0,0 +1,171 @@
+<% if section.fullscreen? %>
+  <% if section.default_layout? %>
+    <% section_one_padding = 'pl-3' %>
+    <% section_two_padding = 'pr-3' %>
+  <% else %>
+    <% section_one_padding = 'pr-3 order-2' %>
+    <% section_two_padding = 'pl-3 order-1' %>
+  <% end %>
+<% else %>
+  <% if section.default_layout? %>
+    <% section_one_padding = '' %>
+    <% section_two_padding = '' %>
+  <% else %>
+    <% section_one_padding = 'order-2' %>
+    <% section_two_padding = 'order-1' %>
+  <% end %>
+<% end %>
+
+<% if section.show_labels? %>
+  <% labels_class = 'homepage-taxon-box-text' %>
+<% else %>
+  <% labels_class = 'd-none' %>
+<% end %>
+
+<% if section.link_one.present? && section.link_type_one == 'Spree::Taxon' %>
+  <% link_one = spree.nested_taxons_path(section.link_one) %>
+  <% link_one_classes = 'homepage-taxon-box bg-light' %>
+<% elsif section.link_one.present? && section.link_type_one == 'Spree::Product' %>
+  <% link_one = spree.product_path(section.link_one) %>
+  <% link_one_classes = 'homepage-taxon-box bg-light' %>
+<% else %>
+  <% link_one = nil %>
+  <% link_one_classes = 'homepage-taxon-box bg-light pointer-events-none cursor-default' %>
+<% end %>
+
+<% if section.link_two.present? && section.link_type_two == 'Spree::Taxon' %>
+  <% link_two = spree.nested_taxons_path(section.link_two) %>
+  <% link_two_classes = 'homepage-taxon-box bg-light' %>
+<% elsif section.link_two.present? && section.link_type_two == 'Spree::Product' %>
+  <% link_two = spree.product_path(section.link_two) %>
+  <% link_two_classes = 'homepage-taxon-box bg-light' %>
+<% else %>
+  <% link_two = nil %>
+  <% link_two_classes = 'homepage-taxon-box bg-light pointer-events-none cursor-default' %>
+<% end %>
+
+<% if section.link_three.present? && section.link_type_three == 'Spree::Taxon' %>
+  <% link_three = spree.nested_taxons_path(section.link_three) %>
+  <% link_three_classes = 'homepage-taxon-box bg-light' %>
+<% elsif section.link_three.present? && section.link_type_three == 'Spree::Product' %>
+  <% link_three = spree.product_path(section.link_three) %>
+  <% link_three_classes = 'homepage-taxon-box bg-light' %>
+<% else %>
+  <% link_three = nil %>
+  <% link_three_classes = 'homepage-taxon-box bg-light pointer-events-none cursor-default' %>
+<% end %>
+
+<!-- Left Block -->
+<div class="col-6 <%= section_one_padding %>">
+
+  <!-- Top Left Block SQUARE -->
+  <!-- margin-bottom: 3.7% is important for keeping the bottom of the sections aligned -->
+  <div class="row" style="margin-bottom: 3.7%;">
+    <div class="col-12">
+
+      <%= link_to link_one, class: link_one_classes, style: '--aspect-ratio:18/13;' do %>
+        <% if section.image_one.attached? && section.image_one.variable? %>
+
+            <!-- XS to MD -->
+            <img class="d-md-none lazyload"
+              data-src="<%= main_app.url_for(section.img_one_md) %>"
+              data-srcset="<%= main_app.url_for(section.img_one_md) %>"
+              alt="<%= section&.title_one %>">
+
+            <!-- MD to XL -->
+            <img class="d-none d-md-block d-xl-none lazyload"
+              data-src="<%= main_app.url_for(section.img_one_lg) %>"
+              data-srcset="<%= main_app.url_for(section.img_one_lg) %>"
+              alt="<%= section&.title_one %>">
+
+            <!-- XL UP -->
+            <img class="d-none d-xl-block lazyload"
+              data-src="<%= main_app.url_for(section.img_one_xl) %>"
+              data-srcset="<%= main_app.url_for(section.img_one_xl) %>"
+              alt="<%= section&.title_one %>">
+        <% else %>
+          <%= icon( name: 'card-image',
+                    classes: 'homepage-taxon-box text-black-50',
+                    width: 26,
+                    height: 26) %>
+        <% end %>
+        <div class="<%= labels_class %>" aria-label="<%= section&.title_one %>">
+          <h3 class="homepage-hpb"><%= section&.title_one %></h3>
+        </div>
+      <% end %>
+
+    </div>
+  </div>
+
+  <!-- Bottom Left Block SQUARE -->
+  <div class="row">
+    <div class="col-12">
+
+      <%= link_to link_three, class: link_three_classes, style: '--aspect-ratio:18/13;' do %>
+        <% if section.image_three.attached? && section.image_three.variable? %>
+
+            <!-- XS to MD -->
+            <img class="d-md-none lazyload"
+              data-src="<%= main_app.url_for(section.img_three_md) %>"
+              data-srcset="<%= main_app.url_for(section.img_three_md) %>"
+              alt="<%= section&.title_three %>">
+
+            <!-- MD to XL -->
+            <img class="d-none d-md-block d-xl-none lazyload"
+              data-src="<%= main_app.url_for(section.img_three_lg) %>"
+              data-srcset="<%= main_app.url_for(section.img_three_lg) %>"
+              alt="<%= section&.title_three %>">
+
+            <!-- XL UP -->
+            <img class="d-none d-xl-block lazyload"
+              data-src="<%= main_app.url_for(section.img_three_xl) %>"
+              data-srcset="<%= main_app.url_for(section.img_three_xl) %>"
+              alt="<%= section&.title_three %>">
+        <% else %>
+          <%= icon( name: 'card-image',
+                    classes: 'homepage-taxon-box text-black-50',
+                    width: 26,
+                    height: 26) %>
+        <% end %>
+        <div class="<%= labels_class %>" aria-label="<%= section&.title_three %>">
+          <h3 class="homepage-hpb"><%= section&.title_three %></h3>
+        </div>
+      <% end %>
+
+    </div>
+  </div>
+</div>
+
+<!-- Right Block TALL -->
+<div class="col-6 <%= section_two_padding %>">
+  <%= link_to link_two, class: link_two_classes, style: '--aspect-ratio:27/40;' do %>
+    <% if section.image_two.attached? && section.image_two.variable? %>
+
+        <!-- XS to MD -->
+        <img class="d-md-none lazyload"
+          data-src="<%= main_app.url_for(section.img_two_md) %>"
+          data-srcset="<%= main_app.url_for(section.img_two_md) %>"
+          alt="<%= section&.title_two %>">
+
+        <!-- MD to XL -->
+        <img class="d-none d-md-block d-xl-none lazyload"
+          data-src="<%= main_app.url_for(section.img_two_lg) %>"
+          data-srcset="<%= main_app.url_for(section.img_two_lg) %>"
+          alt="<%= section&.title_two %>">
+
+        <!-- XL UP -->
+        <img class="d-none d-xl-block lazyload"
+          data-src="<%= main_app.url_for(section.img_two_xl) %>"
+          data-srcset="<%= main_app.url_for(section.img_two_xl) %>"
+          alt="<%= section&.title_two %>">
+    <% else %>
+      <%= icon( name: 'file-image',
+                classes: 'homepage-taxon-box text-black-50',
+                width: 26,
+                height: 26) %>
+    <% end %>
+    <div class="<%= labels_class %>" aria-label="<%= section&.title_two %>">
+      <h3 class="homepage-hpb"><%= section&.title_two %></h3>
+    </div>
+  <% end %>
+</div>

data/app/views/spree/shared/cms/sections/_product_carousel.html.erb

@@ -0,0 +1,5 @@
+<div class="col-12">
+  <% if section.linked_resource %>
+    <div data-product-carousel-taxon-id='<%= section.linked_resource.id %>' class="my-3"></div>
+  <% end %>
+</div>

data/app/views/spree/shared/cms/sections/_rich_text_content.html.erb

@@ -0,0 +1,3 @@
+<div class="col-12">
+  <%= raw section.rte_content %>
+</div>

data/app/views/spree/shared/cms/sections/_side_by_side_images.html.erb

@@ -0,0 +1,118 @@
+<% if section.gutters? %>
+  <% section_one_padding = 'pr-md-2' %>
+  <% section_two_padding = 'pl-md-2' %>
+  <% if section.fullscreen? %>
+    <% section_one_padding = 'px-3 pr-md-2' %>
+    <% section_two_padding = 'px-3 pl-md-2' %>
+  <% end %>
+<% else %>
+  <% if section.fullscreen? %>
+    <% section_one_padding = 'px-0' %>
+    <% section_two_padding = 'px-0' %>
+  <% else %>
+    <% section_one_padding = 'pr-md-0' %>
+    <% section_two_padding = 'pl-md-0' %>
+  <% end %>
+<% end %>
+
+<% if section.link_one.present? && section.link_type_one == 'Spree::Taxon' %>
+  <% link_one = spree.nested_taxons_path(section.link_one) %>
+<% elsif section.link_one.present? && section.link_type_one == 'Spree::Product' %>
+  <% link_one = spree.product_path(section.link_one) %>
+<% else %>
+  <% link_one = nil %>
+<% end %>
+
+<% if section.link_two.present? && section.link_type_two == 'Spree::Taxon' %>
+  <% link_two = spree.nested_taxons_path(section.link_two) %>
+<% elsif section.link_two.present? && section.link_type_two == 'Spree::Product' %>
+  <% link_two = spree.product_path(section.link_two) %>
+<% else %>
+  <% link_two = nil %>
+<% end %>
+
+<div class="col-12 col-md-6 mb-3 mb-md-0 <%= section_one_padding %>">
+  <%= link_to link_one,
+              class: "d-flex align-items-end justify-content-center bg-light text-center overflow-hidden homepage-bottom-box #{'pointer-events-none cursor-default' unless link_one}",
+              style: '--aspect-ratio:54/35;' do %>
+
+      <% if section.image_one.attached? %>
+        <!-- XS to MD -->
+        <img class="d-md-none lazyload"
+          data-src="<%= main_app.url_for(section.img_one_md) %>"
+          data-srcset="<%= main_app.url_for(section.img_one_md) %>"
+          alt="<%= section&.title_one %>">
+
+        <!-- MD to XL -->
+        <img class="d-none d-md-block d-xl-none lazyload"
+          data-src="<%= main_app.url_for(section.img_one_lg) %>"
+          data-srcset="<%= main_app.url_for(section.img_one_lg) %>"
+          alt="<%= section&.title_one %>">
+
+        <!-- XL UP -->
+        <img class="d-none d-xl-block lazyload"
+          data-src="<%= main_app.url_for(section.img_one_xl) %>"
+          data-srcset="<%= main_app.url_for(section.img_one_xl) %>"
+          alt="<%= section&.title_one %>">
+       <% else %>
+        <%= icon( name: 'card-image',
+                  classes: 'text-black-50',
+                  width: 26,
+                  height: 26) %>
+       <% end %>
+
+       <% if section.title_one.present? || section.subtitle_one.present? %>
+        <div class="homepage-bottom-box-inner p-1 p-sm-2 p-md-4 homepage-hpb" role="img" aria-label="New Collection">
+          <div class="homepage-bottom-box-inner-small-text">
+            <%= section&.title_one %>
+          </div>
+          <div class="homepage-bottom-box-inner-big-text">
+            <%= section.subtitle_one %>
+          </div>
+        </div>
+      <% end %>
+  <% end %>
+</div>
+
+<div class="col-12 col-md-6 <%= section_two_padding %>">
+  <%= link_to link_two,
+              class: "d-flex align-items-end justify-content-center bg-light text-center overflow-hidden homepage-bottom-box #{'pointer-events-none cursor-default' unless link_two}",
+              style: '--aspect-ratio:54/35;' do %>
+
+      <% if section.image_two.attached? %>
+        <!-- XS to MD -->
+          <img class="d-md-none lazyload"
+            data-src="<%= main_app.url_for(section.img_two_md) %>"
+            data-srcset="<%= main_app.url_for(section.img_two_md) %>"
+            alt="<%= section&.title_two %>">
+
+        <!-- MD to XL -->
+          <img class="d-none d-md-block d-xl-none lazyload"
+            data-src="<%= main_app.url_for(section.img_two_lg) %>"
+            data-srcset="<%= main_app.url_for(section.img_two_lg) %>"
+            alt="<%= section&.title_two %>">
+
+        <!-- XL UP -->
+          <img class="d-none d-xl-block lazyload"
+            data-src="<%= main_app.url_for(section.img_two_xl) %>"
+            data-srcset="<%= main_app.url_for(section.img_two_xl) %>"
+            alt="<%= section&.title_two %>">
+       <% else %>
+        <%= icon( name: 'card-image',
+                  classes: 'text-black-50',
+                  width: 26,
+                  height: 26) %>
+       <% end %>
+
+       <% if section.title_two.present? || section.subtitle_two.present? %>
+        <div class="homepage-bottom-box-inner p-1 p-sm-2 p-md-4 homepage-hpb" role="img" aria-label="New Collection">
+          <div class="homepage-bottom-box-inner-small-text">
+            <%= section&.title_two %>
+          </div>
+          <div class="homepage-bottom-box-inner-big-text">
+            <%= section.subtitle_two %>
+          </div>
+        </div>
+      <% end %>
+  <% end %>
+</div>