forked from brooksbingham/theme-elegance
refactor: update cart page styles
parent
0a1add6881
commit
fbc0ff69c4
195
_dev/js/cart.js
195
_dev/js/cart.js
|
|
@ -1,6 +1,6 @@
|
|||
import $ from 'jquery';
|
||||
import prestashop from 'prestashop';
|
||||
import debounce from './components/debounce';
|
||||
import $ from "jquery";
|
||||
import prestashop from "prestashop";
|
||||
import debounce from "./components/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>
|
||||
|
|
@ -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) => {
|
||||
|
|
@ -50,13 +53,13 @@ const CheckUpdateQuantityOperations = {
|
|||
* resp.hasError can be not defined but resp.errors not empty: quantity is updated but order cannot be placed
|
||||
* when resp.hasError=true, quantity is not updated
|
||||
*/
|
||||
const {hasError: hasErrorOccurred, errors: errorData} = resp;
|
||||
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,17 +74,12 @@ const CheckUpdateQuantityOperations = {
|
|||
function createSpin() {
|
||||
$.each($(spinnerSelector), (index, spinner) => {
|
||||
$(spinner).TouchSpin({
|
||||
verticalbuttons: true,
|
||||
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),
|
||||
min: parseInt($(spinner).attr("min"), 10),
|
||||
max: 1000000,
|
||||
});
|
||||
});
|
||||
|
||||
$(prestashop.themeSelectors.touchspin).off('touchstart.touchspin');
|
||||
$(prestashop.themeSelectors.touchspin).off("touchstart.touchspin");
|
||||
|
||||
CheckUpdateQuantityOperations.switchErrorStat();
|
||||
}
|
||||
|
|
@ -95,36 +93,42 @@ const preventCustomModalOpen = (event) => {
|
|||
|
||||
return true;
|
||||
};
|
||||
$(function() {
|
||||
const productLineInCartSelector = prestashop.themeSelectors.cart.productLineQty;
|
||||
$(function () {
|
||||
const productLineInCartSelector =
|
||||
prestashop.themeSelectors.cart.productLineQty;
|
||||
const promises = [];
|
||||
|
||||
prestashop.on('updatedCart', () => {
|
||||
prestashop.on("updatedCart", () => {
|
||||
window.shouldPreventModal = false;
|
||||
|
||||
$(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => {
|
||||
preventCustomModalOpen(modalEvent);
|
||||
});
|
||||
$(prestashop.themeSelectors.product.customizationModal).on(
|
||||
"show.bs.modal",
|
||||
(modalEvent) => {
|
||||
preventCustomModalOpen(modalEvent);
|
||||
},
|
||||
);
|
||||
|
||||
createSpin();
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -132,10 +136,10 @@ $(function() {
|
|||
}
|
||||
|
||||
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];
|
||||
|
|
@ -153,8 +157,8 @@ $(function() {
|
|||
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")),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -168,13 +172,13 @@ $(function() {
|
|||
|
||||
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",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -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) => {
|
||||
preventCustomModalOpen(modalEvent);
|
||||
});
|
||||
$(prestashop.themeSelectors.product.customizationModal).on(
|
||||
"show.bs.modal",
|
||||
(modalEvent) => {
|
||||
preventCustomModalOpen(modalEvent);
|
||||
},
|
||||
);
|
||||
|
||||
const handleCartAction = (event) => {
|
||||
abortPreviousRequests();
|
||||
|
|
@ -201,11 +209,11 @@ $(function() {
|
|||
event.preventDefault();
|
||||
|
||||
const $target = $(event.currentTarget);
|
||||
const {dataset} = event.currentTarget;
|
||||
const { dataset } = event.currentTarget;
|
||||
const cartAction = parseCartAction($target, event.namespace);
|
||||
const requestData = {
|
||||
ajax: '1',
|
||||
action: 'update',
|
||||
ajax: "1",
|
||||
action: "update",
|
||||
};
|
||||
|
||||
if (!cartAction) {
|
||||
|
|
@ -214,9 +222,9 @@ $(function() {
|
|||
|
||||
$.ajax({
|
||||
url: cartAction.url,
|
||||
method: 'POST',
|
||||
method: "POST",
|
||||
data: requestData,
|
||||
dataType: 'json',
|
||||
dataType: "json",
|
||||
beforeSend(jqXHR) {
|
||||
promises.push(jqXHR);
|
||||
},
|
||||
|
|
@ -227,31 +235,35 @@ $(function() {
|
|||
$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);
|
||||
},
|
||||
|
|
@ -260,44 +272,48 @@ $(function() {
|
|||
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 || isNaN(targetValue)) {
|
||||
if (
|
||||
targetValue != parseInt(targetValue, 10) ||
|
||||
targetValue < 0 ||
|
||||
isNaN(targetValue)
|
||||
) {
|
||||
window.shouldPreventModal = false;
|
||||
$target.val(baseValue);
|
||||
return;
|
||||
|
|
@ -310,18 +326,29 @@ $(function() {
|
|||
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(
|
||||
"touchspin.on.stopspin",
|
||||
spinnerSelector,
|
||||
debounce(updateProductQuantityInCart),
|
||||
);
|
||||
|
||||
$body.on('focusout keyup', productLineInCartSelector, (event) => {
|
||||
if (event.type === 'keyup') {
|
||||
$body.on("focusout keyup", productLineInCartSelector, (event) => {
|
||||
if (event.type === "keyup") {
|
||||
if (event.keyCode === 13) {
|
||||
isUpdateOperation = true;
|
||||
updateProductQuantityInCart(event);
|
||||
|
|
@ -339,21 +366,25 @@ $(function() {
|
|||
|
||||
const $timeoutEffect = 400;
|
||||
|
||||
$body.on('hidden.bs.collapse', prestashop.themeSelectors.cart.promoCode, () => {
|
||||
$(prestashop.themeSelectors.cart.displayPromo).show($timeoutEffect);
|
||||
});
|
||||
$body.on(
|
||||
"hidden.bs.collapse",
|
||||
prestashop.themeSelectors.cart.promoCode,
|
||||
() => {
|
||||
$(prestashop.themeSelectors.cart.displayPromo).show($timeoutEffect);
|
||||
},
|
||||
);
|
||||
|
||||
$body.on('click', prestashop.themeSelectors.cart.promoCodeButton, (event) => {
|
||||
$body.on("click", prestashop.themeSelectors.cart.promoCodeButton, (event) => {
|
||||
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);
|
||||
});
|
||||
|
||||
$body.on('click', prestashop.themeSelectors.cart.discountCode, (event) => {
|
||||
$body.on("click", prestashop.themeSelectors.cart.discountCode, (event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
const $code = $(event.currentTarget);
|
||||
|
|
@ -361,9 +392,9 @@ $(function() {
|
|||
|
||||
$discountInput.val($code.text());
|
||||
// Show promo code field
|
||||
$(prestashop.themeSelectors.cart.promoCode).collapse('show');
|
||||
$(prestashop.themeSelectors.cart.promoCode).collapse("show");
|
||||
$(prestashop.themeSelectors.cart.displayPromo).hide($timeoutEffect);
|
||||
|
||||
return false;
|
||||
});
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -67,9 +67,18 @@ $(document).ready(() => {
|
|||
$(event.currentTarget).addClass('selected');
|
||||
|
||||
// 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('alt', $(event.target).attr('alt'));
|
||||
$(prestashop.themeSelectors.product.cover).attr('title', $(event.target).attr('title'));
|
||||
$(prestashop.themeSelectors.product.cover).attr(
|
||||
'src',
|
||||
$(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
|
||||
updateSources(
|
||||
|
|
@ -99,10 +108,6 @@ $(document).ready(() => {
|
|||
}
|
||||
qv.find(prestashop.selectors.quantityWanted).TouchSpin({
|
||||
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,
|
||||
max: 1000000,
|
||||
});
|
||||
|
|
@ -194,9 +199,13 @@ $(document).ready(() => {
|
|||
const productSelectors = $(prestashop.themeSelectors.listing.product);
|
||||
|
||||
if (productSelectors.length > 0) {
|
||||
productSelectors.removeClass().addClass(productSelectors.first().attr('class'));
|
||||
productSelectors
|
||||
.removeClass()
|
||||
.addClass(productSelectors.first().attr('class'));
|
||||
} else {
|
||||
productSelectors.removeClass().addClass(renderedProducts.first().attr('class'));
|
||||
productSelectors
|
||||
.removeClass()
|
||||
.addClass(renderedProducts.first().attr('class'));
|
||||
}
|
||||
|
||||
$(prestashop.themeSelectors.listing.list).replaceWith(renderedProducts);
|
||||
|
|
@ -230,15 +239,14 @@ $(document).ready(() => {
|
|||
},
|
||||
);
|
||||
|
||||
$('body').on('click', prestashop.themeSelectors.listing.searchLink, (event) => {
|
||||
event.preventDefault();
|
||||
prestashop.emit(
|
||||
'updateFacets',
|
||||
$(event.target)
|
||||
.closest('a')
|
||||
.get(0).href,
|
||||
);
|
||||
});
|
||||
$('body').on(
|
||||
'click',
|
||||
prestashop.themeSelectors.listing.searchLink,
|
||||
(event) => {
|
||||
event.preventDefault();
|
||||
prestashop.emit('updateFacets', $(event.target).closest('a').get(0).href);
|
||||
},
|
||||
);
|
||||
|
||||
window.addEventListener('popstate', (e) => {
|
||||
if (e.state && e.state.current_url) {
|
||||
|
|
|
|||
|
|
@ -1098,6 +1098,10 @@ select {
|
|||
width: max-content;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.max-w-6xl {
|
||||
max-width: 72rem;
|
||||
}
|
||||
|
|
@ -1280,6 +1284,10 @@ select {
|
|||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.border-none {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.border-blue-300 {
|
||||
--tw-border-opacity: 1;
|
||||
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);
|
||||
}
|
||||
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.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));
|
||||
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));
|
||||
}
|
||||
|
||||
.focus-within\:border-none:focus-within {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.hover\:border-blue-900:hover {
|
||||
--tw-border-opacity: 1;
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
--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);
|
||||
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 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -27,7 +27,7 @@
|
|||
<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'}">
|
||||
</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">
|
||||
<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}
|
||||
|
|
@ -71,12 +71,11 @@
|
|||
</div>
|
||||
<div class="flex items-center w-max">
|
||||
<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-up-url="{$product.up_quantity_url}"
|
||||
data-update-url="{$product.update_quantity_url}"
|
||||
data-product-id="{$product.id_product}"
|
||||
type="number"
|
||||
value="{$product.quantity}"
|
||||
name="product-quantity-spin"
|
||||
min="{$product.minimal_quantity}"
|
||||
|
|
|
|||
Loading…
Reference in New Issue