feat(extra-features): A bunch of improvements

This commit is contained in:
2026-02-06 14:20:14 +01:00
parent b968033b17
commit 541901e8e6
22 changed files with 421 additions and 367 deletions

View File

@@ -6,3 +6,5 @@ $input-btn-padding-x-sm: rem-calc(8px);
$input-btn-padding-y-lg: rem-calc(14px);
$input-btn-padding-x-lg: rem-calc(20px);
$input-height: rem-calc(50px);

View File

@@ -1,8 +1,7 @@
$font-family-sans-serif: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI",
roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-sans-serif: "Plus Jakarta Sans", sans-serif;
$font-family-base: $font-family-sans-serif;
$headings-font-family: $font-family-sans-serif;
$font-weight-base: 400;
$font-size-base: rem-calc(14px);
$font-size-lg: $font-size-base * 1.125;

View File

@@ -16,7 +16,7 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
//@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.

View File

@@ -1,4 +1,5 @@
// To customize text colors per button, use this map
// To customize text colors per button, use this map and below function
$btn-color: (
"primary": $white,
"secondary": $white,
@@ -6,7 +7,6 @@ $btn-color: (
"dark": $white,
);
// Generate button color overrides from the map
@each $name, $color in $btn-color {
.btn-#{$name},
.btn-lg-#{$name},
@@ -15,33 +15,21 @@ $btn-color: (
}
}
// bootstrap touchspin. Edit icons under js/theme/components/product.js
// Bootstrap touchspin
.bootstrap-touchspin {
min-width: 100px;
flex-wrap: nowrap;
> input {
border-left: 0px;
color: $primary;
&:focus {
box-shadow: none;
}
}
.btn {
height: 50%;
width: 100%;
border-radius: 0px;
&:first-child {
border-bottom: 1px solid $border-color;
}
}
.input-touchspin {
min-width: rem-calc(66px);
height: rem-calc(50px);
min-width: rem-calc(75px);
border-left: 0px;
}
.input-group-btn-vertical {
min-width: rem-calc(33px);
display: flex;
flex-direction: column;
button {
border-radius: 0px;
}
}
}

View File

@@ -1,12 +1,10 @@
.field-password-policy .input-group.js-parent-focus {
> * {
max-height: rem-calc(39px);
}
.form-control {
height: unset;
}
.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;
}

View File

@@ -10,4 +10,8 @@
margin: 0;
}
}
.header-top__badge {
right: -0.9em;
}
}

View File

@@ -1,6 +1,6 @@
import $ from 'jquery';
import prestashop from 'prestashop';
import debounce from '@js/theme/utils/debounce';
import $ from "jquery";
import prestashop from "prestashop";
import debounce from "@js/theme/utils/debounce";
prestashop.cart = prestashop.cart || {};
@@ -9,7 +9,7 @@ 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: () => {
@@ -19,11 +19,14 @@ const CheckUpdateQuantityOperations = {
*/
const $checkoutBtn = $(prestashop.themeSelectors.checkout.btn);
if ($(prestashop.themeSelectors.notifications.dangerAlert).length || (errorMsg !== '' && !hasError)) {
$checkoutBtn.addClass('disabled');
if (
$(prestashop.themeSelectors.notifications.dangerAlert).length ||
(errorMsg !== "" && !hasError)
) {
$checkoutBtn.addClass("disabled");
}
if (errorMsg !== '') {
if (errorMsg !== "") {
const strError = `
<article class="alert alert-danger" role="alert" data-alert="danger">
<ul class="mb-0">
@@ -32,17 +35,17 @@ const CheckUpdateQuantityOperations = {
</article>
`;
$(prestashop.themeSelectors.notifications.container).html(strError);
errorMsg = '';
errorMsg = "";
isUpdateOperation = false;
if (hasError) {
// if hasError is true, quantity was not updated : allow checkout
$checkoutBtn.removeClass('disabled');
$checkoutBtn.removeClass("disabled");
}
} else if (!hasError && isUpdateOperation) {
hasError = false;
isUpdateOperation = false;
$(prestashop.themeSelectors.notifications.container).html('');
$checkoutBtn.removeClass('disabled');
$(prestashop.themeSelectors.notifications.container).html("");
$checkoutBtn.removeClass("disabled");
}
},
checkUpdateOperation: (resp) => {
@@ -52,11 +55,11 @@ const CheckUpdateQuantityOperations = {
*/
const { hasError: hasErrorOccurred, errors: errorData } = resp;
hasError = hasErrorOccurred ?? false;
const errors = errorData ?? '';
const errors = errorData ?? "";
// 1.7.2.x returns errors as string, 1.7.3.x returns array
if (errors instanceof Array) {
errorMsg = errors.join(' ');
errorMsg = errors.join(" ");
} else {
errorMsg = errors;
}
@@ -71,12 +74,18 @@ const CheckUpdateQuantityOperations = {
function createSpin() {
$.each($(spinnerSelector), (index, spinner) => {
$(spinner).TouchSpin({
verticalupclass: 'material-icons touchspin-up',
verticaldownclass: 'material-icons touchspin-down',
buttondown_class: 'btn btn-touchspin js-touchspin js-increase-product-quantity',
buttonup_class: 'btn btn-touchspin js-touchspin js-decrease-product-quantity',
min: parseInt($(spinner).attr('min'), 10),
verticalupclass: "",
verticaldownclass: "",
buttondown_class:
"btn btn-primary btn-touchspin js-touchspin js-increase-product-quantity",
buttonup_class:
"btn btn-primary btn-touchspin js-touchspin js-decrease-product-quantity",
min: parseInt($(spinner).attr("min"), 10),
max: 1000000,
verticalup:
'<img src="/themes/falcon/_dev/img/chevron_up.svg" alt="Up" />',
verticaldown:
'<img src="/themes/falcon/_dev/img/chevron_down.svg" alt="Down" />',
});
});
@@ -94,41 +103,49 @@ const preventCustomModalOpen = (event) => {
};
$(() => {
const productLineInCartSelector = prestashop.themeSelectors.cart.productLineQty;
const productLineInCartSelector =
prestashop.themeSelectors.cart.productLineQty;
const promises = [];
prestashop.on('updateCart', () => {
$(prestashop.themeSelectors.cart.quickview).modal('hide');
$('body').addClass('cart-loading');
prestashop.on("updateCart", () => {
$(prestashop.themeSelectors.cart.quickview).modal("hide");
$("body").addClass("cart-loading");
});
prestashop.on('updatedCart', () => {
prestashop.on("updatedCart", () => {
window.shouldPreventModal = false;
$(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => {
$(prestashop.themeSelectors.product.customizationModal).on(
"show.bs.modal",
(modalEvent) => {
preventCustomModalOpen(modalEvent);
});
},
);
createSpin();
$('body').removeClass('cart-loading');
$("body").removeClass("cart-loading");
});
createSpin();
const $body = $('body');
const $body = $("body");
function isTouchSpin(namespace) {
return namespace === 'on.startupspin' || namespace === 'on.startdownspin';
return (
namespace === "on.startupspin" || namespace === "on.startdownspin"
);
}
function shouldIncreaseProductQuantity(namespace) {
return namespace === 'on.startupspin';
return namespace === "on.startupspin";
}
function findCartLineProductQuantityInput($target) {
const $input = $target.parents(prestashop.themeSelectors.cart.touchspin).find(productLineInCartSelector);
const $input = $target
.parents(prestashop.themeSelectors.cart.touchspin)
.find(productLineInCartSelector);
if ($input.is(':focus')) {
if ($input.is(":focus")) {
return null;
}
@@ -136,10 +153,10 @@ $(() => {
}
function camelize(subject) {
const actionTypeParts = subject.split('-');
const actionTypeParts = subject.split("-");
let i;
let part;
let camelizedSubject = '';
let camelizedSubject = "";
for (i = 0; i < actionTypeParts.length; i += 1) {
part = actionTypeParts[i];
@@ -157,8 +174,8 @@ $(() => {
function parseCartAction($target, namespace) {
if (!isTouchSpin(namespace)) {
return {
url: $target.attr('href'),
type: camelize($target.data('link-action')),
url: $target.attr("href"),
type: camelize($target.data("link-action")),
};
}
@@ -169,13 +186,13 @@ $(() => {
if ($input) {
if (shouldIncreaseProductQuantity(namespace)) {
cartAction = {
url: $input.data('up-url'),
type: 'increaseProductQuantity',
url: $input.data("up-url"),
type: "increaseProductQuantity",
};
} else {
cartAction = {
url: $input.data('down-url'),
type: 'decreaseProductQuantity',
url: $input.data("down-url"),
type: "decreaseProductQuantity",
};
}
}
@@ -191,11 +208,19 @@ $(() => {
}
};
const getTouchSpinInput = ($button) => $($button.parents(prestashop.themeSelectors.cart.touchspin).find('input'));
const getTouchSpinInput = ($button) =>
$(
$button
.parents(prestashop.themeSelectors.cart.touchspin)
.find("input"),
);
$(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => {
$(prestashop.themeSelectors.product.customizationModal).on(
"show.bs.modal",
(modalEvent) => {
preventCustomModalOpen(modalEvent);
});
},
);
const handleCartAction = (event) => {
event.preventDefault();
@@ -206,19 +231,19 @@ $(() => {
const cartAction = parseCartAction($target, event.namespace);
const requestData = {
ajax: '1',
action: 'update',
ajax: "1",
action: "update",
};
if (typeof cartAction === 'undefined') {
if (typeof cartAction === "undefined") {
return;
}
$.ajax({
url: cartAction.url,
method: 'POST',
method: "POST",
data: requestData,
dataType: 'json',
dataType: "json",
beforeSend: (jqXHR) => {
promises.push(jqXHR);
},
@@ -229,31 +254,35 @@ $(() => {
$quantityInput.val(resp.quantity);
// Refresh cart preview
prestashop.emit('updateCart', {
prestashop.emit("updateCart", {
reason: dataset,
resp,
});
})
.fail((resp) => {
prestashop.emit('handleError', {
eventType: 'updateProductInCart',
prestashop.emit("handleError", {
eventType: "updateProductInCart",
resp,
cartAction: cartAction.type,
});
});
};
$body.on('click', prestashop.themeSelectors.cart.actions, handleCartAction);
$body.on("click", prestashop.themeSelectors.cart.actions, handleCartAction);
function sendUpdateQuantityInCartRequest(updateQuantityInCartUrl, requestData, $target) {
function sendUpdateQuantityInCartRequest(
updateQuantityInCartUrl,
requestData,
$target,
) {
abortPreviousRequests();
window.shouldPreventModal = true;
return $.ajax({
url: updateQuantityInCartUrl,
method: 'POST',
method: "POST",
data: requestData,
dataType: 'json',
dataType: "json",
beforeSend: (jqXHR) => {
promises.push(jqXHR);
},
@@ -262,45 +291,50 @@ $(() => {
CheckUpdateQuantityOperations.checkUpdateOperation(resp);
$target.val(resp.quantity);
const dataset = ($target && $target.dataset) ? $target.dataset : resp;
const dataset =
$target && $target.dataset ? $target.dataset : resp;
// Refresh cart preview
prestashop.emit('updateCart', {
prestashop.emit("updateCart", {
reason: dataset,
resp,
});
})
.fail((resp) => {
prestashop.emit('handleError', {
eventType: 'updateProductQuantityInCart',
prestashop.emit("handleError", {
eventType: "updateProductQuantityInCart",
resp,
});
});
}
function getQuantityChangeType($quantity) {
return $quantity > 0 ? 'up' : 'down';
return $quantity > 0 ? "up" : "down";
}
function getRequestData(quantity) {
return {
ajax: '1',
ajax: "1",
qty: Math.abs(quantity),
action: 'update',
action: "update",
op: getQuantityChangeType(quantity),
};
}
function updateProductQuantityInCart(event) {
const $target = $(event.currentTarget);
const updateQuantityInCartUrl = $target.data('update-url');
const baseValue = $target.attr('value');
const updateQuantityInCartUrl = $target.data("update-url");
const baseValue = $target.attr("value");
// There should be a valid product quantity in cart
const targetValue = $target.val();
/* eslint-disable */
if (targetValue != parseInt(targetValue, 10) || targetValue < 0 || Number.isNaN(targetValue)) {
if (
targetValue != parseInt(targetValue, 10) ||
targetValue < 0 ||
Number.isNaN(targetValue)
) {
window.shouldPreventModal = false;
$target.val(baseValue);
return;
@@ -314,21 +348,29 @@ $(() => {
return;
}
if (targetValue === '0') {
$target.closest('.product-line-actions').find('[data-link-action="delete-from-cart"]').click();
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);
$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') {
"touchspin.on.stopspin",
spinnerSelector,
debounce(updateProductQuantityInCart),
);
$body.on("focusout keyup", productLineInCartSelector, (event) => {
if (event.type === "keyup") {
if (event.keyCode === 13) {
isUpdateOperation = true;
updateProductQuantityInCart(event);
@@ -342,25 +384,20 @@ $(() => {
}
return false;
},
);
});
$body.on(
'click',
prestashop.themeSelectors.cart.discountCode,
(event) => {
$body.on("click", prestashop.themeSelectors.cart.discountCode, (event) => {
event.stopPropagation();
event.preventDefault();
const $code = $(event.currentTarget);
const $discountInput = $('[name=discount_name]');
const $discountForm = $discountInput.closest('form');
const $discountInput = $("[name=discount_name]");
const $discountForm = $discountInput.closest("form");
$discountInput.val($code.text());
// Show promo code field
$discountForm.trigger('submit');
$discountForm.trigger("submit");
return false;
},
);
});
});

View File

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

View File

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

View File

@@ -1,7 +1,8 @@
<div class="footer-bottom py-3">
<div class="container d-flex justify-content-between align-items-center">
<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>
<span class="text-white fw-400">
{l
s='Copyright © %year% %shop%'
sprintf=['%year%' => $smarty.now|date_format:"%Y", '%shop%' => $shop.name|capitalize]
@@ -9,17 +10,13 @@
}
</span>
</div>
<a href="https://dewebsmid.nl/prestashop/" rel="noopener" target="_blank">
<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">
<a href="content/3-gebruiks-voorwaarden">
{l s='Terms & Conditions' d='Shop.Theme.Footer'}
</a>
<span class="mx-2"> | </span>
<a href="content/1-levering">
{l s='Privacy policy' 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>

View File

@@ -29,7 +29,7 @@
{/block}
</div>
</div>
<div class="footer-container pb-0">
<div class="footer-container pb-0 mt-0">
<div class="container">
<div class="row">
{block name='hook_footer'}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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