harpiya_frontend 4.3.0.alpha

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/variant_select.js

@@ -0,0 +1,93 @@
+var getQueryString = window.location.search
+var urlParams = new URLSearchParams(getQueryString)
+var variantIdFromUrl = urlParams.get('variant')
+
+this.initializeQueryParamsCheck = function () {
+  if (urlParams.has('variant')) verifyVariantIdMatch()
+}
+
+function verifyVariantIdMatch() {
+  this.variants.forEach(function(variant) {
+    if (parseInt(variant.id) === parseInt(variantIdFromUrl)) this.urlQueryMatchFound = true
+  })
+}
+
+this.setSelectedVariantFromUrl = function () {
+  this.selectedOptions = []
+
+  this.getVariantOptionsById(variantIdFromUrl)
+  this.sortArrayByOptionTypeIndex(this.selectedOptions)
+  this.clickListOptions(this.selectedOptions)
+  this.updateStructuredData()
+}
+
+this.getVariantOptionsById = function(variantIdFromUrl) {
+  this.variants.forEach(function(variant) {
+    if (parseInt(variant.id) === parseInt(variantIdFromUrl)) this.sortOptionValues(variant.option_values)
+  })
+}
+
+this.sortOptionValues = function(optVals) {
+  optVals.forEach(buildArray)
+}
+
+function buildArray(item) {
+  var container = document.querySelector('ul#product-variants')
+  var target = container.querySelectorAll('.product-variants-variant-values-radio')
+
+  target.forEach(function(inputTag) {
+    if (parseInt(inputTag.value) === item.id && inputTag.dataset.presentation === item.presentation) {
+      this.selectedOptions.push(inputTag)
+    }
+  })
+}
+
+this.sortArrayByOptionTypeIndex = function (arrayOfOptions) {
+  arrayOfOptions.sort(function (a, b) {
+    return a.dataset.optionTypeIndex > b.dataset.optionTypeIndex ? 1 : -1;
+  })
+}
+
+this.clickListOptions = function(list) {
+  list.forEach(function (item) {
+    item.checked = true
+    var $optionListItem = $(item)
+    this.applyCheckedOptionValue($optionListItem)
+  })
+}
+
+this.updateStructuredData = function() {
+  var variant = this.selectedVariant()
+  var host = window.location.host
+  var schemaData = document.body.querySelector("script[type='application/ld+json']")
+  var obj = JSON.parse(schemaData.firstChild.nodeValue)
+  var firstLayer = obj[0]
+  var offers = obj[0].offers
+
+  if (variant.purchasable) {
+    offers.availability = 'InStock'
+  } else {
+    offers.availability = 'OutOfStock'
+  }
+
+  if (variant.sku.length > 1) {
+    firstLayer.sku = variant.sku
+  }
+
+  firstLayer.url = window.location.href
+  offers.url = window.location.href
+  offers.price = variant.price.amount
+
+  if (Array.isArray(variant.images) && (variant.images.length)) {
+    firstLayer.image = host + variant.images[0].url_product
+  }
+
+  schemaData.firstChild.nodeValue = JSON.stringify(obj)
+}
+
+this.initializeColorVarianTooltip = function() {
+  var colorVariants = $('.color-select-label[data-toggle="tooltip"]')
+  colorVariants.tooltip({
+    placement: 'bottom'
+  })
+}

data/app/assets/javascripts/harpiya/lazysizes.config.js

@@ -0,0 +1,8 @@
+window.lazySizesConfig = window.lazySizesConfig || {}
+window.lazySizesConfig.loadMode = 1
+window.lazySizesConfig.init = false
+window.lazySizesConfig.loadHidden = false
+
+Harpiya.ready(function ($) {
+  window.lazySizes.init()
+})

data/app/assets/stylesheets/harpiya/frontend.css

@@ -0,0 +1,5 @@
+/*
+* This is a manifest file that includes stylesheets for harpiya_frontend
+ *= require harpiya/frontend/application
+ *= require_self
+*/

data/app/assets/stylesheets/harpiya/frontend/application.scss

@@ -0,0 +1,58 @@
+@import "harpiya/frontend/variables/variables";
+@import "bootstrap";
+@import "harpiya/frontend/bootstrap-patches";
+
+@import "harpiya/frontend/fonts";
+@import "harpiya/frontend/mixins";
+@import "harpiya/frontend/functions";
+@import "harpiya/frontend/margins";
+@import "harpiya/frontend/flags/flag-icon";
+
+@import "harpiya/frontend/components-bootstrap/carousel";
+@import "harpiya/frontend/components-bootstrap/button";
+@import "harpiya/frontend/components-bootstrap/modal";
+@import "harpiya/frontend/components-bootstrap/alert";
+
+@import "harpiya/frontend/views/harpiya/shared/quantity_select";
+@import "harpiya/frontend/views/harpiya/layouts/harpiya_application";
+@import "harpiya/frontend/helpers/harpiya/frontend_helper";
+@import "harpiya/frontend/views/harpiya/icon";
+@import "harpiya/frontend/views/harpiya/shared/images";
+@import "harpiya/frontend/views/harpiya/shared/cart";
+@import "harpiya/frontend/views/harpiya/shared/category_nav_bar";
+@import "harpiya/frontend/views/harpiya/shared/footer";
+@import "harpiya/frontend/views/harpiya/shared/header";
+@import "harpiya/frontend/views/harpiya/shared/login";
+@import "harpiya/frontend/views/harpiya/shared/nav_bar";
+@import "harpiya/frontend/views/harpiya/shared/search_form";
+@import "harpiya/frontend/views/harpiya/shared/order_details";
+@import "harpiya/frontend/views/harpiya/shared/main_nav_bar";
+@import "harpiya/frontend/views/harpiya/errors/not_found";
+@import "harpiya/frontend/views/harpiya/cms_sections/_index";
+@import "harpiya/frontend/views/harpiya/shared/carousel/thumbnails";
+@import "harpiya/frontend/views/harpiya/shared/carousel/single";
+@import "harpiya/frontend/views/harpiya/home/index";
+@import "harpiya/frontend/views/harpiya/user_passwords/user_passwords";
+@import "harpiya/frontend/views/harpiya/user_sessions/new";
+@import "harpiya/frontend/views/harpiya/products/index";
+@import "harpiya/frontend/components-custom/headers";
+@import "harpiya/frontend/components-custom/inputs";
+@import "harpiya/frontend/views/harpiya/checkout/registration";
+@import "harpiya/frontend/views/harpiya/checkout/delivery";
+@import "harpiya/frontend/views/harpiya/checkout/confirm";
+@import "harpiya/frontend/views/harpiya/checkout/payment";
+@import "harpiya/frontend/views/harpiya/orders/edit";
+@import "harpiya/frontend/views/harpiya/orders/show";
+@import "harpiya/frontend/views/harpiya/taxons/show";
+@import "harpiya/frontend/views/harpiya/users/show";
+@import "harpiya/frontend/views/harpiya/checkout/edit";
+@import "harpiya/frontend/views/harpiya/shared/product";
+@import "harpiya/frontend/views/harpiya/products/show";
+@import "harpiya/frontend/views/harpiya/products/cart_form";
+@import "harpiya/frontend/views/harpiya/products/gallery_modal";
+@import "harpiya/frontend/views/harpiya/shared/product_added_modal";
+@import "harpiya/frontend/views/harpiya/shared/mobile_navigation";
+@import "harpiya/frontend/views/harpiya/shared/no_product_available";
+@import "harpiya/frontend/views/harpiya/shared/color_select";
+@import "harpiya/frontend/views/harpiya/shared/dropdown";
+@import "harpiya/frontend/views/harpiya/shared/delete_address_popup";

data/app/assets/stylesheets/harpiya/frontend/bootstrap-patches.scss

@@ -0,0 +1,11 @@
+@mixin make-container-padding-x($padding-x) {
+  padding-right: $padding-x;
+  padding-left: $padding-x;
+}
+
+.container, .container-fluid {
+  // Workaround for https://stackoverflow.com/questions/57098758/why-cant-i-override-the-container-padding-variable-in-bootstrapvue.
+  // As long as horizontal padding is larger than $grid-gutter-width / 2 it should work fine.
+  // TODO: Remove this overwrite and use $container-padding-x after upgrading to Bootstrap 5.
+  @include make-container-padding-x($container-padding);
+}

data/app/assets/stylesheets/harpiya/frontend/components-bootstrap/alert.scss

@@ -0,0 +1,3 @@
+.alert {
+  text-align: center;
+}

data/app/assets/stylesheets/harpiya/frontend/components-bootstrap/button.scss

@@ -0,0 +1,16 @@
+.btn {
+  &-primary {
+    &:disabled {
+      background-color: theme-color-level('light', 2);
+      border-color: theme-color-level('light', 2);
+    }
+  }
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}

data/app/assets/stylesheets/harpiya/frontend/components-bootstrap/carousel.scss

@@ -0,0 +1,89 @@
+.carousel {
+  &-indicators {
+    &-indicator {
+      $size: 6px;
+      border: 1px solid theme-color("secondary");
+      background: theme-color("light");
+      width: $size;
+      height: $size;
+      flex: 0 0 auto;
+      border-radius: 50%;
+      &.active {
+        background: theme-color("secondary");
+      }
+    }
+  }
+  &-vertically-animated {
+    // Source: https://stackoverflow.com/questions/42910076/bootstrap-4-alpha-6-vertical-carousel
+    .carousel-item {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+    .carousel-item-next.carousel-item-left,
+    .carousel-item-prev.carousel-item-right {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+    .carousel-item-next,
+    .active.carousel-item-right {
+      -webkit-transform: translate3d(0, 100%, 0);
+      transform: translate3d(0, 100%, 0);
+    }
+    .carousel-item-prev,
+    .active.carousel-item-left {
+      -webkit-transform: translate3d(0, -100%, 0);
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+  &-icon {
+    &-control {
+      @mixin arrow {
+        z-index: 1;
+        top: 0;
+        bottom: 42px;
+        @include media-breakpoint-up(md) {
+          bottom: 70px;
+        }
+      }
+      &-rounded {
+        $size: 28px;
+        border-radius: 50%;
+        width: $size;
+        height: $size;
+        background: $secondary-background;
+        color: $secondary-font-color;
+        @include media-breakpoint-up(sm) {
+          $size: 44px;
+          width: $size;
+          height: $size;
+        }
+      }
+      &--previous {
+        left: 7px;
+        @include arrow;
+        @media (min-width: map-get($grid-breakpoints, "xl") + 100px) {
+          left: -30px;
+        }
+      }
+      &--next {
+        right: 7px;
+        @include arrow;
+        @media (min-width: map-get($grid-breakpoints, "xl") + 100px) {
+          right: -30px;
+        }
+      }
+    }
+  }
+  &-items-container {
+    margin-left: 7px;
+    margin-right: 7px;
+    @include media-breakpoint-up(sm) {
+      margin-left: 30px;
+      margin-right: 30px;
+    }
+    @media (min-width: map-get($grid-breakpoints, "xl") + 100px) {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}

data/app/assets/stylesheets/harpiya/frontend/components-bootstrap/modal.scss

@@ -0,0 +1,7 @@
+.modal-backdrop {
+  background: adjust-color(theme-color-level('dark', -5), $alpha: -0.4);
+}
+
+.modal {
+  padding: 0 !important
+}

data/app/assets/stylesheets/harpiya/frontend/components-custom/headers.scss

@@ -0,0 +1,28 @@
+.harpiya-header {
+  font-size: font-px-to-rem(18px);
+  text-transform: uppercase;
+  color: theme-color('dark-text');
+  text-align: center;
+
+  &.header-sm {
+    font-size: font-px-to-rem(14px);
+  }
+
+  @include media-breakpoint-up(sm) {
+    font-size: font-px-to-rem(34px);
+    line-height: 0.91;
+
+    &.header-sm {
+      font-size: font-px-to-rem(27px);
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    font-size: font-px-to-rem(32px);
+    line-height: 0.88;
+
+    &.header-sm {
+      font-size: font-px-to-rem(20px);
+    }
+  }
+}

data/app/assets/stylesheets/harpiya/frontend/components-custom/inputs.scss

@@ -0,0 +1,345 @@
+.harpiya-flat-input {
+  color: theme-color("secondary");
+  transition: basic-transition(border-color);
+  padding: 15px;
+  width: 100%;
+  height: auto;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $second-global-border;
+  border-radius: 0;
+  outline: none;
+  font-size: font-px-to-rem(12px);
+  line-height: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  @include media-breakpoint-up(sm) {
+    padding: 25px;
+    font-size: font-px-to-rem(23px);
+  }
+  @include media-breakpoint-up(lg) {
+    padding: 20px;
+    font-size: font-px-to-rem(14px);
+  }
+  &:focus {
+    border-color: theme-color("secondary");
+  }
+  &::placeholder {
+    text-transform: uppercase;
+  }
+}
+
+.harpiya-flat-select {
+  @extend .harpiya-flat-input;
+  appearance: none;
+  padding-top:22px;
+  padding-bottom:21px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  &-arrow {
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    @include media-breakpoint-up(sm) {
+      right: 23px;
+    }
+    @include media-breakpoint-up(lg) {
+      right: 20px;
+    }
+  }
+}
+
+.field_with_errors {
+  input{
+    border-color: $danger;
+  }
+}
+
+.harpiya-flat-label {
+  color: theme-color("secondary");
+  text-transform: uppercase;
+  font-size: font-px-to-rem(12px);
+
+  @include media-breakpoint-up(sm) {
+    font-size: font-px-to-rem(17px);
+  }
+}
+
+.harpiya-checkbox-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.harpiya-checkbox {
+  position: relative;
+  height: 22px;
+  display: block;
+  float: left;
+  width: 22px;
+  margin-right: 0.5rem;
+
+  @include media-breakpoint-up(sm) {
+    width: 32px;
+    height: 32px;
+  }
+
+  @include media-breakpoint-up(lg) {
+    width: 22px;
+    height: 22px;
+  }
+
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  label {
+    transition: basic-transition(background-color);
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    font-size: 0;
+    border-radius: 0;
+    border: 2px solid theme-color("secondary");
+    background-color: $input-background;
+    cursor: pointer;
+
+    @include media-breakpoint-up(sm) {
+      width: 32px;
+      height: 32px;
+    }
+
+    @include media-breakpoint-up(lg) {
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+  label:after {
+    transition: basic-transition(opacity);
+    opacity: 0;
+    content: "";
+    position: absolute;
+    width: 12px;
+    height: 8px;
+    background: transparent;
+    top: 4px;
+    left: 3px;
+    border: 3px solid white;
+    border-top: none;
+    border-right: none;
+    transform: rotate(-45deg);
+
+    @include media-breakpoint-up(sm) {
+      width: 15px;
+      height: 10px;
+      top: 6px;
+      left: 6px;
+    }
+
+    @include media-breakpoint-up(lg) {
+      width: 12px;
+      height: 8px;
+      top: 4px;
+      left: 3px;
+    }
+  }
+
+  input[type="checkbox"]:focus + label {
+    border-color: $primary-color;
+  }
+
+  input[type="checkbox"]:checked + label {
+    background-color: theme-color("secondary");
+
+    &:after {
+      opacity: 1;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    height: 28px;
+    width: 28px;
+
+    label {
+      height: 28px;
+      width: 28px;
+    }
+
+    label:after {
+      width: 14px;
+      height: 9px;
+      top: 6px;
+      left: 5px;
+    }
+  }
+}
+
+.harpiya-checkbox-label {
+  color: theme-color("info");
+  font-size: font-px-to-rem(12px);
+  margin: 0;
+  // Autoprefixer don't seem to catch this
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+
+  @include media-breakpoint-up(sm) {
+    font-size: font-px-to-rem(21px);
+  }
+
+  @include media-breakpoint-up(lg) {
+    font-size: font-px-to-rem(16px);
+  }
+}
+
+.harpiya-btn {
+  text-transform: uppercase;
+  letter-spacing: 0.05rem;
+  font-size: font-px-to-rem(14px);
+  font-weight: bold;
+
+  &.btn-primary {
+    font-size: font-px-to-rem(17px);
+  }
+
+  &.btn-outline-primary {
+    border-width: 2px;
+  }
+
+  @include media-breakpoint-up(sm) {
+    padding-top: 14px;
+    padding-bottom: 14px;
+
+    &.btn-primary {
+      font-size: font-px-to-rem(28px);
+    }
+
+    &.btn-outline-primary {
+      font-size: font-px-to-rem(28px);
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    padding-top: 6px;
+    padding-bottom: 6px;
+
+    &.btn-primary {
+      font-size: font-px-to-rem(20px);
+    }
+
+    &.btn-outline-primary {
+      font-size: font-px-to-rem(20px);
+    }
+  }
+}
+
+.harpiya-radio-label {
+  position: relative;
+  padding-left: 30px;
+  cursor: pointer;
+  @include media-breakpoint-up(sm) {
+    padding-left: 55px;
+  }
+  @include media-breakpoint-up(lg) {
+    padding-left: 52px;
+  }
+  input {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    &:focus + span {
+      border-radius: 50%;
+      border: 2px solid $primary-color;
+    }
+  }
+  &-custom-input {
+    @include colored-circle-radio($secondary-color);
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 18px;
+    height: 18px;
+    background-size: contain;
+    @include media-breakpoint-up(sm) {
+      width: 32px;
+      height: 32px;
+    }
+    @include media-breakpoint-up(lg) {
+      width: 27px;
+      height: 27px;
+    }
+  }
+  input:checked ~ &-custom-input {
+    @include colored-full-circle-radio($secondary-color);
+    background-size: contain;
+  }
+}
+
+//Slide in labels
+@mixin float-label-container {
+  display: block;
+  position: relative;
+}
+
+@mixin float-label {
+  label {
+    position: absolute;
+    left: 1em;
+    top: -0.5em;
+    cursor: text;
+    opacity: 1;
+    background: $input-background;
+    padding: 0 4px;
+    transition: all .2s;
+    @content;
+    &.state-select-label{
+      opacity: 1 !important;
+      left:1em !important;
+    }
+  }
+}
+
+@mixin float-label-input {
+  &::placeholder {
+    opacity: 0;
+    color: $secondary-font-color;
+    transition: all .2s;
+  }
+  &:placeholder-shown:not(:focus)::placeholder {
+      opacity: 0.3;
+      transition: all .2s;
+  }
+}
+
+@mixin float-label-scaled {
+  &:placeholder-shown:not(:focus) + * {
+      @content;
+  }
+}
+
+.has-float-label {
+  @include float-label-container;
+  @include float-label;
+
+  input, textarea {
+    @include float-label-input;
+    @include float-label-scaled {
+      opacity: 0;
+      left: 0em;
+    }
+  }
+  .form-control:focus {
+    box-shadow: none;
+  }
+}