Conditional doesn't work

[dexter845]

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,

[dexter845]

It works the first time but after I have made a request it does not show any item in there

It vanishes

[EvgeniyMukhamedjanov]

Hi, it is not 100% safe to use the logic when you try to find the item with the same id as the current product because the section is not always rendering under the product page context.
The better approach is to have all the items in the popup but they should be hidden. Each time when "add to cart" request finishes you need to find the item that is just added among the html of all items and show it.

So in terms of JavaScript it will be something like this:

First, remove the item.product_id == product.id condition and add data-index for each product:

<div class="product" data-index="{{ line_item.index }}">
   <!-- ... -->
</div>

Then you can write the JS that will handle each "add to cart" request and find the new added items

 window.liquidAjaxCart.subscribeToCartAjaxRequests(
  (requestState, subscribeToResult) => {
    if (requestState.requestType === "add") {
      subscribeToResult((requestState) => {
        if (requestState.responseData?.ok) {
          // this code will run after each "add to cart" request

          // 1. Saving the line items that was sent with the "Add to cart" REQUEST
          let lineItems = [];
          if ("items" in requestState.responseData.body) {
            lineItems = requestState.responseData.body.items;
          } else if ("key" in requestState.responseData.body) {
            lineItems.push(requestState.responseData.body);
          }

          // 2. Looking for the line items in the RESPONSE that match the saved line items above
          for (let i in lineItems) {
            const lineItemIndex = window.liquidAjaxCart
              .getCartState()
              .cart.items.findIndex((element) => {
                let elementProps = element.properties;
                if (elementProps === null) {
                  elementProps = {};
                }
                let lineItemProps = lineItems[i].properties;
                if (lineItemProps === null) {
                  lineItemProps = {};
                }
                // don't use line-item key - doesn't work properly if there is a line item discount
                if (
                  element.variant_id === lineItems[i].variant_id &&
                  JSON.stringify(elementProps) ===
                    JSON.stringify(lineItemProps) &&
                  element.quantity === lineItems[i].quantity
                ) {
                  return true;
                }
                return false;
              });

            // 3. Lets find the html that is related to the found line item
            const lineItemElement = this.querySelector(
              `[data-index="${lineItemIndex}"]`
            );
            if (!lineItemElement) continue;
            lineItemElement.removeAttribute("data-index");
            
            // Here you have the lineItemElement variable that contains HTMLelement for the added line item
            // You can do with it whatever you need.
          }
        }
      });
    }
  }
);

[dexter845]

There is another issue with this,

If I make a form request in the product it basically removes everything from the form. Because the requestState.requestType === "add". But if I remove the this requestType condition, it works fine on adding the product to the cart but once I make a form request to update the quantity, It brings all of the items in the cart.

Can you tell me how to fix this?

[james0r]

@EvgeniyMukhamedjanov Maybe close this and @dexter845 ask in Discussions if you need more help with it.

[EvgeniyMukhamedjanov]

@james0r Agree, will move it into discussions. Thank you!