Problems related to unicity of ID

[bakura10]

Hi,

Michael from Maestrooo here.

While working on the combined listing update for our apps, I stumbled upon an issue that, considering the actual architecture of theme blocks, might cause a bigger issue and I thought it was useful to share it.

Most of premium themes have a concept of a quick buy. A quick buy is a modal that allows buyers to add product without going to the actual product page.

Due to how sections and templates work, the only way to generate a quick buy by ensuring we re-use merchants settings, is to actually render both the standard product AND the modal content, and then let JS render the page, extract the modal content and insert the content into the DOM.

main-product.liquid section:

// Render the main product
<main-product>
  {% for block in section.blocks %}
     ...
  {% endfor %}
</main-product>

// Render the quick buy, as this is the only way for us to get access to the blocks configured by the merchant, and their settings

<quick-buy-modal-content>
  {% for block in section.blocks %}
  {% endfor %}
</quick-buy-modal-content>

When the customer open a quick buy, the theme ahs to render the product page, and extract the relevant part (here the quick buy modal content) and insert it into the DOM.

Now... you can see the problem! In the context of theme blocks, Shopify blocks with ID, and due to that, when on product pages, you will have duplicated ID everywhere :/.

One solution I can see to this approach is to add a concept of "context" to the section rendering API (this is something I advocated for years, but it seems it becomes more important):

{% if request.context == 'quick-buy' %}
   // Only render the quick buy
{% else %}
   // Render the main page
{% endif %}

And make sure that Shopify also uses the context as part of the block ID generation.