feat(svg_icon): Add chevron_down to footer & menu

-Adds icons to use with the svg_icon smarty helper in the is_themecore module. See is_themecore-PS9 repo.

- Uses chevron svg icons by default on bootstrap touchspin AND on main menu if it has children.

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

@@ -1,12 +1,5 @@
-$border-width: 1px;
+$border-width:                1px;
-$border-color: $gray-300;
+$border-color:                $gray-300;
-$border-radius: 0.4rem;
+$border-radius:               .4rem;
-$border-radius-lg: 0.4rem;
+$border-radius-lg:            .4rem;
-$border-radius-sm: 0.4rem;
+$border-radius-sm:            .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,10 +1,8 @@
-$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,21 +1,3 @@
-// Made this more like the breakpoints used in Bootstrap 5
+$grid-columns:                12;
-$grid-breakpoints: (
+$grid-gutter-width:           rem-calc(20px);
-    xs: 0,
+$grid-row-columns:            6;
-    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,41 +1,39 @@
-$font-family-sans-serif: "Plus Jakarta Sans", sans-serif;
+$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-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(14px);
+$font-size-base:              rem-calc(16px);
-$font-size-lg: $font-size-base * 1.125;
+$font-size-lg:                $font-size-base * 1.125;
-$font-size-sm: $font-size-base * 0.875;
+$font-size-sm:                $font-size-base * .875;
-$font-size-xs: $font-size-base * 0.6875;
+$font-size-xs:                $font-size-base * .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

@@ -0,0 +1,19 @@
+// 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 "theme/custom/custom";
+@import "custom";

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

@@ -1,80 +1,83 @@
 @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) {
-        margin: 0;
+      white-space: normal;
     }
 
-    .link-item {
+    @include hover-focus() {
-        display: flex;
+      color: $primary;
-        align-items: center;
+      text-decoration: none;
     }
 
-    &__list {
+    i {
-        @include media-breakpoint-down(md) {
+      margin-right: map.get($spacers, 1);
-            display: flex;
+      color: $primary;
-            flex-wrap: nowrap;
+      @include font-size(26px);
-
+      @include media-breakpoint-up(md) {
-            margin: rem-calc(20px) 0 0;
+        margin-right: map.get($spacers, 2);
-            overflow-x: scroll;
+      }
-            overflow-y: hidden;
-            white-space: nowrap;
-            -webkit-overflow-scrolling: touch;
-            -ms-overflow-style: -ms-autohiding-scrollbar;
-
-            &::-webkit-scrollbar {
-                display: none;
-            }
-        }
     }
 
-    a {
+    &.active {
+      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);
 
-        @include media-breakpoint-up(lg) {
+      i {
-            white-space: normal;
+        color: inherit;
-        }
+      }
-
-        @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,32 +1,22 @@
-/* 
+/* 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/base";
+//@import "abstracts/mixins";
-@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

@@ -1,41 +0,0 @@
-@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

@@ -1,73 +0,0 @@
-// 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

@@ -1,43 +0,0 @@
-// 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

@@ -1,57 +0,0 @@
-// 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

@@ -1,10 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-.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

@@ -1,10 +0,0 @@
-#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

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

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,395 +9,358 @@ 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 (
+    if ($(prestashop.themeSelectors.notifications.dangerAlert).length || (errorMsg !== '' && !hasError)) {
-            $(prestashop.themeSelectors.notifications.dangerAlert).length ||
+      $checkoutBtn.addClass('disabled');
-            (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: "",
+      verticalupclass: 'material-icons touchspin-up',
-            verticaldownclass: "",
+      verticaldownclass: 'material-icons touchspin-down',
-            buttondown_class:
+      buttondown_class: 'btn btn-touchspin js-touchspin js-increase-product-quantity',
-                "btn btn-primary btn-touchspin js-touchspin js-increase-product-quantity",
+      buttonup_class: 'btn btn-touchspin js-touchspin js-decrease-product-quantity',
-            buttonup_class:
+      min: parseInt($(spinner).attr('min'), 10),
-                "btn btn-primary btn-touchspin js-touchspin js-decrease-product-quantity",
+      max: 1000000,
-            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 =
+  const productLineInCartSelector = prestashop.themeSelectors.cart.productLineQty;
-        prestashop.themeSelectors.cart.productLineQty;
+  const promises = [];
-    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(
+    $(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => {
-            "show.bs.modal",
+      preventCustomModalOpen(modalEvent);
-            (modalEvent) => {
-                preventCustomModalOpen(modalEvent);
-            },
-        );
-
-        createSpin();
-        $("body").removeClass("cart-loading");
     });
 
     createSpin();
+    $('body').removeClass('cart-loading');
+  });
 
-    const $body = $("body");
+  createSpin();
 
-    function isTouchSpin(namespace) {
+  const $body = $('body');
-        return (
+
-            namespace === "on.startupspin" || namespace === "on.startdownspin"
+  function isTouchSpin(namespace) {
-        );
+    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;
     }
 
-    function shouldIncreaseProductQuantity(namespace) {
+    return $input;
-        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;
     }
 
-    function findCartLineProductQuantityInput($target) {
+    return camelizedSubject;
-        const $input = $target
+  }
-            .parents(prestashop.themeSelectors.cart.touchspin)
-            .find(productLineInCartSelector);
 
-        if ($input.is(":focus")) {
+  function parseCartAction($target, namespace) {
-            return null;
+    if (!isTouchSpin(namespace)) {
-        }
+      return {
-
+        url: $target.attr('href'),
-        return $input;
+        type: camelize($target.data('link-action')),
+      };
     }
 
-    function camelize(subject) {
+    const $input = findCartLineProductQuantityInput($target);
-        const actionTypeParts = subject.split("-");
-        let i;
-        let part;
-        let camelizedSubject = "";
 
-        for (i = 0; i < actionTypeParts.length; i += 1) {
+    let cartAction = {};
-            part = actionTypeParts[i];
 
-            if (i !== 0) {
+    if ($input) {
-                part = part.substring(0, 1).toUpperCase() + part.substring(1);
+      if (shouldIncreaseProductQuantity(namespace)) {
-            }
+        cartAction = {
-
+          url: $input.data('up-url'),
-            camelizedSubject += part;
+          type: 'increaseProductQuantity',
-        }
+        };
-
+      } else {
-        return camelizedSubject;
+        cartAction = {
+          url: $input.data('down-url'),
+          type: 'decreaseProductQuantity',
+        };
+      }
     }
 
-    function parseCartAction($target, namespace) {
+    return cartAction;
-        if (!isTouchSpin(namespace)) {
+  }
-            return {
-                url: $target.attr("href"),
-                type: camelize($target.data("link-action")),
-            };
-        }
 
-        const $input = findCartLineProductQuantityInput($target);
+  const abortPreviousRequests = () => {
-
+    let promise;
-        let cartAction = {};
+    while (promises.length > 0) {
-
+      promise = promises.pop();
-        if ($input) {
+      promise.abort();
-            if (shouldIncreaseProductQuantity(namespace)) {
-                cartAction = {
-                    url: $input.data("up-url"),
-                    type: "increaseProductQuantity",
-                };
-            } else {
-                cartAction = {
-                    url: $input.data("down-url"),
-                    type: "decreaseProductQuantity",
-                };
-            }
-        }
-
-        return cartAction;
     }
+  };
 
-    const abortPreviousRequests = () => {
+  const getTouchSpinInput = ($button) => $($button.parents(prestashop.themeSelectors.cart.touchspin).find('input'));
-        let promise;
+
-        while (promises.length > 0) {
+  $(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => {
-            promise = promises.pop();
+    preventCustomModalOpen(modalEvent);
-            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',
     };
 
-    const getTouchSpinInput = ($button) =>
+    if (typeof cartAction === 'undefined') {
-        $(
+      return;
-            $button
+    }
-                .parents(prestashop.themeSelectors.cart.touchspin)
-                .find("input"),
-        );
 
-    $(prestashop.themeSelectors.product.customizationModal).on(
+    $.ajax({
-        "show.bs.modal",
+      url: cartAction.url,
-        (modalEvent) => {
+      method: 'POST',
-            preventCustomModalOpen(modalEvent);
+      data: requestData,
-        },
+      dataType: 'json',
-    );
+      beforeSend: (jqXHR) => {
+        promises.push(jqXHR);
+      },
+    })
+      .then((resp) => {
+        const $quantityInput = getTouchSpinInput($target);
+        CheckUpdateQuantityOperations.checkUpdateOperation(resp);
+        $quantityInput.val(resp.quantity);
 
-    const handleCartAction = (event) => {
+        // Refresh cart preview
-        event.preventDefault();
+        prestashop.emit('updateCart', {
-        window.shouldPreventModal = true;
+          reason: dataset,
+          resp,
+        });
+      })
+      .fail((resp) => {
+        prestashop.emit('handleError', {
+          eventType: 'updateProductInCart',
+          resp,
+          cartAction: cartAction.type,
+        });
+      });
+  };
 
-        const $target = $(event.currentTarget);
+  $body.on('click', prestashop.themeSelectors.cart.actions, handleCartAction);
-        const { dataset } = event.currentTarget;
 
-        const cartAction = parseCartAction($target, event.namespace);
+  function sendUpdateQuantityInCartRequest(updateQuantityInCartUrl, requestData, $target) {
-        const requestData = {
+    abortPreviousRequests();
-            ajax: "1",
+    window.shouldPreventModal = true;
-            action: "update",
-        };
 
-        if (typeof cartAction === "undefined") {
+    return $.ajax({
-            return;
+      url: updateQuantityInCartUrl,
-        }
+      method: 'POST',
+      data: requestData,
+      dataType: 'json',
+      beforeSend: (jqXHR) => {
+        promises.push(jqXHR);
+      },
+    })
+      .then((resp) => {
+        CheckUpdateQuantityOperations.checkUpdateOperation(resp);
 
-        $.ajax({
+        $target.val(resp.quantity);
-            url: cartAction.url,
+        const dataset = ($target && $target.dataset) ? $target.dataset : resp;
-            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: "updateProductInCart",
+          eventType: 'updateProductQuantityInCart',
-                    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),
     };
+  }
 
-    $body.on("click", prestashop.themeSelectors.cart.actions, handleCartAction);
+  function updateProductQuantityInCart(event) {
+    const $target = $(event.currentTarget);
+    const updateQuantityInCartUrl = $target.data('update-url');
+    const baseValue = $target.attr('value');
 
-    function sendUpdateQuantityInCartRequest(
+    // There should be a valid product quantity in cart
-        updateQuantityInCartUrl,
+    const targetValue = $target.val();
-        requestData,
-        $target,
-    ) {
-        abortPreviousRequests();
-        window.shouldPreventModal = true;
 
-        return $.ajax({
+    /* eslint-disable */
-            url: updateQuantityInCartUrl,
+    if (targetValue != parseInt(targetValue, 10) || targetValue < 0 || Number.isNaN(targetValue)) {
-            method: "POST",
+      window.shouldPreventModal = false;
-            data: requestData,
+      $target.val(baseValue);
-            dataType: "json",
+      return;
-            beforeSend: (jqXHR) => {
+    }
-                promises.push(jqXHR);
+    /* eslint-enable */
-            },
-        })
-            .then((resp) => {
-                CheckUpdateQuantityOperations.checkUpdateOperation(resp);
 
-                $target.val(resp.quantity);
+    // There should be a new product quantity in cart
-                const dataset =
+    const qty = targetValue - baseValue;
-                    $target && $target.dataset ? $target.dataset : resp;
 
-                // Refresh cart preview
+    if (qty === 0) {
-                prestashop.emit("updateCart", {
+      return;
-                    reason: dataset,
-                    resp,
-                });
-            })
-            .fail((resp) => {
-                prestashop.emit("handleError", {
-                    eventType: "updateProductQuantityInCart",
-                    resp,
-                });
-            });
     }
 
-    function getQuantityChangeType($quantity) {
+    if (targetValue === '0') {
-        return $quantity > 0 ? "up" : "down";
+      $target.closest('.product-line-actions').find('[data-link-action="delete-from-cart"]').click();
+    } else {
+      $target.attr('value', targetValue);
+      sendUpdateQuantityInCartRequest(updateQuantityInCartUrl, getRequestData(qty), $target);
     }
+  }
 
-    function getRequestData(quantity) {
+  $body.on('touchspin.on.stopspin', spinnerSelector, debounce(updateProductQuantityInCart));
-        return {
-            ajax: "1",
-            qty: Math.abs(quantity),
-            action: "update",
-            op: getQuantityChangeType(quantity),
-        };
-    }
 
-    function updateProductQuantityInCart(event) {
+  $body.on(
-        const $target = $(event.currentTarget);
+    'focusout keyup',
-        const updateQuantityInCartUrl = $target.data("update-url");
+    productLineInCartSelector,
-        const baseValue = $target.attr("value");
+    (event) => {
-
+      if (event.type === 'keyup') {
-        // There should be a valid product quantity in cart
+        if (event.keyCode === 13) {
-        const targetValue = $target.val();
+          isUpdateOperation = true;
-
+          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;
-    });
+      }
 
-    $body.on("click", prestashop.themeSelectors.cart.discountCode, (event) => {
+      if (!isUpdateOperation) {
-        event.stopPropagation();
+        updateProductQuantityInCart(event);
-        event.preventDefault();
+      }
 
-        const $code = $(event.currentTarget);
+      return false;
-        const $discountInput = $("[name=discount_name]");
+    },
-        const $discountForm = $discountInput.closest("form");
+  );
 
-        $discountInput.val($code.text());
+  $body.on(
-        // Show promo code field
+    'click',
-        $discountForm.trigger("submit");
+    prestashop.themeSelectors.cart.discountCode,
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
 
-        return false;
+      const $code = $(event.currentTarget);
-    });
+      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/selectors.js

@@ -1,84 +1,82 @@
-import prestashop from "prestashop";
+import prestashop from 'prestashop';
-import $ from "jquery";
+import $ from 'jquery';
 
 prestashop.themeSelectors = {
-    product: {
+  product: {
-        tabs: ".tabs .nav-link",
+    tabs: '.tabs .nav-link',
-        activeNavClass: "js-product-nav-active",
+    activeNavClass: 'js-product-nav-active',
-        activeTabClass: "js-product-tab-active",
+    activeTabClass: 'js-product-tab-active',
-        activeTabs: ".tabs .nav-link.active, .js-product-nav-active",
+    activeTabs: '.tabs .nav-link.active, .js-product-nav-active',
-        imagesModal: ".js-product-images-modal",
+    imagesModal: '.js-product-images-modal',
-        thumb: ".js-thumb",
+    thumb: '.js-thumb',
-        thumbContainer: ".thumb-container, .js-thumb-container",
+    thumbContainer: '.thumb-container, .js-thumb-container',
-        arrows: ".js-arrows",
+    arrows: '.js-arrows',
-        selected: ".selected, .js-thumb-selected",
+    selected: '.selected, .js-thumb-selected',
-        modalProductCover: ".js-modal-product-cover",
+    modalProductCover: '.js-modal-product-cover',
-        cover: ".js-qv-product-cover",
+    cover: '.js-qv-product-cover',
-        customizationModal: ".js-customization-modal",
+    customizationModal: '.js-customization-modal',
-    },
+  },
-    listing: {
+  listing: {
-        searchFilterToggler: "#search_filter_toggler, .js-search-toggler",
+    searchFilterToggler: '#search_filter_toggler, .js-search-toggler',
-        searchFiltersWrapper: "#search_filters_wrapper",
+    searchFiltersWrapper: '#search_filters_wrapper',
-        searchFilterControls: "#search_filter_controls",
+    searchFilterControls: '#search_filter_controls',
-        searchFilters: "#search_filters",
+    searchFilters: '#search_filters',
-        activeSearchFilters: "#js-active-search-filters",
+    activeSearchFilters: '#js-active-search-filters',
-        listTop: "#js-product-list-top",
+    listTop: '#js-product-list-top',
-        list: "#js-product-list",
+    list: '#js-product-list',
-        listBottom: "#js-product-list-bottom",
+    listBottom: '#js-product-list-bottom',
-        listHeader: "#js-product-list-header",
+    listHeader: '#js-product-list-header',
-        searchFiltersClearAll: ".js-search-filters-clear-all",
+    searchFiltersClearAll: '.js-search-filters-clear-all',
-        searchLink: ".js-search-link",
+    searchLink: '.js-search-link',
-    },
+  },
-    order: {
+  order: {
-        returnForm: "#order-return-form, .js-order-return-form",
+    returnForm: '#order-return-form, .js-order-return-form',
-    },
+  },
-    arrowDown: ".arrow-down, .js-arrow-down",
+  arrowDown: '.arrow-down, .js-arrow-down',
-    arrowUp: ".arrow-up, .js-arrow-up",
+  arrowUp: '.arrow-up, .js-arrow-up',
-    clear: ".clear",
+  clear: '.clear',
-    fileInput: ".js-file-input",
+  fileInput: '.js-file-input',
-    contentWrapper: "#content-wrapper, .js-content-wrapper",
+  contentWrapper: '#content-wrapper, .js-content-wrapper',
-    footer: "#footer, .js-footer",
+  footer: '#footer, .js-footer',
-    modalContent: ".js-modal-content",
+  modalContent: '.js-modal-content',
-    modal: ".js-checkout-modal",
+  modal: '.js-checkout-modal',
-    touchspin: ".js-touchspin",
+  touchspin: '.js-touchspin',
-    checkout: {
+  checkout: {
-        termsLink: ".js-terms a",
+    termsLink: '.js-terms a',
-        giftCheckbox: ".js-gift-checkbox",
+    giftCheckbox: '.js-gift-checkbox',
-        imagesLink: ".card-block .cart-summary-products p a, .js-show-details",
+    imagesLink: '.card-block .cart-summary-products p a, .js-show-details',
-        carrierExtraContent:
+    carrierExtraContent: '.carrier-extra-content, .js-carrier-extra-content',
-            ".carrier-extra-content, .js-carrier-extra-content",
+    btn: '.checkout a',
-        btn: ".checkout a",
+  },
-    },
+  cart: {
-    cart: {
+    productLineQty: '.js-cart-line-product-quantity',
-        productLineQty: ".js-cart-line-product-quantity",
+    quickview: '.quickview',
-        quickview: ".quickview",
+    touchspin: '.bootstrap-touchspin',
-        touchspin: ".bootstrap-touchspin",
+    promoCode: '#promo-code',
-        promoCode: "#promo-code",
+    displayPromo: '.display-promo',
-        displayPromo: ".display-promo",
+    promoCodeButton: '.promo-code-button',
-        promoCodeButton: ".promo-code-button",
+    discountCode: '.js-discount .code',
-        discountCode: ".js-discount .js-code",
+    discountName: '[name=discount_name]',
-        discountName: "[name=discount_name]",
+    actions: '[data-link-action="delete-from-cart"], [data-link-action="remove-voucher"]',
-        actions:
+  },
-            '[data-link-action="delete-from-cart"], [data-link-action="remove-voucher"]',
+  notifications: {
-    },
+    dangerAlert: '#notifications article.alert-danger',
-    notifications: {
+    container: '#notifications .container',
-        dangerAlert: "#notifications article.alert-danger",
+  },
-        container: "#notifications .container",
+  passwordPolicy: {
-    },
+    template: '#password-feedback',
-    passwordPolicy: {
+    hint: '.js-hint-password',
-        template: "#password-feedback",
+    container: '.js-password-strength-feedback',
-        hint: ".js-hint-password",
+    strengthText: '.js-password-strength-text',
-        container: ".js-password-strength-feedback",
+    requirementScore: '.js-password-requirements-score',
-        strengthText: ".js-password-strength-text",
+    requirementLength: '.js-password-requirements-length',
-        requirementScore: ".js-password-requirements-score",
+    requirementScoreIcon: '.js-password-requirements-score i',
-        requirementLength: ".js-password-requirements-length",
+    requirementLengthIcon: '.js-password-requirements-length i',
-        requirementScoreIcon: ".js-password-requirements-score i",
+    progressBar: '.js-password-policy-progress-bar',
-        requirementLengthIcon: ".js-password-requirements-length i",
+    inputColumn: '.js-input-column',
-        progressBar: ".js-password-policy-progress-bar",
+  },
-        inputColumn: ".js-input-column",
-    },
 };
 
 $(() => {
-    prestashop.emit("themeSelectorsInit");
+  prestashop.emit('themeSelectorsInit');
 });

falcon/_dev/js/theme/index.js

@@ -66,22 +66,6 @@ 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();
@@ -95,19 +79,4 @@ $(() => {
     $(".js-select-link").on("change", ({ target }) => {
         window.location.href = $(target).val();
     });
-
-    // Postcode input formatting
-    const $postCodeInput = $("input[name='postcode']");
-    $postCodeInput.on("input", function () {
-        let value = $(this).val();
-
-        // Match 4 digits followed by 2 letters (e.g., 1234AB)
-        const match = value.match(/^(\d{4})([a-zA-Z]{2})$/);
-
-        if (match) {
-            // Add space between numbers and letters
-            const formatted = `${match[1]} ${match[2]}`;
-            $(this).val(formatted);
-        }
-    });
 });

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

@@ -1,5 +1,5 @@
 
-<div class="col-auto">
+<div class="col-auto mt-2 px-1">
     <a
         class="product-page__action-btn btn btn-light shadow rounded-circle favorite-btn p-2"
         href="#"

falcon/modules/ps_customersignin/ps_customersignin.tpl

@@ -33,17 +33,6 @@
       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">
         {capture name="svg_output"}{svg_icon file='person.svg'}{/capture}
         {if $smarty.capture.svg_output}

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

@@ -23,27 +23,8 @@
  * @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-12 col-md-3">
+    <div class="col-md-3 col-12 mb-lg-4">
       {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>
@@ -76,4 +57,3 @@
       </div>
     </div>
   {/foreach}
-{/if}

falcon/templates/_partials/footer-copyright.tpl

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

falcon/templates/_partials/head.tpl

@@ -74,13 +74,9 @@
 {/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,14 +29,24 @@
 {/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 pb-md-0 py-2">
+            <div class="header-top__content pt-md-3 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">
@@ -48,17 +58,12 @@
                                     data-target="#mobile_top_menu_wrapper"
                             >
                                 <div class="header-top__icon-container">
-                                    {capture name="svg_output"}{svg_icon file='hamburger-menu.svg'}{/capture}
+                                    <span class="header-top__icon material-icons">menu</span>
-                                    {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 col-md-auto col header-top__block header-top__block--logo">
+                        <div class="col-md-4 col header-top__block header-top__block--logo">
                             <a href="{$urls.pages.index}">
                                 {images_block webpEnabled=$webpEnabled}
                                     <img
@@ -74,15 +79,13 @@
                                 {/images_block}
                             </a>
                         </div>
+
                         {hook h='displayTop'}
                     </div>
-                    <div class="row">
+
-                       <div class="col">
-                            {hook h='displayNavFullWidth'}  
-                       </div>
-                    </div>                       
                 </div>
             </div>
         </div>
     </div>
-{/block}
+    {hook h='displayNavFullWidth'}
+{/block}

falcon/templates/_partials/pagination.tpl

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

falcon/templates/catalog/_partials/category-footer.tpl

@@ -1,15 +1,7 @@
-{* Defensive: Handles LazyArray objects for category *}
-{if is_object($category)}
-  {$category = $category|json_encode|json_decode:true}
-  {if isset($category.category)}
-    {$category = $category.category}
-  {/if}
-{/if}
-
 <div id="js-product-list-footer">
-    {if isset($category.additional_description) && $category.additional_description && $listing.pagination.items_shown_from == 1}
+    {if $category.additional_description && $listing.pagination.items_shown_from == 1}
       <div id="category-description-2" class="cms-content my-3">
         {$category.additional_description nofilter}
       </div>
     {/if}
-</div>
+</div>

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

@@ -23,19 +23,24 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  *}
 {block name='brand_miniature_item'}
-  <li class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-3">
+  <li class="col-lg-3 col-sm-4 col-6 mb-3">
     <div class="card h-100">
-      {$brand_url = $brand.image.bySize.home_default.url}
+      {$sizes = Image::getSize('home_default')}
       <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_url}"
+        data-src="{$brand.image|replace:'small_default':'home_default'}"
         alt="{$brand.name}"
         class="card-img-top lazyload"
         width="{$sizes.width}"
         height="{$sizes.height}"
         >
-      <div class="card-footer text-center">
+      <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>
       </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 col col-sm-6 col-lg-4 col-xl-3"
+      class="products-list__block products-list__block--grid"
     {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 align-items-center">
+      <div class="product-quantity row mb-1 mx-n1 mt-n2 align-items-center">
-        <div class="qty col-auto px-1">
+        <div class="qty col-12 col-sm-auto mx-auto mt-2 px-1">
           <input
             type="number"
             name="qty"
@@ -46,7 +46,7 @@
           >
         </div>
 
-        <div class="add col">
+        <div class="add col mt-2 px-1">
           <button
             class="btn btn-primary add-to-cart btn-block"
             data-button-action="add-to-cart"

falcon/templates/catalog/product.tpl

@@ -49,9 +49,6 @@
 
     <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">
@@ -67,8 +64,7 @@
         <div class="col-md-7 mb-4">
           {block name='page_header_container'}
             {block name='page_header'}
-                <h1 class="h1 d-none d-md-block">{block name='page_title'}{$product.name}{/block}</h1>
+              <h1 class="h1">{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,7 +130,6 @@
             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,11 +38,6 @@
       <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-primary btn-sm" href="{$new_address_delivery_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
+          <a class="btn btn-outline-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-primary btn-sm" href="{$new_address_invoice_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
+            <a class="btn btn-outline-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-primary" href="{$urls.pages.index}">
+            <a class="btn btn-outline-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">
-                  {svg_icon file='x.svg' width="24" height="24"}
+                  <span aria-hidden="true">&times;</span>
                 </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 btn btn-secondary mt-2">
+    <a href="{$link->getPageLink('index', true, null, 'mylogout')}" class="customer-links__logout">
       {l s='Sign out' d='Shop.Theme.Actions'}
     </a>
   </div>

falcon/templates/customer/history.tpl

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

falcon/templates/index.tpl

@@ -24,8 +24,14 @@
  *}
 {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">
-        {* {include file='pages/index/hero.tpl'} *}
+        {block name='page_content_top'}{/block}
-    </section>
+
-{/block}
+        {block name='page_content'}
+          {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 mb-0">
+      <header id="header" class="l-header">
         {block name='header'}
           {include file='_partials/header.tpl'}
         {/block}
@@ -55,12 +55,12 @@
         {/block}
 
         {hook h="displayWrapperTop"}
-        <div class="{if $page.page_name == 'index' } container-fluid p-0 overflow-hidden {else}container{/if}">
+        <div class="container">
           {block name='breadcrumb'}
             {include file='_partials/breadcrumb.tpl'}
           {/block}
 
-           <div {if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}class="row"{/if}>
+          <div class="row">
             {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 mt-0">
+      <footer id="footer" class="l-footer js-footer">
         {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="{if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}col-12 {/if}js-content-wrapper">
+  <div id="content-wrapper" class="col-12 js-content-wrapper">
     {hook h="displayContentWrapperTop"}
     {block name='content'}
       <p>Hello world! This is HTML5 Boilerplate.</p>

falcon/templates/pages/index/hero.tpl

@@ -1,10 +0,0 @@
-{* 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>