fix(extra-features): Product card grid now uses bootstrap cols

The product cards should use bootstrap instead of display grid for easier edits and consistency

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/theme/custom/_custom.scss

@@ -10,8 +10,10 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
 */
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
-@import "abstracts/utilities";
 //@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";

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/_utilities.scss

@@ -1,3 +1,32 @@
 // Header selector for interpolation
 // Example usage: #{$headings} { ... }
 $headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
+
+// Section Spacers
+$section-spacer: rem-calc(50px);
+$section-spacer-small: rem-calc(25px);
+
+.section-spacer-both {
+    margin-top: $section-spacer;
+    margin-bottom: $section-spacer;
+    @include bs5-media-breakpoint-up(lg) {
+        margin-top: calc($section-spacer * 1.5);
+        margin-bottom: calc($section-spacer * 1.5);
+    }
+    &--small {
+        margin-top: $section-spacer-small;
+        margin-bottom: $section-spacer-small;
+        @include bs5-media-breakpoint-up(lg) {
+            margin-top: calc($section-spacer-small * 2);
+            margin-bottom: calc($section-spacer-small * 2);
+        }
+    }
+}
+
+.section-spacer {
+    @extend .section-spacer-both;
+    margin-bottom: unset;
+    &--small {
+        margin-bottom: unset;
+    }
+}

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

@@ -13,14 +13,4 @@ $btn-color: (
     .btn-sm-#{$name} {
         color: $color !important;
     }
-    .btn-outline-#{$name},
-    .btn-lg-outline-#{$name},
-    .btn-sm-outline-#{$name} {
-        color: $color;
-        &:hover,
-        &:focus,
-        &:active {
-            color: $color !important;
-        }
-    }
 }

falcon/_dev/js/theme/index.js

@@ -79,4 +79,19 @@ $(() => {
     $(".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/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/category-footer.tpl

@@ -1,5 +1,13 @@
+{* 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 $category.additional_description && $listing.pagination.items_shown_from == 1}
+    {if isset($category.additional_description) && $category.additional_description && $listing.pagination.items_shown_from == 1}
       <div id="category-description-2" class="cms-content my-3">
         {$category.additional_description nofilter}
       </div>

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}