HTML Validator Syntax - Product-Crawling-Failed - Status: 400 Not Found

Hi :wave: ,

Firstly, I am super grateful for you all, you rock and have made ease of integration into Ecommerce possible as a individual developer. I wrote about 500+ lines of code in Ruby and forgot about all the other necessary things. I created a simple payment portal through Stripe API, but the deeper I got into it, the more complex it became for things like taxes, shipping, returns, etc…

I about have things working on my site and had to enable a bunch of security things in Nginx like:

add_header Content-Security-Policy "script-src 'self' * *>

After all that debugging and fun, I now have another error that is either with cookies or simply unable to “validate my HTML”.

I am using Jekyll and prefer to stay away from JS if possible. Is there another HTML syntax I need to use for my Product Price and Product ID? At the moment the HTML (without the button) I am using is of the following:

          <!-- Product Details List -->
          <div class="col-6 col-12-small product-details">
            <section class="">
                <h4>Product Details</h4>
                <li><b>Price:</b> $2.00</li>
                <li><b>Quantity:</b> 2.0</li>
                <li><b>Size(s):</b> xs, sm, med, lg, xl,</li>
                <li><b>Condition:</b> new</li>
                <li><b>Color(s):</b> red, blue, white, violet, gray,</li>
                <li><b>Material Type(s):</b> cotton, wool, polyster, nylon, plastic,</li>
                <br />
                <h4>Product Specifics</h4>
                <li><b>Product ID:</b> 8</li>
                <li><b>Part Number:</b> asdfasdf</li>
                <li><b>Model Number:</b> dafd</li>
                <li><b>Country Origin:</b> USA</li>
                <li><b>Currency Type(s):</b> USD, CAN, JPN,</li>
                <li><b>Tags:</b> Jekyll,</li>
                <li><b>Tax Code:</b> txcd_00000000</li>
                <li><b>Taxable:</b> false</li>
                <li><b>Digital Software:</b> true</li>
                <li><b>Shippable:</b> false</li>

HTML used for the button is as follows:

<button class="button primary fit snipcart-add-item" data-item-id="8" data-item-name="chickenplatterrrr tasteyyum" data-item-price="2.00" data-item-image="/uploads/terms_48bec2a697.webp" data-item-description="A place to describe the product to your readers.
" data-item-shippable="false" data-item-taxable="false" data-item-custom1-name="Colors" data-item-custom1-options="red| blue| white| violet| gray|" data-item-custom2-name="Sizes" data-item-custom2-options="xs| sm| med| lg| xl|" data-item-custom3-name="Materials" data-item-custom3-options="cotton| wool| polyster| nylon| plastic|" data-item-custom4-name="Gift note" data-item-custom5-name="Gift" data-item-custom5-type="checkbox" data-item-custom5-options="true|false">
 Add To Cart

Console error is displayed below:

snipcart.js:1          POST 400
A 'cart-confirmation' error occured in Snipcart.

Reason: 'product-crawling-failed'

--- Item 1 ---
[Item ID] 8
[Item Unique ID] 23b78cb9-56e0-45bc-a8f7-28394e38f259
[Item Name] chickenplatterrrr tasteyyum
**[Status] NotFound**
[Price in cart] 2
**[Crawled prices] []**
[Details] We have not been able to find item with id '8' at ''. Please make sure the product is correctly defined. We suggest you take a look at this section of our documentation:

 {kind: 'cart-confirmation', reason: 'product-crawling-failed', technicalReason: {…}, data: Array(1), code: 'snipcart.errors.order_validation.product_crawling', …}

Furthermore, I have tested on two different latest browsers named: Google Chrome and Firefox, but both provide the same error.

My header allows for crawling of my site, but do I need to allow a cookie or something else of that nature in nginx configuration?

When I manually fetch products from that URL, it results in an error. I assume it has something to do with valid HTML syntax.

I have tested the following for all required, but still same exact error:

<li data-item-id="{{ page.product_id }}"><b>Product ID:</b> {{ page.product_id }}</li>
<li data-item-name="{{ page.heading }}"><b>Name:</b> {{ page.heading }}</li>
<li data-item-price="{{ page.unit_price | precision: 2 }}"><b>Price:</b> ${{ page.unit_price | precision: 2 }}</li>
<li id="{{ page.product_id }}"><b>Product ID:</b> {{ page.product_id }}</li>
<li name="{{ page.heading }}"><b>Name:</b> {{ page.heading }}</li>
<li price="{{ page.unit_price | precision: 2 }}"><b>Price:</b> ${{ page.unit_price | precision: 2 }}</li>
<li class="snipcart-add-item" data-item-id="{{ page.product_id }}"><b>Product ID:</b> {{ page.product_id }}</li>
<li class="snipcart-add-item" data-item-name="{{ page.heading }}"><b>Name:</b> {{ page.heading }}</li>
<li class="snipcart-add-item" data-item-price="{{ page.unit_price | precision: 2 }}"><b>Price:</b> ${{ page.unit_price | precision: 2 }}</li>

Upon further investigation of other working Jekyll live sites, they only used the <button></button> syntax.

Maybe it has something to do with Nginx?

Only other thing that was included was the data-item-url, but this isn’t required now according to the documentation.

I added the data-item-url but still failed with error 400.

Also, here are more details of the Response and Request headers.

Request URL:
Request Method: POST
Status Code: 400 
Remote Address: x.x.x.x:443
Referrer Policy: no-referrer-when-downgrade
access-control-allow-credentials: true
access-control-expose-headers: Request-Context
cache-control: no-cache
content-length: 1157
content-type: application/json; charset=utf-8
date: Sat, 26 Nov 2022 21:56:18 GMT
expires: -1
pragma: no-cache
request-context: appId=cid-v1:48f65c7b-986c-4ec3-89de-eb0160f55639
:method: POST
:path: /api/cart/d8d40339-46cd-4b40-801b-42bfecc60/pay
:scheme: https
accept: application/json
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
api-version: 2021-04-06
cache-control: no-cache
content-length: 97
content-type: application/json
pragma: no-cache
sec-ch-ua: "Chromium";v="106", "Google Chrome";v="106", "Not;A=Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36
x-snipcart-lang: en
x-snipcart-publicapikey: xOWQ3ZmItNjY1MzdjLTkwZGUtZGRmY2I4MTA2NzFjNjM3NDAzMTgwNjc4Mzc
x-snipcart-version: 3.0

I updated my robots.txt file to see if that was the problem, but still no luck. I continue to receive the same 400 response code. I have NO application/json; charset=utf-8 I searched through all the html headers and also verified nginx configs. I am unsure what is going on…

# allows all bots and users to crawl the site.
User-agent: * Disallow:

The Snipcart logs show:

Nov 26 15:43:27	

An attempt to create an order with invalid products has been made. Don't forget you can't add/update items attributes in the cart dynamically with javascript as it will cause crawling issues. You can read more about this here:
Nov 26 15:43:27	

Found 0 snipcart-add-item elements with ids []
Nov 26 15:43:27	

Validating item with id '11' located at' on domain'. 

Also important to note, I temporarily disabled ALL caching of the website before doing development work.

I completely disabled my nginx/security.conf and the nginx/general.conf to test if that was the problem, but that didn’t solve anything either.

I bet it is Cloudflare firewall.

YUP! It was Cloudflare; it is so easy to forget. I hope this thread serves all of you well!

I disabled the bot fight option in cloudflare.