Ecommerce Shopify WordPress Discussion

How to use Ajax to render liquid code and output as HTML?

I'm working on a mini cart on my Shopify site and using ajax to add items to the cart. For each line item I need to get metafield data, but jquery won't allow me to do this. I have all the code for my line items in a section line-item-list.liquid I'm trying to use ajax to get the line-item-list.liquid using Shopify's section-render (https://shopify.dev/docs/api/section-rendering) Below is the code for my mini-cart and the line-item-list.liquid. The problem is that this code is returning as a JSON string, but I need it to render as HTML. Is it possible to use Ajax to render the liquid code and output it as HTML? Any help would be greatly appreciated! Thanks! mini-cart.liquid <div class="add-line-item">Add Line Item</div> <div class="line-items"></div> <script> $(document).ready(function() { $('.add-line-item').on('click', function() { $.ajax({ url: '/?sections=line-item-list', type: 'GET', dataType: 'html', success: function(data) { $('.line-items').html(data); }, error: function(jqXHR, textStatus, errorThrown) { console.error("Error fetching line-item-list content:", errorThrown); } }); }); }); </script> sections/line-item-list.liquid {% for item in cart.items %} {% if item.product.metafields.custom.some-metafield == true %} {% assign is_metafield = true %} {% endif %} ...other code here {% endfor %}
I figured it out, I had to change the URL to url: '/?section_id=line-item-list' Updated code <script> $(document).ready(function() { $('.add-line-item').on('click', function() { $.ajax({ url: '/?sections=line-item-list', type: 'GET', dataType: 'html', success: function(data) { $('.line-items').html(data); }, error: function(jqXHR, textStatus, errorThrown) { console.error("Error fetching line-item-list content:", errorThrown); } }); }); }); </script>

December 30, 2023

Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.