Hi there,
I'm writing this post because maybe you'll be able to help me as I got stuck with the module that I'm creating. I'd like to create a module adding "remove all" button to a cart that shows confirmation modal after being clicked.
Up to this point I created the following:
1. Remove all button (see screenshot below)
2. Function in front controller that allows to remove products from cart.
2. Modal itself (see screenshot + please ignore styling)
I want the function removing products from cart to be executed after a user clicks the "confirm" button in the modal, however I can't target it using query selector in my front.js file. I tried to do this with nested AJAX request and when I did it this way I've had an access to the button, however when I clicked it, I got again response with modal.
My question is:
How to handle multiple AJAX requests using module controller?
How to access the button that I displayed using AJAX?
Below you'll also find my code from main module script with function rendering a modal, code from my front controller and my jquery ajax request.
Function rendering modal:
public function displayModal() {
return $this->display(__FILE__,'modal.tpl');
}
Front controller:
class RemoveAllCartButtonAjaxModuleFrontController extends ModuleFrontController {
public function initContent() {
$this->ajax = true;
}
public function displayAjax() {
$modal = array('modal' => $this->module->displayModal());
exit(json_encode($modal));
}
public function removeAll(){
$products = $this->context->cart->getProducts();
foreach ($products as $product) {
$this->context->cart->deleteProduct($product["id_product"],$product["id_product_attribute"]);
}
}
}
Jquery AJAX
$('.remove-all-btn').click((e) => {
e.preventDefault();
$.ajax({
type: 'GET',
url: controller_link,
success: (res) => {
const jsonData = JSON.parse(res);
$('#footer').before(jsonData.modal)
}
})
});
Huge thank you in advance for any advises!
.png.022b5452a8f28f552bc9430097a16da2.png)
