ฉันใช้ magento 2.0.7 และสิ่งที่ฉันพยายามทำคือการป๊อปอัพรถเข็น (รถเข็น ajax minicart ด้านขวาบน) เมื่อฉันเพิ่มผลิตภัณฑ์ลงไป ฉันได้ลองเพิ่มคลาส "showcart" ลงในคลาสปุ่มสั่งซื้อของฉันแล้ว แต่ถ้าฉันทำเช่นนั้นปุ่มเพิ่งเปิดตะกร้าและไม่เพิ่มสินค้าอีกต่อไป ..
ฉันใช้ magento 2.0.7 และสิ่งที่ฉันพยายามทำคือการป๊อปอัพรถเข็น (รถเข็น ajax minicart ด้านขวาบน) เมื่อฉันเพิ่มผลิตภัณฑ์ลงไป ฉันได้ลองเพิ่มคลาส "showcart" ลงในคลาสปุ่มสั่งซื้อของฉันแล้ว แต่ถ้าฉันทำเช่นนั้นปุ่มเพิ่งเปิดตะกร้าและไม่เพิ่มสินค้าอีกต่อไป ..
คำตอบ:
นี่คือคำตอบแรกของฉันในเว็บไซต์นี้ ฉันพยายามดิ้นรนเพื่อให้ได้งานนี้ในช่วงสองวันที่ผ่านมาและในที่สุดฉันก็สามารถทำงานได้ดังนั้นฉันจึงอยากแบ่งปันมัน
ก่อนอื่นคุณต้องสร้างโมดูล:
ขั้นตอนที่ 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
และนั่นเป็นงานง่ายที่มีทฤษฎีมากมายอยู่เบื้องหลัง หวังว่ามันจะช่วย
สามารถทำได้โดยการแก้ไขไฟล์ 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
ไชโย!
ทางเลือกอื่น: เช็ค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...}
เพียงคุณสามารถใช้รหัสนี้ใน 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>
คำตอบข้างต้นนี้ใช้งานได้ แต่ไม่มีวงเล็บปิดปิด:
$('[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);
});
});