Is there a workaround for passing Liquid objects (like product.id or shop.permanent_domain) into external JavaScript files in the assets folder?

Online Store and Theme Development
,
1

Is there a workaround for passing Liquid objects (like product.id or shop.permanent_domain) into external JavaScript files in the assets folder?

 document.addEventListener("DOMContentLoaded", function() {
    // create a new element
    const div = document.createElement("div");
    div.innerText = "Hi Wolverine";
    
    // find product title
    const titleEl = document.querySelector(".product__title");
    
    // insert after product title
    if (titleEl) {
      titleEl.insertAdjacentElement("afterend", div);
    }
    
    // also log in console - NOTICE LAST TWO LOGS, THEY ARE NOT SHOWING
    console.log("Hi Wolverine");
    console.log("shop:", "{{shop.permanent_domain}}");
    console.log("shop:", "{{product.id}}");
  });
2

Hi @Bhupendra_Kumar

Did you know there’s also a Shopify object in the window that has some of these details already?

// contains the unique *.myshopify.com domain
Shopify.shop

You can also use the Online Store API to retrieve the current items in the cart.

If you need to detect the current product on the page, you may be looking for a block instead, which would have access to the product ID through liquid.

Can you tell us more about what you’re trying to accomplish?

3

My app requires to read product id and shop domain via an external script. I even tried putting those in variables but didn’t work, it didn’t recognise those variables. When I passed as {{product.id}} it read it as plain strings.

But in main-product.liquid file it works inside script tags

Thank you for your response.

4

My app requires to read product id and shop domain via an external script

So are you registering an online script tag, or are you asking the merchant to create a liquid template or are you offering a theme block?

When I passed as {{product.id}} it read it as plain strings.

I suspect that you’re trying to use liquid in an JS script, which isn’t possible.

When using JavaScript, you don’t have access to Liquid tags. Liquid tags are rendered on the server side before the HTML is even sent to the client.

5

Thanks, it is a big help.

6

You can use liquid inside <script> within a .liquid file :wink:

E.g.

<script type="text/javascript">
    window.myCustomData = {
        shopId: {{ shop.id | json }}
    }
</script>
1 Like
7

Good point, I assumed you’re limited to only tooling available for App Developers. But if you have direct access to the theme editor then you can make .liquid files.

The closest option to that for App Partners is publishing a theme block which includes .liquid as a entry file.

1 Like
8

@Dylan @Luke, I thank you both. I was stuck in it for about 20 hours.

@Dylan, Yes, I’ll eventually go with the theme block. However, I am also considering an alternative method, such as providing merchants with a small snippet of code that they can copy into their theme (main-product.liquid).

Something like,

<script src="https://app-host.com/widgetscript.js"></script>

It was just a thought.

Thank you guys again.

9

However, I am also considering an alternative method, such as providing merchants with a small snippet of code that they can copy into their theme (main-product.liquid).

Personally I wouldn’t recommend this approach.

  1. Merchants are often unfamiliar with code, and asking them to edit code directly is very risky. It might not be directly your fault if a mistake is made, but your integration process will be blamed.
  2. If the merchant uninstalls your app, then they will have to know to also remove this snippet.
  3. Any customization options have to be surfaced in your app, and not in the theme editor where it’s more convenient for merchants.
  4. Without a theme block, any custom settings won’t have built in backups or restores like themes can

By leveraging theme blocks, it’s much more intuitive and less risky and has a built in lifecycle for removal when your app is uninstalled.

2 Likes
10

Thanks, @Dylan!

I hadn’t considered these possibilities, and that it could go sideways. I have decided I’ll go with the theme app extension now. Thank you for the guidance.