harpiya_frontend 4.3.0.alpha

data/app/views/harpiya/products/_cart_form.html.erb

@@ -0,0 +1,83 @@
+<template class="availability-template availability-template-not-available-in-currency">
+  <%= render 'cart_form_availability_templates', type: 'not-available-in-currency' %>
+</template>
+
+<template class="availability-template availability-template-in-stock">
+  <%= render 'cart_form_availability_templates', type: 'in-stock' %>
+</template>
+
+<template class="availability-template availability-template-backorderable">
+  <%= render 'cart_form_availability_templates', type: 'backorderable' %>
+</template>
+
+<template class="availability-template availability-template-out-of-stock">
+  <%= render 'cart_form_availability_templates', type: 'out-of-stock' %>
+</template>
+
+<% is_product_available_in_currency = product_available_in_currency? %>
+<% default_variant = default_variant(@variants, @product) %>
+
+<%= form_for :order, html: {
+    id: 'add-to-cart-form',
+    class: 'add-to-cart-form',
+    'data-product-summary': @product_summary.to_json,
+    'data-variants': product_variants_matrix(is_product_available_in_currency),
+    'data-variant-change-trigger-identifier': variant_change_identifier
+  } do |f| %>
+  <div id="inside-product-cart-form" data-hook="inside_product_cart_form">
+    <% if is_product_available_in_currency %>
+      <div id="product-price" class="mb-2 text-center text-md-left add-to-cart-form-price" data-hook="product_price">
+        <% if should_display_compare_at_price?(default_variant) %>
+          <span class="compare-at-price mr-3"><%= display_compare_at_price(default_variant) %></span>
+        <% end %>
+        <span class="price selling" content="<%= @product_price.to_d %>">
+          <%= display_price(default_variant) %>
+        </span>
+        <span content="<%= current_currency %>"></span>
+      </div>
+    <% end %>
+
+    <div class="text-center text-md-left add-to-cart-form-general-availability text-uppercase">
+      <%= Harpiya.t(:availability) %>:
+      <% if !is_product_available_in_currency %>
+        <%= render 'cart_form_availability_templates', type: 'not-available-in-currency' %>
+      <% elsif default_variant.in_stock? %>
+        <%= render 'cart_form_availability_templates', type: 'in-stock' %>
+      <% elsif default_variant.backorderable? %>
+        <%= render 'cart_form_availability_templates', type: 'backorderable' %>
+      <% else %>
+        <%= render 'cart_form_availability_templates', type: 'out-of-stock' %>
+      <% end %>
+    </div>
+
+    <% if @product.variants_and_option_values(current_currency).any? %>
+      <hr>
+      <ul id="product-variants" class="product-variants">
+        <% used_variants_options(@variants, @product).each_with_index do |option_type, index| %>
+          <li>
+            <% if color_option_type_name.present? && color_option_type_name == option_type[:name] %>
+              <%= render "color_option_type", option_type: option_type, index: index %>
+            <% else %>
+              <%= render "option_type", option_type: option_type, index: index %>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
+
+    <% if is_product_available_in_currency && @product.can_supply? %>
+      <%= hidden_field_tag "variant_id", default_variant.id %>
+
+      <hr>
+      <div>
+        <div class="mb-5 mt-4 text-center text-md-left">
+          <%= render 'harpiya/shared/quantity_select', input_name: :quantity %>
+        </div>
+
+        <%= button_tag class: 'btn btn-primary w-100 text-uppercase font-weight-bold add-to-cart-button', id: 'add-to-cart-button', type: :submit, disabled: true do %>
+          <%= Harpiya.t(:add_to_cart) %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/harpiya/products/_cart_form_availability_templates.html.erb

@@ -0,0 +1,10 @@
+<% case type %>
+<% when "not-available-in-currency" %>
+  <span class="add-to-cart-form-general-availability-value add-to-cart-form-general-availability-value--danger"><%= Harpiya.t(:product_not_available_in_this_currency) %></span>
+<% when "in-stock" %>
+  <span class="add-to-cart-form-general-availability-value"><%= Harpiya.t(:in_stock) %></span>
+<% when "backorderable" %>
+  <span class="add-to-cart-form-general-availability-value add-to-cart-form-general-availability-value--warning"><%= Harpiya.t(:backordered_info) %></span>
+<% when "out-of-stock" %>
+  <span class="add-to-cart-form-general-availability-value add-to-cart-form-general-availability-value--danger"><%= Harpiya.t(:out_of_stock) %></span>
+<% end %>

data/app/views/harpiya/products/_color_option_type.html.erb

@@ -0,0 +1,36 @@
+<div class="product-variants-variant product-variants-variant--color" data-option-type-id="<%= option_type[:id] %>">
+  <span class="d-block mb-2 text-center text-md-left text-uppercase product-variants-variant-title">
+    <%= option_type[:presentation] %>
+  </span>
+
+  <div class="d-flex flex-wrap justify-content-center justify-content-md-start">
+    <ol class="d-flex flex-wrap product-variants-variant-values">
+      <% option_type[:option_values].each do |option_value| %>
+        <li>
+          <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
+            class: "m-1 m-sm-2 m-md-1 color-select-label",
+            title: option_value[:name]&.humanize,
+            data: { toggle: "tooltip", placement: "bottom" } do %>
+
+            <%= radio_button_tag "variant_option_value_id_#{option_type[:id]}",
+              option_value[:id],
+              option_value[:is_default] && index == 0,
+              class: "product-variants-variant-values-radio",
+              aria: { label: option_value[:name] },
+              data: {
+                "option-type-index" => index,
+                "presentation" => option_value[:presentation],
+                "variant-id" => option_value[:variant_id],
+                "is-color" => true
+              } %>
+
+            <%= render partial: "harpiya/shared/color_select", locals: {
+              color: option_value[:presentation],
+              selected: false
+            } %>
+          <% end %>
+        </li>
+      <% end %>
+    </ol>
+  </div>
+</div>

data/app/views/harpiya/products/_description.html.erb

@@ -0,0 +1,25 @@
+<h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Harpiya.t(:description) %></h3>
+<div id="product-description-short" class="m-0 text-break product-description" data-hook="description">
+  <% if Harpiya::Config[:show_raw_product_description] %>
+    <%= raw product_description(@product).truncate(450) %>
+  <% else %>
+    <%= sanitize product_description(@product).truncate(450) %>
+  <% end %>
+</div>
+
+<div id="product-description-long" class="m-0 text-break product-description d-none" data-hook="description">
+  <% if Harpiya::Config[:show_raw_product_description] %>
+    <%= raw product_description(@product) %>
+  <% else %>
+    <%= sanitize product_description(@product) %>
+  <% end %>
+</div>
+
+<% if product_description(@product).length > 450 %>
+  <span id="product-description-arrow" class="d-flex justify-content-center align-items-center mt-3 mx-auto product-description-arrow" aria-hidden="true">
+    <%= icon(name: 'arrow-right',
+             classes: 'harpiya-icon-arrow harpiya-icon-arrow-down',
+             width: 20,
+             height: 20) %>
+  </span>
+<% end %>

data/app/views/harpiya/products/_filter_and_sort_mobile_buttons.html.erb

@@ -0,0 +1,16 @@
+<div class="container-fluid plp-filter-and-sort-horizontal-border d-lg-none mb-3">
+  <div class="row">
+    <div id="filter-by-overlay-show-button" class="col-6 plp-filter-and-sort-vertical-border">
+      <div class="plp-filter-and-sort-buttons">
+        <%= Harpiya.t('plp.filter_by') %>
+        <%= inline_svg_tag 'arrow-right.svg', class: "plp-icon" %>
+      </div>
+    </div>
+    <div id="sort-by-overlay-show-button" class="col-6">
+      <div class="plp-filter-and-sort-buttons">
+        <%= Harpiya.t("plp.#{ params[:sort_by].blank? ? 'sort_by': params[:sort_by].gsub('-', '_') }") %>
+        <%= inline_svg_tag 'arrow-right.svg', class: "plp-icon" %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/harpiya/products/_filters_desktop.html.erb

@@ -0,0 +1,98 @@
+<% cache filters_cache_key('desktop') do %>
+  <div id="plp-filters-accordion" class="d-none d-lg-block col-lg-3 pr-5 position-sticky h-100 plp-filters" data-hook="taxon_sidebar_navigation">
+    <%= clear_all_filters_link(permitted_params) if product_filters_present?(permitted_params) %>
+
+    <div class="plp-filters-scroller">
+      <% available_option_types.each do |option_type| %>
+        <div class="w-100 card plp-filters-card">
+          <% ot_filter_param = option_type.filter_param %>
+          <% option_type_name = ot_filter_param.titleize %>
+          <% collapsed = params[ot_filter_param].blank? %>
+
+          <button class="card-header <%= 'collapsed' if collapsed %> px-1 plp-filters-card-header" id="filters<%= option_type_name %>" data-toggle="collapse" data-target="#collapseFilter<%= option_type_name %>" aria-expanded="<%= !collapsed %>" aria-controls="collapseFilter<%= option_type_name %>" role="heading" aria-level="2">
+            <%= option_type.presentation %>
+            <%= icon(name: 'plus',
+                    classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
+                    width: 16,
+                    height: 16) %>
+            <%= icon(name: 'minus',
+                    classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--minus',
+                    width: 16,
+                    height: 16) %>
+          </button>
+          <div id="collapseFilter<%= option_type_name %>" class="collapse <%= 'show' unless collapsed %>" aria-labelledby="filters<%= option_type_name %>">
+            <div class="card-body px-0 pt-1">
+              <%= render 'harpiya/shared/option_values',
+                option_type: option_type,
+                permitted_params: permitted_params %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <% available_properties.each do |property| %>
+        <% if property.uniq_values.present? %>
+          <div class="w-100 card plp-filters-card">
+            <% property_name = property.name %>
+            <% collapsed = params.dig(:properties, property.filter_param).blank? %>
+            <button class="card-header <%= 'collapsed' if collapsed %> px-1 plp-filters-card-header" id="filters<%= property_name %>" data-toggle="collapse" data-target="#collapseFilter<%= property_name %>" aria-expanded="<%= !collapsed %>" aria-controls="collapseFilter<%= property_name %>" role="heading" aria-level="2">
+              <%= property.presentation.titleize %>
+              <%= icon(name: 'plus',
+                      classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
+                      width: 16,
+                      height: 16) %>
+              <%= icon(name: 'minus',
+                      classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--minus',
+                      width: 16,
+                      height: 16) %>
+            </button>
+            <div id="collapseFilter<%= property_name %>" class="collapse <%= 'show' unless collapsed %>" aria-labelledby="filters<%= property_name %>">
+              <div class="card-body px-0 pt-1">
+                <%= render 'harpiya/shared/properties',
+                  params_property_name: params[property_name],
+                  property: property,
+                  permitted_params: permitted_params,
+                  property_name: property_name
+                %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+
+      <% price_collapsed = params[:price].blank? %>
+      <div class="w-100 card plp-filters-card">
+        <button class="card-header text-capitalize <%= 'collapsed' if price_collapsed %> px-1 plp-filters-card-header" id="filtersPrice" data-toggle="collapse" data-target="#collapseFilterPrice" aria-expanded="<% !price_collapsed %>" aria-controls="collapseFilterPrice" role="heading" aria-level="2">
+          <%= Harpiya.t('plp.price') %>
+          <%= icon(name: 'plus',
+                  classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
+                  width: 16,
+                  height: 16) %>
+          <%= icon(name: 'minus',
+                  classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--minus',
+                  width: 16,
+                  height: 16) %>
+        </button>
+        <div id="collapseFilterPrice" class="collapse <%= 'show' unless price_collapsed %>" aria-labelledby="filtersPrice">
+          <div class="card-body px-0 pt-1">
+            <% price_filters.each do |price_range| %>
+              <%= price_filter_link(price_range, permitted_params) %>
+            <% end %>
+
+            <div id="filterPriceRangeDesktop" class="m-1">
+              <div class="d-inline-flex mb-2">
+                <%= min_price_filter_input class: 'w-50 p-2 mr-1' %>
+                <%= max_price_filter_input class: 'w-50 p-2' %>
+              </div>
+
+              <%= link_to Harpiya.t('plp.done'), permitted_params, class: 'btn btn-primary harpiya-btn w-100', data: { params: permitted_params } %>
+            </div>
+          </div>
+        </div>
+      </div>
+      <% additional_filters_partials.each do |partial| %>
+        <%= render "harpiya/products/filters/#{partial}", permitted_params: permitted_params %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/harpiya/products/_filters_mobile.html.erb

@@ -0,0 +1,94 @@
+<% is_visible = params[:menu_open] ? 'block' : 'none' %>
+
+<div id="filter-by-overlay" class="d-lg-none plp-overlay" style="display: <%= is_visible %>;">
+  <% cache filters_cache_key('mobile') do %>
+    <div class="plp-scroll">
+      <div class="container">
+        <div class="plp-overlay-header">
+          <%= Harpiya.t('plp.filter_by') %>
+          <%= inline_svg_tag 'close.svg', id: 'filter-by-overlay-hide-button' %>
+        </div>
+      </div>
+      <div id="filters-accordion">
+        <% available_option_types.each do |option_type| %>
+          <% option_type_name = option_type.filter_param %>
+          <% ot_downcase_name = option_type_name.downcase %>
+
+          <div class="card plp-overlay-card">
+            <div class="card-header text-uppercase <%= 'collapsed' if params[ot_downcase_name].blank? %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= option_type_name %>" data-target="#collapseFilterMobile<%= option_type_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= option_type_name %>" role="heading" aria-level="3">
+              <%= option_type_name %>
+              <%= icon(name: 'arrow-right',
+                      classes: 'harpiya-icon-arrow harpiya-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',
+                      width: 16,
+                      height: 16) %>
+            </div>
+            <div id="collapseFilterMobile<%= option_type_name %>" class="collapse <%= 'show' unless params[ot_downcase_name].blank? %>" aria-labelledby="filtersMobile<%= option_type_name %>" data-parent="#filters-accordion">
+              <div class="card-body pt-1">
+                <%= render 'harpiya/shared/option_values', params_ot_downcase_name: params[ot_downcase_name], option_type: option_type, permitted_params: permitted_params, ot_downcase_name: ot_downcase_name %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <% available_properties.each do |property| %>
+          <% if property.uniq_values.present? %>
+            <% property_name = property.name %>
+            <% collapsed = params.dig(:properties, property.filter_param).blank? %>
+            <div class="card plp-overlay-card">
+              <div class="card-header text-uppercase <%= 'collapsed' if collapsed %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= property_name %>" data-target="#collapseFilterMobile<%= property_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= property_name %>" role="heading" aria-level="3">
+                <%= property_name %>
+                <%= icon(name: 'arrow-right',
+                         classes: 'harpiya-icon-arrow harpiya-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',
+                         width: 16,
+                         height: 16) %>
+              </div>
+              <div id="collapseFilterMobile<%= property_name %>" class="collapse <%= 'show' unless collapsed %>" aria-labelledby="filtersMobile<%= property_name %>" data-parent="#filters-accordion">
+                <div class="card-body pt-1">
+                  <%= render 'harpiya/shared/properties',
+                             params_property_name: params[property_name],
+                             property: property,
+                             permitted_params: permitted_params,
+                             property_name: property_name
+                  %>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+
+        <div class="card plp-overlay-card">
+          <div class="card-header text-uppercase <%= 'collapsed' if params[:price].blank? %> plp-overlay-card-header" id="headingFour" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour" role="heading" aria-level="3">
+            <%= Harpiya.t('plp.price') %>
+            <%= icon(name: 'arrow-right',
+                    classes: 'harpiya-icon-arrow harpiya-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',
+                    width: 16,
+                    height: 16) %>
+          </div>
+          <div id="collapseFour" class="collapse <%= 'show' unless params[:price].blank? %>" aria-labelledby="headingFour" data-parent="#filters-accordion">
+            <div class="card-body pt-1">
+              <% price_filters.each do |price_range| %>
+                <%= price_filter_link(price_range, permitted_params) %>
+              <% end %>
+
+              <div id="filterPriceRangeMobile" class="m-1">
+                <div class="d-inline-flex">
+                  <%= min_price_filter_input class: 'w-50 p-2 mr-1' %>
+                  <%= max_price_filter_input class: 'w-50 p-2' %>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <% additional_filters_partials.each do |partial| %>
+          <%= render "harpiya/products/filters/mobile/#{partial}", permitted_params: permitted_params %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="container position-absolute text-center plp-overlay-buttons pt-3">
+    <%= clear_all_filters_link(permitted_params) %>
+    <%= link_to Harpiya.t('plp.done'), permitted_params, id: 'filterProductsButtonMobile', class: 'btn btn-primary harpiya-btn w-100 done-btn', data: { params: permitted_params } %>
+  </div>
+</div>

data/app/views/harpiya/products/_gallery.html.erb

@@ -0,0 +1,25 @@
+<div class="col-12 col-md-7 col-lg-7" data-hook="product_left_part">
+  <% if @product_images.size > 0 %>
+    <div
+      class="w-100 d-flex align-self-start justify-content-between product-details-images"
+      data-hook="product_left_part_wrap">
+
+      <div class="d-none d-md-block product-details-thumbnails" data-hook="product_thumbnails">
+        <%= render 'harpiya/shared/carousel/thumbnails',
+                  images: @product_images,
+                  group_id: 'main-product-carousel',
+                  id: 'productThumbnailsCarousel',
+                  trigger_id: 'productCarousel',
+                  per_page: 5 %>
+      </div>
+      <div class="product-details-single" data-hook="product_images">
+        <%= render 'harpiya/shared/carousel/single',
+                  images: @product_images,
+                  group_id: 'main-product-carousel',
+                  id: 'productCarousel',
+                  trigger_id: 'productCarousel',
+                  zoomed: false %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/harpiya/products/_gallery_modal.html.erb

@@ -0,0 +1,42 @@
+<% if @product_images.size > 0 %>
+  <div class="modal fade" id="picturesModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog--zoom modal-dialog mw-100 vh-100 mt-0 mb-0" role="document">
+      <div class="modal-content h-100">
+        <div class="modal-body h-100">
+          <button type="button" class="close position-absolute mr-3" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">
+              <%= icon(name: 'close',
+                       classes: 'd-block d-lg-none',
+                       width: 16,
+                       height: 16) %>
+              <%= icon(name: 'close',
+                       classes: 'd-none d-lg-block',
+                       width: 30,
+                       height: 30) %>
+            </span>
+          </button>
+          <div class="d-flex justify-content-center align-items-center product-details-images h-100">
+            <% if @product_images.size > 1 %>
+              <div class="h-100 d-none d-sm-block product-details-thumbnails">
+                <%= render 'harpiya/shared/carousel/thumbnails',
+                            images: @product_images,
+                            group_id: 'main-product-modal-carousel',
+                            id: 'productModalThumbnailsCarousel',
+                            trigger_id: 'productCarousel',
+                            per_page: 4 %>
+              </div>
+            <% end %>
+            <div class="product-details-single">
+              <%= render 'harpiya/shared/carousel/single',
+                          images: @product_images,
+                          group_id: 'main-product-modal-carousel',
+                          id: 'productModalCarousel',
+                          trigger_id: 'productCarousel',
+                          zoomed: true %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/harpiya/products/_no_results.html.erb

@@ -0,0 +1,14 @@
+<div class="container mt-lg-5">
+  <div class="text-center pt-lg-5">
+    <%= icon(name: 'search-no-results',
+             classes: 'plp-not-found-image mb-3',
+             width: 83,
+             height: 75) %>
+    <h6 class="plp-not-found-header mb-3 pb-sm-3 mt-sm-3 pt-sm-3 mt-lg-5 pt-lg-5 pb-lg-0"><%= Harpiya.t('plp.no_results_found') %></h6>
+    <p class="plp-not-found-text">
+      <%= Harpiya.t('plp.not_found_text1', keywords: params[:keywords]) %>
+      <br class="d-lg-none">
+      <%= Harpiya.t('plp.not_found_text2') %>
+    </p>
+  </div>
+</div>