Working with Liquid and JavaScript in Shopify Themes

Understanding the Interaction Between Liquid and JavaScript

When developing Shopify themes, you’ll often find yourself working with both Liquid and JavaScript. While these two languages serve different purposes, there are times when you need them to work together seamlessly. One common scenario is using Liquid variables within JavaScript code. This can be tricky for newcomers, but with the right approach, it’s entirely possible and can greatly enhance your theme’s functionality.

The Challenge of Mixing Languages

Liquid is a server-side templating language, while JavaScript runs on the client-side. This fundamental difference can lead to confusion when trying to use Liquid variables in JavaScript. Let’s explore why this can be challenging and how to overcome it.

Why Direct Insertion Doesn’t Work

You might be tempted to simply insert a Liquid variable directly into your JavaScript code, like this:

document.getElementById("custom-price").innerHTML = {{disp_custom_price}};

However, this approach often fails because the JavaScript interpreter doesn’t understand Liquid syntax. When the page loads, Liquid processes its variables first, but the resulting value isn’t properly formatted for JavaScript to use.

The Problem with Unquoted Variables

Another common mistake is trying to assign a Liquid variable to a JavaScript variable without proper formatting:

var mytext = {{disp_custom_price}};

This also fails because the Liquid output isn’t treated as a string in JavaScript, leading to syntax errors.

The Solution: Proper Formatting and Quoting

The key to successfully using Liquid variables in JavaScript is to properly format and quote them. Here’s the most reliable method:

var mytext = '{{disp_custom_price}}';
document.getElementById("custom-price").innerHTML = mytext;

By enclosing the Liquid variable in single quotes, we ensure that its value is treated as a string in JavaScript. This simple technique solves most issues related to using Liquid variables in JavaScript.

Advanced Techniques for Price Formatting

While the above solution works well for basic scenarios, there are more advanced techniques you can use, especially when dealing with price formatting.

Using Shopify’s Currency Formatting Functions

Shopify provides built-in JavaScript functions for formatting currency. This approach allows for more dynamic price updates without relying solely on Liquid’s initial formatting.

var custom_price = {{custom_price}};
var display_custom_price = theme.Currency.formatMoney(custom_price, theme.moneyFormat);
document.getElementById("custom-price").innerHTML = display_custom_price;

This method is particularly useful when you need to recalculate and reformat prices based on user interactions, such as changing product options or quantities.

Adapting to Different Shopify Versions

It’s important to note that the exact syntax for currency formatting may vary depending on your Shopify theme version. For instance, in Shopify 2.0 themes like Canopy, the syntax might be slightly different. Always refer to your theme’s documentation or the Shopify API reference for the most up-to-date methods.

Best Practices for Mixing Liquid and JavaScript

To ensure your code remains maintainable and performs well, consider these best practices when working with Liquid variables in JavaScript:

Use Data Attributes for Complex Data

For more complex data structures, consider using data attributes to pass information from Liquid to JavaScript:

<div id="product-data" data-product-json="{{ product | json | escape }}"></div>

Then in JavaScript:

var productData = JSON.parse(document.getElementById('product-data').dataset.productJson);

This approach keeps your HTML cleaner and allows for easier parsing of complex objects.

Leverage Window Objects for Global Access

For data that needs to be accessed across multiple JavaScript files, consider assigning Liquid variables to window objects:

window.productJSON = {{ product | json }};

This makes the data globally accessible in your JavaScript code.

Be Mindful of Performance

While it’s convenient to use Liquid to pass data to JavaScript, be cautious about passing large amounts of data this way. It can increase your initial page load time. For large datasets, consider using AJAX to load data asynchronously when needed.

Troubleshooting Common Issues

Even with these techniques, you might encounter some issues. Here are some common problems and their solutions:

Unexpected Output

If you’re seeing unexpected output like lazyProductdropCollection when trying to log a Liquid variable, it might be because the variable contains a complex object that Liquid can’t properly serialize. In such cases, try using the json filter:

{% assign sorted_products_unsort = section.settings.collection.products | json %}
<script>
var liquid_var = {{ sorted_products_unsort }};
console.log(liquid_var);
</script>

Escaping Special Characters

When working with strings that might contain special characters, use the escape filter to prevent JavaScript errors:

<script>
var productTitle = '{{ product.title | escape }}';
</script>

This ensures that any quotes or other special characters in the product title don’t break your JavaScript.

By following these guidelines and best practices, you can effectively use Liquid variables in your JavaScript code, creating more dynamic and interactive Shopify themes. Remember to always test your code thoroughly across different browsers and devices to ensure consistent functionality.