Hello i’d like to change 2 things of my upsell cart please :
-
1 : Reduce padding on top of the title to be centered.
-
2 : When the customer click on the ‘add to cart’ i’d like it to add directly to the drawer and refresh the drawer with the price.
I joint pictures.
I’m using prestige theme, here are the codes :
Html :
Vous aimerez peut-être aussi
{% if first_collection %}
{% assign upsell_products = first_collection.products %}
{% for upsell_product in upsell_products %}
{% assign product_in_cart = false %}
{% for cart_item in cart.items %}
{% if cart_item.product_id == upsell_product.id %}
{% assign product_in_cart = true %}
{% endif %}
{% endfor %}
{% unless product_in_cart %}
{% assign displayed_count = displayed_count | plus: 1 %}
{% if displayed_count >= 3 %}
{% break %}
{% endif %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
Css :
.upsell-grid-container {
margin-top: 20px;
text-align: center;
width: 100%; /* S’assurer que le conteneur prend toute la largeur */
}
.upsell-grid {
display: grid !important; /* Forcer l’utilisation du grid /
grid-template-columns: repeat(3, 1fr); / 3 produits côte à côte /
gap: 20px; / Espacement entre les produits /
max-width: 1200px; / Limiter la largeur maximale pour garder une bonne lisibilité */
margin-left: auto;
margin-right: auto;
}
.upsell-item {
border: 1px solid #eaeaea;
padding: 15px;
border-radius: 5px;
transition: box-shadow 0.3s ease;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 320px;
}
.upsell-item:hover {
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}
.upsell-product-image {
width: 120px;
height: 120px;
object-fit: contain;
margin-bottom: 10px;
}
.upsell-item h4 {
margin: 10px 0;
font-size: 16px;
font-weight: bold;
}
.upsell-item p {
margin: 5px 0 10px 0;
font-size: 14px;
}
/* Bouton minimaliste pour “Ajouter au panier” */
.add-to-cart-btn {
margin-top: auto;
background-color: transparent;
border: none;
color: #28a745;
font-size: 14px;
text-decoration: underline;
cursor: pointer;
padding: 0;
transition: color 0.3s ease;
}
.add-to-cart-btn:hover {
color: #218838;
}
/* Forcer 3 colonnes sur mobile /
@media only screen and (max-width: 768px) {
.upsell-grid {
grid-template-columns: repeat(3, 1fr) !important; / Toujours 3 colonnes sur mobile */
gap: 10px;
}
.upsell-item {
padding: 10px;
min-height: 300px;
}
.upsell-product-image {
width: 100px;
height: 100px;
}
.add-to-cart-btn {
font-size: 13px;
}
}
/* Forcer l’affichage en colonnes sur petits écrans /
@media only screen and (max-width: 480px) {
.upsell-grid {
grid-template-columns: repeat(3, 1fr) !important; / Toujours 3 colonnes même sur très petits écrans */
gap: 5px;
}
.upsell-item {
padding: 10px;
min-height: auto;
}
.upsell-product-image {
width: 90px;
height: 90px;
}
.add-to-cart-btn {
font-size: 12px;
}
}
Javascript :
document.addEventListener(‘DOMContentLoaded’, function() {
const addToCartButtons = document.querySelectorAll(‘.add-to-cart-btn’);
addToCartButtons.forEach(button => {
button.addEventListener(‘click’, function(event) {
event.preventDefault(); // Empêche le comportement par défaut (rediriger vers la page panier)
event.stopPropagation(); // Empêche l’événement de se propager aux autres éléments
event.stopImmediatePropagation(); // Empêche tout autre écouteur d’événements de s’exécuter
const productId = this.getAttribute(‘data-product-id’);
fetch(‘/cart/add.js’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
‘Accept’: ‘application/json’
},
body: JSON.stringify({
id: productId,
quantity: 1 // Par défaut, ajoute une unité
})
})
.then(response => response.json())
.then(data => {
console.log(‘Produit ajouté au panier !’);
updateDrawerCart(); // Fonction pour rafraîchir le drawer après l’ajout
})
.catch(error => {
console.error(‘Erreur:’, error);
alert(‘Une erreur est survenue lors de l'ajout au panier.’);
});
});
});
// Fonction pour actualiser le contenu du drawer après l’ajout au panier
function updateDrawerCart() {
fetch(‘/cart’)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html’);
const drawerCartContent = doc.querySelector(‘.cart-drawer-content’); // Sélecteur pour le contenu du drawer
document.querySelector(‘.cart-drawer-content’).innerHTML = drawerCartContent.innerHTML; // Remplacer le contenu
openDrawer(); // Ouvrir le drawer après mise à jour
})
.catch(error => {
console.error(‘Erreur lors de l'actualisation du drawer:’, error);
});
}
// Fonction pour ouvrir le drawer (si ce n’est pas automatique)
function openDrawer() {
const drawer = document.querySelector(‘.cart-drawer’);
if (drawer && !drawer.classList.contains(‘is-open’)) {
drawer.classList.add(‘is-open’); // Ajouter la classe qui ouvre le drawer
}
}
});