Confirmation ajout panier après modal ajax

[kate66]

BOnjour je souhaite modifier le module Ajax add to carte qui est de base dans prestashop 1.7.8 pour désactiver l'ajout au panier au clic sur le bouton ajouter au panier et lors de l'affiche du popup Ajax ajout au panier plutôt que d'avoir continuer mes achats ou commander il y a un bouton pour confirmer l'ajout au panier et n'ajoute le produit au panier que apres confirmation sur ce bouton.

 

J'ai essayé de modifier le module avec le controller mais l'ajout se fait tout le temps quand même avant.

 

Une idée ? Merci 

[Divine]

Bonjour,

Votre demande n'est pas très claire... je ne comprends pas ce que vous cherchez à faire exactement, ou alors je suis fatiguée 😅
Pourriez-vous essayer d'expliquer un peu mieux votre besoin ?

[yama]

Si j'ai bien compris, vous voulez un bouton sur la page produit pour ouvrir un modal.

Et dans ce modal, il y aura un bouton "ajouter au panier".

 

Si c'est ca, sauf si y'a vraiment une tres bonne raison, je ne pense pas que ce soit une bonne idee.

Vaut mieux directement virer le modal que vous n'aimez pas et conserver le bouton "ajouter au panier" sur la page produit.

Edited October 16 by yama (see edit history)

[kate66]

Bonsoir désolé je n'ai pas été trés claire.

Le comportement actuel est que sur chaque fiche produit on a un bouton ajouter au panier qui met le produit en panier directement et qui ouvre une fenetre ajax pour demander si on veut commander ou continuer nos achats.

Je souhaite en 1er desactiver le comportement que quand on clic sur ajouter au panier il ouvre la fenetre modale sans ajouter au panier et un nouveau bouton de confirmation d'ajout au panier s'affiche.

En gros une sorte de confirmation de mise en panier lors du clic sur le bouton ajouter au panier.

Merci

[kate66]

J'ai reussi a travailler j'ai desactiver ajax panier et créer dans theme.js un code pour afficher un modal mais le panier reste vide meme si le logs sont ok:

 

JQMIGRATE: Migrate is installed, version 3.1.0
theme.js:374 Page is ready, script is loaded
theme.js:390 Modale affichée
theme.js:395 Clic sur "Confirmer" dans la modale
theme.js:401 ID Produit: 8061, Quantité: 1
theme.js:440 Modale fermée après confirmation
theme.js:415 Réponse complète de la requête AJAX : {"success":true,"id_product":8061,"id_product_attribute":0,"id_customization":0,"quantity":0,"cart":{"products":[],"totals":{"total":{"type":"total","label":"Total","amount":0,"value":"0,00\u00a0\u20ac"},"total_including_tax":{"type":"total","label":"Total TTC","amount":0,"value":"0,00\u00a0\u20ac"},"total_excluding_tax":{"type":"total","label":"Total HT :","amount":0,"value":"0,00\u00a0\u20ac"}},"subtotals":{"products":{"type":"products","label":"Sous-total","amount":0,"value":"0,00\u00a0\u20ac"},"discounts":null,"shipping":{"type":"shipping","label":"Livraison","amount":0,"value":""},"tax":null},"products_count":0,"summary_string":"0 articles","labels":{"tax_short":"TTC","tax_long":"(TTC)"},"id_address_delivery":"499","id_address_invoice":"499","is_virtual":false,"vouchers":{"allowed":1,"added":[]},"discounts":[],"minimalPurchase":0,"minimalPurchaseRequired":""},"errors":""}
theme.js:429 Produit ajouté au panier avec succès
theme.js:424 Mini panier mis à jour

le theme.js :

$(document).ready(function() {
    console.log('Page is ready, script is loaded');  // Log pour vérifier que le script est bien chargé

    // Gestion du clic sur le bouton personnalisé "Ajouter au panier"
    $('#customAddToCartButton').on('click', function(event) {
        // Empêcher le comportement par défaut et la propagation des événements
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();

        // Vérifier si le bouton est désactivé
        if ($(this).is(':disabled')) {
            return;  // Ne rien faire si le produit est en rupture de stock
        }

        // Afficher la modale de confirmation
        $('#myCustomModal').modal('show');
        console.log('Modale affichée');
    });

    // Délégation d'événements pour le bouton "Confirmer" dans la modale
    $(document).on('click', '#confirmAddToCart', function() {
        console.log('Clic sur "Confirmer" dans la modale');

        // Récupération des informations du produit à partir de la page produit
        var productId = $('#add-to-cart-or-refresh').find('input[name="id_product"]').val(); // ID du produit
        var productQuantity = $('#quantity_wanted').val(); // Quantité sélectionnée par l'utilisateur

        console.log('ID Produit: ' + productId + ', Quantité: ' + productQuantity);

        // Appel AJAX pour ajouter le produit au panier
        $.ajax({
            type: 'POST',
            url: prestashop.urls.pages.cart,  // URL pour gérer le panier
            data: {
                ajax: '1',
                action: 'update',
                id_product: productId,
                qty: productQuantity,
                op: 'up'  // Opération pour ajouter au panier
            },
            success: function(response) {
                console.log('Réponse complète de la requête AJAX :', response);  // Ajoutez ce log

                if (response.hasError) {
                    alert('Erreur : Impossible d\'ajouter ce produit au panier.');
                    console.log('Erreur lors de l\'ajout au panier :', response.errors);
                } else {
                    // Mettre à jour le mini panier après l'ajout
                    $.get(prestashop.urls.pages.cart, function(data) {
                        $('#_desktop_cart').html($(data).find('#_desktop_cart').html());
                        console.log('Mini panier mis à jour');
                    });

                    // Afficher un message de succès à l'utilisateur
                    alert('Produit ajouté au panier avec succès !');
                    console.log('Produit ajouté au panier avec succès');
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Erreur AJAX :', errorThrown);
                alert('Erreur lors de la requête AJAX : ' + textStatus + ' - ' + errorThrown);
            }
        });

        // Cacher la modale après confirmation
        $('#myCustomModal').modal('hide');
        console.log('Modale fermée après confirmation');
    });

    // Gestion du clic sur le bouton "Annuler" dans la modale
    $('#myCustomModal').on('click', 'button[data-dismiss="modal"]', function(event) {
        console.log('Clic sur "Annuler", fermeture de la modale');
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();

        // Cacher la modale
        $('#myCustomModal').modal('hide');
        console.log('Modale fermée après annulation');
    });
});

et dans product-add-to-cart.tpl :

		  <div class="tvcart-btn-model">
    <button id="customAddToCartButton" class="tvall-inner-btn add-to-cart {if !$product.add_to_cart_url} disabled {/if}" type="button" {if !$product.add_to_cart_url} disabled {/if}>
        <i class="material-icons shopping-cart">&#xE547;</i>
        <span>{if !$product.add_to_cart_url}{l s='Out of stock' d='Shop.Theme.Actions'}{else}{l s='Add to cart' d='Shop.Theme.Actions'}{/if}</span>
    </button>


****
		<!-- Ajoutez ceci dans votre fichier .tpl -->
<div id="myCustomModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirmez votre action</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Voulez-vous vraiment ajouter ce produit au panier ?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-primary" id="confirmAddToCart">Oui, ajouter au panier</button> <!-- Assurez-vous que l'ID est correct -->
      </div>
    </div>
  </div>
</div>

merci pour vos conseil 

[Divine]

Merci pour ces explications plus claires. Je confirme que ce n'est pas forcément une bonne idée.
Pourquoi vouloir ajouter une étape au client qui souhaite mettre son produit au panier ? Cela va à l'encontre d'une bonne ergonomie.