core-speculative-render.liquid

{%- comment -%}
  ----------------------------------------------------------------------------------------------------------------------
  SPECULATION RULES SCRIPT COMPONENT
  ----------------------------------------------------------------------------------------------------------------------

  This snippet dynamically generates speculation rules scripts for Shopify themes, aiming to enhance loading performance by pre-rendering pages based on the type of page being viewed. It supports three primary contexts: 'page', 'product', and 'collection'.

  ********************************************
  Section Settings
  ********************************************

  * type: The context for which the speculation rules should be generated, determining the logic and URLs to pre-render.

  ********************************************
  Page Settings [case 'page']
  ********************************************

  * path: The request path transformed into a usable string format for identifying speculation rules.

  ********************************************
  Product Settings [case 'product']
  ********************************************

  * target_collection: The collection associated with the product, used for pre-rendering the collection's URL.

  ********************************************
  Collection Settings [case 'collection']
  ********************************************

  * collection: The products within the collection, with a limit of 2, used for pre-rendering their URLs.
{%- endcomment -%}

{% case type %}
  {% when 'page' %}
    {% liquid
      assign path = request.path | replace: '/', '-' | remove_first: '-'

      if path == ''
        assign path = 'index'
      endif

      assign speculation_rule = shop.metaobjects.speculation_rules[path]
    %}

    {% if speculation_rule and collection == blank and product == blank %}
      <script type="speculationrules">
        {
          "prerender": [
            {
              "urls": [{% for url in speculation_rule.pre_render.value %}"{{ routes.root_url }}{{ url | remove_first: '/' }}"{% unless forloop.last %},{% endunless %} {% endfor %}]
            }
          ]
        }
      </script>
    {% endif %}
  {% when 'product' %}
    {% liquid
      if product.metafields.content.breadcrumb_collection.value != blank
        assign target_collection = product.metafields.content.breadcrumb_collection.value
      else
        assign target_collection = product.collections.first
      endif
    %}
    <script type="speculationrules">
      {
        "prerender": [
          {
            "urls": ["{{ target_collection.url }}"]
          }
        ]
      }
    </script>
  {% when 'collection' %}
    <script type="speculationrules">
      {
        "prerender": [
          {
            "urls": [{% for product in collection.products limit: 2 %}"{{ product.url }}"{% unless forloop.last %},{% endunless %}{% endfor %}]
          }
        ]
      }
    </script>
{% endcase %}