Shopify app blocks with client side request's dynamic content

[idango]

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.

[Made4uo-Ribe]

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!

[idango]

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]

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 

[idango]

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