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

feat(standard-styling): Add standard svg icons

Browse Source 
Use chevron svg icons in bootstrap touchspin on product page AND on main menu if it has children
This commit is contained in:
Isabelle Oving - Anno
2025-12-04 15:21:42 +01:00
parent 00bae73b17
commit 9609cfe305
10 changed files with 129 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
falcon/_dev/img/bag.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18.5" height="20.5" viewBox="0 0 18.5 20.5">
<g id="Icon_feather-shopping-bag" data-name="Icon feather-shopping-bag" transform="translate(-3.75 -2.25)">
<path id="Path_13" data-name="Path 13" d="M7.333,3,4.5,6.8V20.1A1.894,1.894,0,0,0,6.389,22H19.611A1.894,1.894,0,0,0,21.5,20.1V6.8L18.667,3ZM4.5,6.8h17" transform="translate(0 0)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Path_14" data-name="Path 14" d="M19.4,15A3.7,3.7,0,1,1,12,15" transform="translate(-2.7 -4.35)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 713 B

3
falcon/_dev/img/chevron_down.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10.828" height="6.414" viewBox="0 0 10.828 6.414">
<path id="Path_62" data-name="Path 62" d="M1560.845,813.75l4,4-4,4" transform="translate(823.164 -1559.431) rotate(90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 327 B

3
falcon/_dev/img/chevron_left.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

3
falcon/_dev/img/chevron_right.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="6.414" height="10.828" viewBox="0 0 6.414 10.828">
<path id="Path_94" data-name="Path 94" d="M1560.845,813.75l4,4-4,4" transform="translate(-1559.431 -812.336)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 322 B

3
falcon/_dev/img/chevron_up.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 5L5 1L9 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

3
falcon/_dev/img/heart.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23.5" height="20.5" viewBox="0 0 23.5 20.5">
<path id="Icon_feather-heart" data-name="Icon feather-heart" d="M22.627,6.177a5.829,5.829,0,0,0-8.188,0l-1.116,1.1-1.116-1.1a5.831,5.831,0,0,0-8.188,0,5.693,5.693,0,0,0,0,8.108l1.116,1.1L13.323,23.5l8.188-8.108,1.116-1.1a5.692,5.692,0,0,0,0-8.108Z" transform="translate(-1.573 -3.747)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 489 B

6
falcon/_dev/img/person.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18.506" height="20.5" viewBox="0 0 18.506 20.5">
<g id="Icon_akar-person" data-name="Icon akar-person" transform="translate(-4.145 -2.25)">
<path id="Path_18" data-name="Path 18" d="M20.4,7.75a4.854,4.854,0,0,1-4.952,4.75A4.854,4.854,0,0,1,10.5,7.75,4.854,4.854,0,0,1,15.452,3,4.854,4.854,0,0,1,20.4,7.75Z" transform="translate(-2.054)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Path_19" data-name="Path 19" d="M18.264,21h.343a2.9,2.9,0,0,1,2.9,2.5l.381,2.968a1.87,1.87,0,0,1-.472,1.493,1.967,1.967,0,0,1-1.459.642H6.845a1.967,1.967,0,0,1-1.46-.643,1.87,1.87,0,0,1-.472-1.493l.38-2.968a2.9,2.9,0,0,1,2.9-2.5h.342" transform="translate(0 -6.6)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 887 B

3
falcon/_dev/img/search.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.867" height="17.867" viewBox="0 0 17.867 17.867">
<path id="Icon_akar-search" data-name="Icon akar-search" d="M18.453,18.453,14.8,14.8m2.022-4.885A6.913,6.913,0,1,1,9.913,3a6.913,6.913,0,0,1,6.913,6.913Z" transform="translate(-2 -2)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 369 B

168
falcon/_dev/js/theme/components/product.js
View File

@ -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:
'<img src="/themes/falcon/_dev/img/chevron_up.svg" alt="Up" />',
verticaldown:
'<img src="/themes/falcon/_dev/img/chevron_down.svg" alt="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();
});
});

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

@ -20,6 +20,11 @@
{if $node.open_in_new_window} target="_blank" {/if}
>
<span class="align-self-center">{$node.label}</span>
{if $node.children|count}
<span class="d-none d-md-block pl-1" style="margin-bottom: 3px;">
{svg_icon file='chevron_down.svg' }
</span>
{/if}
</a>
{if $node.children|count}
{* Cannot use page identifier as we can have the same page several times *}
@ -51,4 +56,4 @@
<div class="main-menu" id="_desktop_top_menu">
{menu nodes=$menu.children}
</div>
</div>
</div>