Rendering Snippets with AJAX

Highlighted
New Member
3 0 0

Hello,

I apologise in advance if this has already been asked here before. 

 

I'm implementing Predictive Search into my theme using Shopify's AJAX library. The search itself is all working fine and retrieving product suggestions as expected, and I can render the products using the JSON products just fine.

 

I use a product-card snippet to show products everywhere else in the theme and I'd really like to be able to render it here for each of the search suggestions returned.

 

Something like...

 

var productSuggestions = response.resources.results.products;
if (productSuggestions.length > 0) {
    $.each(productSuggestions, function(index, product) {
        {% include 'product-card' with [ product ] %}
    }     
}

 

I'm aware this won't work as it's not possible to pass Javascript variables to Liquid, but I'm wondering if there is a way I can use something like the Section Rendering API to call my product-card snippet for each of the products returned by the search query.

 

I know I could just rewrite the code for the product-card with the Javascript but hate having to repeat code if I don't have to and it would just be much better for keeping everything consistent across the theme.

 

Any help you can offer would be much appreciated.

 

Thanks!

 

Ben

0 Likes
Highlighted
Shopify Partner
2471 129 406

Alternate templates and {% layout none %}

https://www.shopify.com/partners/blog/shopify-alternate-templates

Alternate technique is to turn the snippet into a frontend javascript template, themes with cart drawers often have examples of this.

 

Note: some choose to do this with search.liquid instead of product.liquid, ala search.ajax.liquid

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Highlighted
New Member
3 0 0

Hi Paul, thanks for your answer. Are you able to elaborate, please?

I had a look at this example here, which I believe uses the technique you suggest. But as I should have mentioned, I'm using the built-in /search/suggest.json, which already retrieves the products in JSON format.

What I'd like to do is just take each of those products and call the same Product Card snippet I use everywhere else in the theme (which uses a few things like responsive images etc), rather than code it out again.

I read here that it's possible to call a snippet using in Javascript. However, when I try this I just get an error saying "This Liquid context doesn't support includes". I know its something to do with the fact that Liquid code is rendered server-side before the JS is called, so I was looking into using something like the Section Rendering API. But I can't figure out how to call the Liquid snippet with the JSON product variable.

So is alternative templates still the way to go for what I want to do? 

 

Thanks!

0 Likes
Highlighted
Shopify Partner
2471 129 406

Your doing frontend work here combining the STATIC results from two different systems.

Call the suggestion.json, then call the alternate template that includes whatever snippets matter and that gives you rendered HTML.

At that point liquid is irrelevant,  it's now only frontend techniques to use that rendered HTML as template for the data in suggestion.json

Notice at no point are you injecting json code into the liquid files from the frontend.

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
New Member
3 0 0

Hi Paul, 

Sorry for the delay in getting back to you. I've been busy on other projects and haven't had a chance to look into this.

Thanks for your answer. I think I understand (sorry I am quite new to this). 

If I'm correct, what you're suggesting is:

  • Create an alternative layout for my 'product-grid' section template (which uses the product-card snippet) using {% layout none %}, expressing the resulting template in JSON
  • GET suggest.json to get the suggested product results
  • Then a second GET to retrieve the alternative template, passing in the product objects retrieved from suggest.json
  • Render the result to the target element.

Am I on the right track here?

Thanks again!

0 Likes