Change Design Of Upsell Cart Prestige Theme

[Mcfly69290]

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 : 

<div class="upsell-grid-container">
<h3>Vous aimerez peut-être aussi</h3>
<div class="upsell-grid">
{% assign displayed_count = 0 %}
{% for item in cart.items %}
{% assign product = item.product %}
{% assign first_collection = product.collections.first %}

{% 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 %}
<div class="upsell-item">
<a href="{{ upsell_product.url }}">
{% assign product_media = upsell_product.media | where: 'media_type', 'video' %}
{% if product_media.size > 0 %}
<img src="{{ product_media.first.preview_image.src | img_url: '200x200' }}" alt="{{ upsell_product.title }}" class="upsell-product-image">
{% else %}
<img src="{{ upsell_product.featured_image | img_url: '200x200' }}" alt="{{ upsell_product.title }}" class="upsell-product-image">
{% endif %}
<p>{{ upsell_product.title }}</p>
<p>{{ upsell_product.price | money }}</p>
</a>

<!-- Bouton Ajouter au Panier -->
<button class="add-to-cart-btn" data-product-id="{{ upsell_product.id }}">Ajouter au panier</button>
</div>

{% assign displayed_count = displayed_count | plus: 1 %}
{% if displayed_count >= 3 %}
{% break %}
{% endif %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>

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 &colon; 

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
}
}
});

[Arif_Shopidevs]

Hello, Can you share your site url. so that we can check and give you proper anser.

[Mcfly69290]

https://www.futur-casa.com/?_ab=0&_fd=0&_sc=1

[Arif_Shopidevs]

Hello, Thank you for the url. but unfortunately after visit several single product page, I am unable to find the screen shot elements which you shared. Can you please give me the correct URL or how can I find that.
Are you using any app for that.

Thank you