Make link an optional ajax call not a redirect via configuration

Check out MR!4
- just add 'use-ajax' class to the link and 'Add to cart' becomes AJAX link (see readme.md in MR)

Optional:
add an event handler in your JS:

$('html').on('addToCartLink.updated', (event) => {
// process updated cart event, eg show a message "Item has been added to your cart!"
});

First of all, thank you very much for your MR, Jen :)

It looks 99% good to me, especially the custom event part. One thing I'm not happy with, is the hardcoded and very opinionated CSS selector used for the counter update. eg, this would apply to none of our Commerce sites at all. Would you mind making this selector configurable + empty check for this?

@agoradesign yeah, need to think about it
I used default Commerce template's classes.

I'll try to see if I can pass all parameters (name of product, total count, etc) to the custom event - so all alterations can be done in own JS to keep config super slim.

oh that would be great :)

updated custom JS event to return data:

$('html').on('addToCartLink.updated', (event, data) => {
  // Cart has been updated, following data is available:
  // data.cart_total_count
  // data.product_title
  // data.quantity_added
  console.log(data);
});

By default commerce_cart template will be updated:

...
<span class="cart-block--summary__count">{{ count_text }}</span>
...

If template has been overwritten and classes don't exit - it will not cause an error.

Applies and works.
Thank you for your commits. 🍻

luksak → made their first commit to this issue’s fork.

I needed this for wishlist links as well and updated the MR with it. It works quite well for me.

Shouldn't we try to use a data-attribute selector for the count? The approach with the class won't work for most sites... But yeah, that'd require commerce and commerce_wishlist to change the templates. Alternatively we could make the selector configurable? Or we'd need to let users know that the functionality depends on that selector and that users should add it to their templates in case they want it to work.

But at least the limitation of using a <span> for the count could be resolved.

Any other takes on this?

Can we show the status message printed by commerce or wishlist modules?
When you add a product to the wishlist, there is a default message shown, I think we should just refresh the messages block.

I added another MR that provides compatibility with ✨ Option to proivde remove links Active because the two MRs play nicely together. It simply updates the add to wishlist links.

@anas_maw You can send messages using MessageCommand. It works, but I guess there must be a better way to collect and display messages in ajax command than this:

$messages = \Drupal::messenger()->messagesByType('status');
foreach ($messages as $message) {
  $response->addCommand(new MessageCommand($message));
}
\Drupal::messenger()->deleteByType('status');

But as it is this just adds a message to the top of the page for me and doesn't really help the user to understand what happened.

@luksak Thanks, I'm using 2 patches together and they are working nicely together

@luksak please check my comment on your MR, it's changing both add to cart link and wishlist link
here is a patch for your MR, as I can't push the fix to your MR

vladimiraus → changed the visibility of the branch 3298965-3298965-compatiblity to hidden.