Duuuddeeee... i'm crying 😭this is so beautiful. Well done mate, well done. I knew about the Alt View stuff but never thought about creating a JSON object. Brilliant stuff. And that Vue templating blew my mind literally. I was looking into advance filtering for an OS 1.0 Theme (yikes). I know you can only filter by tags in OS1. A bit of R&D will need to be made but It certainly is a good starting point. Thanks Chris, insanely creative.
Instead of wrapping your JSON values in double quotes manually, I'd recommend the `| json` liquid filter. Inevitably, one of your collection or product descriptions will include double quotes and it'll break your JSON. the | json liquid filter escapes those types of characters automatically. So instead of "description": "{{ collection.description }}" it'd be "description": {{ collection.description | json }}
I love this. I'm having major pains trying to escape out the double and single quotes in my product titles to get the json to format correctly, but this has great potential.
Hey Jordy. Thanks for pointing this out! I took a look at the code and the network requests in my browser and noticed that the page is asynchronously reloading the whole section via query param of ?section_id= Nice little easter egg there from Shopify!
I am totally excited about your API construction. I see a problem with your customer. Since the products are loaded asynchronously, they are not in the HTML as they should be for SEO. Do you see a problem there?
I'm not an SEO Expert but on something like a collection page with multiple filters, would product titles and prices be that important to be server-side rendered? Definitely on the product page I would SEO is paramount but not sure about collection pages.
Great video! I was trying to implement this in a store I'm working on and sadly it only fetched the first 50 products of the collection, I know this is a limit set by the Shopify API but is there a way to circumvent it using this method?
Thanks Chris, great video! Is it possible when hacking together the API that in the fetch call you pass a parameter for filtering purposes? Or have you used it to fetch everything and then filter the result?
Hi Chris! Do you have a tutorial that could show me how to add a custom field so that an image will show up right below the product title? So for example I want to add an image that shows brand | authorized dealer . TIA
I don't have a tutorial on that specific thing but the process would be 1. Add the field to the section schema. 2. Head into your customiser and upload the image to the new field. 3. Output the value in your theme code using Liquid
Hi Chris, awesome video! Do you have a tutorial that could help me achieve this on a product page in dawn…access product/ variant data asynchronously i.e product variant switching ( color and size options) without reloading the page
@@CodewithChristheFreelancer Dawn doesn't seem to allow me to achieve this asynchronous/no page reload variant switching on the product page- while having multiple variants as separate products. Maybe i'm doing something wrong?
what do you mean by 'multiple products as separate variants' ? Are you talking about 'product sets'? See here: christopherdodd.com/product-sets-in-shopify/
Hi Chris, awesome tutorial! I was just working on something like this and racking my brain. Do you know by chance if we can use a predictive search api with the shopify storefront api? I know it doesnt support rest and I‘ve been setting up a simple headless site and its really been a struggle
@@CodewithChristheFreelancer Hey thanks for the reply! What I am not understanding is the storefront api allows data to be queried with graphql and does not support rest, and the predictive search api offers only rest endpoints. If we have a headless site and we can only access data through the storefront api with graphql, how can we implement something like this?
Well they're two different APIs so they don't need to talk to each other but thinking about it now, I think the predictive search API is a theme only API so you'll probably get a CORS error when trying to access it from outside of the theme. I think you need to search within the Storefront API shopify.dev/api/usage/search-syntax
@@CodewithChristheFreelancer Thanks appreciate it! It looks like a query with graphql needs to be made per the docs you sent to me and that graphql query can be fetched to make it asynchronous. That is what I was looking for, thanks for sending me the right link
i am trying to create custom filters where tag and price filters works altogether and it works but the issue is it's a little slow how can i optimize it?
Duuuddeeee... i'm crying 😭this is so beautiful. Well done mate, well done. I knew about the Alt View stuff but never thought about creating a JSON object. Brilliant stuff. And that Vue templating blew my mind literally. I was looking into advance filtering for an OS 1.0 Theme (yikes). I know you can only filter by tags in OS1. A bit of R&D will need to be made but It certainly is a good starting point. Thanks Chris, insanely creative.
Instead of wrapping your JSON values in double quotes manually, I'd recommend the `| json` liquid filter. Inevitably, one of your collection or product descriptions will include double quotes and it'll break your JSON. the | json liquid filter escapes those types of characters automatically. So instead of "description": "{{ collection.description }}" it'd be "description": {{ collection.description | json }}
Good tip!
This video got you a new follower. Really well explained and EXTREMELY useful. You're the man.
You are the best teacher, lots of love and respect for you from Pakistan.
I love this. I'm having major pains trying to escape out the double and single quotes in my product titles to get the json to format correctly, but this has great potential.
Super super helpful, most value packed, creative and innovative video ever....kudos...🕺🕺
Your videos are nothing but pure value bombs.💣💣💣
Lots of love from INDIA...
This was the most awesome thing
Mindblowing! Thank you very much for sharing!
Is Angular importable as vue is into a liquid template?
Im just wondering, the new dawn filters. Do basically the same? It doesn’t reload the page at all.
Why would this be a better option then?
Hey Jordy. Thanks for pointing this out! I took a look at the code and the network requests in my browser and noticed that the page is asynchronously reloading the whole section via query param of ?section_id=
Nice little easter egg there from Shopify!
This is soooo sick!!! Thank you for sharing
Thank Chris for your sharing, a video very interesting :D
I am totally excited about your API construction.
I see a problem with your customer. Since the products are loaded asynchronously, they are not in the HTML as they should be for SEO.
Do you see a problem there?
I'm not an SEO Expert but on something like a collection page with multiple filters, would product titles and prices be that important to be server-side rendered? Definitely on the product page I would SEO is paramount but not sure about collection pages.
Great video! I was trying to implement this in a store I'm working on and sadly it only fetched the first 50 products of the collection, I know this is a limit set by the Shopify API but is there a way to circumvent it using this method?
Perhaps you can use the pagination tags for this.
Thanks Chris, great video! Is it possible when hacking together the API that in the fetch call you pass a parameter for filtering purposes? Or have you used it to fetch everything and then filter the result?
Yep! That's exactly what I do in this video here from minute 20:41
ruclips.net/video/qHhrHPwKc2g/видео.html
Hi Chris! Do you have a tutorial that could show me how to add a custom field so that an image will show up right below the product title? So for example I want to add an image that shows brand | authorized dealer . TIA
I don't have a tutorial on that specific thing but the process would be
1. Add the field to the section schema.
2. Head into your customiser and upload the image to the new field.
3. Output the value in your theme code using Liquid
Hi Chris, awesome video! Do you have a tutorial that could help me achieve this on a product page in dawn…access product/ variant data asynchronously i.e product variant switching ( color and size options) without reloading the page
Hi Kadia. Pretty sure that's already a feature of Dawn
@@CodewithChristheFreelancer Dawn doesn't seem to allow me to achieve this asynchronous/no page reload variant switching on the product page- while having multiple variants as separate products. Maybe i'm doing something wrong?
what do you mean by 'multiple products as separate variants' ?
Are you talking about 'product sets'?
See here: christopherdodd.com/product-sets-in-shopify/
Hi Chris, awesome tutorial! I was just working on something like this and racking my brain. Do you know by chance if we can use a predictive search api with the shopify storefront api? I know it doesnt support rest and I‘ve been setting up a simple headless site and its really been a struggle
I can't see any reason why that wouldn't work. What is it you're struggling with?
@@CodewithChristheFreelancer Hey thanks for the reply! What I am not understanding is the storefront api allows data to be queried with graphql and does not support rest, and the predictive search api offers only rest endpoints. If we have a headless site and we can only access data through the storefront api with graphql, how can we implement something like this?
Well they're two different APIs so they don't need to talk to each other but thinking about it now, I think the predictive search API is a theme only API so you'll probably get a CORS error when trying to access it from outside of the theme. I think you need to search within the Storefront API
shopify.dev/api/usage/search-syntax
@@CodewithChristheFreelancer Thanks appreciate it! It looks like a query with graphql needs to be made per the docs you sent to me and that graphql query can be fetched to make it asynchronous. That is what I was looking for, thanks for sending me the right link
i am trying to create custom filters where tag and price filters works altogether and it works but the issue is it's a little slow how can i optimize it?
Not sure what you mean. Maybe send me a message on Patreon and we can work through it together.
www.patreon.com/shopifydeveloper
Awesome hack!
great hack!
Is this stil possible in 2024?
Sure. Why would it not be?
G E N I U S!
🤯