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

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.

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.

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é!

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...}

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>

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