ฉันกำลังมีเพศสัมพันธ์ การค้า Drupal, DC หยิบใส่ตะกร้า ajax และ โมดูล Flyout การค้า.
นี่คือการกำหนดค่ามุมมองของฉัน:
เกี่ยวกับฉัน /รถเข็น
หน้า ฉันมีรูปแบบเริ่มต้น (มุมมอง) เพื่อเปลี่ยนปริมาณ ลบรายการ ฯลฯ...
ฉันยังมีแถบเลื่อนของผลิตภัณฑ์ ซึ่งต้องขอบคุณโมดูล "ajax add to cart" ทำให้ฉันสามารถเพิ่มสินค้าหลายรายการลงในรถเข็นได้
พฤติกรรมที่คาดหวัง:
- เมื่อใดก็ตามที่ฉันอัปเดตปริมาณหรือลบสินค้าออกจากเมนูลอย แบบฟอร์มจำเป็นต้องอัปเดต (รวมถึงยอดรวม)
- เมื่อใดก็ตามที่ฉันอัปเดตปริมาณหรือลบรายการออกจากแบบฟอร์ม จะต้องโหลดเมนูลอยใหม่ (รวมยอดรวม)
- เมื่อใดก็ตามที่ฉันอัปเดตปริมาณหรือนำออกจากแถบเลื่อน ทั้งเมนูลอยและแบบฟอร์มจำเป็นต้องอัปเดต
ใน js ฉันได้พยายามเรียกใช้ทีละปุ่มหลังจากคลิกปุ่มแล้ว โดยเรียกรหัส ajax ที่กำหนดเองเพื่อสร้างมุมมองและส่วนลอยขึ้นใหม่
/**
* โหลดมุมมองเนื้อหาของหน้าทั้งหมด (แบบฟอร์ม)
*/
ฟังก์ชัน rebuildViewPanier () {
//$("#commerce_cart_form-cart-ajax-wrapper").triggerHandler("รีเฟรชวิว");
$.ajax({
URL: "/ajax_update_cart_panier"
}).done(ฟังก์ชัน (ข้อมูล) {
ถ้า (ข้อมูล [3] !== ไม่ได้กำหนด) {
ให้ตัวเลือก = data[3]["ตัวเลือก"];
ให้ dataReplace = ข้อมูล [3]["ข้อมูล"];
ให้บล็อก = $ (ตัวเลือก);
block.html($(dataReplace));
}
});
}
/**
* รหัสจากโมดูล flyout
*/
ฟังก์ชัน rebuildBlockCart () {
ให้ el = document.querySelector (".cart-flyout");
// Drupal.cartFlyout.createFlyout();
ให้การตั้งค่า = drupalSettings.cartFlyout;
settings.use_quantity_count = จริง;
var model = ใหม่ Drupal.cartFlyout.CartBlockModel (การตั้งค่า);
Drupal.cartFlyout.models.push (รุ่น);
มุมมอง var = ใหม่ Drupal.cartFlyout.CartBlockView({
เอล: เอล,
รุ่น : รุ่น
});
var offcanvasView = ใหม่ Drupal.cartFlyout.CartOffcanvasView({
อื่น: Drupal.cartFlyout.offcanvas,
รุ่น : รุ่น
});
Drupal.cartFlyout.views.push (ดู);
Drupal.cartFlyout.views.push (offcanvasView);
Drupal.cartFlyout.fetchCarts();
}
พฤติกรรมจริง: สำหรับตอนนี้ การโต้ตอบระหว่าง 3 ส่วนของเพจจะเป็นแบบนี้
- Slider --> flyout :: ทำงาน (อัตโนมัติ)
- แบบฟอร์ม --> ตัวเลื่อน :: ทำงาน (อัตโนมัติ)
- Slider --> form :: KO (เมื่อฉันโหลดซ้ำด้วยตนเอง)
และนี่คือแถบเลื่อน-->รูปแบบที่ฉันติดอยู่
แบบฟอร์มไม่โหลดซ้ำ (ดังนั้นฉันจึงสร้างฟังก์ชัน ajax เพื่อโหลดด้วยตนเอง)
นี่คือวิธีที่ฉันสร้างใหม่:
$view_name = "commerce_cart_form";
$display_id = "ค่าเริ่มต้น";
$ดู = [
'#type' => 'มุมมอง',
'#name' => $view_name,
'#display_id' => $display_id,
'#arguments' => [$cart_id],
'#embed' => จริง,
];
$content = \Drupal::service('renderer')->render($view);
$response = ใหม่ AjaxResponse();
ส่งคืน $response->addCommand(new ReplaceCommand('#commerce_cart_form-cart-ajax-wrapper', $content));
ฟอร์มกำลังสร้างใหม่ แต่ฉันสูญเสียกิจกรรมใดๆ บนปุ่ม ajax เพื่ออัปเดตรถเข็น
HTML เริ่มต้น
<form data-drupal-selector="views-form-commerce-cart-form-default-26" action="/cart" method="post"
id="views-form-commerce-cart-form-default-26" accept-charset="UTF-8" data-once="form-updated"
data-drupal-form-fields="edit-dc-ajax-add-cart-views-edit-quantity-0,edit-remove-button-0,edit-dc-ajax-add-cart-views-edit-quantity-1,edit-remove-button-1,edit-dc-ajax-add-cart-views-edit-quantity-2,edit-remove-button-2,edit-dc-ajax-add-cart-views-edit-quantity-3,edit-remove-button-3,edit-dc-ajax-add-cart-views-edit-quantity-4,edit-remove-button-4,edit-coupon-redemption-code,edit-coupon-redemption-apply,edit-submit,edit-checkout">
HTML หลังจากโหลดซ้ำ:
<form data-drupal-selector="views-form-commerce-cart-form-default-26" action="/ajax_update_cart_panier" method="post" id="views-form-commerce-cart-form-default-26" accept-charset="UTF-8">
อย่างที่คุณเห็น ฉันใช้ data-drupal-form-fields ทั้งหมดของฉัน เป็นเพราะเหตุนี้หรือไม่ที่แบบฟอร์มเริ่มต้นจะไม่โหลดซ้ำด้วยตนเอง ?
เดอะ triggerHandler ('รีเฟรชวิว') ถูกเรียกเหมือน 10 ครั้งเมื่อมีการเรียก (ประมาณ 15/20 วินาทีในการรีเฟรชมุมมอง ไม่มีปัญหานั้นก่อนที่จะอัปเดตเวอร์ชันหลัก) นั่นเป็นเหตุผลที่ฉันตัดสินใจใช้ ajax แบบกำหนดเองด้วย สร้างมุมมองใหม่
ฉันใช้โมดูลเวอร์ชันล่าสุด และฉันใช้ drupal 9.3.7