ป๊อปอัป minicart เมื่อฉันเพิ่มผลิตภัณฑ์ลงในตะกร้า magento 2


15

ฉันใช้ magento 2.0.7 และสิ่งที่ฉันพยายามทำคือการป๊อปอัพรถเข็น (รถเข็น ajax minicart ด้านขวาบน) เมื่อฉันเพิ่มผลิตภัณฑ์ลงไป ฉันได้ลองเพิ่มคลาส "showcart" ลงในคลาสปุ่มสั่งซื้อของฉันแล้ว แต่ถ้าฉันทำเช่นนั้นปุ่มเพิ่งเปิดตะกร้าและไม่เพิ่มสินค้าอีกต่อไป ..

คำตอบ:


36

นี่คือคำตอบแรกของฉันในเว็บไซต์นี้ ฉันพยายามดิ้นรนเพื่อให้ได้งานนี้ในช่วงสองวันที่ผ่านมาและในที่สุดฉันก็สามารถทำงานได้ดังนั้นฉันจึงอยากแบ่งปันมัน

ก่อนอื่นคุณต้องสร้างโมดูล:

  • registration.php
  • etc / module.xml
  • ดู / ส่วนหน้า / รูปแบบ / default.xml
  • ดู / ส่วนหน้า / แม่ / minicart_open.phtml
  • มุมมอง / ส่วนหน้า / เว็บ / js / view / minicart_open.js

ขั้นตอนที่ 1คุณต้องเพิ่มเทมเพลตในเว็บไซต์ วิธีการทำเช่นนั้นโดยใช้ default.xml

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

ขั้นตอนที่ 2จากนั้นใน minicart_open.phtml เราจำเป็นต้องเรียกไฟล์ js ของเรา (ส่วนประกอบ) โดยแนบไฟล์นี้กับ div หลักของ minicart ในกรณีนี้ [data-block = 'minicart'] ดูลิงค์นี้สำหรับรายละเอียดเพิ่มเติม

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

ขั้นตอนที่ 3และในที่สุด minicart_open.js ภายในรหัสเวทย์มนตร์:

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

โดยพื้นฐานแล้วรหัสนี้จะขยายการทำงานของไฟล์vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jsและมันบอกว่าเมื่อการโทร AJAX เสร็จสมบูรณ์ (contentUpdated) ควรจะเปิด minicart

และนั่นเป็นงานง่ายที่มีทฤษฎีมากมายอยู่เบื้องหลัง หวังว่ามันจะช่วย


มันทำงานเหมือนจับใจ Tks!
เมดินา

ดูเหมือนการแก้ไขที่ดีทำไมจึงต้องเป็นโมดูล การเปลี่ยนแปลงในธีมของคุณจะไม่ส่งผลกระทบเหมือนเดิมหรือไม่
Ben Crook

นอกจากคำตอบข้างต้นจาก @pinicio: โปรดทราบว่าโซลูชันจะใช้งานได้หาก ajax ใช้สำหรับฟังก์ชั่นเพิ่มลงในรถเข็น: magento.stackexchange.com/questions/125681/ …
Soeren

1
มันใช้งานได้ในการอัปเดตรถเข็นเพราะเมื่อเราเพิ่มผลิตภัณฑ์มันใช้งานได้ แต่มันจะไม่ทำงานเมื่อเราลบรายการออกจากรถเข็น แต่มันทำงานในเวลานั้นด้วย
Ronak Chauhan

หากฉันลองลบรายการออกจากรถเข็นขนาดเล็กรายการนั้นจะไม่ลบ .. ฉัน) เมื่อฉันคลิกที่ไอคอนลบเฉพาะหลังจากที่รีเฟรชหน้าแล้วรายการที่ถูกลบจะได้รับการเติมใหม่
Sushivam

6

สามารถทำได้โดยการแก้ไขไฟล์ minicart.js

นำทางไปยัง vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

ภายใต้ initialize: function คุณจะเห็น

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

แทนที่ฟังก์ชั่นด้วยรหัสนี้

$('[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);
            });
        });

คุณสามารถเปลี่ยนการหมดเวลาตามความต้องการของคุณ

อัปโหลดไฟล์และล้างแคชโดยใช้คำสั่ง

php bin/magento cache:clean

ไชโย!


1
ฉันลองอันนี้ แต่ไม่ได้ผลฉันล้างแคช
inrsaurabh

ตรวจสอบให้แน่ใจว่าคุณไม่มีการแทนที่ผู้จำหน่ายไฟล์ / magento / Magento_Checkout / view / web / js / view / minicart.js ภายใต้ธีมของคุณ
Ajendra Panwar

1
คุณไม่ควรเปลี่ยนไฟล์หลักโดยตรง ให้เปลี่ยนภายในธีมหรือโมดูลที่กำหนดเองแทน
pinicio

ดีใจที่มันช่วยคุณ :)
Ajendra Panwar

1
มันทำงานได้อย่างยอดเยี่ยมใน Magento 2.2.3 Tks กอง!
medina

4

ทางเลือกอื่น: เช็คvendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jsไลน์: 100

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

เราสามารถเพิ่มไฟล์ js ที่กำหนดเอง:

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

ใน js:

$(document).on('ajax:addToCart', function () {#code here...}

2

เพียงคุณสามารถใช้รหัสนี้ใน minicart.phtml ด้านล่างของรหัสการสร้างเทมเพลตของคุณ ฉันใช้รหัสนี้และทำงานได้ดีขึ้น คุณสามารถลอง ขอบคุณ

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

ขอบคุณการทำงาน ... ฉันต้องการเรียนรู้ Magento JS flow มันทำงานอย่างไรโปรดแชร์ลิงก์
55840

1

คำตอบข้างต้นนี้ใช้งานได้ แต่ไม่มีวงเล็บปิดปิด:

            $('[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);
            });
        });
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.