skip to Main Content

I am trying to call a backend Api and then render Shopify product. But the problem is I cannot assign variable from JS to Shopify liquid file.

Here’s the function that I am running:

<script async defer>
  const BACKEND_SHOPIFY_URL="/apps/client/upsells";
      (async()=>{
        try {
          const response =  await fetch(`${BACKEND_SHOPIFY_URL}?position={{ position }}`);
          const data= await response.json();
          {% assign result= "SOMETHING HERE" %}        // need to assign result = data
          }
        catch(err) {
            console.log(err,'error');
              }
      })();
</script>

I tried almost everything, but no success. How can I render it asynchronously? I came across the fetch filter, which I am not sure how I can import in theme app extension of mine. JS is a client side language and liquid is server side. Is there any way, we can rerender certain components?

2

Answers


  1. You are correct. You cannot assign anything JS to Liquid, as Liquid is all compiled and rendered by Shopify before any JS even loads. Typically you can provide you JS with data by rendering the data you need inside JS. Try that. Usually works. No need for an extra callback from JS back to Shopify using a Proxy.

    Login or Signup to reply.
  2. Store your upsell data with metafields or meta objects. Render the data with liquid. After that, use js to render your component. This is the typical way

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search