Make link an optional ajax call not a redirect via configuration

Created on 22 July 2022, almost 2 years ago
Updated 21 June 2024, 7 days ago

Problem/Motivation

This module is great and solves a huge problem in allowing us to have an Add To Cart button on a view. However if you look at the behavior and sequence of events, it introduces some problematic slowdowns and bottlenecks. Instead of a redirect, the link should add the item to the cart via ajax. The ajax_add_to_cart module provides this functionality but does not allow for a link to be added to a view. Ideally we'd be able to add items to the cart via ajax and save the overhead of the redirect. In our case, it would shave a second off the page load time to get to the cart.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Needs review

Version

2.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States brooke_heaton

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • First commit to issue fork.
  • Status changed to Needs review 9 days ago
  • πŸ‡¦πŸ‡ΊAustralia jannakha Brisbane!

    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!"
    });
    
  • Status changed to Needs work 9 days ago
  • πŸ‡¦πŸ‡ΉAustria agoradesign

    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?

  • πŸ‡¦πŸ‡ΊAustralia jannakha Brisbane!

    @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.

  • πŸ‡¦πŸ‡ΉAustria agoradesign

    oh that would be great :)

  • Status changed to Needs review 7 days ago
  • πŸ‡¦πŸ‡ΊAustralia jannakha Brisbane!

    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.

Production build 0.69.0 2024