Need help with creating custom JSON endpoint

Solved
Tourist
4 1 0

I need to load some specific data using ajax from my front end javascript, while on a collection page. I'd like to serve the data via json endpoint using a template liquid file. The data will consist of product and variant information for the current collection. 

 

I have created a liquid file that out puts the JSON.. something like this:

 

{% layout none %}

{%- assign products = collection.products -%}
{
    {%- for product in products -%}
    products: [
        {%- if product.available -%}
    {
            id: {{ product.id | json }},
            title: {{ product.title | json }}, 
            handle: {{ product.handle | json }},
            variants: [
            {% for variant in product.variants %}
                {
                    id: {{ variant.id | json }},

etc... and saved the file in templates, as collection-filters-json.liquid

 

In my front end Javascript I am loading it with fetch, using the URL https://mysite.ca/collections/someCollection?view=collection-filters-json.liquid

 

I can't get it to work, and I'm not sure if I'm setting this up correctly. I can't hit the endpoint in a browser and see any json, it just shows the collection page view. I can't use data.json() in my js, as it doesn't seem to be json, and if I omit it, I get the header, but no data. 

 

thanks

Chris

 

 

 

 

 

0 Likes
Tourist
4 1 0

I've made some progress - I figured out I have to create a collection. template, rename to collection.filters-json.liquid - and it must be set to an actual collection I create. Also if you do this in your duplicate testing theme, it won't work as these templates will not be available to set - they have to be set in the master or published theme. 

 

So now when I hit my endpoint /collections/collectionName?view=filter-json I do get the text of the JSON I built and output to the browser screen. However when I try to load it on the front end with JS using fetch(...).then(data => data.json()) I get an error regarding the JSON format being wrong: 

 

Uncaught SyntaxError: Unexpected token p in JSON at position 0

 

Maybe I'm not building the JSON correctly? Or the document rendered isn't in proper JSON, and is in HTML instead just outputting a body element filled with text? (that is what I see in the document actually). Maybe I need to stringify it then json it with JSON in JS... well I'll go try and find out :)

0 Likes

Success.

Tourist
4 1 0

Well I think I got it pretty much figured out now... first off I had no quotes in the json around the strings  (doh!), and also there were some other issues with the JSON being rendered, extra comma, etc. 

 

I am stringifying it then json'ing it with: 

.then(data => data.json(JSON.stringify(data)));
 
I have an object in my JS to use now.. thanks me, for all the help. 
0 Likes
Shopify Expert
9965 84 1468

That was an adventure.
Thanks for posting the end reasons along the way - it could prove useful to others that hit a similar problem. 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Tourist
4 1 0

Indeed - others can learn from my folly. 

0 Likes