Shopify - Get list of product from a specific collection

Question

In shopify, I am creating 4 dropdowns.

Dropdown 1 - City Dropdown 2 - Category of shops (such as Apparel, stationary etc) Dropdown 3 - Shops available in the particular city and particular shop Dropdown 4 - Items available in the particular shop

My requirement is, when a particular shop is selected (Dropdown 3) below the dropdown all the products in that shop should be listed (I will make the product part of collection and collection name will be same as shop name).

I realize that I need to use Ajax. I checked the APIs offered by shopify but somehow I am not able to connect dots. I am not able to use it. Can you please provide a pointer where it is explained how to achieve it.

Please note, i am new to web development and shopify.

EDITED*

1. I have created another template called "collection.alternate".
2. Tagged the collection to the new template.

3. In theme.liquid I have used the following code, to avoid header and footer from getting displayed in iframe

   {% if template != 'collection.alternate' %} {% include 'header-bar' %} ..... {% endif %}

4. Used iframe to load the collection.alternate.

However in iframe the Header is still getting displayed. When I analyze the "Elements" in Chrome developer tools for the iframe, I see the header logic is generated for collection.template. How do I stop header from appearing in iframe.

Answer 1

You don't need AJAX for this functionality.

Each values in the four dropdowns should be added as tags in the products. Then you can use simple JavaScript command to change the url as required and display required products.

For ex., let's say you have New York as a City, and CK as a Shop. Now to display the products that are in CK store in New York, all the said products must contain New York and CK as tags. The final URL to display the said products will be - storename.myshopify.com/collections/all/new-york+ck

Answer 2

To call products from shopify collects you can simply use this loop:

{% for product in collections.shop_name.products limit: 4 %}     /*********** shop_name is collections name limit is used to show no. of products ******/
       <li><a href="{{ product.url}}"><img src="{{ product.featured_image | product_img_url: 'medium' }}" alt=""></a></li>
 {% endfor %}

Answer 3

Below is the link to shopify article that describes how to filter products based on tags.

https://docs.shopify.com/support/your-store/collections/filtering-a-collection-with-multiple-tag-drop-down

Thanks @Hymnz for guiding me to the article.

Answer 4

Just mention your collection name in collection array index

{% for product in collections['collection-name'].products %}
{{product.name}}
{% endfor %}