I’m coupling Drupal commerce, DC add to cart ajax and commerce flyout modules.
This is my view configuration :
On my /cart page, I have the initial form (the view) to change the quantities, delete the items etc…
I also have a slider of product, which thanks to the "ajax add to cart" module, I can add several product to the cart.
The expected behavior :
- Whenever I update the quantity or remove an item from the flyout, the form need to be updated (including the total)
- Whenever I update the quantity or remove an item from the form, the flyout need to be reloaded (included the total)
- Whenever I update the quantity or remove from the slider, both of the flyout and the form needs to be update.
In js, i’ve tried to triggered them individualy after the buttons have been clicked, by calling custom ajax code to rebuild the view and the flyout.
/** * Reload all the page content view (form) */ function rebuildViewPanier() { //$("#commerce_cart_form-cart-ajax-wrapper").triggerHandler("RefreshView"); $.ajax({ url: "/ajax_update_cart_panier" }).done(function (data) { if (data[3] !== undefined) { let selector = data[3]["selector"]; let dataReplace = data[3]["data"]; let block = $(selector); block.html($(dataReplace)); } }); } /** * Code from the flyout module */ function rebuildBlockCart() { let el = document.querySelector(".cart-flyout"); // Drupal.cartFlyout.createFlyout(); let settings = drupalSettings.cartFlyout; settings.use_quantity_count = true; var model = new Drupal.cartFlyout.CartBlockModel(settings); Drupal.cartFlyout.models.push(model); var view = new Drupal.cartFlyout.CartBlockView({ el: el, model: model }); var offcanvasView = new Drupal.cartFlyout.CartOffcanvasView({ el: Drupal.cartFlyout.offcanvas, model: model }); Drupal.cartFlyout.views.push(view); Drupal.cartFlyout.views.push(offcanvasView); Drupal.cartFlyout.fetchCarts(); } Actual behavior: for now, those interactions between those 3 parts of the page are like this
- Slider –> flyout :: working (automaticaly)
- Form –> slider :: working (automaticaly)
- Slider –> form :: KO (when i’m reloading it manualy)
And this is the slider–>form where i’m stuck.
The form isn’t reloaded (so I made the ajax function to load it manualy).
This is how I rebuild it :
$view_name = "commerce_cart_form"; $display_id = "default"; $view = [ '#type' => 'view', '#name' => $view_name, '#display_id' => $display_id, '#arguments' => [$cart_id], '#embed' => TRUE, ]; $content = Drupal::service('renderer')->render($view); $response = new AjaxResponse(); return $response->addCommand(new ReplaceCommand('#commerce_cart_form-cart-ajax-wrapper', $content)); The form is rebuild, but I’m losing any event on the ajax button to update the cart.
The inital 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"> The HTML after reloading :
<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"> As you can see, I’m using all my data-drupal-form-fields. Is it by because of that, that the initial form isn’t reloading it manualy ?
The triggerHandler(‘RefreshView’) is called like 10 times when it’s called (about 15/20s to refresh the view, didn’t have that problem before updating the core version), that’s why I decided to use custom ajax too rebuild the view.
I’m using the latest version of the modules and i’m using drupal 9.3.7
