FROM CACHE - en_header

output navigation object as a JSON

Shopify Partner
5 0 2


I'm looking for a way to combine liquid & react/preact to create a store front.

I believe that we could send & catch objects as JSON so that we could use that data in a react jsx file like this:

//section liquid file
<script id="inline-json-product" type="application/json">
  {{ product | json }}


and then, in a jsx file, we could parse this object like this:

//jsx file
const products = JSON.parse(document.getElementById("json-product").text)


this works fine with product object, however, links navigation objects cannot be output as json data.

so what I tried was to use a map filter like this:

<script id="json-category" type="application/json">
  {% assign links = linklists.category-menu.links | map: 'object' %}
  {{ links | json }}

in this way, I could only output the first layer links, and could not child/grandchild layer navigation objects. (the navigation has a multiple layers).


Does anybody has an idea?

I could use NextJS or even hydrogen, but let's put it aside for now.


Thank you.

Replies 0 (0)