EvgeniyMukhamedjanov / liquid-ajax-cart

Build a Shopify Ajax-cart without JavaScript coding
https://liquid-ajax-cart.js.org
191 stars 22 forks source link

Incorrect replacement of input values in the stateHandler function in controls/quantity-input.ts #72

Closed gmla12 closed 1 year ago

gmla12 commented 1 year ago

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.

https://github.com/EvgeniyMukhamedjanov/liquid-ajax-cart/assets/54081056/56d6a0e8-74ec-4379-91c9-42c87ec0f6c5

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

EvgeniyMukhamedjanov commented 1 year ago

Hi @gilbertEndrock Thanks you for sharing this! Actually, my idea is to always use section html replace. I've added the stateHandler function in controls/quantity-input.ts just to update the input values in case a request isn't successful, thus doesn't return html. Could you pls share a preview link so I can replicate the issue by myself? Also pls let me know what items should be added to the cart so that the script applies the discount.

gmla12 commented 1 year ago

Hi, this is preview, please add a bundle of 24 products in this link and then add in this link

EvgeniyMukhamedjanov commented 1 year ago

@gilbertEndrock Crazy Shopify :-) As you said, It merges line items after the response to the add.js request. Actually Liquid Ajax Cart makes an additional request after any add.js request to get the cart state, because add.js doesn't return the cart state. So I think I'll get html from the additional request rather from the first add.js. It should fix the issue. I'll get back to you tomorrow with the updated version.

EvgeniyMukhamedjanov commented 1 year ago

@gilbertEndrock Could you download this version: https://github.com/EvgeniyMukhamedjanov/liquid-ajax-cart/tree/v1/docs/releases/last Let me know if the issue is fixed or not pls.

gmla12 commented 1 year ago

yes, thank you very much