Sprig / Blitz / Craft Commerce on Craft Cloud caching issue

[atelierbim]

Support Request

Hi, Everything works perfectly locally. On Craft Cloud it caches the page, along with the CSRF token and session ID, in a way that prevents fresh tokens from being dynamically generated for each session. So the browser send a "Unable to verify your data submission" 400 error. This happens only on "sheetMusicCategory" pages. On single product pages the "add to cart" works even if cached. I do have ->asyncCsrfInputs(true) (general.php)

I've followed all your dynamic content tutorials without being able to find the solution.

here's my store structure.

• products/index.twig calls a sprig component (sheetMusicCategory.twig) to filter products. "entry" is a craft structure entry: {{ sprig('_views/products/components/sheetMusicCategory.twig', { entryId: entry.id }, { 's-trigger': load }) }}

• components/sheetMusicCategory.twig

  {% set entry = craft.entries.id(entryId).one() %}
  {% set productQuery = craft.products({
  type: 'sheetMusic',
  relatedTo: entry
  }) %}
  {% set products = productQuery.all() %}
  {% if products|length %}
  {% for product in products %}
  {% set variants = product.variants %}

  here we call another sprig component: addToCart.twig (with a variant switcher)

     {{ sprig('_components/shop/addToCart.twig', { productId: product.id }, { 's-trigger': 'load' }) }}
  {% endfor %}
  {%endif %}

• component addToCart.twig

  {% set variantId = variantId ?? null %}
  {% set product = craft.products.id(productId).one() %}
  {% set selectedVariant = product.defaultVariant %}
  {% set productVariants = product.variants %}
  {% for productVariant in productVariants %}
  {% if productVariant.id == variantId %}
  {% set selectedVariant = productVariant %}
  {% endif %}
  {% endfor %}
  <form id="addToCartForm" sprig s-method="post" s-action="commerce/cart/update-cart" s-val:purchasable-id="{{ selectedVariant.id }}" s-indicator="#indicator">
  <button type="submit">{{ 'Add to Cart'|t }}</button>
  </form>

  "craftcms/cloud": "^2.6",
  "craftcms/cms": "5.4.10",
  "craftcms/commerce": "5.2.2",
  "putyourlightson/craft-blitz": "5.9.2",
  "putyourlightson/craft-blitz-cloud": "^2.0.0",
  "putyourlightson/craft-campaign": "3.5.6",
  "putyourlightson/craft-sprig": "3.5.1",

Plugin Version

5.9.2

[atelierbim]

forgot to mention that if a sprig filter or a variant switcher is rendered on the category page, it then the add to cart works.

[bencroker]

On Craft Cloud it caches the page, along with the CSRF token and session ID

Which CSRF token is it caching, exactly? I don’t see any CSRF input fields in the provided code, and you shouldn’t need any when submitting forms using a Sprig component that is refreshed on load.

[atelierbim]

I do have a cart component in my top nav. But all sprig and no csrf. Would you like the test site url?

• {{ sprig('_components/cart/cart-content.twig', {}, {'s-trigger': 'load, refresh'}) }}

cart-content.twig

{% if sprig.isRequest %}
<form sprig s-method="post" s-action="commerce/cart/update-cart" s-trigger="submit, change delay:0.5s from:.qty, updateForm from:.qty" s-indicator="#cart-indicator">
    {# coupon code #}
    <input type="text" name="couponCode" id="couponCode" value="{{ cart.couponCode }}">
    <button sprig s-action="commerce/cart/update-cart" s-method="post" type="button"> ... </button>
        {% for item in lineItems %}
        ...{{ item.purchasable.product.title }}
            <!-- remove button -->
               {% set vals = {('lineItems[' ~ item.id ~ '][remove]'): 1}|json_encode %}
               <button type="button" sprig s-action="commerce/cart/update-cart" s-method="post" s-vals="{{ vals }}" s-confirm="{{ "Remove this product from your cart?"|t }}" s-indicator="#cart-indicator">...</button>
            <!-- quantity -->
                <input sprig s-method="post" s-action="commerce/cart/update-cart" s-indicator="#cart-indicator" type="text" name="lineItems[{{ item.id }}][qty]" min="0" id="lineItemQty[{{ item.id }}]" value="{{ item.qty }}">
              ...
           {% if sprig.isSuccess %}
                <script>
                    htmx.trigger('#cart-count', 'refresh')
                </script>
            {% endif %}
          </form>
{% endif %}

[bencroker]

So what is the issue exactly, and which CSRF token is being cached?

[atelierbim]

The issue: 1) uncached pages -> add to cart works 2) cached pages -> add to cart fails 3) on cached pages the add to cart only works after sprig filter or product variant switch was trigered. 4) everytime you reload the page, add to cart fails

https://editions-bim-website-dev-6a9db2ae.preview.craft.cloud/sheet-music/brass/trumpet/trumpet-methods-studies try add to cart and you'll see that the sprig rendering add to cart is not working (400 error)

[bencroker]

Thanks for the link. I see 46 Sprig components on the page. Three of them refresh on load but none of the others do. Seeing as though you have so many components, this may not be the best approach.

[atelierbim]

this is because each product in the category calls it's "add to cart" sprig component. Which is necessary for the product variant switch. Do you think that this is related to the cache issue?