Faire apparaître un mini-chariot lorsque j'ajoute un produit au panier magento 2

15

J'utilise magento 2.0.7, et ce que j'essaie de faire, c'est de faire apparaître le panier (le panier en haut à droite ajax minicart) lorsque j'y ajoute un produit, essentiellement le déclencher. J'ai essayé d'ajouter la classe "showcart" à mes classes de boutons Ajouter au panier, mais si je le fais, le bouton ouvre simplement le panier et n'ajoute plus le produit.

alexcr
la source

Réponses:

36

Ceci est ma première réponse sur ce site. J'ai eu du mal à essayer de faire fonctionner cela au cours des deux derniers jours et j'ai finalement pu le faire fonctionner, alors j'ai pensé que ce serait bien de le partager.

Tout d'abord, vous devez créer un module:

  • registration.php
  • etc / module.xml
  • view / frontend / layout / default.xml
  • voir / frontend / templates / minicart_open.phtml
  • voir / frontend / web / js / view / minicart_open.js

Étape 1. Vous devez ajouter un modèle au site. Pour ce faire, utilisez le fichier default.xml

<referenceContainer name="content">
  <block class="Magento\Framework\View\Element\Template" name="minicart.autoopen" template="Company_ModuleName::minicart_open.phtml"/>
</referenceContainer>

Étape 2. Ensuite, à l'intérieur de minicart_open.phtml, nous devons appeler notre fichier js (composant) en l'attachant à la div parent du minicart. Dans ce cas, [data-block = 'minicart']. Voir ce lien pour plus de détails.

<script type="text/x-magento-init">
{
     "[data-block='minicart']" : {
        "Company_ModuleName/js/view/minicart_open" : {}
     }
}
</script>

Étape 3. Et enfin, dans minicart_open.js, le code magique:

define(["jquery/ui","jquery"], function(Component, $){
    return function(config, element){
        var minicart = $(element);
        minicart.on('contentLoading', function () {
            minicart.on('contentUpdated', function () {
                minicart.find('[data-role="dropdownDialog"]').dropdownDialog("open");
            });
        });
    }
});

Fondamentalement, ce code étend les fonctionnalités du fichier vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jset indique qu'une fois l'appel AJAX terminé (contentUpdated), le minicart doit être ouvert.

Et c'est tout, une tâche simple avec beaucoup de théorie derrière. J'espère que cela aide.

pinicio
la source
Ça a marché comme sur des roulettes. Tks!
medina
Semble une bonne solution, pourquoi cela doit-il être un module? Est-ce que ces changements dans votre thème n'auraient pas le même effet?
Ben Crook
En plus de la réponse ci-dessus de @pinicio: Notez que la solution ne fonctionnera que si ajax est utilisé pour la fonction d'ajout au panier: magento.stackexchange.com/questions/125681/…
Soeren
1
Cela fonctionne sur la mise à jour du panier, car lorsque nous ajoutons un produit, cela fonctionne, mais cela ne devrait pas fonctionner lorsque nous supprimons l'article du panier. mais son fonctionnement à cette époque aussi.
Ronak Chauhan
Si j'essaie de supprimer un article du mini-panier, l'article ne supprime pas..ie) une fois que je clique sur l'icône de suppression, seulement après l'actualisation de la page, l'article supprimé est refleté
Sushivam
6

Cela peut être fait en modifiant simplement le fichier minicart.js.

Aller vers vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

Sous initialiser: fonction, vous verrez

$('[data-block="minicart"]').on('contentLoading', function (event) {

Remplacez la fonction par ce code.

$('[data-block="minicart"]').on('contentLoading', function (event) {
            addToCartCalls++;
            self.isLoading(true);
            $('[data-block="minicart"]').on('contentUpdated', function ()  {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");       
                setTimeout(function() {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
            }, 4000);
            });
        });

Vous pouvez modifier le délai d'expiration selon vos besoins.

téléchargez le fichier et nettoyez le cache en exécutant la commande

php bin/magento cache:clean

À votre santé!

Ajendra Panwar
la source
1
j'ai essayé celui-ci mais je
n'ai
Assurez-vous que vous n'avez aucun remplacement de ce fournisseur de fichier / magento / Magento_Checkout / view / web / js / view / minicart.js sous votre thème.
Ajendra Panwar
Vous ne devez jamais modifier directement les fichiers principaux. Au lieu de cela, modifiez-le dans votre thème ou un module personnalisé.
pinicio
Heureux que cela vous ait aidé :)
Ajendra Panwar
1
Cela a fonctionné comme un charme sur Magento 2.2.3. Tks tas!
médina
4

solution alternative: vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jsligne de contrôle : 100

$(document).trigger('ajax:addToCart', form.data().productSku);

Nous pourrions ajouter un fichier js personnalisé:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Catalog/js/view/minicart-open": {}
    }
}

Dans le js:

$(document).on('ajax:addToCart', function () {#code here...}
Jonas Chen
la source
2

Vous pouvez simplement utiliser ce code dans votre minicart.phtml ci-dessous de votre code de modèle. J'utilise ce code et cela fonctionne mieux. Tu peux l'essayer. Merci.

<script type="text/javascript">
    require(['jquery'], function ($) {
        $('.minicart-wrapper').on('contentLoading', function (event) {
            $('[data-block="minicart"]').on('contentUpdated', function () {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");
                setTimeout(function () {
                    $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
                }, 4000);
            });
        });
    });
</script>
Rafiqul Islam
la source
Merci de son travail ... Je veux apprendre le flux JS Magento. Comment cela fonctionne, veuillez partager un lien
55840
1

Cette réponse ci-dessus fonctionne mais il manque l'accolade de fermeture:

            $('[data-block="minicart"]').on('contentLoading', function (event) {
            addToCartCalls++;
            self.isLoading(true);
                $('[data-block="minicart"]').on('contentUpdated', function ()  {
                    $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");

                setTimeout(function() {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
                }, 4000);
            });
        });
Rich S
la source