Conditional layout on cart items

[lolo]

Is there a way to render content only if x product is added to the cart? For example, show box in home page if productId = “1” is added to cart.

[Erislandio]

I believe this would only work within the context of the product page, for that I would create a custom component that uses the context of the orderform and renders according to the validations you need.

[WesleyMaik]

I believe that there is no native solution to this problem. It is possible to solve this by creating a custom component using the OrderForm context to capture the items and compare them with the id of the product you are looking for.

See an example of how I would do it:

// ConditionLayoutCheckout.tsx

import React, { ReactNode } from "react";
import { useOrderForm } from "vtex.order-manager/OrderForm"

type Props = {
  product: Product,
  children: ReactNode
};

type Product = {
  id: string
};

const ConditionLayoutCheckout = ({ product, children }:Props) => {
  const { orderForm } = useOrderForm();
  const checkoutItems = orderForm.items;

  const hasItem = checkoutItems.find((item: {id: string}) => item?.id == product?.id);

  if(hasItem){
    return children;
  };

  return null;
};

export default ConditionLayoutCheckout;

And then in StoreFront you add the block by passing the id of the product you are looking for into the property.

// home.jsonc
"condition-layout.checkout": {
        "props": {
            "product": { "id": "1" }
        },
        "children": "mycomponent"
}

I believe this would solve your problem. Hope this helps!