evgeniymukhamedjanov / liquid-ajax-cart Goto Github PK

Hey, I'm having issue displaying the number of items in the cart in my header.
The number of items is correctly displayed upon page reload (that is liquid doing), but looks like data-ajax-cart-bind="item_count is ignored/doing nothing.

Below the snipper responsible of rendering what's in the screenshot.

Note: the lib was setup following the official docs (almost everything else works, "almost" since I'm having another couple of issues, but I will open separate issues for the rest)

Thank you!

      <div class="flex items-center gap-16 lg:ml-auto">
        <button class="hidden lg:block">
          {% render 'icon-search', class: 'w-24' %}
        </button>
        <div class="hidden lg:block">
          {% render 'icon-heart', class: 'w-24' %}
        </div>
        {%- if shop.customer_accounts_enabled -%}
          <a
            class="hidden lg:block"
            href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
          >
            {% render 'icon-account', class: 'w-24' %}
          </a>
        {%- endif -%}
        <button
          onclick="
            document.documentElement.classList.add('js-show-cart-drawer');
            Components.BodyScrollLock.disableBodyScroll();
          "
          class="relative"
        >
          {% render 'icon-bag', class: 'w-24' %}
          <span class="sr-only">Open cart</span>
          <div
            class="absolute right-0 top-0 flex h-12 w-12 items-center justify-center rounded-full bg-purple-75 text-[8px] font-semibold text-white"
          >
            <span data-ajax-cart-bind="item_count">{{ cart.item_count }}</span>
          </div>
        </button>
      </div>

here's what I have in the console

The cart ajax doesn't work when you change the language of the site with Shopify Markets is turned on.

Example :
https://pimentio.myshopify.com/
https://pimentio.myshopify.com/en

When I add a product via the English site to the cart, I get this error :

Uncaught TypeError: can't access property "setActiveElement", this.cartNotification is null

I think Shopify released new url cart routes.

Summary

Add an additional class that gets added when a product is in the process of being added to the cart.

Current Behavior

The .js-ajax-cart-processing class is currently added whenever the page goes out of focus and back into focus. This makes it unreliable for detecting when a specific product is being added to the cart.

Expected Behavior

• Add a class like .js-ajax-cart-adding-to-cart that gets added to the page when a product add to cart request begins.
• Remove .js-ajax-cart-adding-to-cart when the add to cart request finishes.

Reason

We need a reliable way to detect when an individual product is in the process of being added to the cart. This will allow things like:

• Showing a loading indicator specifically for the add to cart action
• Temporarily disabling the add to cart button
• Communicating to the user that the requested product is being added
• Communicating to the user that the product has been added.

Without a dedicated class for add to cart in progress, these types of UX enhancements are difficult.

Let me know if any clarification or additional details are needed!

I noticed the add_to_cart event fire twice. This happens on Shopify's UA integration, the new GA4 integration and Shopify's custom pixel manager.

To replicate add this code to the Customer event pixels:
analytics.subscribe("product_added_to_cart", async (event) => { console.log('Add to cart event') });

If I switch theme to Dawn it's not longer happening.

I think it has something to do with doing a update.js call after the add.js call when adding a product to cart.

i have the following issue: add to cart for normal products works.
only when using the free shopify bundle app, when i add the bundle to the cart, i get the error: The bundle product '...' cannot be added to the cart. and it is not. added to the cart. when i refresh the page, i can see the bundle was added to the cart.

Following is the code for a popup form which will be displayed after adding item cart on the product template.

The problem is that I do not want to display all the cart items I just want to display the current product.

One "hack" is to basically use forloop.first which will always bring the recently added element and that works.

But I want to compare the id of line item and the product page's product.

But if I compare the item.product_id and product.id It does not show anything,

Playing with the library in a clean theme, displaying the floating cart produces inconsistent results when adding to cart.

Seems data is not updating, needs a refresh to see changes.

Browser: Safari 16.3 Mac

By any chance do you know how to implement this feature ?

The merchant I work with wants the customer not to add the same product twice in his cart...

I have a peculiar case. Basically, the quantity value of the line_item in the cart is being updated incorrectly. This occurs when there is a discount applied by the Script Editor App. This discount is a fixed value and is applied to all products in the cart. However, when a new item is added, and that product was already in the cart, Shopify initially separates it from the existing item. This results in two separate line_items for the same product. But then, the stateHandler function in controls/quantity-input.ts updates the input values. However, by the time it does that, Shopify has already merged them (meaning the variable status.cart already contains the entire product in the same line_item). This causes the input values to be incorrect.

Assuming that I've understood you correctly, I think your idea of verifying the number of line_items before the stateHandler function replaces the values seems reasonable. If the number of line_items is different, you can replace the section, otherwise, you can just replace the values. This approach could help ensure that the values are updated correctly based on the current state of the cart.

Please note that your proposed solution sounds like a logical step to address the issue.

In the video I'm trying to share, the last line_item in that case is a "bundle" (which actually represents one or more products grouped as one). As you can see, when I add a product that's already in the cart (the first line_item), Shopify initially separates it into two line_items (due to the discount from the Script Editor App). However, the function I mentioned earlier replaces the input values with a new version of the status (where they are no longer separated into two line_items, but rather combined into one). It sets the input value based on the complete quantity of the first line_item, but it sets the second line_item's value to that of the bundle (which is the last one with a quantity of 24).

Our product form uses a button that sends a post req to cart/add. I am having a really really really hard time getting my data-ajax-cart-section to refresh after anything is added to the cart...

In the cart itself, the data-ajax-cart-section updates work perfectly when adjusting quantities, however.

Does anyone know what the cause might be?

Site: https://olsatools.com/products/magnetic-socket-holder?variant=39430920437811

when the cart is empty and I add a product to the cart the quantity does not appear on the icon without reloading the page

after reloading it works fine.

This is my code :

     {% if cart.item_count > 0 %}           
                <span class="cart-quantity-bubble" data-ajax-cart-bind-state="cart.item_count"></span>
              {% endif %}

Thank you in advance.

Hi all,

I'm implementing datalayer on my Shopify theme and I want to detect when a product has been removed from cart.

This is what I have so far but there is no docs on the formData functions so I'm not sure if I can acheive what I'm trying to do like this

{% comment %} console.log(requestState.requestBody.get()); {% endcomment %}
    if (requestState.requestType == "change") {
      subscribeToResult((requestState) => {
        if (requestState.responseData?.ok) {
          {% comment %} console.log(requestState.requestBody.get())); {% endcomment %}
        }
      });
    }

Thank you very much

I keep getting this error which halts all future events in my JS.

Liquid Ajax Cart: there is a data-ajax-cart-section element that is not inside a Shopify section. All the data-ajax-cart-section elements must be inside Shopify sections

I quadruple-checked and I am 100% certain that there are no data-ajax-cart-section attributes/elements outside of the Shopify section they've been designated to.

Site: olsatools.com

Hey, I'm having a couple of issues with the cart.
When I add a product to the cart, I get this error in console:

Liquid Ajax Cart: the HTML for the "sections_url" section was requested but the response is null

However, I'm able to add the product and open the cart.
The issue is that let's say I add 5 products, the quantity input shows a wrong value, but the input value in the dom is correct (on page reload, everything looks okay).

Same error I get when I try to update the line item quantity from the cart.

Another I error I get when I add a product with a selling plan to the cart is:

Liquid Ajax Cart: line item with line="1" not found

Same as above, the item is added to the cart, but the selling plan is empty. It works upon page reload.
I can't quite figure out what's wrong, any help is appreciated! Thank you.

Expected Behavior

When adding an item to the cart and then navigating back (with browser button) the cart should display the number of items including the one that was just added.

Current Behavior

When running on the Shopify server, the cart displays the number of items as it was before adding the last item.
In local environment, the behavior is as expected.

Steps to Reproduce

1. https://3c4fnxz6hytu2a1b-24813502524.shopifypreview.com
2. Navigate to Shop
3. Navigate to a product (most of them are not in stock, but e.g. the fourth one is)
4. Add to Cart
5. Navigate back one page with browser button

Context (Environment)

The element that should display the updated count does have the required data-ajax-cart-bind-state="cart.item_count" property.

<span class="cart-count-bubble__count" aria-hidden="true" data-ajax-cart-bind-state="cart.item_count">
  {{ cart.item_count }}</span>

Detailed Info

Shopify's Dawn theme is the basis and it's cart functionality has not (yet) been disabled. Maybe some interference is the reason for this behavior.

I'm a Shopify dev creating a new theme from scratch (so there's no existing JS interfering with cart functions), but I was initially baffled when I first implemented this and it didn't seem to work. It would send an XHR request that showed up in the console, and the classes would be added/removed on the body, but then the actual cart quantities wouldn't update.

It wasn't until I tested this on one of the sites listed on the project homepage using liquid-ajax-cart that I saw the same behaviour (I'd glanced at it earlier and it seemed to work just fine) - then I put 2 & 2 together: with the console/developer panel open, the ajaxified cart doesn't work. Close the panel, it works fine. I've tested this in FF 115 & Chrome 114 - same behaviour on both.

To replicate

1. Go to https://twoislandsco.com/ (one of the sites listed as using liquid-ajax-cart)
2. Add something to the cart, then from the minicart click on View my cart in the top left
3. On the main cart page, open up your dev panel (F12 on PC) and then try changing the quantity. Nothing happens.
4. Close the dev panel and try again (no need to refresh) - works fine.

Note: I've tried this on at least 3 other stores listed in the Built with Liquid Ajax Cart and they all show the same behaviour.

This is a minor issue, as I don't imagine most people are browsing the web with the console open, but definitely seems odd.

This attribute is working as expected while i'm using the user agent number input type controls, but if i use the .stepUp() and stepDown() methods with javascript I don't see any reactivity.

Not sure if i'm doing something wrong, or if this is just not supported.

It seems like Liquid Ajax Cart is not working with PJAX libraries👀

After upgrading to v2 I noticed the css classes js-ajax-cart-message and js-ajax-cart-message--error are no longer available. This makes it hard to apply a nice looking error message.

Targetting [data-ajax-cart-errors] like the demo does is a bit to limited as adding margin, padding, background color is not possible without it being visible.

Suggestion: Add aria-hidden attribute to [data-ajax-cart-errors] and set false when the error message is active. (There is a aria-errormessage as well, but not sure if it's applicable here) Perhaps also mention removal in migration docs.

Thanks again for this repo!

Just migrated to version 1.10. You're doing a killer job, this thing is freaking awesome.

Got a question though, so as title says, on my collections page i want other product request errors to be hidden when any other product add-to-cart is attempted. What's the best way to handle this? via an attribute or listen for requests in JS? Thanks!

Store: https://store2-0-playground.myshopify.com/
Password: playground

Code for each grid item --> https://gist.github.com/james0r/aa88aa856a82ecd151f375204ab98b4c

Hello!
Thanks for the awesome plugin.
I'm using this plugin for a custom Shopify theme.
I need to discount code (Coupon) field on the my-card.liquid file.
I couldn't find about coupon code in your documentation.
Can you provide any guidance or information on this?
Thanks again.

Hello! First of all, really awesome project!
I've almost got my cart finished thanks to you!

One thing I'm noticing, and I'm not sure if it is a Shopify thing, is sometimes randomly when the add to cart button is added, it will double the quantity that I want to add to the cart and send that to the cart.

I'm using the dawn theme. Have you seen something like this before?
I've seen these posts here and here, and I'm unsure if it is related, but I'm having trouble pinpointing where the issue is coming from.

Here is a screenshot

Thank you!

Update: I actually found one of the ways the issue occurs, when coming in from out of focus, and immediately clicking the add to cart button as your first click, I was still allowing the add to cart button to be clicked even though I shouldn't have been allowing that because a request was already in progress.

Still though, I randomly get the issue when I maintain focus and continuously press the add to cart button. It could be that I'm just edge case testing and clicking too quickly, where are normal user would never do that.

I'm curious about the compatibility of the ajax cart with the recently mandated feature, "Gift card add recipient". How does the Ajax Cart handle this? For reference, see Dawn's implementation.

Thank you for any insights!

Hey there
I want to ask how can we apply lazy loading the add to cart button when the http status is 102 ?

Might want to add something to the upgrade instructions about this. Looks like LAC now is self invoking on window now when using the NPM module?

So this

import {
  subscribeToCartAjaxRequests,
  subscribeToCartStateUpdate,
  cartRequestGet,
} from 'liquid-ajax-cart'

export default {
  name: 'liquidAjaxCart',
  store() {
    return {
      init() {
        subscribeToCartAjaxRequests((requestState, subscribeToResult) => {
          if (requestState.requestType === 'add') {

            subscribeToResult((requestState) => {
              if (requestState.responseData?.ok) {
                window.Alpine.store('global').isMinicartVisible = true
              }
            })
          }
        })

        subscribeToCartStateUpdate((state) => {
          window.Alpine.store('liquidAjaxCart', {
            state: state,
          })
        })

        cartRequestGet()
      },
    }
  },
}

throws

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/liquid-ajax-cart.js?v=71c06489' does not provide an export named 'default' (at liquidAjaxCart.js?t=1698979933380:1:8)

I'm gathering that I should instead handle this logic within the init event callback correct?

From the new docs (ps. can get we get anchor links for sections in the docs please):

function runWhenInit() {
  console.log("The current cart state is: ", window.liquidAjaxCart.cart);
}

if (window.liquidAjaxCart?.init) {
  // if Liquid Ajax Cart is already initialized
  runWhenInit();
} else {
  // wait for Liquid Ajax Cart to be initialized
  document.addEventListener("liquid-ajax-cart:init", runWhenInit);
}

Maybe we can get some more detail in the docs about this kinda migration issue. If it's there it may not be obvious, not seeing it.

Hi,

First, thank you for this really useful library. I'm using it since a while on my Shopify website but when I switch from version 1.6 to 1.10.2 I face an issue.

I've obviously read multiple times the installation guide to be sure that I've checked all the steps. However, everytime I add a product to the cart or update the cart, I have this weird error in the console 'Liquid Ajax Cart: the HTML for the "ajax-cart-section" section was requested but the response is null'. I've tried a lot of things to spot what is the problem but I can't find what is the problem.

Here is my code from the theme.liquid

`
{% section 'cart-drawer' %}

`

And my cart-drawer section

Description:
While experimenting with the ajax cart functionality, I identified a bug related to product quantity handling. Here's a breakdown:

1. When attempting to add a quantity of products larger than what's available, the system:

   • Adds the available products to the cart.
   • Fails to update both the "drawer" and the "cart bubble".
   • Subsequently, an error is thrown.

2. If I then try to reduce the product quantity, the system indicates that the specified number of products is already in the cart. However, the "drawer" and "cart bubble" only reflect the correct quantity after a page refresh.

Hello, we are having an issue when integrating Facebook Pixel with a store uses liquid-ajax-cart.
There's additional event comes along when user click on the add to cart button. Our add to cart is just a regular submit button inside a form.
Have anyone seeing this before?

When pressing the minus button so it reaches 0 nothing happens. (On V2 ajax-cart-quantity) Apart from removing an item from cart using the dedicated button, pressing minus is a common pattern to remove items.

Example to replicate:
Demo store => add product to cart and change quantity to 0.
https://liquid-ajax-cart.myshopify.com/cart/change?line=1&quantity=0