Shopify app blocks with client side request's dynamic content

idango
Shopify Partner
16 0 2

Hi there!

 

I want to understand the best practice for building a Shopify App Block with dynamic content.


Says I have an endpoint on some remote server, "https://example.com/product?shop=abc.myshopify.com", which serves as an endpoint with an array of products, and I'd like to display all of those products in a block.


The data must be loaded on the client side, and I want to understand how to display those inside the block with the inherited Product cards and shop style.

 

Thanks.

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
5370 1296 1587

Hi @idango 

 

If you follow the instructions here for app you will be able to create a theme extension that you can use a liquid template. If you want to call a product you can use the handle just like mentioned here. The collection only give maximum of 50 products but I have not heard of any code that will call all product.

 

In the liquid file, you can use the code below as reference.

 

{% for product in collection.products %}
<h2>{{ product.title}}</h2>
<span>{{ product.price | money }}</span>
{% endfor %}

 

I hope it help. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


idango
Shopify Partner
16 0 2

This is definitely not answering my question.

 

My question focuses on how to display dynamic content using AJAX calls on client / server side if possible

Made4uo-Ribe
Shopify Partner
5370 1296 1587

Sorry. I overlooked that you want your own server to show the product. If that is the case, you need to write in json for every product, and display it as a json in the app block. Unfortunately, since the source of the product is external it would be hard for you to use liquid code for that. The best option is use javascript and template literal 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


idango
Shopify Partner
16 0 2

Thank you Ribe, can you elaborate an example? I'm not sure that I fully understood