feat(extra-features): Shows user's name or "log out" if logged in

bootstrap touchspin default styles

falcon/_dev/css/abstracts/variables/bootstrap/_components.scss

@@ -1,5 +1,12 @@
-$border-width:                1px;
+$border-width: 1px;
-$border-color:                $gray-300;
+$border-color: $gray-300;
-$border-radius:               .4rem;
+$border-radius: 0.4rem;
-$border-radius-lg:            .4rem;
+$border-radius-lg: 0.4rem;
-$border-radius-sm:            .4rem;
+$border-radius-sm: 0.4rem;
+
+$card-border-color: $border-color;
+$table-border-color: $border-color;
+$input-border-color: $border-color;
+
+$input-focus-border-color: $border-color;
+$form-check-input-border: $border-color;

falcon/_dev/css/abstracts/variables/bootstrap/_forms.scss

@@ -1,8 +1,10 @@
-$input-btn-padding-y:         rem-calc(8px);
+$input-btn-padding-y: rem-calc(8px);
-$input-btn-padding-x:         rem-calc(16px);
+$input-btn-padding-x: rem-calc(16px);
 
-$input-btn-padding-y-sm:      rem-calc(4px);
+$input-btn-padding-y-sm: rem-calc(4px);
-$input-btn-padding-x-sm:      rem-calc(8px);
+$input-btn-padding-x-sm: rem-calc(8px);
 
-$input-btn-padding-y-lg:      rem-calc(14px);
+$input-btn-padding-y-lg: rem-calc(14px);
-$input-btn-padding-x-lg:      rem-calc(20px);
+$input-btn-padding-x-lg: rem-calc(20px);
+
+$input-height: rem-calc(50px);

falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss

@@ -1,3 +1,21 @@
-$grid-columns:                12;
+// Made this more like the breakpoints used in Bootstrap 5
-$grid-gutter-width:           rem-calc(20px);
+$grid-breakpoints: (
-$grid-row-columns:            6;
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px,
+);
+
+$container-max-widths: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+    xxl: 1320px,
+);
+
+$grid-columns: 12;
+$grid-gutter-width: rem-calc(20px);
+$grid-row-columns: 6;

falcon/_dev/css/abstracts/variables/bootstrap/_typography.scss

@@ -1,39 +1,41 @@
-$font-family-sans-serif:      "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-sans-serif: "Plus Jakarta Sans", sans-serif;
-$font-family-base:            $font-family-sans-serif;
+$font-family-base: $font-family-sans-serif;
+$headings-font-family: $font-family-sans-serif;
+$font-weight-base: 400;
 
-$font-size-base:              rem-calc(16px);
+$font-size-base: rem-calc(14px);
-$font-size-lg:                $font-size-base * 1.125;
+$font-size-lg: $font-size-base * 1.125;
-$font-size-sm:                $font-size-base * .875;
+$font-size-sm: $font-size-base * 0.875;
-$font-size-xs:                $font-size-base * .6875;
+$font-size-xs: $font-size-base * 0.6875;
 
-$font-weight-lighter:         200;
+$font-weight-lighter: 200;
-$font-weight-light:           300;
+$font-weight-light: 300;
-$font-weight-normal:          400;
+$font-weight-normal: 400;
-$font-weight-bold:            700;
+$font-weight-bold: 700;
-$font-weight-bolder:          800;
+$font-weight-bolder: 800;
 
-$h1-font-size:                $font-size-base * 2;
+$h1-font-size: $font-size-base * 2;
-$h2-font-size:                $font-size-base * 1.75;
+$h2-font-size: $font-size-base * 1.75;
-$h3-font-size:                $font-size-base * 1.5;
+$h3-font-size: $font-size-base * 1.5;
-$h4-font-size:                $font-size-base * 1.25;
+$h4-font-size: $font-size-base * 1.25;
-$h5-font-size:                $font-size-base * 1.125;
+$h5-font-size: $font-size-base * 1.125;
-$h6-font-size:                $font-size-base;
+$h6-font-size: $font-size-base;
 
-$display1-size:               $font-size-base * 2.5;
+$display1-size: $font-size-base * 2.5;
-$display2-size:               $font-size-base * 2.25;
+$display2-size: $font-size-base * 2.25;
-$display3-size:               $font-size-base * 2;
+$display3-size: $font-size-base * 2;
-$display4-size:               $font-size-base * 1.75;
+$display4-size: $font-size-base * 1.75;
 
-$display1-weight:             400;
+$display1-weight: 400;
-$display2-weight:             400;
+$display2-weight: 400;
-$display3-weight:             400;
+$display3-weight: 400;
-$display4-weight:             400;
+$display4-weight: 400;
 
-$text-muted:                  $gray-600;
+$text-muted: $gray-600;
 
-$paragraph-margin-bottom:     rem-calc(20px);
+$paragraph-margin-bottom: rem-calc(20px);
 
-$headings-margin-bottom:      rem-calc(20px);
+$headings-margin-bottom: rem-calc(20px);
-$headings-font-weight:        700;
+$headings-font-weight: 700;
-$headings-line-height:        1.2;
+$headings-line-height: 1.2;
-$headings-color:              $gray-900;
+$headings-color: $gray-900;

falcon/_dev/css/custom.scss

@@ -1,19 +0,0 @@
-// NOTE: All bootstrap overrides have been configured under the abstracts/variables/bootstrap folder.
-
-//Abstracts: Things used throughout the site such as utility classes and generic overrides.
-//@import "custom/abstracts/base";
-//@import "custom/abstracts/utilities";
-
-// Components: parts of the theme itself that are not associated with a module.
-//@import "custom/components/";
-
-// Modules: Styling for specific modules.
-//@import "custom/modules/";
-
-//Layouts: Parts of a page, such as the header, footer, etc.
-//@import "custom/layout/header";
-//@import "custom/layout/footer";
-
-// Pages
-//@import "custom/pages/category";
-//@import "custom/pages/product";

falcon/_dev/css/theme.scss

@@ -1,3 +1,3 @@
 @import "abstracts/index";
 @import "theme/index";
-@import "custom";
+@import "theme/custom/custom";

falcon/_dev/css/theme/components/customer/_customer-links.scss

@@ -1,83 +1,80 @@
 @use "sass:map";
 
 .customer-links {
-  margin: 0 0 map.get($spacers, 3);
+    margin: 0 0 map.get($spacers, 3);
-  @include media-breakpoint-up(lg) {
-    margin: 0;
-  }
-
-  .link-item {
-    display: flex;
-    align-items: center;
-  }
-
-  &__list {
-    @include media-breakpoint-down(md) {
-      display: flex;
-      flex-wrap: nowrap;
-
-      margin: rem-calc(20px) 0 0;
-      overflow-x: scroll;
-      overflow-y: hidden;
-      white-space: nowrap;
-      -webkit-overflow-scrolling: touch;
-      -ms-overflow-style: -ms-autohiding-scrollbar;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  a {
-    display: block;
-    flex: 0 0;
-    max-width: inherit;
-    padding: map.get($spacers, 2);
-    font-weight: 700;
-    color: $gray-800;
-    white-space: nowrap;
-    border-radius: $border-radius;
-    @include font-size($font-size-base);
-
     @include media-breakpoint-up(lg) {
-      white-space: normal;
+        margin: 0;
     }
 
-    @include hover-focus() {
+    .link-item {
-      color: $primary;
+        display: flex;
-      text-decoration: none;
+        align-items: center;
     }
 
-    i {
+    &__list {
-      margin-right: map.get($spacers, 1);
+        @include media-breakpoint-down(md) {
-      color: $primary;
+            display: flex;
-      @include font-size(26px);
+            flex-wrap: nowrap;
-      @include media-breakpoint-up(md) {
+
-        margin-right: map.get($spacers, 2);
+            margin: rem-calc(20px) 0 0;
-      }
+            overflow-x: scroll;
+            overflow-y: hidden;
+            white-space: nowrap;
+            -webkit-overflow-scrolling: touch;
+            -ms-overflow-style: -ms-autohiding-scrollbar;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
     }
 
-    &.active {
+    a {
-      color: #fff;
-      background: $primary;
-
-      &::after {
         display: block;
-      }
+        flex: 0 0;
+        max-width: inherit;
+        padding: map.get($spacers, 2);
+        font-weight: 700;
+        white-space: nowrap;
+        border-radius: $border-radius;
+        @include font-size($font-size-base);
 
-      i {
+        @include media-breakpoint-up(lg) {
-        color: inherit;
+            white-space: normal;
-      }
+        }
+
+        @include hover-focus() {
+            text-decoration: none;
+        }
+
+        i {
+            margin-right: map.get($spacers, 1);
+            @include font-size(26px);
+            @include media-breakpoint-up(md) {
+                margin-right: map.get($spacers, 2);
+            }
+        }
+
+        &.active {
+            color: #fff;
+            background: $primary;
+
+            &::after {
+                display: block;
+            }
+
+            i {
+                color: inherit;
+            }
+        }
     }
-  }
 
-  &__logout {
+    &__logout {
-    text-align: center;
+        text-align: center;
 
-    &::after,
+        &::after,
-    &::before {
+        &::before {
-      display: none;
+            display: none;
+        }
     }
-  }
 }

falcon/_dev/css/theme/custom/_custom.scss

@@ -1,22 +1,32 @@
-/* This is the main custom SCSS file for the Falcon theme. 
+/* 
+This is the main custom SCSS file for the Falcon theme. 
 
 I am loosely following the 7 in 1 structure for better organization of the styles. Learn more here:
 https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1
 
-⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap */
+⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
+Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/articles/bs5-variables/index.html
+
+*/
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
-//@import "abstracts/mixins";
+//@import "abstracts/base";
+@import "abstracts/functions";
+@import "abstracts/mixins";
+@import "abstracts/utilities";
 
 // Components: parts of the theme itself that are not associated with a module.
-//@import "components/buttons";
+@import "components/buttons";
-
+@import "components/forms";
-// Modules: Styling for specific modules.
-//@import "modules/";
 
 //Layouts: Parts of a page, such as the header, footer, etc.
 //@import "layout/footer";
-//@import "layout/header";
+@import "layout/header";
+@import "layout/left-column";
+@import "layout/swiper";
 
 // Pages
+//@import "pages/checkout";
 //@import "pages/home";
+//@import "pages/listing";
+//@import "pages/product";

falcon/_dev/css/theme/custom/abstracts/_functions.scss

@@ -0,0 +1,41 @@
+@use "sass:math";
+
+// Font size utility classes generator
+// Generates utility classes like .fs-14, .fs-16, etc.
+@for $i from 8 through 72 {
+    .fs-#{$i} {
+        font-size: rem-calc($i * 1px) !important;
+    }
+}
+
+// Font weight utility classes generator
+// Generates utility classes like .fw-100, .fw-200, etc.
+@for $i from 100 through 900 {
+    @if $i % 100 == 0 {
+        .fw-#{$i} {
+            font-weight: #{$i} !important;
+        }
+    }
+}
+
+// gap size utility classes generator
+// Generates utility classes like .gap-4, .gap-col-4, .gap-row-4
+@for $i from 1 through 35 {
+    .gap-#{$i} {
+        gap: rem-calc($i * 1px) !important;
+    }
+    .gap-col-#{$i} {
+        column-gap: rem-calc($i * 1px) !important;
+    }
+    .gap-row-#{$i} {
+        row-gap: rem-calc($i * 1px) !important;
+    }
+}
+
+// hex to rgba function
+@function hex-to-rgba($hex, $alpha) {
+    $r: red($hex);
+    $g: green($hex);
+    $b: blue($hex);
+    @return rgba($r, $g, $b, $alpha);
+}

falcon/_dev/css/theme/custom/abstracts/_mixins.scss

@@ -0,0 +1,73 @@
+// Bootstrap 5-style responsive mixins (more intuitive than Bootstrap 4)
+// Learn the difference here https://getbootstrap.com/docs/5.0/migration/#sass
+
+@mixin bs5-media-breakpoint-up($name) {
+    $min: map-get($grid-breakpoints, $name);
+    @if $min and $min > 0 {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-down($name) {
+    $max: map-get($grid-breakpoints, $name);
+    @if $max {
+        @media (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-between($lower, $upper) {
+    $min: map-get($grid-breakpoints, $lower);
+    $max: map-get($grid-breakpoints, $upper);
+    @if $min and $max {
+        @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    }
+}
+
+@mixin bs5-media-breakpoint-only($name) {
+    $breakpoint-names: map-keys($grid-breakpoints);
+    $index: index($breakpoint-names, $name);
+    $next-name: nth($breakpoint-names, $index + 1);
+
+    @include bs5-media-breakpoint-between($name, $next-name) {
+        @content;
+    }
+}
+
+// Mixin to add an after pseudo-element with a mask image to customize button colors
+/* Example: 
+
+.btn-arrow-right{
+    &::after {
+        @include btn-after("../img/arrow-right.svg");
+    }
+}
+    
+*/
+
+@mixin btn-after($url, $color: currentColor) {
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-left: 0.5em;
+    vertical-align: middle;
+    background-color: currentColor;
+    mask-image: url(#{$url});
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-image: url(#{$url});
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+}

falcon/_dev/css/theme/custom/abstracts/_utilities.scss

@@ -0,0 +1,43 @@
+// Header selector for interpolation
+// Example usage: #{$headers} { ... }
+$headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
+
+// All text selector for interpolation
+$text: "#{$headers}, p, span, a, li";
+
+// Section Spacers. Just set the two variables below and it is fully responsive!
+// $section-spacer-small applies on breakpoints lg and below, OR always if specified in the class with  --small (ex. section-spacer--small).
+
+$section-spacer: rem-calc(50px);
+$section-spacer-small: rem-calc(25px);
+
+.section-spacer-both {
+    margin-top: $section-spacer-small;
+    margin-bottom: $section-spacer-small;
+    @include bs5-media-breakpoint-up(lg) {
+        margin-top: $section-spacer;
+        margin-bottom: $section-spacer;
+    }
+    &--small {
+        margin-top: $section-spacer-small;
+        margin-bottom: $section-spacer-small;
+        @include bs5-media-breakpoint-up(lg) {
+            margin-top: $section-spacer-small;
+            margin-bottom: $section-spacer-small;
+        }
+    }
+}
+.section-spacer {
+    @extend .section-spacer-both;
+    margin-bottom: unset;
+    &--small {
+        margin-bottom: unset;
+    }
+}
+.section-spacer-bottom {
+    @extend .section-spacer-both;
+    margin-top: unset;
+    &--small {
+        margin-top: unset;
+    }
+}

falcon/_dev/css/theme/custom/components/_buttons.scss

@@ -0,0 +1,57 @@
+// To customize text colors per button, use this map and below function
+
+$btn-color: (
+    "primary": $white,
+    "secondary": $white,
+    "light": $primary,
+    "dark": $white,
+);
+
+@each $name, $color in $btn-color {
+    .btn-#{$name},
+    .btn-lg-#{$name},
+    .btn-sm-#{$name} {
+        color: $color !important;
+    }
+}
+
+// Configure btn-outline text color on hover per button. (Same thing as above but for btn-outline and only on hover)
+$btn-outline-hover: (
+    "primary": $white,
+    "secondary": $white,
+);
+
+@each $name, $bg in $btn-outline-hover {
+    $text-color: if(
+        map-has-key($btn-color, $name),
+        map-get($btn-color, $name),
+        $white
+    );
+
+    .btn-outline-#{$name}:hover,
+    .btn-outline-#{$name}:focus,
+    .btn-outline-#{$name}:active,
+    .btn-outline-#{$name}.active,
+    .show > .btn-outline-#{$name}.dropdown-toggle {
+        color: $text-color !important;
+    }
+}
+
+// Bootstrap touchspin
+.bootstrap-touchspin {
+    flex-wrap: nowrap;
+
+    .input-touchspin {
+        height: rem-calc(50px);
+        min-width: rem-calc(75px);
+        border-left: 0px;
+    }
+
+    .input-group-btn-vertical {
+        display: flex;
+        flex-direction: column;
+        button {
+            border-radius: 0px;
+        }
+    }
+}

falcon/_dev/css/theme/custom/components/_forms.scss

@@ -0,0 +1,10 @@
+.input-group.js-parent-focus {
+    .input-group-append .btn {
+        border-top-right-radius: $border-radius !important;
+        border-bottom-right-radius: $border-radius !important;
+    }
+}
+
+.input-group.js-parent-focus {
+    height: $input-height;
+}

falcon/_dev/css/theme/custom/layout/_header.scss

@@ -0,0 +1,17 @@
+.header-top__row {
+    flex-wrap: wrap;
+    .header-top__block--search {
+        @include media-breakpoint-down(sm) {
+            order: 1;
+        }
+        .js-search-form {
+            max-width: unset;
+            width: 100%;
+            margin: 0;
+        }
+    }
+
+    .header-top__badge {
+        right: -0.9em;
+    }
+}

falcon/_dev/css/theme/custom/layout/_left-column.scss

@@ -0,0 +1,10 @@
+#left-column {
+    .list-group-item,
+    .list-group-item-action-dropdown-link,
+    label {
+        font-family: $font-family-base;
+        font-size: $font-size-base;
+        color: $secondary;
+        font-weight: 400;
+    }
+}

falcon/_dev/css/theme/custom/layout/_swiper.scss

@@ -0,0 +1,3 @@
+.swiper-slide {
+    height: auto;
+}

falcon/_dev/img/bag.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.5" height="20.5" viewBox="0 0 18.5 20.5">
+  <g id="Icon_feather-shopping-bag" data-name="Icon feather-shopping-bag" transform="translate(-3.75 -2.25)">
+    <path id="Path_13" data-name="Path 13" d="M7.333,3,4.5,6.8V20.1A1.894,1.894,0,0,0,6.389,22H19.611A1.894,1.894,0,0,0,21.5,20.1V6.8L18.667,3ZM4.5,6.8h17" transform="translate(0 0)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Path_14" data-name="Path 14" d="M19.4,15A3.7,3.7,0,1,1,12,15" transform="translate(-2.7 -4.35)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>

falcon/_dev/img/checkmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
+  <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
+</svg>

falcon/_dev/img/chevron_down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 10.828 6.414">
+  <path d="M1560.845,813.75l4,4-4,4" transform="translate(823.164 -1559.431) rotate(90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+</svg>

falcon/_dev/img/chevron_left.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

falcon/_dev/img/chevron_right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 6.414 10.828">
+  <path d="M1560.845,813.75l4,4-4,4" transform="translate(-1559.431 -812.336)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+</svg>

falcon/_dev/img/chevron_up.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 5L5 1L9 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

falcon/_dev/img/hamburger-menu.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.2222C0 13.0159 0.0766233 12.8181 0.213013 12.6722C0.349403 12.5264 0.534388 12.4444 0.727273 12.4444H15.2727C15.4656 12.4444 15.6506 12.5264 15.787 12.6722C15.9234 12.8181 16 13.0159 16 13.2222C16 13.4285 15.9234 13.6263 15.787 13.7722C15.6506 13.9181 15.4656 14 15.2727 14H0.727273C0.534388 14 0.349403 13.9181 0.213013 13.7722C0.0766233 13.6263 0 13.4285 0 13.2222ZM0 7C0 6.79372 0.0766233 6.59589 0.213013 6.45003C0.349403 6.30417 0.534388 6.22222 0.727273 6.22222H15.2727C15.4656 6.22222 15.6506 6.30417 15.787 6.45003C15.9234 6.59589 16 6.79372 16 7C16 7.20628 15.9234 7.40411 15.787 7.54997C15.6506 7.69583 15.4656 7.77778 15.2727 7.77778H0.727273C0.534388 7.77778 0.349403 7.69583 0.213013 7.54997C0.0766233 7.40411 0 7.20628 0 7ZM0 0.777778C0 0.571498 0.0766233 0.373668 0.213013 0.227806C0.349403 0.0819444 0.534388 0 0.727273 0H15.2727C15.4656 0 15.6506 0.0819444 15.787 0.227806C15.9234 0.373668 16 0.571498 16 0.777778C16 0.984057 15.9234 1.18189 15.787 1.32775C15.6506 1.47361 15.4656 1.55556 15.2727 1.55556H0.727273C0.534388 1.55556 0.349403 1.47361 0.213013 1.32775C0.0766233 1.18189 0 0.984057 0 0.777778Z" fill="currentColor"/>
+</svg>

falcon/_dev/img/heart.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.5" height="20.5" viewBox="0 0 23.5 20.5">
+  <path id="Icon_feather-heart" data-name="Icon feather-heart" d="M22.627,6.177a5.829,5.829,0,0,0-8.188,0l-1.116,1.1-1.116-1.1a5.831,5.831,0,0,0-8.188,0,5.693,5.693,0,0,0,0,8.108l1.116,1.1L13.323,23.5l8.188-8.108,1.116-1.1a5.692,5.692,0,0,0,0-8.108Z" transform="translate(-1.573 -3.747)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+</svg>

falcon/_dev/img/person.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.506" height="20.5" viewBox="0 0 18.506 20.5">
+  <g id="Icon_akar-person" data-name="Icon akar-person" transform="translate(-4.145 -2.25)">
+    <path id="Path_18" data-name="Path 18" d="M20.4,7.75a4.854,4.854,0,0,1-4.952,4.75A4.854,4.854,0,0,1,10.5,7.75,4.854,4.854,0,0,1,15.452,3,4.854,4.854,0,0,1,20.4,7.75Z" transform="translate(-2.054)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Path_19" data-name="Path 19" d="M18.264,21h.343a2.9,2.9,0,0,1,2.9,2.5l.381,2.968a1.87,1.87,0,0,1-.472,1.493,1.967,1.967,0,0,1-1.459.642H6.845a1.967,1.967,0,0,1-1.46-.643,1.87,1.87,0,0,1-.472-1.493l.38-2.968a2.9,2.9,0,0,1,2.9-2.5h.342" transform="translate(0 -6.6)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>

falcon/_dev/img/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.867" height="17.867" viewBox="0 0 17.867 17.867">
+  <path id="Icon_akar-search" data-name="Icon akar-search" d="M18.453,18.453,14.8,14.8m2.022-4.885A6.913,6.913,0,1,1,9.913,3a6.913,6.913,0,0,1,6.913,6.913Z" transform="translate(-2 -2)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
+</svg>

falcon/_dev/img/x.svg

@@ -0,0 +1,20 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7_2)">
+<g clip-path="url(#clip1_7_2)">
+<mask id="mask0_7_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<path d="M16 0H0V16H16V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_7_2)">
+<path d="M2.34315 2.34315C2.53069 2.15561 2.78504 2.05025 3.05026 2.05025C3.31547 2.05025 3.56983 2.15561 3.75736 2.34315L8 6.58579L12.2426 2.34315C12.4302 2.15562 12.6846 2.05023 12.9497 2.05026C13.2149 2.05028 13.4693 2.15561 13.6569 2.34315C13.8444 2.53068 13.9497 2.78507 13.9497 3.05026C13.9498 3.31545 13.8444 3.56983 13.6569 3.75736L9.41422 8L13.6569 12.2426C13.8444 12.4302 13.9498 12.6846 13.9497 12.9497C13.9497 13.2149 13.8444 13.4693 13.6569 13.6569C13.4693 13.8444 13.2149 13.9497 12.9497 13.9497C12.6846 13.9498 12.4302 13.8444 12.2426 13.6569L8 9.41421L3.75736 13.6569C3.56983 13.8444 3.31547 13.9497 3.05026 13.9498C2.78504 13.9497 2.53069 13.8444 2.34315 13.6569C2.15561 13.4693 2.05026 13.215 2.05025 12.9497C2.05026 12.6845 2.15561 12.4302 2.34315 12.2426L6.58579 8L2.34315 3.75736C2.15561 3.56982 2.05026 3.31547 2.05025 3.05025C2.05026 2.78504 2.15561 2.53068 2.34315 2.34315Z" fill="currentColor"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_7_2">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+<clipPath id="clip1_7_2">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

falcon/_dev/js/theme/components/cart/cart.js

@@ -1,6 +1,6 @@
-import $ from 'jquery';
+import $ from "jquery";
-import prestashop from 'prestashop';
+import prestashop from "prestashop";
-import debounce from '@js/theme/utils/debounce';
+import debounce from "@js/theme/utils/debounce";
 
 prestashop.cart = prestashop.cart || {};
 
@@ -9,358 +9,395 @@ prestashop.cart.active_inputs = null;
 const spinnerSelector = 'input[name="product-quantity-spin"]';
 let hasError = false;
 let isUpdateOperation = false;
-let errorMsg = '';
+let errorMsg = "";
 
 const CheckUpdateQuantityOperations = {
-  switchErrorStat: () => {
+    switchErrorStat: () => {
-    /**
+        /**
-     * if errorMsg is not empty or if notifications are shown, we have error to display
+         * if errorMsg is not empty or if notifications are shown, we have error to display
-     * if hasError is true, quantity was not updated : we don't disable checkout button
+         * if hasError is true, quantity was not updated : we don't disable checkout button
-     */
+         */
-    const $checkoutBtn = $(prestashop.themeSelectors.checkout.btn);
+        const $checkoutBtn = $(prestashop.themeSelectors.checkout.btn);
 
-    if ($(prestashop.themeSelectors.notifications.dangerAlert).length || (errorMsg !== '' && !hasError)) {
+        if (
-      $checkoutBtn.addClass('disabled');
+            $(prestashop.themeSelectors.notifications.dangerAlert).length ||
-    }
+            (errorMsg !== "" && !hasError)
+        ) {
+            $checkoutBtn.addClass("disabled");
+        }
 
-    if (errorMsg !== '') {
+        if (errorMsg !== "") {
-      const strError = `
+            const strError = `
         <article class="alert alert-danger" role="alert" data-alert="danger">
           <ul class="mb-0">
             <li>${errorMsg}</li>
           </ul>
         </article>
       `;
-      $(prestashop.themeSelectors.notifications.container).html(strError);
+            $(prestashop.themeSelectors.notifications.container).html(strError);
-      errorMsg = '';
+            errorMsg = "";
-      isUpdateOperation = false;
+            isUpdateOperation = false;
-      if (hasError) {
+            if (hasError) {
-        // if hasError is true, quantity was not updated : allow checkout
+                // if hasError is true, quantity was not updated : allow checkout
-        $checkoutBtn.removeClass('disabled');
+                $checkoutBtn.removeClass("disabled");
-      }
+            }
-    } else if (!hasError && isUpdateOperation) {
+        } else if (!hasError && isUpdateOperation) {
-      hasError = false;
+            hasError = false;
-      isUpdateOperation = false;
+            isUpdateOperation = false;
-      $(prestashop.themeSelectors.notifications.container).html('');
+            $(prestashop.themeSelectors.notifications.container).html("");
-      $checkoutBtn.removeClass('disabled');
+            $checkoutBtn.removeClass("disabled");
-    }
+        }
-  },
+    },
-  checkUpdateOperation: (resp) => {
+    checkUpdateOperation: (resp) => {
-    /**
+        /**
-     * resp.hasError can be not defined but resp.errors not empty: quantity is updated but order cannot be placed
+         * resp.hasError can be not defined but resp.errors not empty: quantity is updated but order cannot be placed
-     * when resp.hasError=true, quantity is not updated
+         * when resp.hasError=true, quantity is not updated
-     */
+         */
-    const { hasError: hasErrorOccurred, errors: errorData } = resp;
+        const { hasError: hasErrorOccurred, errors: errorData } = resp;
-    hasError = hasErrorOccurred ?? false;
+        hasError = hasErrorOccurred ?? false;
-    const errors = errorData ?? '';
+        const errors = errorData ?? "";
 
-    // 1.7.2.x returns errors as string, 1.7.3.x returns array
+        // 1.7.2.x returns errors as string, 1.7.3.x returns array
-    if (errors instanceof Array) {
+        if (errors instanceof Array) {
-      errorMsg = errors.join(' ');
+            errorMsg = errors.join(" ");
-    } else {
+        } else {
-      errorMsg = errors;
+            errorMsg = errors;
-    }
+        }
 
-    isUpdateOperation = true;
+        isUpdateOperation = true;
-  },
+    },
 };
 
 /**
  * Attach Bootstrap TouchSpin event handlers
  */
 function createSpin() {
-  $.each($(spinnerSelector), (index, spinner) => {
+    $.each($(spinnerSelector), (index, spinner) => {
-    $(spinner).TouchSpin({
+        $(spinner).TouchSpin({
-      verticalupclass: 'material-icons touchspin-up',
+            verticalupclass: "",
-      verticaldownclass: 'material-icons touchspin-down',
+            verticaldownclass: "",
-      buttondown_class: 'btn btn-touchspin js-touchspin js-increase-product-quantity',
+            buttondown_class:
-      buttonup_class: 'btn btn-touchspin js-touchspin js-decrease-product-quantity',
+                "btn btn-primary btn-touchspin js-touchspin js-increase-product-quantity",
-      min: parseInt($(spinner).attr('min'), 10),
+            buttonup_class:
-      max: 1000000,
+                "btn btn-primary btn-touchspin js-touchspin js-decrease-product-quantity",
+            min: parseInt($(spinner).attr("min"), 10),
+            max: 1000000,
+            verticalup:
+                '<img src="/themes/falcon/_dev/img/chevron_up.svg" alt="Up" />',
+            verticaldown:
+                '<img src="/themes/falcon/_dev/img/chevron_down.svg" alt="Down" />',
+        });
     });
-  });
 
-  CheckUpdateQuantityOperations.switchErrorStat();
+    CheckUpdateQuantityOperations.switchErrorStat();
 }
 
 const preventCustomModalOpen = (event) => {
-  if (window.shouldPreventModal) {
+    if (window.shouldPreventModal) {
-    event.preventDefault();
+        event.preventDefault();
 
-    return false;
+        return false;
-  }
+    }
 
-  return true;
+    return true;
 };
 
 $(() => {
-  const productLineInCartSelector = prestashop.themeSelectors.cart.productLineQty;
+    const productLineInCartSelector =
-  const promises = [];
+        prestashop.themeSelectors.cart.productLineQty;
+    const promises = [];
 
-  prestashop.on('updateCart', () => {
+    prestashop.on("updateCart", () => {
-    $(prestashop.themeSelectors.cart.quickview).modal('hide');
+        $(prestashop.themeSelectors.cart.quickview).modal("hide");
-    $('body').addClass('cart-loading');
+        $("body").addClass("cart-loading");
-  });
+    });
 
-  prestashop.on('updatedCart', () => {
+    prestashop.on("updatedCart", () => {
-    window.shouldPreventModal = false;
+        window.shouldPreventModal = false;
 
-    $(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => {
+        $(prestashop.themeSelectors.product.customizationModal).on(
-      preventCustomModalOpen(modalEvent);
+            "show.bs.modal",
+            (modalEvent) => {
+                preventCustomModalOpen(modalEvent);
+            },
+        );
+
+        createSpin();
+        $("body").removeClass("cart-loading");
     });
 
     createSpin();
-    $('body').removeClass('cart-loading');
-  });
 
-  createSpin();
+    const $body = $("body");
 
-  const $body = $('body');
+    function isTouchSpin(namespace) {
-
+        return (
-  function isTouchSpin(namespace) {
+            namespace === "on.startupspin" || namespace === "on.startdownspin"
-    return namespace === 'on.startupspin' || namespace === 'on.startdownspin';
+        );
-  }
-
-  function shouldIncreaseProductQuantity(namespace) {
-    return namespace === 'on.startupspin';
-  }
-
-  function findCartLineProductQuantityInput($target) {
-    const $input = $target.parents(prestashop.themeSelectors.cart.touchspin).find(productLineInCartSelector);
-
-    if ($input.is(':focus')) {
-      return null;
     }
 
-    return $input;
+    function shouldIncreaseProductQuantity(namespace) {
-  }
+        return namespace === "on.startupspin";
-
-  function camelize(subject) {
-    const actionTypeParts = subject.split('-');
-    let i;
-    let part;
-    let camelizedSubject = '';
-
-    for (i = 0; i < actionTypeParts.length; i += 1) {
-      part = actionTypeParts[i];
-
-      if (i !== 0) {
-        part = part.substring(0, 1).toUpperCase() + part.substring(1);
-      }
-
-      camelizedSubject += part;
     }
 
-    return camelizedSubject;
+    function findCartLineProductQuantityInput($target) {
-  }
+        const $input = $target
+            .parents(prestashop.themeSelectors.cart.touchspin)
+            .find(productLineInCartSelector);
 
-  function parseCartAction($target, namespace) {
+        if ($input.is(":focus")) {
-    if (!isTouchSpin(namespace)) {
+            return null;
-      return {
+        }
-        url: $target.attr('href'),
+
-        type: camelize($target.data('link-action')),
+        return $input;
-      };
     }
 
-    const $input = findCartLineProductQuantityInput($target);
+    function camelize(subject) {
+        const actionTypeParts = subject.split("-");
+        let i;
+        let part;
+        let camelizedSubject = "";
 
-    let cartAction = {};
+        for (i = 0; i < actionTypeParts.length; i += 1) {
+            part = actionTypeParts[i];
 
-    if ($input) {
+            if (i !== 0) {
-      if (shouldIncreaseProductQuantity(namespace)) {
+                part = part.substring(0, 1).toUpperCase() + part.substring(1);
-        cartAction = {
+            }
-          url: $input.data('up-url'),
+
-          type: 'increaseProductQuantity',
+            camelizedSubject += part;
-        };
+        }
-      } else {
+
-        cartAction = {
+        return camelizedSubject;
-          url: $input.data('down-url'),
-          type: 'decreaseProductQuantity',
-        };
-      }
     }
 
-    return cartAction;
+    function parseCartAction($target, namespace) {
-  }
+        if (!isTouchSpin(namespace)) {
+            return {
+                url: $target.attr("href"),
+                type: camelize($target.data("link-action")),
+            };
+        }
 
-  const abortPreviousRequests = () => {
+        const $input = findCartLineProductQuantityInput($target);
-    let promise;
+
-    while (promises.length > 0) {
+        let cartAction = {};
-      promise = promises.pop();
+
-      promise.abort();
+        if ($input) {
+            if (shouldIncreaseProductQuantity(namespace)) {
+                cartAction = {
+                    url: $input.data("up-url"),
+                    type: "increaseProductQuantity",
+                };
+            } else {
+                cartAction = {
+                    url: $input.data("down-url"),
+                    type: "decreaseProductQuantity",
+                };
+            }
+        }
+
+        return cartAction;
     }
-  };
 
-  const getTouchSpinInput = ($button) => $($button.parents(prestashop.themeSelectors.cart.touchspin).find('input'));
+    const abortPreviousRequests = () => {
-
+        let promise;
-  $(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => {
+        while (promises.length > 0) {
-    preventCustomModalOpen(modalEvent);
+            promise = promises.pop();
-  });
+            promise.abort();
-
+        }
-  const handleCartAction = (event) => {
-    event.preventDefault();
-    window.shouldPreventModal = true;
-
-    const $target = $(event.currentTarget);
-    const { dataset } = event.currentTarget;
-
-    const cartAction = parseCartAction($target, event.namespace);
-    const requestData = {
-      ajax: '1',
-      action: 'update',
     };
 
-    if (typeof cartAction === 'undefined') {
+    const getTouchSpinInput = ($button) =>
-      return;
+        $(
-    }
+            $button
+                .parents(prestashop.themeSelectors.cart.touchspin)
+                .find("input"),
+        );
 
-    $.ajax({
+    $(prestashop.themeSelectors.product.customizationModal).on(
-      url: cartAction.url,
+        "show.bs.modal",
-      method: 'POST',
+        (modalEvent) => {
-      data: requestData,
+            preventCustomModalOpen(modalEvent);
-      dataType: 'json',
+        },
-      beforeSend: (jqXHR) => {
+    );
-        promises.push(jqXHR);
-      },
-    })
-      .then((resp) => {
-        const $quantityInput = getTouchSpinInput($target);
-        CheckUpdateQuantityOperations.checkUpdateOperation(resp);
-        $quantityInput.val(resp.quantity);
 
-        // Refresh cart preview
+    const handleCartAction = (event) => {
-        prestashop.emit('updateCart', {
+        event.preventDefault();
-          reason: dataset,
+        window.shouldPreventModal = true;
-          resp,
-        });
-      })
-      .fail((resp) => {
-        prestashop.emit('handleError', {
-          eventType: 'updateProductInCart',
-          resp,
-          cartAction: cartAction.type,
-        });
-      });
-  };
 
-  $body.on('click', prestashop.themeSelectors.cart.actions, handleCartAction);
+        const $target = $(event.currentTarget);
+        const { dataset } = event.currentTarget;
 
-  function sendUpdateQuantityInCartRequest(updateQuantityInCartUrl, requestData, $target) {
+        const cartAction = parseCartAction($target, event.namespace);
-    abortPreviousRequests();
+        const requestData = {
-    window.shouldPreventModal = true;
+            ajax: "1",
+            action: "update",
+        };
 
-    return $.ajax({
+        if (typeof cartAction === "undefined") {
-      url: updateQuantityInCartUrl,
+            return;
-      method: 'POST',
+        }
-      data: requestData,
-      dataType: 'json',
-      beforeSend: (jqXHR) => {
-        promises.push(jqXHR);
-      },
-    })
-      .then((resp) => {
-        CheckUpdateQuantityOperations.checkUpdateOperation(resp);
 
-        $target.val(resp.quantity);
+        $.ajax({
-        const dataset = ($target && $target.dataset) ? $target.dataset : resp;
+            url: cartAction.url,
+            method: "POST",
+            data: requestData,
+            dataType: "json",
+            beforeSend: (jqXHR) => {
+                promises.push(jqXHR);
+            },
+        })
+            .then((resp) => {
+                const $quantityInput = getTouchSpinInput($target);
+                CheckUpdateQuantityOperations.checkUpdateOperation(resp);
+                $quantityInput.val(resp.quantity);
 
-        // Refresh cart preview
+                // Refresh cart preview
-        prestashop.emit('updateCart', {
+                prestashop.emit("updateCart", {
-          reason: dataset,
+                    reason: dataset,
-          resp,
+                    resp,
-        });
+                });
-      })
+            })
-      .fail((resp) => {
+            .fail((resp) => {
-        prestashop.emit('handleError', {
+                prestashop.emit("handleError", {
-          eventType: 'updateProductQuantityInCart',
+                    eventType: "updateProductInCart",
-          resp,
+                    resp,
-        });
+                    cartAction: cartAction.type,
-      });
+                });
-  }
+            });
-
-  function getQuantityChangeType($quantity) {
-    return $quantity > 0 ? 'up' : 'down';
-  }
-
-  function getRequestData(quantity) {
-    return {
-      ajax: '1',
-      qty: Math.abs(quantity),
-      action: 'update',
-      op: getQuantityChangeType(quantity),
     };
-  }
 
-  function updateProductQuantityInCart(event) {
+    $body.on("click", prestashop.themeSelectors.cart.actions, handleCartAction);
-    const $target = $(event.currentTarget);
-    const updateQuantityInCartUrl = $target.data('update-url');
-    const baseValue = $target.attr('value');
 
-    // There should be a valid product quantity in cart
+    function sendUpdateQuantityInCartRequest(
-    const targetValue = $target.val();
+        updateQuantityInCartUrl,
+        requestData,
+        $target,
+    ) {
+        abortPreviousRequests();
+        window.shouldPreventModal = true;
 
-    /* eslint-disable */
+        return $.ajax({
-    if (targetValue != parseInt(targetValue, 10) || targetValue < 0 || Number.isNaN(targetValue)) {
+            url: updateQuantityInCartUrl,
-      window.shouldPreventModal = false;
+            method: "POST",
-      $target.val(baseValue);
+            data: requestData,
-      return;
+            dataType: "json",
-    }
+            beforeSend: (jqXHR) => {
-    /* eslint-enable */
+                promises.push(jqXHR);
+            },
+        })
+            .then((resp) => {
+                CheckUpdateQuantityOperations.checkUpdateOperation(resp);
 
-    // There should be a new product quantity in cart
+                $target.val(resp.quantity);
-    const qty = targetValue - baseValue;
+                const dataset =
+                    $target && $target.dataset ? $target.dataset : resp;
 
-    if (qty === 0) {
+                // Refresh cart preview
-      return;
+                prestashop.emit("updateCart", {
+                    reason: dataset,
+                    resp,
+                });
+            })
+            .fail((resp) => {
+                prestashop.emit("handleError", {
+                    eventType: "updateProductQuantityInCart",
+                    resp,
+                });
+            });
     }
 
-    if (targetValue === '0') {
+    function getQuantityChangeType($quantity) {
-      $target.closest('.product-line-actions').find('[data-link-action="delete-from-cart"]').click();
+        return $quantity > 0 ? "up" : "down";
-    } else {
-      $target.attr('value', targetValue);
-      sendUpdateQuantityInCartRequest(updateQuantityInCartUrl, getRequestData(qty), $target);
     }
-  }
 
-  $body.on('touchspin.on.stopspin', spinnerSelector, debounce(updateProductQuantityInCart));
+    function getRequestData(quantity) {
+        return {
+            ajax: "1",
+            qty: Math.abs(quantity),
+            action: "update",
+            op: getQuantityChangeType(quantity),
+        };
+    }
 
-  $body.on(
+    function updateProductQuantityInCart(event) {
-    'focusout keyup',
+        const $target = $(event.currentTarget);
-    productLineInCartSelector,
+        const updateQuantityInCartUrl = $target.data("update-url");
-    (event) => {
+        const baseValue = $target.attr("value");
-      if (event.type === 'keyup') {
+
-        if (event.keyCode === 13) {
+        // There should be a valid product quantity in cart
-          isUpdateOperation = true;
+        const targetValue = $target.val();
-          updateProductQuantityInCart(event);
+
+        /* eslint-disable */
+        if (
+            targetValue != parseInt(targetValue, 10) ||
+            targetValue < 0 ||
+            Number.isNaN(targetValue)
+        ) {
+            window.shouldPreventModal = false;
+            $target.val(baseValue);
+            return;
+        }
+        /* eslint-enable */
+
+        // There should be a new product quantity in cart
+        const qty = targetValue - baseValue;
+
+        if (qty === 0) {
+            return;
+        }
+
+        if (targetValue === "0") {
+            $target
+                .closest(".product-line-actions")
+                .find('[data-link-action="delete-from-cart"]')
+                .click();
+        } else {
+            $target.attr("value", targetValue);
+            sendUpdateQuantityInCartRequest(
+                updateQuantityInCartUrl,
+                getRequestData(qty),
+                $target,
+            );
+        }
+    }
+
+    $body.on(
+        "touchspin.on.stopspin",
+        spinnerSelector,
+        debounce(updateProductQuantityInCart),
+    );
+
+    $body.on("focusout keyup", productLineInCartSelector, (event) => {
+        if (event.type === "keyup") {
+            if (event.keyCode === 13) {
+                isUpdateOperation = true;
+                updateProductQuantityInCart(event);
+            }
+
+            return false;
+        }
+
+        if (!isUpdateOperation) {
+            updateProductQuantityInCart(event);
         }
 
         return false;
-      }
+    });
 
-      if (!isUpdateOperation) {
+    $body.on("click", prestashop.themeSelectors.cart.discountCode, (event) => {
-        updateProductQuantityInCart(event);
+        event.stopPropagation();
-      }
+        event.preventDefault();
 
-      return false;
+        const $code = $(event.currentTarget);
-    },
+        const $discountInput = $("[name=discount_name]");
-  );
+        const $discountForm = $discountInput.closest("form");
 
-  $body.on(
+        $discountInput.val($code.text());
-    'click',
+        // Show promo code field
-    prestashop.themeSelectors.cart.discountCode,
+        $discountForm.trigger("submit");
-    (event) => {
-      event.stopPropagation();
-      event.preventDefault();
 
-      const $code = $(event.currentTarget);
+        return false;
-      const $discountInput = $('[name=discount_name]');
+    });
-      const $discountForm = $discountInput.closest('form');
-
-      $discountInput.val($code.text());
-      // Show promo code field
-      $discountForm.trigger('submit');
-
-      return false;
-    },
-  );
 });

falcon/_dev/js/theme/components/product.js

@@ -1,90 +1,108 @@
-import $ from 'jquery';
+import $ from "jquery";
-import prestashop from 'prestashop';
+import prestashop from "prestashop";
 
 $(() => {
-  const createInputFile = () => {
+    const createInputFile = () => {
-    $('.js-file-input').on('change', (event) => {
+        $(".js-file-input").on("change", (event) => {
-      const target = $(event.currentTarget)[0];
+            const target = $(event.currentTarget)[0];
-      const file = (target) ? target.files[0] : null;
+            const file = target ? target.files[0] : null;
 
-      if (target && file) {
+            if (target && file) {
-        $(target).prev().text(file.name);
+                $(target).prev().text(file.name);
-      }
+            }
-    });
+        });
-  };
+    };
 
-  const createProductSpin = () => {
+    const createProductSpin = () => {
-    const $quantityInput = $('#quantity_wanted');
+        const $quantityInput = $("#quantity_wanted");
 
-    $quantityInput.TouchSpin({
+        $quantityInput.TouchSpin({
-      verticalupclass: 'material-icons touchspin-up',
+            min: parseInt($quantityInput.attr("min"), 10),
-      verticaldownclass: 'material-icons touchspin-down',
+            max: 1000000,
-      buttondown_class: 'btn btn-touchspin js-touchspin',
+            verticalbuttons: true,
-      buttonup_class: 'btn btn-touchspin js-touchspin',
+            verticalupclass: "btn btn-touchspin js-touchspin",
-      min: parseInt($quantityInput.attr('min'), 10),
+            verticaldownclass: "btn btn-touchspin js-touchspin",
-      max: 1000000,
+            verticalup:
-    });
+                '<img src="/themes/falcon/_dev/img/chevron_up.svg" alt="Up" />',
+            verticaldown:
+                '<img src="/themes/falcon/_dev/img/chevron_down.svg" alt="Down" />',
+        });
 
-    $quantityInput.on('focusout', () => {
+        $quantityInput.on("focusout", () => {
-      if ($quantityInput.val() === '' || $quantityInput.val() < $quantityInput.attr('min')) {
+            if (
-        $quantityInput.val($quantityInput.attr('min'));
+                $quantityInput.val() === "" ||
-        $quantityInput.trigger('change');
+                $quantityInput.val() < $quantityInput.attr("min")
-      }
+            ) {
-    });
+                $quantityInput.val($quantityInput.attr("min"));
+                $quantityInput.trigger("change");
+            }
+        });
 
-    $('body').on('change keyup', '#quantity_wanted', (event) => {
+        $("body").on("change keyup", "#quantity_wanted", (event) => {
-      $(event.currentTarget).trigger('touchspin.stopspin');
+            $(event.currentTarget).trigger("touchspin.stopspin");
-      prestashop.emit('updateProduct', {
+            prestashop.emit("updateProduct", {
-        eventType: 'updatedProductQuantity',
+                eventType: "updatedProductQuantity",
-        event,
+                event,
-      });
+            });
-    });
+        });
-  };
+    };
 
-  createProductSpin();
+    createProductSpin();
-  createInputFile();
-  let updateEvenType = false;
-
-  prestashop.on('updateProduct', ({ eventType }) => {
-    updateEvenType = eventType;
-  });
-
-  prestashop.on('updateCart', (event) => {
-    if (
-      prestashop.page.page_name === 'product'
-      && parseInt(event.reason.idProduct, 10) === parseInt($('#add-to-cart-or-refresh').find('[name="id_product"]').val(), 10)) {
-      prestashop.emit('updateProduct', {
-        event,
-        resp: {},
-        reason: {
-          productUrl: prestashop.urls.pages.product || '',
-        },
-      });
-    }
-  });
-
-  prestashop.on('updatedProduct', (event) => {
     createInputFile();
+    let updateEvenType = false;
 
-    if (event && event.product_minimal_quantity) {
+    prestashop.on("updateProduct", ({ eventType }) => {
-      const minimalProductQuantity = parseInt(event.product_minimal_quantity, 10);
+        updateEvenType = eventType;
-      const quantityInputSelector = '#quantity_wanted';
+    });
-      const quantityInput = $(quantityInputSelector);
 
-      // @see http://www.virtuosoft.eu/code/bootstrap-touchspin/ about Bootstrap TouchSpin
+    prestashop.on("updateCart", (event) => {
-      quantityInput.trigger('touchspin.updatesettings', {
+        if (
-        min: minimalProductQuantity,
+            prestashop.page.page_name === "product" &&
-      });
+            parseInt(event.reason.idProduct, 10) ===
-    }
+                parseInt(
+                    $("#add-to-cart-or-refresh")
+                        .find('[name="id_product"]')
+                        .val(),
+                    10
+                )
+        ) {
+            prestashop.emit("updateProduct", {
+                event,
+                resp: {},
+                reason: {
+                    productUrl: prestashop.urls.pages.product || "",
+                },
+            });
+        }
+    });
 
-    if (updateEvenType === 'updatedProductCombination') {
+    prestashop.on("updatedProduct", (event) => {
-      $('.js-product-images').replaceWith(event.product_cover_thumbnails);
+        createInputFile();
-      $('.js-product-images-modal').replaceWith(event.product_images_modal);
-      prestashop.emit('updatedProductCombination', event);
-    }
 
-    updateEvenType = false;
+        if (event && event.product_minimal_quantity) {
+            const minimalProductQuantity = parseInt(
+                event.product_minimal_quantity,
+                10
+            );
+            const quantityInputSelector = "#quantity_wanted";
+            const quantityInput = $(quantityInputSelector);
 
-    prestashop.pageLazyLoad.update();
+            // @see http://www.virtuosoft.eu/code/bootstrap-touchspin/ about Bootstrap TouchSpin
-  });
+            quantityInput.trigger("touchspin.updatesettings", {
+                min: minimalProductQuantity,
+            });
+        }
+
+        if (updateEvenType === "updatedProductCombination") {
+            $(".js-product-images").replaceWith(event.product_cover_thumbnails);
+            $(".js-product-images-modal").replaceWith(
+                event.product_images_modal
+            );
+            prestashop.emit("updatedProductCombination", event);
+        }
+
+        updateEvenType = false;
+
+        prestashop.pageLazyLoad.update();
+    });
 });

falcon/_dev/js/theme/index.js

@@ -66,6 +66,22 @@ function initStickyHeader() {
     }
 }
 
+// Sync product thumbs height with main images height
+function syncThumbsHeight() {
+    const mainImages = document.querySelector(".product-main-images");
+    const thumbs = document.querySelector(".product-thumbs.swiper");
+    // Only apply if Swiper is vertical
+    if (mainImages && thumbs && thumbs.classList.contains("swiper-vertical")) {
+        thumbs.style.maxHeight = mainImages.offsetHeight + "px";
+        thumbs.style.height = mainImages.offsetHeight + "px";
+    } else {
+        return;
+    }
+}
+
+window.addEventListener("load", syncThumbsHeight);
+window.addEventListener("resize", syncThumbsHeight);
+
 $(() => {
     initStickyHeader();
     accLinksTriggerActive();

falcon/modules/is_favoriteproducts/views/templates/hook/button-product.tpl

@@ -0,0 +1,29 @@
+
+<div class="col-auto">
+    <a
+        class="product-page__action-btn btn btn-light shadow rounded-circle favorite-btn p-2"
+        href="#"
+        data-action="toggleFavorite"
+        data-active="false"
+        {if isset($product.id) && isset($product.id_product_attribute)}
+            data-key="{$product.id}_{$product.id_product_attribute}"
+        {/if}
+    >
+        <div class="favorite-btn__content favorite-btn__content--added">
+            {capture name="svg_output"}{svg_icon file='heart.svg' }{/capture}
+            {if $smarty.capture.svg_output}
+                {$smarty.capture.svg_output nofilter}
+            {else}
+                <span class="material-icons product-page__action-btn-icon d-block">favorite</span>
+            {/if}
+        </div>
+        <div class="favorite-btn__content favorite-btn__content--add">
+             {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
+            {if $smarty.capture.svg_output}
+                {$smarty.capture.svg_output nofilter}
+            {else}
+                <span class="material-icons product-page__action-btn-icon d-block">favorite_border</span>
+            {/if}
+        </div>
+    </a>
+</div>

falcon/modules/is_favoriteproducts/views/templates/hook/button.tpl

@@ -0,0 +1,28 @@
+
+<a
+    class="product-miniature__functional-btn product-miniature__functional-btn--top btn btn-light shadow rounded-circle favorite-btn"
+    href="#"
+    data-action="toggleFavorite"
+    data-active="false"
+    {if isset($product.id) && isset($product.id_product_attribute)}
+        data-key="{$product.id}_{$product.id_product_attribute}"
+    {/if}
+>
+    <div class="favorite-btn__content favorite-btn__content--added">
+        {capture name="svg_output"}{svg_icon file='heart.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
+                <span class="material-icons product-miniature__functional-btn-icon d-block">favorite</span>
+        {/if}
+    </div>
+    <div class="favorite-btn__content favorite-btn__content--add">
+        {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <span class="material-icons product-miniature__functional-btn-icon d-block">favorite_border</span>
+        {/if}
+        
+    </div>
+</a>

falcon/modules/is_favoriteproducts/views/templates/hook/top.tpl

@@ -0,0 +1,19 @@
+<div class="col flex-grow-0 header-top__block header-top__block--favorite js-favorite-top-content">
+    <a
+        class="header-top__link"
+        rel="nofollow"
+        href="{$favoritePageUrl}"
+    >
+        <div class="header-top__icon-container">
+            {capture name="svg_output"}{svg_icon file='heart.svg'}{/capture}
+            {if $smarty.capture.svg_output}
+                {$smarty.capture.svg_output nofilter}
+            {else}
+                <span class="header-top__icon material-icons">favorite</span>
+            {/if}
+            <span class="header-top__badge">
+                {$favoriteProductsCount}
+            </span>
+        </div>
+    </a>
+</div>

falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl

@@ -0,0 +1,22 @@
+<div class="header-top__block header-top__block--search col-12 col-md mt-2 mt-lg-0">
+	<div id="search_from">
+		<form class="search-form js-search-form" data-search-controller-url="{$ajax_search_url}" method="get" action="{$search_controller_url}">
+			<div class="search-form__form-group">
+				<input type="hidden" name="controller" value="search">
+				<input class="js-search-input search-form__input form-control"
+					   placeholder="{l s='Enter what you are looking for' d='Modules.Issearchbar.Form'}"
+					   type="text"
+					   name="s"
+					   value="{$search_string}">
+				<button type="submit" class="search-form__btn btn">
+                    {capture name="svg_output"}{svg_icon file='search.svg'}{/capture}
+                    {if $smarty.capture.svg_output}
+                        {$smarty.capture.svg_output nofilter}
+                    {else}
+                        <span class="header-top__icon material-icons">search</span>
+                    {/if}
+				</button>
+			</div>
+		</form>
+	</div>
+</div>

falcon/modules/is_shoppingcart/views/templates/hook/is_shoppingcart.tpl

@@ -0,0 +1,89 @@
+{**
+ * 2007-2020 PrestaShop and Contributors
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.txt.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2020 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *}
+ 
+<div class="header-top__block header-top__block--cart col flex-grow-0">
+  <div class="js-blockcart blockcart cart-preview dropdown" data-refresh-url="{$refresh_url}">
+    <a href="#" role="button" id="cartDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+      class="header-top__link d-lg-block d-none">
+      <div class="header-top__icon-container">
+       {capture name="svg_output"}{svg_icon file='bag.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <span class="header-top__icon material-icons">shopping_basket</span>
+        {/if}
+        <span class="header-top__badge {if $cart.products_count > 9}header-top__badge--smaller{/if}">
+          {$cart.products_count}
+        </span>
+      </div>
+    </a>
+    <a href="{$cart_url}" class="d-flex d-lg-none header-top__link">
+      <div class="header-top__icon-container">
+       {capture name="svg_output"}{svg_icon file='bag.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <span class="header-top__icon material-icons">shopping_basket</span>
+        {/if}
+        <span class="header-top__badge {if $cart.products_count > 9}header-top__badge--smaller{/if}">
+          {$cart.products_count}
+        </span>
+      </div>
+    </a>
+    <div class="dropdown-menu blockcart__dropdown cart-dropdown dropdown-menu-right" aria-labelledby="cartDropdown">
+      <div class="cart-dropdown__content keep-open js-cart__card-body cart__card-body">
+        <div class="cart-loader">
+          <div class="spinner-border text-primary" role="status"><span
+              class="sr-only">{l s='Loading...' d='Shop.Theme.Global'}</span></div>
+        </div>
+        <div class="cart-dropdown__title d-flex align-items-center mb-3">
+          <p class="h5 mb-0 mr-2">
+            {l s='Your cart' d='Modules.Isshoppingcart.Isshoppingcart'}
+          </p>
+          <a data-toggle="dropdown" href="#" class="cart-dropdown__close dropdown-close ml-auto cursor-pointer text-decoration-none">
+            <i class="material-icons d-block">close</i>
+          </a>
+        </div>
+        {if $cart.products_count > 0}
+          <div class="cart-dropdown__products pt-3 mb-3">
+            {foreach from=$cart.products item=product}
+              {include 'module:is_shoppingcart/views/templates/front/is_shoppingcart-product-line.tpl' product=$product}
+            {/foreach}
+          </div>
+
+          <div class="cart-summary-line cart-total">
+            <span class="label">{$cart.totals.total.label}</span>
+            <span class="value">{$cart.totals.total.value}</span>
+          </div>
+
+          <div class="mt-3">
+            <a href="{$cart_url}" class="btn btn-sm btn-primary btn-block dropdown-close">
+              {l s='Proceed to checkout' d='Shop.Theme.Actions'}
+            </a>
+          </div>
+
+        {else}
+          <div class="alert alert-warning">
+            {l s='Unfortunately your basket is empty' d='Modules.Isshoppingcart.Isshoppingcart'}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>

falcon/modules/ps_contactinfo/ps_contactinfo.tpl

@@ -28,7 +28,13 @@
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Store information' d='Shop.Theme.Global'}</span>
     <a href="#footer_contact_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-      <i class="material-icons d-block"></i>
+        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+        <span style="margin-bottom: 3px;">
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <i class="material-icons d-block"></i>
+        {/if}
     </a>
   </div>
 

falcon/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl

@@ -28,7 +28,13 @@
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
     <a href="#footer_account_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-      <i class="material-icons d-block"></i>
+        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+        <span style="margin-bottom: 3px;">
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <i class="material-icons d-block"></i>
+        {/if}
     </a>
   </div>
 

falcon/modules/ps_customersignin/ps_customersignin.tpl

@@ -33,8 +33,24 @@
       title="{l s='Log in to your customer account' d='Shop.Theme.Customeraccount'}"
     {/if}
   >
+    <span class="d-none d-xl-block text-secondary">
+        {if $logged}
+            {if $customer.firstname}
+                {$customer.firstname|escape:'html':'UTF-8'}
+            {else}
+                {l s='Log out' d='Shop.Theme.Actions'}
+            {/if}
+        {else}
+            {l s='Log in' d='Shop.Theme.Actions'}
+        {/if}
+    </span>
     <div class="header-top__icon-container">
-      <span class="header-top__icon material-icons">person</span>
+        {capture name="svg_output"}{svg_icon file='person.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <span class="header-top__icon material-icons">person</span>
+        {/if}
     </div>
   </a>
 </div>

falcon/modules/ps_linklist/views/templates/hook/linkblock-column.tpl

@@ -4,7 +4,13 @@
     <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
       <span class="h4 mb-0">{$linkBlock.title}</span>
       <a href="#footer_sub_menu_{$_expand_id}" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-        <i class="material-icons d-block"></i>
+        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+        {if $smarty.capture.svg_output}
+        <span style="margin-bottom: 3px;">
+            {$smarty.capture.svg_output nofilter}
+        {else}
+            <i class="material-icons d-block"></i>
+        {/if}
       </a>
     </div>
     <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">

falcon/modules/ps_linklist/views/templates/hook/linkblock.tpl

@@ -23,13 +23,38 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  *}
 
+{* Simple display without titles for the header and footer *}
+{if $hookName == "displayFooterPrivacy"}
+    {foreach $linkBlocks as $linkBlock}
+        {foreach $linkBlock.links as $link}
+        <p class="links-list__elem mb-0">
+            <a
+                id="{$link.id}-{$linkBlock.id}"
+                class="{$link.class} links-list__link"
+                href="{$link.url}"
+                title="{$link.description}"
+                {if !empty($link.target)} target="{$link.target}" {/if}
+            >
+            {$link.title}
+            </a>
+        </p>
+        {/foreach}
+  {/foreach}
+{else}   
+{* Regular display *}
   {foreach $linkBlocks as $linkBlock}
-    <div class="col-md-3 col-12 mb-lg-4">
+    <div class="col-12 col-md-3">
       {assign var=_expand_id value=10|mt_rand:100000}
       <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
         <span class="h4 mb-0">{$linkBlock.title}</span>
         <a href="#footer_sub_menu_{$_expand_id}" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-          <i class="material-icons d-block"></i>
+            {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+            {if $smarty.capture.svg_output}
+            <span style="margin-bottom: 3px;">
+                {$smarty.capture.svg_output nofilter}
+            {else}
+                <i class="material-icons d-block"></i>
+            {/if}
         </a>
       </div>
       <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">
@@ -51,3 +76,4 @@
       </div>
     </div>
   {/foreach}
+{/if}

falcon/modules/ps_mainmenu/ps_mainmenu.tpl

@@ -20,6 +20,16 @@
               {if $node.open_in_new_window} target="_blank" {/if}
             >
               <span class="align-self-center">{$node.label}</span>
+              {if $node.children|count}
+                {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+                {if $smarty.capture.svg_output}
+                <span class="d-none d-md-block pl-1" style="margin-bottom: 3px;">
+                    {$smarty.capture.svg_output nofilter}
+                </span>
+                {else}
+                    <i class="material-icons d-block"></i>
+                {/if}
+              {/if}
             </a>
             {if $node.children|count}
             {* Cannot use page identifier as we can have the same page several times *}
@@ -51,4 +61,4 @@
   <div class="main-menu" id="_desktop_top_menu">
     {menu nodes=$menu.children}
   </div>
-</div>
+</div>

falcon/templates/_partials/footer-copyright.tpl

@@ -0,0 +1,22 @@
+<div class="footer-bottom py-1 py-lg-3">
+    <div class="container">
+        <div class="row d-flex flex-column flex-lg-row justify-content-between align-items-center">
+            <div class="copyright">
+                <span class="text-white fw-400">
+                    {l
+                    s='Copyright © %year% %shop%'
+                    sprintf=['%year%' => $smarty.now|date_format:"%Y", '%shop%' => $shop.name|capitalize]
+                    d='Shop.Theme.Footer'
+                    }
+                </span>
+            </div>
+            <a href="https://dewebsmid.nl/prestashop/" class="text-white fw-400" rel="noopener" target="_blank">
+                {l s='PrestaShop' d='Shop.Theme.Footer'}
+            </a>
+            <div class="privacy d-flex gap-20">
+                {* Need to create this hook in the db. Use ps_linklist with it- see modules/ps_linklist/views/templates/hook/linkblock.tpl *}
+                {hook h='displayFooterPrivacy'}
+            </div>
+        </div>
+    </div>
+</div>

falcon/templates/_partials/footer.tpl

@@ -29,7 +29,7 @@
     {/block}
   </div>
 </div>
-<div class="footer-container">
+<div class="footer-container pb-0 mt-0">
   <div class="container">
     <div class="row">
       {block name='hook_footer'}
@@ -42,4 +42,5 @@
       {/block}
     </div>
   </div>
+    {include file='_partials/footer-copyright.tpl'}
 </div>

falcon/templates/_partials/head.tpl

@@ -74,9 +74,13 @@
 {/block}
 
 {block name='stylesheets'}
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
   {include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
 {/block}
 
+
 {block name='javascript_head'}
   {include file="_partials/javascript.tpl" javascript=$javascript.head vars=$js_custom_vars}
 {/block}

falcon/templates/_partials/header.tpl

@@ -29,24 +29,14 @@
 {/block}
 
 {block name='header_nav'}
-    <nav class="header-nav border-bottom bg-light py-1 d-none d-md-block">
+
-        <div class="container">
-            <div class="row align-items-center">
-                {hook h='displayNav1'}
-                {hook h='displayNav2'}
-            </div>
-        </div>
-    </nav>
 {/block}
 
 {block name='header_top'}
     <div class="js-header-top-wrapper">
-
         <div class="header-top js-header-top">
-            <div class="header-top__content pt-md-3 pb-md-0 py-2">
+            <div class="header-top__content pb-md-0 py-2">
-
                 <div class="container">
-
                     <div class="row header-top__row">
 
                         <div class="col flex-grow-0 header-top__block header-top__block--menu-toggle d-block d-md-none">
@@ -58,12 +48,17 @@
                                     data-target="#mobile_top_menu_wrapper"
                             >
                                 <div class="header-top__icon-container">
-                                    <span class="header-top__icon material-icons">menu</span>
+                                    {capture name="svg_output"}{svg_icon file='hamburger-menu.svg'}{/capture}
+                                    {if $smarty.capture.svg_output}
+                                        {$smarty.capture.svg_output nofilter}
+                                    {else}
+                                        <span class="header-top__icon material-icons">menu</span>
+                                    {/if}
                                 </div>
                             </a>
                         </div>
 
-                        <div class="col-md-4 col header-top__block header-top__block--logo">
+                        <div class="col col-md-auto col header-top__block header-top__block--logo">
                             <a href="{$urls.pages.index}">
                                 {images_block webpEnabled=$webpEnabled}
                                     <img
@@ -79,13 +74,15 @@
                                 {/images_block}
                             </a>
                         </div>
-
                         {hook h='displayTop'}
                     </div>
-
+                    <div class="row">
+                       <div class="col">
+                            {hook h='displayNavFullWidth'}  
+                       </div>
+                    </div>                       
                 </div>
             </div>
         </div>
     </div>
-    {hook h='displayNavFullWidth'}
+{/block}
-{/block}

falcon/templates/_partials/pagination.tpl

@@ -26,38 +26,43 @@
 
 {block name='pagination_page_list'}
   {if $pagination.should_be_displayed}
-    <nav>
+    <div class="d-flex justify-content-between align-items-center">
-      <ul class="pagination justify-content-center mt-4 mb-2">
+        <div class="results__block">
-        {foreach from=$pagination.pages item="page"}
+            {l s='%curr_numer% van %total_items% resultaten' sprintf=['%curr_numer%' => $pagination.items_shown_to,'%total_items%' => $pagination.total_items] d='Shop.Theme.Actions'}
-          <li  class="page-item{if $page.current} active{/if} {if $page.type === 'spacer'}disabled{/if}">
+        </div>
-            {if $page.type === 'spacer'}
+        <nav>
-              <span
+            <ul class="pagination justify-content-center m-0">
-                rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
+                {foreach from=$pagination.pages item="page"}
-                href="#"
+                <li  class="page-item{if $page.current} active{/if} {if $page.type === 'spacer'}disabled{/if}">
-                class="page-link"
+                    {if $page.type === 'spacer'}
-              >
+                    <span
-                &hellip;
+                        rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
-              </span>
+                        href="#"
-            {else}
+                        class="page-link"
-              <a
+                    >
-                rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
+                        &hellip;
-                href="{$page.url}"
+                    </span>
-                class="page-link {['disabled' => !$page.clickable, 'js-search-link' => true]|classnames}"
+                    {else}
-              >
+                    <a
-                {if $page.type === 'previous'}
+                        rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
-                  <span class="material-icons font-reset align-middle">keyboard_arrow_left</span>
+                        href="{$page.url}"
-                  <span class="sr-only">{l s='Previous' d='Shop.Theme.Actions'}</span>
+                        class="page-link {['disabled' => !$page.clickable, 'js-search-link' => true]|classnames}"
-                {elseif $page.type === 'next'}
+                    >
-                  <span class="material-icons font-reset align-middle">keyboard_arrow_right</span>
+                        {if $page.type === 'previous'}
-                  <span class="sr-only">{l s='Next' d='Shop.Theme.Actions'}</span>
+                        <span class="material-icons font-reset align-middle">keyboard_arrow_left</span>
-                {else}
+                        <span class="sr-only">{l s='Previous' d='Shop.Theme.Actions'}</span>
-                  {$page.page}
+                        {elseif $page.type === 'next'}
-                {/if}
+                        <span class="material-icons font-reset align-middle">keyboard_arrow_right</span>
-              </a>
+                        <span class="sr-only">{l s='Next' d='Shop.Theme.Actions'}</span>
-            {/if}
+                        {else}
-          </li>
+                        {$page.page}
-        {/foreach}
+                        {/if}
-      </ul>
+                    </a>
-    </nav>
+                    {/if}
+                </li>
+                {/foreach}
+            </ul>
+        </nav>
+    </div>
   {/if}
 {/block}

falcon/templates/catalog/_partials/miniatures/brand.tpl

@@ -23,24 +23,19 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  *}
 {block name='brand_miniature_item'}
-  <li class="col-lg-3 col-sm-4 col-6 mb-3">
+  <li class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-3">
     <div class="card h-100">
-      {$sizes = Image::getSize('home_default')}
+      {$brand_url = $brand.image.bySize.home_default.url}
       <img
         src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='{$sizes.width}' height='{$sizes.height}' viewBox='0 0 1 1'%3E%3C/svg%3E"
-        data-src="{$brand.image|replace:'small_default':'home_default'}"
+        data-src="{$brand_url}"
         alt="{$brand.name}"
         class="card-img-top lazyload"
         width="{$sizes.width}"
         height="{$sizes.height}"
         >
-      <div class="card-body">
-        <p class="h6 mb-0">
-          <a class="text-reset stretched-link" href="{$brand.url}">{$brand.name}</a>
-        </p>
-      </div>
       <div class="card-footer text-center">
-        <span class="btn btn-link p-0">{$brand.nb_products}</span>
+          <a class="text-reset stretched-link" href="{$brand.url}">{$brand.name}</a>
       </div>
     </div>
   </li>

falcon/templates/catalog/_partials/miniatures/product.tpl

@@ -26,7 +26,7 @@
   {$listingType = $type|default:'listing'}
   <div
     {if $listingType === 'listing'}
-      class="products-list__block products-list__block--grid"
+      class="products-list__block col col-sm-6 col-lg-4 col-xl-3"
     {elseif $listingType === 'slider'}
       class="swiper-slide product-slider__item col-6 col-md-4 col-lg-3"
     {/if}

falcon/templates/catalog/_partials/product-add-to-cart.tpl

@@ -26,8 +26,8 @@
   {if !$configuration.is_catalog}
 
     {block name='product_quantity'}
-      <div class="product-quantity row mb-1 mx-n1 mt-n2 align-items-center">
+      <div class="product-quantity row mb-1 align-items-center">
-        <div class="qty col-12 col-sm-auto mx-auto mt-2 px-1">
+        <div class="qty col-auto px-1">
           <input
             type="number"
             name="qty"
@@ -46,7 +46,7 @@
           >
         </div>
 
-        <div class="add col mt-2 px-1">
+        <div class="add col">
           <button
             class="btn btn-primary add-to-cart btn-block"
             data-button-action="add-to-cart"

falcon/templates/catalog/product.tpl

@@ -49,6 +49,9 @@
 
     <div class="row product-container js-product-container">
       <div class="col-md-5 mb-4">
+        {block name='page_header'}
+            <p class="h1 d-block d-md-none">{block name='page_title'}{$product.name}{/block}</p>
+        {/block}
         {block name='page_content_container'}
             {block name='page_content'}
               <div class="position-relative">
@@ -64,7 +67,8 @@
         <div class="col-md-7 mb-4">
           {block name='page_header_container'}
             {block name='page_header'}
-              <h1 class="h1">{block name='page_title'}{$product.name}{/block}</h1>
+                <h1 class="h1 d-none d-md-block">{block name='page_title'}{$product.name}{/block}</h1>
+                <p class="h5 d-block d-md-none">{block name='page_title'}{$product.name}{/block}</p>
             {/block}
           {/block}
           {block name='product_prices'}

falcon/templates/checkout/_partials/cart-detailed-product-line.tpl

@@ -130,6 +130,7 @@
             value="{$product.quantity}"
             name="product-quantity-spin"
             min="{$product.minimal_quantity}"
+            data-verticalbuttons="true"
             aria-label="{l s='%productName% product quantity field' sprintf=['%productName%' => $product.name] d='Shop.Theme.Checkout'}"
             />
         </div>

falcon/templates/checkout/_partials/cart-summary-totals.tpl

@@ -38,6 +38,11 @@
       <span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.display_taxes_label && $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
       <span class="value">{$cart.totals.total.value}</span>
     </div>
+     {if !$cart.has_delivery_address}
+      <p class="no_delivery_address_yet_message">
+        {l s='Shipping costs will be calculated in the next step, before you checkout. Shipping costs depend on the country the order is shipped to. For the Netherlands, orders with a value of € 125.00 will be shipped free of charge. You can view the shippingcosts <a href="https://www.nijssenbulbs.com/content/16-verzendkosten"><u>here</u></a>' d='Shop.Checkout.Total'}
+      </p>
+    {/if}
   {/if}
 {/block}
 

falcon/templates/checkout/_partials/steps/addresses.tpl

@@ -72,7 +72,7 @@
         {/if}
 
         <div class="add-address mt-2 mb-3">
-          <a class="btn btn-outline-primary btn-sm" href="{$new_address_delivery_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
+          <a class="btn btn-primary btn-sm" href="{$new_address_delivery_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
         </div>
 
         {if $use_same_address && !$cart.is_virtual}
@@ -116,7 +116,7 @@
           {/if}
 
           <div class="add-address mt-2 mb-3">
-            <a class="btn btn-outline-primary btn-sm" href="{$new_address_invoice_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
+            <a class="btn btn-primary btn-sm" href="{$new_address_invoice_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
           </div>
         {/if}
 

falcon/templates/checkout/cart.tpl

@@ -44,7 +44,7 @@
 
         {block name='continue_shopping'}
           <div class="my-3">
-            <a class="btn btn-outline-primary" href="{$urls.pages.index}">
+            <a class="btn btn-primary" href="{$urls.pages.index}">
               <span class="material-icons btn-icon mr-1">keyboard_arrow_left</span>
               {l s='Continue shopping' d='Shop.Theme.Actions'}
             </a>

falcon/templates/components/modal.tpl

@@ -12,9 +12,9 @@
               {block name='modal_title' hide}
                 <h5 class="modal-title">{$smarty.block.child}</h5>
               {/block}
-              {block name='modal_close'}
+               {block name='modal_close'}
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                  <span aria-hidden="true">&times;</span>
+                  {svg_icon file='x.svg' width="24" height="24"}
                 </button>
               {/block}
             </div>

falcon/templates/customer/customer-links.tpl

@@ -73,7 +73,7 @@
   </div>
 
   <div class="text-center customer-links__footer">
-    <a href="{$link->getPageLink('index', true, null, 'mylogout')}" class="customer-links__logout">
+    <a href="{$link->getPageLink('index', true, null, 'mylogout')}" class="customer-links__logout btn btn-secondary mt-2">
       {l s='Sign out' d='Shop.Theme.Actions'}
     </a>
   </div>

falcon/templates/customer/history.tpl

@@ -29,7 +29,11 @@
 {/block}
 
 {block name='page_content'}
-  <h6>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
+  <p>
+    <strong>
+       {l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}
+    </strong>
+  </p>
 
   {if $orders}
     <table class="table table-striped table-bordered hidden-sm-down">
@@ -40,7 +44,7 @@
           <th>{l s='Total price' d='Shop.Theme.Checkout'}</th>
           <th class="hidden-md-down">{l s='Payment' d='Shop.Theme.Checkout'}</th>
           <th class="hidden-md-down">{l s='Status' d='Shop.Theme.Checkout'}</th>
-          <th>&nbsp;</th>
+          <th>{l s='Actions' d='Shop.Theme.Checkout'}</th>
         </tr>
       </thead>
       <tbody>
@@ -66,16 +70,14 @@
                 {$order.history.current.ostate_name}
               </span>
             </td>
-            <td class="text-sm-center order-actions align-middle">
+            <td class="order-actions align-middle d-flex">
               <a class="view-order-details-link btn btn-sm btn-primary" href="{$order.details.details_url}" data-link-action="view-order-details">
                 {l s='Details' d='Shop.Theme.Customeraccount'}
               </a>
               {if $order.details.reorder_url}
-                <div class="col-sm-6 mt-2">
+                  <a class="reorder-link btn btn-sm btn-secondary" href="{$order.details.reorder_url}" data-link-action="view-order-details">
-                  <a class="reorder-link btn btn-sm btn-primary" href="{$order.details.reorder_url}" data-link-action="view-order-details">
                     {l s='Reorder' d='Shop.Theme.Actions'}
                   </a>
-                </div>
               {/if}
             </td>
           </tr>

falcon/templates/customer/order-detail.tpl

@@ -66,7 +66,7 @@
 
       {if $order.details.reorder_url}
         <div class="mt-2 text-right">
-          <a href="{$order.details.reorder_url}" class="btn btn-outline-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
+          <a href="{$order.details.reorder_url}" class="btn btn-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
         </div>
       {/if}
 

falcon/templates/index.tpl

@@ -24,14 +24,8 @@
  *}
 {extends file='page.tpl'}
 
-    {block name='page_content_container'}
+{block name='page_content_container'}
-      <section id="content" class="page-home">
+    <section id="content" class="page-home">
-        {block name='page_content_top'}{/block}
+        {* {include file='pages/index/hero.tpl'} *}
-
+    </section>
-        {block name='page_content'}
+{/block}
-          {block name='hook_home'}
-            {$HOOK_HOME nofilter}
-          {/block}
-        {/block}
-      </section>
-    {/block}

falcon/templates/layouts/layout-both-columns.tpl

@@ -42,7 +42,7 @@
         {include file='catalog/_partials/product-activation.tpl'}
       {/block}
 
-      <header id="header" class="l-header">
+      <header id="header" class="l-header mb-0">
         {block name='header'}
           {include file='_partials/header.tpl'}
         {/block}
@@ -55,12 +55,12 @@
         {/block}
 
         {hook h="displayWrapperTop"}
-        <div class="container">
+        <div class="{if $page.page_name == 'index' } container-fluid p-0 overflow-hidden {else}container{/if}">
           {block name='breadcrumb'}
             {include file='_partials/breadcrumb.tpl'}
           {/block}
 
-          <div class="row">
+           <div {if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}class="row"{/if}>
             {block name="left_column"}
               <div id="left-column" class="col-12 col-md-4 col-lg-3">
                 {if $page.page_name == 'product'}
@@ -95,7 +95,7 @@
         {hook h="displayWrapperBottom"}
       </section>
 
-      <footer id="footer" class="l-footer js-footer">
+      <footer id="footer" class="l-footer js-footer mt-0">
         {block name="footer"}
           {include file="_partials/footer.tpl"}
         {/block}

falcon/templates/layouts/layout-full-width.tpl

@@ -28,7 +28,7 @@
 {block name='right_column'}{/block}
 
 {block name='content_wrapper'}
-  <div id="content-wrapper" class="col-12 js-content-wrapper">
+   <div id="content-wrapper" class="{if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}col-12 {/if}js-content-wrapper">
     {hook h="displayContentWrapperTop"}
     {block name='content'}
       <p>Hello world! This is HTML5 Boilerplate.</p>

falcon/templates/pages/index/hero.tpl

@@ -0,0 +1,10 @@
+{* hero section on home page *}
+<section id="home_hero" class="section-spacer-both">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-8 col-xl-6">
+              
+            </div>
+        </div>
+    </div>
+</section>