harpiya_frontend 4.3.0.alpha

data/app/views/harpiya/shared/_registration.html.erb

@@ -0,0 +1,4 @@
+<% if defined?(harpiya_signup_path) %>
+  <h3 class="harpiya-mb-large harpiya-mt-large harpiya-header"><%= Harpiya.t('dont_have_account') %></h3>
+  <%= link_to Harpiya.t(:sign_up), harpiya_signup_path, class: "btn btn-block btn-outline-primary harpiya-btn #{registration_button}" %>
+<% end %>

data/app/views/harpiya/shared/_search.html.erb

@@ -0,0 +1,15 @@
+<%= form_tag harpiya.products_path, method: :get, class: "py-md-1 d-flex align-items-center search-form" do %>
+  <%= search_field_tag :keywords,
+                       params[:keywords],
+                       placeholder: Harpiya.t(:search),
+                       title: Harpiya.t(:search),
+                       autofocus: true,
+                       'aria-label': Harpiya.t(:search),
+                       class: " border-0 p-3" %>
+  <button type="submit" class="btn border-0 p-0" aria-label="Submit">
+    <%= icon(name: 'search',
+            classes: 'd-inline',
+            width: 27,
+            height: 27) %>
+  </button>
+<% end %>

data/app/views/harpiya/shared/_shipment_tracking.html.erb

@@ -0,0 +1,10 @@
+<% shipments = order.shipments.trackable %>
+
+<% if shipments.any? %>
+  <h6><%= Harpiya.t(:tracking) %></h6>
+  <div class="tracking">
+    <% shipments.each do |shipment| %>
+      <%= link_to_tracking(shipment) %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/harpiya/shared/_sidebar.html.erb

@@ -0,0 +1,3 @@
+<aside id="sidebar" class="col-12 col-md-3" data-hook>
+  <%= yield :sidebar %>
+</aside>

data/app/views/harpiya/shared/_taxonomies.html.erb

@@ -0,0 +1,16 @@
+<% max_level = Harpiya::Config[:max_level_in_taxons_menu] || 1 %>
+
+<nav id="taxonomies" class="sidebar-item" data-hook aria-label="taxonomies">
+  <% @taxonomies.each do |taxonomy| %>
+    <% cache [I18n.locale, taxonomy, max_level, @taxon] do %>
+      <% if taxonomy.root.children.any? %>
+        <div class="mt-4">
+          <h4 class='taxonomy-root h5'>
+            <%= Harpiya.t(:shop_by_taxonomy, taxonomy: taxonomy.name) %>
+          </h4>
+          <%= taxons_tree(taxonomy.root, @taxon, max_level) %>
+        </div>
+      <% end %>
+    <% end %>
+  <% end %>
+</nav>

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

@@ -0,0 +1,11 @@
+<script>
+  window.addEventListener('turbolinks:load', function() {
+      Harpiya.translations = <%==
+        {
+          coupon_code_applied: Harpiya.t(:coupon_code_applied),
+          coupon_code_removed: Harpiya.t(:coupon_code_removed),
+          coupon_code_error_icon: image_path('error.svg')
+        }.to_json
+                           %>
+  });
+</script>

data/app/views/harpiya/shared/_user_form.html.erb

@@ -0,0 +1,12 @@
+<div class="form-group mb-5">
+  <%= f.email_field :email, class: 'harpiya-flat-input', placeholder: Harpiya.t(:email) %>
+</div>
+
+<div class="form-group mb-4">
+  <%= f.password_field :password, class: 'harpiya-flat-input', placeholder: Harpiya.t(:password) %>
+</div>
+
+<div class="form-group mb-5">
+  <%= f.password_field :password_confirmation, class: 'harpiya-flat-input', placeholder: Harpiya.t(:confirm_password) %>
+</div>
+<div data-hook="signup_below_password_fields"></div>

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

@@ -0,0 +1,78 @@
+<div
+  id="<%= id %>"
+  class="carousel slide product-carousel<%= ' product-carousel--empty' if images.length.zero? %>"
+  data-product-carousel-group-identifier="<%= group_id %>"
+  data-variant-change-trigger-identifier="<%= trigger_id %>"
+  data-interval="false"
+  data-hook>
+  <% if images.length > 1 %>
+    <a
+      class="d-none d-md-flex h-100 justify-content-center align-items-center product-carousel-control position-absolute product-carousel-control--previous"
+      href="#<%= id %>"
+      role="button"
+      data-slide="prev">
+      <span class="d-flex justify-content-center align-items-center product-carousel-control-rounded" aria-hidden="true">
+        <%= icon(name: 'arrow-right',
+                classes: 'harpiya-icon-arrow harpiya-icon-arrow-left',
+                width: 20,
+                height: 20) %>
+      </span>
+      <span class="sr-only"><%= Harpiya.t(:previous) %></span>
+    </a>
+
+    <a
+      class="d-none d-md-flex h-100 justify-content-center align-items-center product-carousel-control position-absolute product-carousel-control--next"
+      href="#<%= id %>"
+      role="button"
+      data-slide="next">
+      <span class="d-flex justify-content-center align-items-center product-carousel-control-rounded" aria-hidden="true">
+        <%= icon(name: 'arrow-right',
+                classes: 'harpiya-icon-arrow harpiya-icon-arrow-right',
+                width: 20,
+                height: 20) %>
+      </span>
+      <span class="sr-only"><%= Harpiya.t(:next) %></span>
+    </a>
+  <% end %>
+
+  <div class="carousel-inner">
+    <div class="d-flex flex-row position-absolute product-carousel-overlay">
+      <div class="d-none d-lg-block <%= 'product-carousel-overlay-modal-opener' unless zoomed %>" <%= 'data-toggle=modal data-target=#picturesModal' unless zoomed %>></div>
+    </div>
+
+    <% 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-id="<%= image.viewable_id %>">
+        <div class="product-carousel-item-squared <%= 'product-carousel-item-squared-only' if images.length == 1 %>">
+          <% image_attrs = {
+            src: main_app.url_for(image.url(zoomed ? :zoomed : :large)),
+            alt: image.alt || @product.name,
+            class: "d-block w-100",
+            width: zoomed ? 650 : 475,
+            height: zoomed ? 870 : 594
+          } %>
+          <%= imageIndex.zero? ? image_tag(image_attrs.delete(:src), image_attrs) : lazy_image(**image_attrs) %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <ul class="d-sm-none carousel-indicators product-carousel-indicators">
+    <% images.each_with_index do |image, imageIndex| %>
+      <li
+        data-target="#<%= id %>"
+        data-slide-to="<%= imageIndex %>"
+        class="product-carousel-indicators-indicator product-carousel-indicators-indicator--visible<%= ' active' if imageIndex == 0 %>">
+        <%= lazy_image(
+          src: main_app.url_for(image.url(:pdp_thumbnail)),
+          class: 'd-block w-100',
+          alt: image.alt || @product.name,
+          width: image.style(:pdp_thumbnail)[:width],
+          height: image.style(:pdp_thumbnail)[:height]
+        ) %>
+      </li>
+    <% end %>
+  </ul>
+</div>

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

@@ -0,0 +1,64 @@
+<div
+  id="<%= id %>"
+  class="h-100 carousel slide d-flex flex-column carousel-vertically-animated product-thumbnails-carousel"
+  data-product-carousel-group-identifier="<%= group_id %>"
+  data-variant-change-trigger-identifier="<%= trigger_id %>"
+  data-product-carousel-per-page="<%= per_page %>"
+  data-product-carousel-is-slave="true"
+  data-interval="false"
+  data-hook>
+  <div class="carousel-inner order-1 h-100">
+  <% images.each_with_index do |image, image_index| %>
+      <% if image_index % per_page == 0 %>
+        <div class="carousel-item product-thumbnails-carousel-item h-100<%= ' active' if image_index == 0 %>">
+        <div class="h-100 d-flex flex-column justify-content-center">
+            <div class="product-thumbnails-carousel-item-content py-1 h-100">
+      <% end %>
+              <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-id="<%= image.viewable_id %>">
+                <%= lazy_image(
+                  src: main_app.url_for(image.url(:pdp_thumbnail)),
+                  class: 'd-block w-100',
+                  alt: image.alt || @product.name,
+                  width: 57,
+                  height: 70) %>
+              </div>
+      <% if (image_index + 1) % per_page == 0 || (image_index + 1) == images.length %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+  <% if images.length > per_page %>
+    <a
+      class="d-none d-sm-flex order-0 justify-content-center w-100 product-thumbnails-carousel-previous"
+      href="#<%= id %>"
+      role="button"
+      data-slide="prev">
+      <span aria-hidden="true">
+        <%= icon(name: 'arrow-right',
+                classes: 'harpiya-icon-arrow harpiya-icon-arrow-up',
+                width: 16,
+                height: 16) %>
+      </span>
+      <span class="sr-only"><%= Harpiya.t(:previous) %></span>
+    </a>
+    <a
+      class="d-none d-sm-flex order-2 justify-content-center w-100 product-thumbnails-carousel-next"
+      href="#<%= id %>"
+      role="button"
+      data-slide="next">
+      <span aria-hidden="true">
+        <%= icon(name: 'arrow-right',
+                classes: 'harpiya-icon-arrow harpiya-icon-arrow-down',
+                width: 16,
+                height: 16) %>
+      </span>
+      <span class="sr-only"><%= Harpiya.t(:next) %></span>
+    </a>
+  <% end %>
+</div>

data/app/views/harpiya/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">
+            <%= Harpiya.t('draft_mode') %>
+          </h5>
+        </span>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/harpiya/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, section.link, class: 'btn text-center harpiya-btn btn-outline-primary w-75' %>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,48 @@
+<% 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.present? %>
+
+        <!-- XS to LG -->
+        <img class="d-lg-none lazyload"
+          data-src="<%= main_app.url_for(section.image_one.attachment.variant(resize: '1200x500>')) %>"
+          data-srcset="<%= main_app.url_for(section.image_one.attachment.variant(resize: '1200x500>')) %>"
+          alt="<%= section&.title %>">
+
+        <!-- LG UP -->
+        <img class="d-none d-lg-block lazyload"
+          data-src="<%= main_app.url_for(section.image_one.attachment.variant(resize: '2400x1000>')) %>"
+          data-srcset="<%= main_app.url_for(section.image_one.attachment.variant(resize: '2400x1000>')) %>"
+          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, section.link, class: 'btn btn-primary harpiya-btn px-5' %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/harpiya/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 == 'Harpiya::Taxon' %>
+  <% link_one = harpiya.nested_taxons_path(section.link_one) %>
+  <% link_one_classes = 'homepage-taxon-box bg-light' %>
+<% elsif section.link_one.present? && section.link_type_one == 'Harpiya::Product' %>
+  <% link_one = harpiya.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 == 'Harpiya::Taxon' %>
+  <% link_two = harpiya.nested_taxons_path(section.link_two) %>
+  <% link_two_classes = 'homepage-taxon-box bg-light' %>
+<% elsif section.link_two.present? && section.link_type_two == 'Harpiya::Product' %>
+  <% link_two = harpiya.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 == 'Harpiya::Taxon' %>
+  <% link_three = harpiya.nested_taxons_path(section.link_three) %>
+  <% link_three_classes = 'homepage-taxon-box bg-light' %>
+<% elsif section.link_three.present? && section.link_type_three == 'Harpiya::Product' %>
+  <% link_three = harpiya.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.image_one.attachment.variant(resize: '270x195>')) %>"
+              data-srcset="<%= main_app.url_for(section.image_one.attachment.variant(resize: '270x195>')) %>"
+              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.image_one.attachment.variant(resize: '540x390>')) %>"
+              data-srcset="<%= main_app.url_for(section.image_one.attachment.variant(resize: '540x390>')) %>"
+              alt="<%= section&.title_one %>">
+
+            <!-- XL UP -->
+            <img class="d-none d-xl-block lazyload"
+              data-src="<%= main_app.url_for(section.image_one.attachment.variant(resize: '1080x780>')) %>"
+              data-srcset="<%= main_app.url_for(section.image_one.attachment.variant(resize: '1080x780>')) %>"
+              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.image_three.attachment.variant(resize: '270x195>')) %>"
+              data-srcset="<%= main_app.url_for(section.image_three.attachment.variant(resize: '270x195>')) %>"
+              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.image_three.attachment.variant(resize: '540x390>')) %>"
+              data-srcset="<%= main_app.url_for(section.image_three.attachment.variant(resize: '540x390>')) %>"
+              alt="<%= section&.title_three %>">
+
+            <!-- XL UP -->
+            <img class="d-none d-xl-block lazyload"
+              data-src="<%= main_app.url_for(section.image_three.attachment.variant(resize: '1080x780>')) %>"
+              data-srcset="<%= main_app.url_for(section.image_three.attachment.variant(resize: '1080x780>')) %>"
+              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.image_two.variant(resize: '270x400>')) %>"
+          data-srcset="<%= main_app.url_for(section.image_two.variant(resize: '270x400>')) %>"
+          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.image_two.variant(resize: '540x800>')) %>"
+          data-srcset="<%= main_app.url_for(section.image_two.variant(resize: '540x800>')) %>"
+          alt="<%= section&.title_two %>">
+
+        <!-- XL UP -->
+        <img class="d-none d-xl-block lazyload"
+          data-src="<%= main_app.url_for(section.image_two.variant(resize: '1080x1600>')) %>"
+          data-srcset="<%= main_app.url_for(section.image_two.variant(resize: '1080x1600>')) %>"
+          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>