Struggling to define products, resulting in endless "We're getting your cart ready" messege

Support
#1

Hello, I have set up a new storefront for my company with Snipcart. Following the provided documentation I was able to set up the cart in the page and create some products. The snipcart-add-item object is set up as follows: (italics are placeholders for my values)

button id=“cartButton” type=“submit” class=“snipcart-add-item”
data-item-id=" My product ID "
data-item-price=“65.00”
data-item-url=" Product page URL "
data-item-image=" My item picture URL"
data-item-name=" My product name "
data-item-shippable=“true”
data-item-weight=" item weight "
data-item-custom1-name=" Option 1 "
data-item-custom1-type=“readonly”
data-item-custom1-value=""
data-item-custom2-name=" Option 2 "
data-item-custom2-type=“readonly”
data-item-custom2-value=""
data-item-custom3-name=" Option 3 "
data-item-custom3-type=“readonly”
data-item-custom3-value=""
data-item-custom4-name=" Option 4 "
data-item-custom4-type=“readonly”
data-item-custom4-value=""
data-item-custom5-name=" Option 5 "
data-item-custom5-type=“readonly”
data-item-custom5-value=""
data-item-custom6-name=" Option 6 "
data-item-custom6-type=“readonly”
data-item-custom6-value=""

These products have their data-item-custom-value attribute modified via javascript before the user clicks on the snipcart-add-item object.

The SnipcartSettings script is set up in the body element like so:

window.SnipcartSettings = {
publicApiKey: " My API key ",
loadStrategy: “on-user-interaction”,
modalStyle: “side”,
currency: “usd”
};

Please let me know if I am making a mistake here, and what i should do instead. Thank you.

#2

Hey @Eyegis-Garr,

To ensure that the crawler can effectively validate the price based on each option, it is recommended that each custom field be defined as a dropdown type and make use of price modifiers if required. Alternatively, if you choose to keep updating the attributes using Javascript, you will need to update the data-item-url to include selected customization options as a query string and server render the add to cart button with custom values preset. This will enable the crawler to successfully validate the items in the cart.

It’s important to note that even though fetching the products from your dashboard works, it doesn’t necessarily mean that customers can add items to their cart because of other javascript runtime errors from other sources than Snipcart. If you choose to use custom fields with dropdown values after fetching products from your dashboard, you will see all the variants based on the custom fields.