bundle
as the kind of item, make sure to change it with a bundle code (e.g. {codes.bundleAvailable}
) so that the button in the example above is enabled.
+cl-add-to-cart
component checks the inventory for the product i
+The same happens when the item you want to add to the shopping cart is a bundle that contains one or more products that are out of stock (e.g. {codes.bundleOutOfStock}
), like in the example below:
+
+
+
### Non-existing code
The provided code must exist among the products of your organization. If you set as the code
attribute a non-existing one (e.g. {codes.nonexisting}
) the button will be rendered as disabled, as shown in the example below:
@@ -42,6 +51,10 @@ In order to prevent overselling errors, the cl-add-to-cart
componen
+The same happens if the available quantity of a product is exceeded across bundles, as shown in the example below where the bundle with code {codes.bundleAvailable}
contains 10
units of the product with code {codes.noOverselling}
that has a stock quantity less than 100
. If you try to add to the shopping cart 10
of those bundles (10*10=100
), the button will be rendered as disabled:
+
+
+
### Virtually infinite stock
Some products (e.g.{codes.doNotTrack}
) can be assigned a virtually infinite stock (to do that, you just need to set the do_not_track
attribute of the SKU to true
). In this case, the component will let you add as many units as you want and the button will be rendered as enabled for any value of the quantity
attribute (as long as it's greater than 0
), as shown in the example below:
diff --git a/packages/docs/stories/add-to-cart/cl-add-to-cart.stories.ts b/packages/docs/stories/add-to-cart/cl-add-to-cart.stories.ts
index 7d8c5da0..954937a9 100644
--- a/packages/docs/stories/add-to-cart/cl-add-to-cart.stories.ts
+++ b/packages/docs/stories/add-to-cart/cl-add-to-cart.stories.ts
@@ -16,6 +16,7 @@ export default meta
const Template: StoryFnbundle
as the kind of item, make sure to change it with a bundle code (e.g. {codes.bundleAvailable}
) so that the example above shows the correct price.
+