harpiya_frontend 4.3.0.alpha

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

@@ -0,0 +1,13 @@
+<%= render 'harpiya/products/filter_and_sort_mobile_buttons' %>
+<%= render 'harpiya/products/sort_desktop', permitted_params: permitted_params %>
+<div class="container d-md-flex">
+  <%= render 'harpiya/products/filters_desktop', permitted_params: permitted_params %>
+  <div class="text-lg-center col-md-12 col-lg-9">
+    <h6 class="plp-not-found-header pt-md-3 mb-3"><%= Harpiya.t('plp.no_results') %></h6>
+    <p class="plp-not-found-text pt-md-4">
+      <%= Harpiya.t('plp.not_found_filters1') %>
+      <br class="d-inline d-md-none d-lg-inline">
+      <%= Harpiya.t('plp.not_found_filters2') %>
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,30 @@
+<div class="product-variants-variant" 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>
+          <%= 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",
+            data: {
+              "option-type-index" => index,
+              "presentation" => option_value[:presentation],
+              "variant-id" => option_value[:variant_id]
+            } %>
+
+          <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
+            class: "m-1 select-label",
+            "aria-label" => option_value[:presentation] do %>
+
+            <span><%= option_value[:presentation] %></span>
+          <% end %>
+        </li>
+      <% end %>
+    </ol>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+<% url = harpiya.product_path(product, taxon_id: taxon.try(:id)) %>
+<% price = product.price_in(current_currency).amount %>
+<div id="product_<%= product.id %>" class="d-flex w-100 col-12 col-sm-6 col-lg-4 col-xl-3 product-list-item mb-4" data-hook="products_list_item">
+  <div class="card w-100">
+    <% cache(taxon.present? ? [I18n.locale, current_currency, taxon&.id, product] : cache_key_for_product(product)) do %>
+      <div class="card-body text-center product-body">
+        <%= link_to url, class: 'd-block text-center' do %>
+          <%= small_image(product, class: "d-block mx-auto") %>
+          <%= content_tag(:span, truncate(product.name, length: 50), class: 'info mt-3 d-block', title: product.name) %>
+        <% end %>
+      </div>
+      <div class="card-footer text-center">
+        <span class="price selling lead" content="<%= price.nil? ? 0 : price.to_d %>">
+          <%= display_price(product) %>
+        </span>
+        <span content="<%= current_currency %>"></span>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,29 @@
+<% promotions = @product.possible_promotions %>
+
+<% if promotions.any? %>
+  <div id="promotions">
+    <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Harpiya.t(:promotions) %></h3>
+    <% promotions.each do |promotion| %>
+      <div class="row">
+        <div class="col-12 col-md-7 col-lg-6 mb-3">
+          <div class="card">
+            <div class="card-body">
+              <h4><%= promotion.name %></h4>
+              <p><%= promotion.description %></p>
+              <% if promotion.products.any? %>
+                <span><%= Harpiya.t('pdp.products_included_in_promotion') %>:</span>
+              <% end %>
+            </div>
+            <% if promotion.products.any? %>
+              <div class="list-group list-group-flush">
+                <% promotion.products.each do |product| %>
+                  <%= link_to product.name, harpiya.product_path(product), class: 'list-group-item list-group-item-action' %>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,13 @@
+<% unless @product_properties.blank? %>
+  <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Harpiya.t(:details) %></h3>
+  <ul id="product-properties" class="m-0 list-unstyled product-properies" data-hook>
+    <% @product_properties.each do |product_property| %>
+      <% if product_property.show_property? %>
+        <li>
+          <span class="font-weight-bold text-break"><%= product_property.property.presentation %>:</span>
+          <span class="text-break"><%= product_property.value %></span>
+        </li>
+      <% end %>
+    <% end %>
+  </ul>
+<% end %>

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

@@ -0,0 +1,36 @@
+<div class="container dropdown d-none d-lg-flex justify-content-end mt-5 pr-4 pb-3 plp-sort">
+  <a data-toggle="dropdown" class="plp-sort-header" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+    <%= Harpiya.t("plp.#{ params[:sort_by].blank? ? 'sort_by': params[:sort_by].gsub('-', '_') }") %>
+    <%= icon(name: 'arrow-right',
+             classes: 'harpiya-icon-arrow harpiya-icon-arrow-up ml-3 plp-sort-header-arrow--up',
+             width: 18,
+             height: 18) %>
+    <%= icon(name: 'arrow-right',
+             classes: 'harpiya-icon-arrow harpiya-icon-arrow-down ml-3 plp-sort-header-arrow--down',
+             width: 18,
+             height: 18) %>
+  </a>
+  <div class="dropdown-menu text-right plp-sort-dropdown">
+    <ul class="pt-1 plp-sort-dropdown-ul">
+      <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by].blank? %>">
+        <%= link_to Harpiya.t('plp.default'), url_for(permitted_params.merge(sort_by: nil)), class: 'dropdown-item' %>
+      </li>
+      <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'name-a-z' %>">
+        <%= link_to Harpiya.t('plp.name_a_z'), url_for(permitted_params.merge(sort_by: 'name-a-z')), class: 'dropdown-item' %>
+      </li>
+    </li>
+    <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'name-z-a' %>">
+      <%= link_to Harpiya.t('plp.name_z_a'), url_for(permitted_params.merge(sort_by: 'name-z-a')), class: 'dropdown-item' %>
+    </li>
+    <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'newest-first' %>">
+      <%= link_to Harpiya.t('plp.newest_first'), url_for(permitted_params.merge(sort_by: 'newest-first')), class: 'dropdown-item' %>
+    </li>
+    <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'price-high-to-low' %>">
+      <%= link_to Harpiya.t('plp.price_high_to_low'), url_for(permitted_params.merge(sort_by: 'price-high-to-low')), class: 'dropdown-item' %>
+    </li>
+    <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'price-low-to-high' %>">
+      <%= link_to Harpiya.t('plp.price_low_to_high'), url_for(permitted_params.merge(sort_by: 'price-low-to-high')), class: 'dropdown-item' %>
+    </li>
+  </ul>
+</div>
+</div>

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

@@ -0,0 +1,59 @@
+<div id="sort-by-overlay" class="plp-overlay" style="display: none;">
+  <div class="container">
+    <div class="plp-overlay-header">
+      <%= Harpiya.t('plp.sort_by') %>
+      <%= inline_svg_tag 'close.svg', id: 'sort-by-overlay-hide-button' %>
+    </div>
+  </div>
+  <div class="plp-overlay-header-border"></div>
+  <ul class="pt-1 plp-overlay-ul">
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by].blank? %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: nil)) %>">
+        <div class="plp-empty-dot">
+          <div class="filled-dot"></div>
+        </div>
+        <%= Harpiya.t('plp.default') %>
+      </a>
+    </li>
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'name-a-z' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'name-a-z')) %>">
+        <div class="plp-empty-dot">
+          <div class="filled-dot"></div>
+        </div>
+        <%= Harpiya.t('plp.name_a_z') %>
+      </a>
+    </li>
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'name-z-a' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'name-z-a')) %>">
+        <div class="plp-empty-dot">
+          <div class="filled-dot"></div>
+        </div>
+        <%= Harpiya.t('plp.name_z_a') %>
+      </a>
+    </li>
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'newest-first' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'newest-first')) %>">
+        <div class="plp-empty-dot">
+          <div class="filled-dot"></div>
+        </div>
+        <%= Harpiya.t('plp.newest_first') %>
+      </a>
+    </li>
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'price-high-to-low' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-high-to-low')) %>">
+        <div class="plp-empty-dot">
+          <div class="filled-dot"></div>
+        </div>
+        <%= Harpiya.t('plp.price_high_to_low') %>
+      </a>
+    </li>
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'price-low-to-high' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-low-to-high')) %>">
+        <div class="plp-empty-dot">
+          <div class="filled-dot"></div>
+        </div>
+        <%= Harpiya.t('plp.price_low_to_high') %>
+      </a>
+    </li>
+  </ul>
+</div>

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

@@ -0,0 +1,9 @@
+<!-- FIXME: Should be removed if not used? -->
+<% if @product.taxons.present? %>
+  <h3 class="product-section-title"><%= Harpiya.t(:look_for_similar_items) %></h3>
+  <ul class="list-group" id="similar_items_by_taxon" data-hook>
+    <% @product.taxons.each do |taxon| %>
+      <li class="list-group-item"><%= link_to taxon.name, seo_url(taxon) %></li>
+    <% end %>
+  </ul>
+<% end %>

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

@@ -0,0 +1,19 @@
+<%# no need for thumbnails unless there is more than one image %>
+<% if (@product.images + @product.variant_images).uniq.size > 1 %>
+  <ul id="product-thumbnails" class="thumbnails d-flex w-100 pl-0 my-4" data-hook>
+    <% @product.images.each do |i| %>
+      <li class='tmb-all mr-2 tmb-<%= i.viewable.id %>'>
+        <%= link_to(image_tag(main_app.url_for(i.url(:mini)), class: "img-thumbnail d-inline-block"), main_app.url_for(i.url(:product))) %>
+      </li>
+    <% end %>
+
+    <% if @product.has_variants? %>
+      <% @product.variant_images.each do |i| %>
+        <% next if @product.images.include?(i) %>
+        <li class='vtmb mr-2 tmb-<%= i.viewable.id %>'>
+          <%= link_to(image_tag(main_app.url_for(i.url(:mini)), class: "img-thumbnail"), main_app.url_for(i.url(:product))) %>
+        </li>
+      <% end %>
+    <% end %>
+  </ul>
+<% end %>

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

@@ -0,0 +1,48 @@
+<% permitted_params = permitted_products_params %>
+<% products_empty = @products.empty? %>
+
+<div data-hook="search_results">
+  <% if products_empty %>
+    <% if permitted_params[:keywords].present? && permitted_params.to_h.one? %>
+      <%= render 'harpiya/products/no_results' %>
+    <% else %>
+      <%= render 'harpiya/products/no_results_with_filters', permitted_params: permitted_params %>
+    <% end %>
+  <% else %>
+    <% if params[:keywords] %>
+      <div class="container d-md-flex pt-md-5">
+        <div class="plp-results-text text-uppercase mx-md-auto py-md-5">
+          <%= "#{@products.total_count} #{Harpiya.t('plp.results_for')} '#{params[:keywords].upcase}'" %>
+        </div>
+      </div>
+    <% elsif not @taxon %>
+      <div id="no-taxon-banner">
+        <div class="container">
+          <%= lazy_image(
+            src: asset_path('homepage/products.jpg'),
+            alt: 'products-banner',
+            width: 1110,
+            height: 300,
+            class: 'w-100 d-none d-md-block'
+          ) %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render 'harpiya/products/filter_and_sort_mobile_buttons' %>
+    <%= render 'harpiya/products/sort_desktop', permitted_params: permitted_params %>
+    <div class="container mb-3 d-md-flex">
+      <%= render 'harpiya/products/filters_desktop', permitted_params: permitted_params %>
+      <%= render 'harpiya/shared/products', products: @products %>
+    </div>
+  <% end %>
+</div>
+
+<%= render 'harpiya/products/filters_mobile', permitted_params: permitted_params %>
+<%= render 'harpiya/products/sort_mobile', permitted_params: permitted_params %>
+
+<% unless products_empty %>
+  <% cache cache_key_for_products(@products, 'json-ld') do %>
+    <%= products_structured_data(@products) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,14 @@
+<% if product_relation_types.any? %>
+  <div id="related-products">
+    <% product_relation_types.each do |relation_type| %>
+      <% products = product_relations_by_type(relation_type) %>
+
+      <% if products.any? %>
+        <div class="product-details-related" id="product-details-related-<%= relation_type.id %>">
+          <p class="font-weight-bold text-center text-uppercase product-details-carousel-text"><%= relation_type.name %></p>
+          <%= render 'harpiya/shared/carousel_4_products', id: "related-products-carousel-#{relation_type.id}", products: products %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,51 @@
+<% @body_id = 'product-details' %>
+
+<div class="container">
+  <%= harpiya_breadcrumbs(@taxon, '', @product) %>
+</div>
+
+<% cache cache_key_for_product do %>
+  <div class="container pt-4 product-details">
+    <div class="row" data-hook="product_show">
+      <%= render partial: 'gallery' %>
+      <div class="col-12 col-md-5" data-hook="product_right_part">
+        <div id="product-description" data-hook="product_right_part_wrap">
+          <h1 class="mt-3 mt-md-0 text-center text-md-left product-details-title">
+            <%= @product.name %>
+          </h1>
+          <div id="cart-form" data-hook="cart_form">
+            <%= render 'cart_form', variant_change_identifier: 'productCarousel' %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pb-4 pt-md-5 row" data-hook="product_description">
+      <div class="col-12 col-md-7 col-lg-6">
+        <%= render partial: 'description' %>
+      </div>
+      <div class="d-none d-lg-block col-lg-1"></div>
+      <div class="col-12 col-md-5" data-hook="product_properties">
+        <%= render partial: 'properties' %>
+      </div>
+      <div class="col-12" data-hook="promotions">
+        <%= render partial: 'promotions' %>
+      </div>
+    </div>
+
+    <div id="no-product-available" class="no-product-available-dropdown">
+      <%= render partial: 'harpiya/shared/no_product_available' %>
+    </div>
+
+    <%= render partial: 'gallery_modal' %>
+  </div>
+  <div id="related-products"></div>
+
+  <%= products_structured_data([@product]) %>
+
+  <%= render 'harpiya/shared/product_added_modal' %>
+<% end %>
+
+<div
+  data-related-products
+  data-related-products-id="<%= @product.slug %>"
+  data-related-products-enabled="<%= @product.respond_to?(:has_related_products?) %>" />

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

@@ -0,0 +1,28 @@
+<div class="address vcard">
+  <div class="fn"><%= address.full_name %></div>
+  <% unless address.company.blank? %>
+    <div class="org">
+      <%= address.company %>
+    </div>
+  <% end %>
+  <div class="adr">
+    <div class="street-address">
+      <div class="street-address-line">
+        <%= address.address1 %>
+      </div>
+      <% unless address.address2.blank? %>
+        <div class="street-address-line">
+          <%= address.address2 %>
+        </div>
+      <% end %>
+    </div>
+    <div class="local">
+      <span class="locality"><%= address.city %></span>
+      <% if Harpiya::Config[:address_requires_state] %>
+        <span class="region"><%= address.state_text %></span>
+      <% end %>
+      <span class="postal-code"><%= address.zipcode %></span>
+      <div class="country-name"><%= address.country.try(:name) %></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+<nav id="breadcrumbs" class="col-12 mt-1 mt-sm-3 mt-lg-4" aria-label="breadcrumbs">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <span>
+        <%= link_to Harpiya.t(:home), harpiya.root_path %>
+      </span>
+    </li>
+    <% if @taxon %>
+      <% @taxon.ancestors.where.not(parent_id: nil).each do |ancestor| %>
+        <li class="breadcrumb-item">
+          <%= ancestor.name %>
+        </li>
+      <% end %>
+      <li class="breadcrumb-item">
+        <%= @taxon.name %>
+      </li>
+    <% else %>
+      <li class="breadcrumb-item">
+        <%= current_page_name %>
+      </li>
+    <% end %>
+  </ol>
+</nav>

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

@@ -0,0 +1,93 @@
+<% cache [common_product_cache_keys, products&.except(:group, :order)&.maximum(:updated_at)&.to_i, id, products&.ids&.join(',')] do %>
+  <div id="<%= id %>-mobile" class="carousel slide d-md-none homepage-carousel" data-interval="false">
+    <div class="carousel-inner">
+      <% products.each_slice(2).with_index do |sliced_items, index| %>
+        <div class="carousel-item <%= 'active' if index == 0 %>">
+          <div class="container">
+            <div class="row carousel-items-container">
+              <% sliced_items.each_with_index do |item, idx| %>
+                <div class="col-6">
+                  <%= render 'harpiya/shared/product', product: item, image_class: 'w-100' %>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+    </div>
+    <a
+      class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--previous"
+      href="#<%= id %>-mobile"
+      role="button"
+      data-slide="prev">
+      <span class="d-flex justify-content-center align-items-center carousel-icon-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-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
+      href="#<%= id %>-mobile"
+      role="button"
+      data-slide="next">
+      <span class="d-flex justify-content-center align-items-center carousel-icon-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>
+  </div>
+
+  <div id="<%= id %>-desktop" class="carousel slide d-none d-md-block homepage-carousel" data-interval="false">
+    <div class="carousel-inner carousel-inner-width">
+      <% products.each_slice(4).with_index do |sliced_items, index| %>
+        <div class="carousel-item <%= 'active' if index == 0 %>">
+          <div class="container position-relative">
+            <a
+              class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--previous"
+              href="#<%= id %>-desktop"
+              role="button"
+              data-slide="prev">
+              <span class="d-flex justify-content-center align-items-center carousel-icon-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>
+
+            <div class="row carousel-items-container">
+              <% sliced_items.each do |item| %>
+                <div class="col-3 carouselItem">
+                  <%= render 'harpiya/shared/product', product: item, image_class: 'w-100' %>
+                </div>
+              <% end %>
+            </div>
+
+            <a
+              class="d-md-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
+              href="#<%= id %>-desktop"
+              role="button"
+              data-slide="next">
+              <span class="d-flex justify-content-center align-items-center carousel-icon-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>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>