sayalip
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

refactor: update cart page styles

staging
abhisheks 2023-12-20 13:53:44 +05:30
parent 0a1add6881
commit fbc0ff69c4
5 changed files with 251 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
_dev/js/cart.js
View File

@ -1,6 +1,6 @@
import $ from 'jquery'; import $ from "jquery";
import prestashop from 'prestashop'; import prestashop from "prestashop";
import debounce from './components/debounce'; import debounce from "./components/debounce";
prestashop.cart = prestashop.cart || {}; prestashop.cart = prestashop.cart || {};
@ -9,7 +9,7 @@ prestashop.cart.active_inputs = null;
const spinnerSelector = 'input[name="product-quantity-spin"]'; const spinnerSelector = 'input[name="product-quantity-spin"]';
let hasError = false; let hasError = false;
let isUpdateOperation = false; let isUpdateOperation = false;
let errorMsg = ''; let errorMsg = "";
const CheckUpdateQuantityOperations = { const CheckUpdateQuantityOperations = {
switchErrorStat: () => { switchErrorStat: () => {
@ -19,11 +19,14 @@ const CheckUpdateQuantityOperations = {
*/ */
const $checkoutBtn = $(prestashop.themeSelectors.checkout.btn); const $checkoutBtn = $(prestashop.themeSelectors.checkout.btn);
if ($(prestashop.themeSelectors.notifications.dangerAlert).length || (errorMsg !== '' && !hasError)) { if (
$checkoutBtn.addClass('disabled'); $(prestashop.themeSelectors.notifications.dangerAlert).length ||
(errorMsg !== "" && !hasError)
) {
$checkoutBtn.addClass("disabled");
} }
if (errorMsg !== '') { if (errorMsg !== "") {
const strError = ` const strError = `
<article class="alert alert-danger" role="alert" data-alert="danger"> <article class="alert alert-danger" role="alert" data-alert="danger">
<ul> <ul>
@ -32,17 +35,17 @@ const CheckUpdateQuantityOperations = {
</article> </article>
`; `;
$(prestashop.themeSelectors.notifications.container).html(strError); $(prestashop.themeSelectors.notifications.container).html(strError);
errorMsg = ''; errorMsg = "";
isUpdateOperation = false; isUpdateOperation = false;
if (hasError) { if (hasError) {
// if hasError is true, quantity was not updated : allow checkout // if hasError is true, quantity was not updated : allow checkout
$checkoutBtn.removeClass('disabled'); $checkoutBtn.removeClass("disabled");
} }
} else if (!hasError && isUpdateOperation) { } else if (!hasError && isUpdateOperation) {
hasError = false; hasError = false;
isUpdateOperation = false; isUpdateOperation = false;
$(prestashop.themeSelectors.notifications.container).html(''); $(prestashop.themeSelectors.notifications.container).html("");
$checkoutBtn.removeClass('disabled'); $checkoutBtn.removeClass("disabled");
} }
}, },
checkUpdateOperation: (resp) => { checkUpdateOperation: (resp) => {
@ -52,11 +55,11 @@ const CheckUpdateQuantityOperations = {
*/ */
const { hasError: hasErrorOccurred, errors: errorData } = resp; const { hasError: hasErrorOccurred, errors: errorData } = resp;
hasError = hasErrorOccurred ?? false; hasError = hasErrorOccurred ?? false;
const errors = errorData ?? ''; const errors = errorData ?? "";
// 1.7.2.x returns errors as string, 1.7.3.x returns array // 1.7.2.x returns errors as string, 1.7.3.x returns array
if (errors instanceof Array) { if (errors instanceof Array) {
errorMsg = errors.join(' '); errorMsg = errors.join(" ");
} else { } else {
errorMsg = errors; errorMsg = errors;
} }
@ -71,17 +74,12 @@ const CheckUpdateQuantityOperations = {
function createSpin() { function createSpin() {
$.each($(spinnerSelector), (index, spinner) => { $.each($(spinnerSelector), (index, spinner) => {
$(spinner).TouchSpin({ $(spinner).TouchSpin({
verticalbuttons: true, min: parseInt($(spinner).attr("min"), 10),
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),
max: 1000000, max: 1000000,
}); });
}); });
$(prestashop.themeSelectors.touchspin).off('touchstart.touchspin'); $(prestashop.themeSelectors.touchspin).off("touchstart.touchspin");
CheckUpdateQuantityOperations.switchErrorStat(); CheckUpdateQuantityOperations.switchErrorStat();
} }
@ -96,35 +94,41 @@ const preventCustomModalOpen = (event) => {
return true; return true;
}; };
$(function () { $(function () {
const productLineInCartSelector = prestashop.themeSelectors.cart.productLineQty; const productLineInCartSelector =
prestashop.themeSelectors.cart.productLineQty;
const promises = []; const promises = [];
prestashop.on('updatedCart', () => { prestashop.on("updatedCart", () => {
window.shouldPreventModal = false; window.shouldPreventModal = false;
$(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => { $(prestashop.themeSelectors.product.customizationModal).on(
"show.bs.modal",
(modalEvent) => {
preventCustomModalOpen(modalEvent); preventCustomModalOpen(modalEvent);
}); },
);
createSpin(); createSpin();
}); });
createSpin(); createSpin();
const $body = $('body'); const $body = $("body");
function isTouchSpin(namespace) { function isTouchSpin(namespace) {
return namespace === 'on.startupspin' || namespace === 'on.startdownspin'; return namespace === "on.startupspin" || namespace === "on.startdownspin";
} }
function shouldIncreaseProductQuantity(namespace) { function shouldIncreaseProductQuantity(namespace) {
return namespace === 'on.startupspin'; return namespace === "on.startupspin";
} }
function findCartLineProductQuantityInput($target) { 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; return null;
} }
@ -132,10 +136,10 @@ $(function() {
} }
function camelize(subject) { function camelize(subject) {
const actionTypeParts = subject.split('-'); const actionTypeParts = subject.split("-");
let i; let i;
let part; let part;
let camelizedSubject = ''; let camelizedSubject = "";
for (i = 0; i < actionTypeParts.length; i += 1) { for (i = 0; i < actionTypeParts.length; i += 1) {
part = actionTypeParts[i]; part = actionTypeParts[i];
@ -153,8 +157,8 @@ $(function() {
function parseCartAction($target, namespace) { function parseCartAction($target, namespace) {
if (!isTouchSpin(namespace)) { if (!isTouchSpin(namespace)) {
return { return {
url: $target.attr('href'), url: $target.attr("href"),
type: camelize($target.data('link-action')), type: camelize($target.data("link-action")),
}; };
} }
@ -168,13 +172,13 @@ $(function() {
if (shouldIncreaseProductQuantity(namespace)) { if (shouldIncreaseProductQuantity(namespace)) {
cartAction = { cartAction = {
url: $input.data('up-url'), url: $input.data("up-url"),
type: 'increaseProductQuantity', type: "increaseProductQuantity",
}; };
} else { } else {
cartAction = { cartAction = {
url: $input.data('down-url'), url: $input.data("down-url"),
type: 'decreaseProductQuantity', type: "decreaseProductQuantity",
}; };
} }
@ -189,11 +193,15 @@ $(function() {
} }
}; };
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); preventCustomModalOpen(modalEvent);
}); },
);
const handleCartAction = (event) => { const handleCartAction = (event) => {
abortPreviousRequests(); abortPreviousRequests();
@ -204,8 +212,8 @@ $(function() {
const { dataset } = event.currentTarget; const { dataset } = event.currentTarget;
const cartAction = parseCartAction($target, event.namespace); const cartAction = parseCartAction($target, event.namespace);
const requestData = { const requestData = {
ajax: '1', ajax: "1",
action: 'update', action: "update",
}; };
if (!cartAction) { if (!cartAction) {
@ -214,9 +222,9 @@ $(function() {
$.ajax({ $.ajax({
url: cartAction.url, url: cartAction.url,
method: 'POST', method: "POST",
data: requestData, data: requestData,
dataType: 'json', dataType: "json",
beforeSend(jqXHR) { beforeSend(jqXHR) {
promises.push(jqXHR); promises.push(jqXHR);
}, },
@ -227,31 +235,35 @@ $(function() {
$quantityInput.val(resp.quantity); $quantityInput.val(resp.quantity);
// Refresh cart preview // Refresh cart preview
prestashop.emit('updateCart', { prestashop.emit("updateCart", {
reason: dataset, reason: dataset,
resp, resp,
}); });
}) })
.fail((resp) => { .fail((resp) => {
prestashop.emit('handleError', { prestashop.emit("handleError", {
eventType: 'updateProductInCart', eventType: "updateProductInCart",
resp, resp,
cartAction: cartAction.type, 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(); abortPreviousRequests();
window.shouldPreventModal = true; window.shouldPreventModal = true;
return $.ajax({ return $.ajax({
url: updateQuantityInCartUrl, url: updateQuantityInCartUrl,
method: 'POST', method: "POST",
data: requestData, data: requestData,
dataType: 'json', dataType: "json",
beforeSend(jqXHR) { beforeSend(jqXHR) {
promises.push(jqXHR); promises.push(jqXHR);
}, },
@ -260,44 +272,48 @@ $(function() {
CheckUpdateQuantityOperations.checkUpdateOperation(resp); CheckUpdateQuantityOperations.checkUpdateOperation(resp);
$target.val(resp.quantity); $target.val(resp.quantity);
const dataset = ($target && $target.dataset) ? $target.dataset : resp; const dataset = $target && $target.dataset ? $target.dataset : resp;
// Refresh cart preview // Refresh cart preview
prestashop.emit('updateCart', { prestashop.emit("updateCart", {
reason: dataset, reason: dataset,
resp, resp,
}); });
}) })
.fail((resp) => { .fail((resp) => {
prestashop.emit('handleError', { prestashop.emit("handleError", {
eventType: 'updateProductQuantityInCart', eventType: "updateProductQuantityInCart",
resp, resp,
}); });
}); });
} }
function getQuantityChangeType($quantity) { function getQuantityChangeType($quantity) {
return $quantity > 0 ? 'up' : 'down'; return $quantity > 0 ? "up" : "down";
} }
function getRequestData(quantity) { function getRequestData(quantity) {
return { return {
ajax: '1', ajax: "1",
qty: Math.abs(quantity), qty: Math.abs(quantity),
action: 'update', action: "update",
op: getQuantityChangeType(quantity), op: getQuantityChangeType(quantity),
}; };
} }
function updateProductQuantityInCart(event) { function updateProductQuantityInCart(event) {
const $target = $(event.currentTarget); const $target = $(event.currentTarget);
const updateQuantityInCartUrl = $target.data('update-url'); const updateQuantityInCartUrl = $target.data("update-url");
const baseValue = $target.attr('value'); const baseValue = $target.attr("value");
// There should be a valid product quantity in cart // There should be a valid product quantity in cart
const targetValue = $target.val(); const targetValue = $target.val();
/* eslint-disable */ /* eslint-disable */
if (targetValue != parseInt(targetValue, 10) || targetValue < 0 || isNaN(targetValue)) { if (
targetValue != parseInt(targetValue, 10) ||
targetValue < 0 ||
isNaN(targetValue)
) {
window.shouldPreventModal = false; window.shouldPreventModal = false;
$target.val(baseValue); $target.val(baseValue);
return; return;
@ -310,18 +326,29 @@ $(function() {
return; return;
} }
if (targetValue === '0') { if (targetValue === "0") {
$target.closest('.product-line-actions').find('[data-link-action="delete-from-cart"]').click(); $target
.closest(".product-line-actions")
.find('[data-link-action="delete-from-cart"]')
.click();
} else { } else {
$target.attr('value', targetValue); $target.attr("value", targetValue);
sendUpdateQuantityInCartRequest(updateQuantityInCartUrl, getRequestData(qty), $target); sendUpdateQuantityInCartRequest(
updateQuantityInCartUrl,
getRequestData(qty),
$target,
);
} }
} }
$body.on('touchspin.on.stopspin', spinnerSelector, debounce(updateProductQuantityInCart)); $body.on(
"touchspin.on.stopspin",
spinnerSelector,
debounce(updateProductQuantityInCart),
);
$body.on('focusout keyup', productLineInCartSelector, (event) => { $body.on("focusout keyup", productLineInCartSelector, (event) => {
if (event.type === 'keyup') { if (event.type === "keyup") {
if (event.keyCode === 13) { if (event.keyCode === 13) {
isUpdateOperation = true; isUpdateOperation = true;
updateProductQuantityInCart(event); updateProductQuantityInCart(event);
@ -339,21 +366,25 @@ $(function() {
const $timeoutEffect = 400; const $timeoutEffect = 400;
$body.on('hidden.bs.collapse', prestashop.themeSelectors.cart.promoCode, () => { $body.on(
"hidden.bs.collapse",
prestashop.themeSelectors.cart.promoCode,
() => {
$(prestashop.themeSelectors.cart.displayPromo).show($timeoutEffect); $(prestashop.themeSelectors.cart.displayPromo).show($timeoutEffect);
}); },
);
$body.on('click', prestashop.themeSelectors.cart.promoCodeButton, (event) => { $body.on("click", prestashop.themeSelectors.cart.promoCodeButton, (event) => {
event.preventDefault(); event.preventDefault();
$(prestashop.themeSelectors.cart.promoCode).collapse('toggle'); $(prestashop.themeSelectors.cart.promoCode).collapse("toggle");
}); });
$body.on('click', prestashop.themeSelectors.cart.displayPromo, (event) => { $body.on("click", prestashop.themeSelectors.cart.displayPromo, (event) => {
$(event.currentTarget).hide($timeoutEffect); $(event.currentTarget).hide($timeoutEffect);
}); });
$body.on('click', prestashop.themeSelectors.cart.discountCode, (event) => { $body.on("click", prestashop.themeSelectors.cart.discountCode, (event) => {
event.stopPropagation(); event.stopPropagation();
const $code = $(event.currentTarget); const $code = $(event.currentTarget);
@ -361,9 +392,9 @@ $(function() {
$discountInput.val($code.text()); $discountInput.val($code.text());
// Show promo code field // Show promo code field
$(prestashop.themeSelectors.cart.promoCode).collapse('show'); $(prestashop.themeSelectors.cart.promoCode).collapse("show");
$(prestashop.themeSelectors.cart.displayPromo).hide($timeoutEffect); $(prestashop.themeSelectors.cart.displayPromo).hide($timeoutEffect);
return false; return false;
}); });
}) });

40
_dev/js/listing.js
View File

@ -67,9 +67,18 @@ $(document).ready(() => {
$(event.currentTarget).addClass('selected'); $(event.currentTarget).addClass('selected');
// Get data from thumbnail and update cover src, alt and title // Get data from thumbnail and update cover src, alt and title
$(prestashop.themeSelectors.product.cover).attr('src', $(event.target).data('image-large-src')); $(prestashop.themeSelectors.product.cover).attr(
$(prestashop.themeSelectors.product.cover).attr('alt', $(event.target).attr('alt')); 'src',
$(prestashop.themeSelectors.product.cover).attr('title', $(event.target).attr('title')); $(event.target).data('image-large-src'),
);
$(prestashop.themeSelectors.product.cover).attr(
'alt',
$(event.target).attr('alt'),
);
$(prestashop.themeSelectors.product.cover).attr(
'title',
$(event.target).attr('title'),
);
// Get data from thumbnail and update cover sources // Get data from thumbnail and update cover sources
updateSources( updateSources(
@ -99,10 +108,6 @@ $(document).ready(() => {
} }
qv.find(prestashop.selectors.quantityWanted).TouchSpin({ qv.find(prestashop.selectors.quantityWanted).TouchSpin({
verticalbuttons: true, verticalbuttons: true,
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: 1, min: 1,
max: 1000000, max: 1000000,
}); });
@ -194,9 +199,13 @@ $(document).ready(() => {
const productSelectors = $(prestashop.themeSelectors.listing.product); const productSelectors = $(prestashop.themeSelectors.listing.product);
if (productSelectors.length > 0) { if (productSelectors.length > 0) {
productSelectors.removeClass().addClass(productSelectors.first().attr('class')); productSelectors
.removeClass()
.addClass(productSelectors.first().attr('class'));
} else { } else {
productSelectors.removeClass().addClass(renderedProducts.first().attr('class')); productSelectors
.removeClass()
.addClass(renderedProducts.first().attr('class'));
} }
$(prestashop.themeSelectors.listing.list).replaceWith(renderedProducts); $(prestashop.themeSelectors.listing.list).replaceWith(renderedProducts);
@ -230,15 +239,14 @@ $(document).ready(() => {
}, },
); );
$('body').on('click', prestashop.themeSelectors.listing.searchLink, (event) => { $('body').on(
'click',
prestashop.themeSelectors.listing.searchLink,
(event) => {
event.preventDefault(); event.preventDefault();
prestashop.emit( prestashop.emit('updateFacets', $(event.target).closest('a').get(0).href);
'updateFacets', },
$(event.target)
.closest('a')
.get(0).href,
); );
});
window.addEventListener('popstate', (e) => { window.addEventListener('popstate', (e) => {
if (e.state && e.state.current_url) { if (e.state && e.state.current_url) {

60
assets/css/theme.css
View File

@ -1098,6 +1098,10 @@ select {
width: max-content; width: max-content;
} }
.w-4 {
width: 1rem;
}
.max-w-6xl { .max-w-6xl {
max-width: 72rem; max-width: 72rem;
} }
@ -1280,6 +1284,10 @@ select {
border-top-width: 1px; border-top-width: 1px;
} }
.border-none {
border-style: none;
}
.border-blue-300 { .border-blue-300 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(147 197 253 / var(--tw-border-opacity)); border-color: rgb(147 197 253 / var(--tw-border-opacity));
@ -1695,6 +1703,11 @@ select {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.drop-shadow-lg { .drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -1802,6 +1815,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
background-color: rgb(229 231 235 / var(--tw-bg-opacity)); background-color: rgb(229 231 235 / var(--tw-bg-opacity));
} }
.focus-within\:border-none:focus-within {
border-style: none;
}
.hover\:border-blue-900:hover { .hover\:border-blue-900:hover {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(30 58 138 / var(--tw-border-opacity)); border-color: rgb(30 58 138 / var(--tw-border-opacity));
@ -1863,12 +1880,55 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
border-width: 0px; border-width: 0px;
} }
.focus\:border-b-2:focus {
border-bottom-width: 2px;
}
.focus\:border-none:focus {
border-style: none;
}
.focus\:border-red-100:focus {
--tw-border-opacity: 1;
border-color: rgb(254 226 226 / var(--tw-border-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus { .focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} }
.focus\:ring-0:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.active\:border-b-2:active {
border-bottom-width: 2px;
}
.active\:border-none:active {
border-style: none;
}
.active\:outline-none:active {
outline: 2px solid transparent;
outline-offset: 2px;
}
.active\:ring-0:active {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.disabled\:bg-gray-600:disabled { .disabled\:bg-gray-600:disabled {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity)); background-color: rgb(75 85 99 / var(--tw-bg-opacity));

71
assets/js/theme.js
View File

File diff suppressed because one or more lines are too long

5
templates/checkout/_partials/cart-detailed-product-line.tpl
View File

@ -27,7 +27,7 @@
<div class="w-40 h-40"> <div class="w-40 h-40">
<img class="object-cover w-full h-full" src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}"> <img class="object-cover w-full h-full" src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}">
</div> </div>
<div class="flex flex-1 flex-col gap-2"> <div class="flex flex-1 max-md:items-center flex-col gap-2">
<div class="product-line-info flex flex-col"> <div class="product-line-info flex flex-col">
<a class="label text-lg font-semibold" href="{$product.url}" data-id_customization="{$product.id_customization|intval}">{$product.name}</a> <a class="label text-lg font-semibold" href="{$product.url}" data-id_customization="{$product.id_customization|intval}">{$product.name}</a>
{if is_array($product.customizations) && $product.customizations|count} {if is_array($product.customizations) && $product.customizations|count}
@ -71,12 +71,11 @@
</div> </div>
<div class="flex items-center w-max"> <div class="flex items-center w-max">
<input <input
class="js-cart-line-product-quantity px-2 py-1 w-12" class="js-cart-line-product-quantity text-center w-8 border-none active:ring-0 focus:ring-0"
data-down-url="{$product.down_quantity_url}" data-down-url="{$product.down_quantity_url}"
data-up-url="{$product.up_quantity_url}" data-up-url="{$product.up_quantity_url}"
data-update-url="{$product.update_quantity_url}" data-update-url="{$product.update_quantity_url}"
data-product-id="{$product.id_product}" data-product-id="{$product.id_product}"
type="number"
value="{$product.quantity}" value="{$product.quantity}"
name="product-quantity-spin" name="product-quantity-spin"
min="{$product.minimal_quantity}" min="{$product.minimal_quantity}"