isabelle/Falcon-PrestaShop-9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: isabelle:feature/extra-features
Branches Tags
isabelle:main isabelle:feature/extra-features isabelle:feature/falcon-PS9
..
compare: isabelle:d5d1cd787401f522fb9dedc1df0054f3f59586a4
Branches Tags
isabelle:feature/extra-features isabelle:main isabelle:feature/falcon-PS9

4 Commits
feature/ex ... d5d1cd7874

Author SHA1 Message Date
Isabelle
d5d1cd7874 Background and color utility classes & map 2025-12-22 12:02:19 +01:00
Isabelle
bae76ed030 Merge branch 'feature/standard-styling' into feature/isabelle-edits 2025-12-22 11:36:35 +01:00
Isabelle
871e42f4ba Add gap and font-size function classes 2025-12-22 11:35:05 +01:00
Isabelle
cf37d8a257 feat(isabelle-edits): Made grid & media queries more like bootstrap 5 
This branch was made to save edits that would make my life easier but are optional. These edits stray further form the original theme than the edits in the standard styles feature branch do, so if you are not used to them you night not like them. That is why I separated the branch.
 2025-12-22 10:49:47 +01:00
22 changed files with 91 additions and 302 deletions
Expand all files Collapse all files

49
falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss
View File

@ -1,6 +1,6 @@
// Color system // Color system
$white: #fff; $white: #fff;
$gray-100: #f8f9fa; $gray-100: #f8f9fa;
$gray-200: #e9ecef; $gray-200: #e9ecef;
$gray-300: #dee2e6; $gray-300: #dee2e6;
@ -10,24 +10,33 @@ $gray-600: #6c757d;
$gray-700: #495057; $gray-700: #495057;
$gray-800: #343a40; $gray-800: #343a40;
$gray-900: #212529; $gray-900: #212529;
$black: #000; $black: #000;
$blue: #007bff; $blue: #007bff;
$indigo: #6610f2; $indigo: #6610f2;
$purple: #6f42c1; $purple: #6f42c1;
$pink: #e83e8c; $pink: #e83e8c;
$red: #dc3545; $red: #dc3545;
$orange: #fd7e14; $orange: #fd7e14;
$yellow: #ffc107; $yellow: #ffc107;
$green: #28a745; $green: #28a745;
$teal: #20c997; $teal: #20c997;
$cyan: #17a2b8; $cyan: #17a2b8;
$primary: $blue; $success: $green;
$secondary: $gray-600; $info: $cyan;
$success: $green; $warning: #ff9a52;
$info: $cyan; $danger: $red;
$warning: #ff9a52; $light: $gray-100;
$danger: $red; $dark: $gray-800;
$light: $gray-100;
$dark: $gray-800; $primary: $blue;
$secondary: $gray-600;
// Map for utility classes
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
//"tertiary": $tertiary,
//"quaternary": $quaternary,,
);

1
falcon/_dev/css/theme/_index.scss
View File

@ -5,4 +5,3 @@
@import "layout/index"; @import "layout/index";
@import "components/index"; @import "components/index";
@import "custom/custom";

17
falcon/_dev/css/theme/custom/_custom.scss
View File

@ -1,13 +1,4 @@
/* // NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
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
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. //Abstracts: Things used throughout the site such as utility classes and generic overrides.
//@import "abstracts/base"; //@import "abstracts/base";
@ -16,7 +7,7 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
//@import "abstracts/utilities"; //@import "abstracts/utilities";
// Components: parts of the theme itself that are not associated with a module. // Components: parts of the theme itself that are not associated with a module.
//@import "components/buttons"; //@import "components/";
@import "components/forms"; @import "components/forms";
// Modules: Styling for specific modules. // Modules: Styling for specific modules.
@ -29,7 +20,5 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
@import "layout/swiper"; @import "layout/swiper";
// Pages // Pages
//@import "pages/checkout"; //@import "pages/category";
//@import "pages/home";
//@import "pages/listing";
//@import "pages/product"; //@import "pages/product";

26
falcon/_dev/css/theme/custom/abstracts/_functions.scss
View File

@ -8,34 +8,10 @@
} }
} }
// 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 // gap size utility classes generator
// Generates utility classes like .gap-4, .gap-col-4, .gap-row-4 // Generates utility classes like .gap-4
@for $i from 1 through 35 { @for $i from 1 through 35 {
.gap-#{$i} { .gap-#{$i} {
gap: rem-calc($i * 1px) !important; 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);
} }

29
falcon/_dev/css/theme/custom/abstracts/_mixins.scss
View File

@ -42,32 +42,3 @@
@content; @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;
}

34
falcon/_dev/css/theme/custom/abstracts/_utilities.scss
View File

@ -1,32 +1,12 @@
// Header selector for interpolation // Color utility classes
// Example usage: #{$headings} { ... } @each $name, $color in $theme-colors {
$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; .bg-#{$name} {
background-color: $color;
// 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 { @each $name, $color in $theme-colors {
@extend .section-spacer-both; .text-#{$name} {
margin-bottom: unset; color: $color;
&--small {
margin-bottom: unset;
} }
} }

16
falcon/_dev/css/theme/custom/components/_buttons.scss
View File

@ -1,16 +0,0 @@
// To customize text colors per button, use this map
$btn-color: (
"primary": $white,
"secondary": $white,
"light": $primary,
"dark": $white,
);
// Generate button color overrides from the map
@each $name, $color in $btn-color {
.btn-#{$name},
.btn-lg-#{$name},
.btn-sm-#{$name} {
color: $color !important;
}
}

3
falcon/_dev/img/checkmark.svg
View File

@ -1,3 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 271 B

15
falcon/_dev/js/theme/index.js
View File

@ -79,19 +79,4 @@ $(() => {
$(".js-select-link").on("change", ({ target }) => { $(".js-select-link").on("change", ({ target }) => {
window.location.href = $(target).val(); 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);
}
});
}); });

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

@ -1,29 +0,0 @@
<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="#"
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>

28
falcon/modules/is_favoriteproducts/views/templates/hook/button.tpl
View File

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

7
falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl
View File

@ -9,12 +9,7 @@
name="s" name="s"
value="{$search_string}"> value="{$search_string}">
<button type="submit" class="search-form__btn btn"> <button type="submit" class="search-form__btn btn">
{capture name="svg_output"}{svg_icon file='search.svg'}{/capture} <span class="material-icons">search</span>
{if $smarty.capture.svg_output}
{$smarty.capture.svg_output nofilter}
{else}
<span class="header-top__icon material-icons">search</span>
{/if}
</button> </button>
</div> </div>
</form> </form>

8
falcon/modules/ps_contactinfo/ps_contactinfo.tpl
View File

@ -28,13 +28,7 @@
<div class="d-flex align-items-center mb-3 justify-content-between position-relative"> <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> <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"> <a href="#footer_contact_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
{capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture} <i class="material-icons d-block"></i>
{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> </a>
</div> </div>

8
falcon/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
View File

@ -28,13 +28,7 @@
<div class="d-flex align-items-center mb-3 justify-content-between position-relative"> <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> <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"> <a href="#footer_account_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
{capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture} <i class="material-icons d-block"></i>
{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> </a>
</div> </div>

7
falcon/modules/ps_customersignin/ps_customersignin.tpl
View File

@ -34,12 +34,7 @@
{/if} {/if}
> >
<div class="header-top__icon-container"> <div class="header-top__icon-container">
{capture name="svg_output"}{svg_icon file='person.svg'}{/capture} <span class="header-top__icon material-icons">person</span>
{if $smarty.capture.svg_output}
{$smarty.capture.svg_output nofilter}
{else}
<span class="header-top__icon material-icons">person</span>
{/if}
</div> </div>
</a> </a>
</div> </div>

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

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

8
falcon/modules/ps_linklist/views/templates/hook/linkblock.tpl
View File

@ -29,13 +29,7 @@
<div class="d-flex align-items-center mb-3 justify-content-between position-relative"> <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
<span class="h4 mb-0">{$linkBlock.title}</span> <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"> <a href="#footer_sub_menu_{$_expand_id}" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
{capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture} <i class="material-icons d-block"></i>
{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> </a>
</div> </div>
<div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block"> <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">

7
falcon/modules/ps_mainmenu/ps_mainmenu.tpl
View File

@ -21,14 +21,9 @@
> >
<span class="align-self-center">{$node.label}</span> <span class="align-self-center">{$node.label}</span>
{if $node.children|count} {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;"> <span class="d-none d-md-block pl-1" style="margin-bottom: 3px;">
{$smarty.capture.svg_output nofilter} {svg_icon file='chevron_down.svg' }
</span> </span>
{else}
<i class="material-icons d-block"></i>
{/if}
{/if} {/if}
</a> </a>
{if $node.children|count} {if $node.children|count}

8
falcon/templates/_partials/header.tpl
View File

@ -37,6 +37,7 @@
<div class="header-top js-header-top"> <div class="header-top js-header-top">
<div class="header-top__content pb-md-0 py-2"> <div class="header-top__content pb-md-0 py-2">
<div class="container"> <div class="container">
<div class="row header-top__row"> <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"> <div class="col flex-grow-0 header-top__block header-top__block--menu-toggle d-block d-md-none">
@ -83,6 +84,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container header-main-menu">
<div class="row">
<div class="col">
{hook h='displayNavFullWidth'}
</div>
</div>
</div>
</div> </div>
</div> </div>
{/block} {/block}

71
falcon/templates/_partials/pagination.tpl
View File

@ -26,43 +26,38 @@
{block name='pagination_page_list'} {block name='pagination_page_list'}
{if $pagination.should_be_displayed} {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} {/if}
{/block} {/block}

10
falcon/templates/catalog/_partials/category-footer.tpl
View File

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

2
falcon/templates/catalog/_partials/miniatures/product.tpl
View File

@ -26,7 +26,7 @@
{$listingType = $type|default:'listing'} {$listingType = $type|default:'listing'}
<div <div
{if $listingType === 'listing'} {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'} {elseif $listingType === 'slider'}
class="swiper-slide product-slider__item col-6 col-md-4 col-lg-3" class="swiper-slide product-slider__item col-6 col-md-4 col-lg-3"
{/if} {/if}