From 9609cfe3058c545c63a40b79fd74cb6e7b659f6f Mon Sep 17 00:00:00 2001 From: Isabelle Date: Thu, 4 Dec 2025 15:21:42 +0100 Subject: [PATCH] feat(standard-styling): Add standard svg icons Use chevron svg icons in bootstrap touchspin on product page AND on main menu if it has children --- falcon/_dev/img/bag.svg | 6 + falcon/_dev/img/chevron_down.svg | 3 + falcon/_dev/img/chevron_left.svg | 3 + falcon/_dev/img/chevron_right.svg | 3 + falcon/_dev/img/chevron_up.svg | 3 + falcon/_dev/img/heart.svg | 3 + falcon/_dev/img/person.svg | 6 + falcon/_dev/img/search.svg | 3 + falcon/_dev/js/theme/components/product.js | 168 ++++++++++++--------- falcon/modules/ps_mainmenu/ps_mainmenu.tpl | 7 +- 10 files changed, 129 insertions(+), 76 deletions(-) create mode 100644 falcon/_dev/img/bag.svg create mode 100644 falcon/_dev/img/chevron_down.svg create mode 100644 falcon/_dev/img/chevron_left.svg create mode 100644 falcon/_dev/img/chevron_right.svg create mode 100644 falcon/_dev/img/chevron_up.svg create mode 100644 falcon/_dev/img/heart.svg create mode 100644 falcon/_dev/img/person.svg create mode 100644 falcon/_dev/img/search.svg diff --git a/falcon/_dev/img/bag.svg b/falcon/_dev/img/bag.svg new file mode 100644 index 0000000..efbc783 --- /dev/null +++ b/falcon/_dev/img/bag.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/falcon/_dev/img/chevron_down.svg b/falcon/_dev/img/chevron_down.svg new file mode 100644 index 0000000..9af8f01 --- /dev/null +++ b/falcon/_dev/img/chevron_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/falcon/_dev/img/chevron_left.svg b/falcon/_dev/img/chevron_left.svg new file mode 100644 index 0000000..4e540e3 --- /dev/null +++ b/falcon/_dev/img/chevron_left.svg @@ -0,0 +1,3 @@ + + + diff --git a/falcon/_dev/img/chevron_right.svg b/falcon/_dev/img/chevron_right.svg new file mode 100644 index 0000000..9c43f23 --- /dev/null +++ b/falcon/_dev/img/chevron_right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/falcon/_dev/img/chevron_up.svg b/falcon/_dev/img/chevron_up.svg new file mode 100644 index 0000000..31a0429 --- /dev/null +++ b/falcon/_dev/img/chevron_up.svg @@ -0,0 +1,3 @@ + + + diff --git a/falcon/_dev/img/heart.svg b/falcon/_dev/img/heart.svg new file mode 100644 index 0000000..8a051f4 --- /dev/null +++ b/falcon/_dev/img/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/falcon/_dev/img/person.svg b/falcon/_dev/img/person.svg new file mode 100644 index 0000000..c2d71cc --- /dev/null +++ b/falcon/_dev/img/person.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/falcon/_dev/img/search.svg b/falcon/_dev/img/search.svg new file mode 100644 index 0000000..ae29bf0 --- /dev/null +++ b/falcon/_dev/img/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/falcon/_dev/js/theme/components/product.js b/falcon/_dev/js/theme/components/product.js index 05875a4..4f59eee 100644 --- a/falcon/_dev/js/theme/components/product.js +++ b/falcon/_dev/js/theme/components/product.js @@ -1,90 +1,108 @@ -import $ from 'jquery'; -import prestashop from 'prestashop'; +import $ from "jquery"; +import prestashop from "prestashop"; $(() => { - const createInputFile = () => { - $('.js-file-input').on('change', (event) => { - const target = $(event.currentTarget)[0]; - const file = (target) ? target.files[0] : null; + const createInputFile = () => { + $(".js-file-input").on("change", (event) => { + const target = $(event.currentTarget)[0]; + const file = target ? target.files[0] : null; - if (target && file) { - $(target).prev().text(file.name); - } - }); - }; + if (target && file) { + $(target).prev().text(file.name); + } + }); + }; - const createProductSpin = () => { - const $quantityInput = $('#quantity_wanted'); + const createProductSpin = () => { + const $quantityInput = $("#quantity_wanted"); - $quantityInput.TouchSpin({ - verticalupclass: 'material-icons touchspin-up', - verticaldownclass: 'material-icons touchspin-down', - buttondown_class: 'btn btn-touchspin js-touchspin', - buttonup_class: 'btn btn-touchspin js-touchspin', - min: parseInt($quantityInput.attr('min'), 10), - max: 1000000, - }); + $quantityInput.TouchSpin({ + min: parseInt($quantityInput.attr("min"), 10), + max: 1000000, + verticalbuttons: true, + verticalupclass: "btn btn-touchspin js-touchspin", + verticaldownclass: "btn btn-touchspin js-touchspin", + verticalup: + 'Up', + verticaldown: + 'Down', + }); - $quantityInput.on('focusout', () => { - if ($quantityInput.val() === '' || $quantityInput.val() < $quantityInput.attr('min')) { - $quantityInput.val($quantityInput.attr('min')); - $quantityInput.trigger('change'); - } - }); + $quantityInput.on("focusout", () => { + if ( + $quantityInput.val() === "" || + $quantityInput.val() < $quantityInput.attr("min") + ) { + $quantityInput.val($quantityInput.attr("min")); + $quantityInput.trigger("change"); + } + }); - $('body').on('change keyup', '#quantity_wanted', (event) => { - $(event.currentTarget).trigger('touchspin.stopspin'); - prestashop.emit('updateProduct', { - eventType: 'updatedProductQuantity', - event, - }); - }); - }; + $("body").on("change keyup", "#quantity_wanted", (event) => { + $(event.currentTarget).trigger("touchspin.stopspin"); + prestashop.emit("updateProduct", { + eventType: "updatedProductQuantity", + event, + }); + }); + }; - createProductSpin(); - createInputFile(); - let updateEvenType = false; - - prestashop.on('updateProduct', ({ eventType }) => { - updateEvenType = eventType; - }); - - prestashop.on('updateCart', (event) => { - if ( - prestashop.page.page_name === 'product' - && parseInt(event.reason.idProduct, 10) === parseInt($('#add-to-cart-or-refresh').find('[name="id_product"]').val(), 10)) { - prestashop.emit('updateProduct', { - event, - resp: {}, - reason: { - productUrl: prestashop.urls.pages.product || '', - }, - }); - } - }); - - prestashop.on('updatedProduct', (event) => { + createProductSpin(); createInputFile(); + let updateEvenType = false; - if (event && event.product_minimal_quantity) { - const minimalProductQuantity = parseInt(event.product_minimal_quantity, 10); - const quantityInputSelector = '#quantity_wanted'; - const quantityInput = $(quantityInputSelector); + prestashop.on("updateProduct", ({ eventType }) => { + updateEvenType = eventType; + }); - // @see http://www.virtuosoft.eu/code/bootstrap-touchspin/ about Bootstrap TouchSpin - quantityInput.trigger('touchspin.updatesettings', { - min: minimalProductQuantity, - }); - } + prestashop.on("updateCart", (event) => { + if ( + prestashop.page.page_name === "product" && + parseInt(event.reason.idProduct, 10) === + parseInt( + $("#add-to-cart-or-refresh") + .find('[name="id_product"]') + .val(), + 10 + ) + ) { + prestashop.emit("updateProduct", { + event, + resp: {}, + reason: { + productUrl: prestashop.urls.pages.product || "", + }, + }); + } + }); - if (updateEvenType === 'updatedProductCombination') { - $('.js-product-images').replaceWith(event.product_cover_thumbnails); - $('.js-product-images-modal').replaceWith(event.product_images_modal); - prestashop.emit('updatedProductCombination', event); - } + prestashop.on("updatedProduct", (event) => { + createInputFile(); - updateEvenType = false; + if (event && event.product_minimal_quantity) { + const minimalProductQuantity = parseInt( + event.product_minimal_quantity, + 10 + ); + const quantityInputSelector = "#quantity_wanted"; + const quantityInput = $(quantityInputSelector); - prestashop.pageLazyLoad.update(); - }); + // @see http://www.virtuosoft.eu/code/bootstrap-touchspin/ about Bootstrap TouchSpin + quantityInput.trigger("touchspin.updatesettings", { + min: minimalProductQuantity, + }); + } + + if (updateEvenType === "updatedProductCombination") { + $(".js-product-images").replaceWith(event.product_cover_thumbnails); + $(".js-product-images-modal").replaceWith( + event.product_images_modal + ); + prestashop.emit("updatedProductCombination", event); + } + + updateEvenType = false; + + prestashop.pageLazyLoad.update(); + }); }); diff --git a/falcon/modules/ps_mainmenu/ps_mainmenu.tpl b/falcon/modules/ps_mainmenu/ps_mainmenu.tpl index a6b8dff..81dd436 100644 --- a/falcon/modules/ps_mainmenu/ps_mainmenu.tpl +++ b/falcon/modules/ps_mainmenu/ps_mainmenu.tpl @@ -20,6 +20,11 @@ {if $node.open_in_new_window} target="_blank" {/if} > {$node.label} + {if $node.children|count} + + {svg_icon file='chevron_down.svg' } + + {/if} {if $node.children|count} {* Cannot use page identifier as we can have the same page several times *} @@ -51,4 +56,4 @@
{menu nodes=$menu.children}
- + \ No newline at end of file