Static Section showing as dynamic section.

[thedesignersdev]

Hi im having a problem.

My static section was rendering correctly but now it's rendering as a dynamic section.

My files are correctly called main-cart-items.liquid & main-cart-footer.liquid

The were previous rendering correct like this:

<div id="shopify-section-main-cart-items" class="shopify-section">
<div id="shopify-section-main-cart-footer" class="shopify-section">

But now they render as dynamic sections like this.

<div id="shopify-section-template--20287847924031__cart-items" class="shopify-section">
<div id="shopify-section-template--20287847924031__cart-footer" class="shopify-section">

Why are they now rendering as dynamic sections when they are not dynamic?
I need them to register as static sections like the first example (which they were originally doing).

Any help would be appreciated, i've been banging my head against a wall for days.

Bellow is my cart.json

{
  "sections": {
    "cart-items": {
      "type": "main-cart-items",
      "settings": {
      }
    },
    "cart-footer": {
      "type": "main-cart-footer",
      "settings": {

      }
    }
  },
  "order": [
    "cart-items",
    "cart-footer"
  ]
}

[Liam]

Hi Thedesignersdev,

This might be confusion over the naming of static vs dynamic sections. Static sections are sections that are included using the {% section 'section-name' %} tag in a .liquid file rather than being assigned on a .json file. What's your usecase for registering sections as static sections, or having no reference to the template in the ID property? It's possible that something changed on Shopify's side that has impacted on the value of IDs for sections, which I'll investigate.

Hope this helps,

[thedesignersdev]

Thanks so much for the reply Liam.

I thought maybe it was a schema, caching issue because i was changing template names so much but couldn't find any references to it in the schema.

Again, it's so weird that it was working and then i logged on the next day and the sections were all of a sudden dynamic.

The use case is the section is being identified in JSON with its 'static' section id.
I could add the file using (bellow) but the cart page has no actual cart page to pull it into correct?

{% section 'main-cart-items' %}

 Here is the JSON that refers to the section, this is why im having an issue with it being 'dynamic' now.

async function updateCartPage() {
  const res = await fetch("/?section_id=main-cart-items");
  const text = await res.text();
  const html = document.createElement("div");
  html.innerHTML = text;

  const newBox = html.querySelector(".cart-page-box").innerHTML;
  document.querySelector(".cart-page-box").innerHTML = newBox;

  addCartPageListeners();
}

As mentioned in the original message, it was originally rendering on the page correct like this.

<div id="shopify-section-main-cart-items" class="shopify-section">

Now it renders incorrectly like this and the dynamic numerical part of the ID changes from my dev environment to the production version.

<div id="shopify-section-template--20287847924031__cart-items" class="shopify-section">

Thanks Liam.

[thedesignersdev · Accepted solution]

Incase anyone else has this issue i was able to figure out how to add the dynamic section id this way.

Add this to the section page.
In my case main-cart-items.liquid

{% unless section.id == empty %}
  <script>
    const sectionID = '{{ section.id }}';
  </script>
{% endunless %}

Then in the .js file you can receive the unique section id this way.

  // Ensure sectionID is defined before using it.
  if (typeof sectionID === 'undefined') return;
  const res = await fetch(`/?section_id=${sectionID}`);

Problem solved, everything is working perfectly now.

Have a good one.