Answers.Body: <p>I think you could use the relatedTo parameters for this:
  <a href="https://craftcms.com/docs/relations#the-relatedTo-param" rel="nofollow noreferrer">https://craftcms.com/docs/relations#the-relatedTo-param</a></p>
  
  <p>It basically allows you to filter elements based on their relationships with other elements. </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-11T20:19:46.600Z
Answers.LastActivityDate: 2017-08-11T20:19:46.600Z
Answers.UserDisplayName: Youniteus
Body: <p>I am using Craft CMS 2.6.2987 and the Craft Commerce plugin.</p>
  
  <p>I am building a list of products on a page using query params. The idea is that there are 2 approaches.</p>
  
  <p>1) A user clicks a set of checkboxes and it populates the URL dynamically with these values and ajax updates the container with the results from that.</p>
  
  <p>2) When a user arrives at a page with query params on it I loop through the products and get them based on the params in the URL.</p>
  
  <p>I am currently ordering products in a structure like so:</p>
  
  <p><a href="https://i.sstatic.net/eu9xy.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/eu9xy.png" alt="enter image description here"></a></p>
  
  <p>The reason I am doing this is because the client wants full control over ordering of products on these pages via drag and drop.</p>
  
  <p>Within each structure entry there are matrix fields that have the actual products in them that are taken from commerce products like the below:</p>
  
  <p><a href="https://i.sstatic.net/4ee9Y.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/4ee9Y.png" alt="enter image description here"></a></p>
  
  <p>With this setup we have the following on this URLfor example</p>
  
  <p>/products/tables</p>
  
  <p><a href="https://i.sstatic.net/0wE35.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/0wE35.png" alt="enter image description here"></a></p>
  
  <p>In the filter buttons there are dropdowns that when clicked populate the url with query params that output the following:</p>
  
  <p><code>/products/tables?types=dining-table,placemats</code></p>
  
  <p>What I would like to know is if it is possible to query commerce products based on the above because <code>dining-table,placemats</code> will be linked directly to Commerce product types as you can see below:</p>
  
  <p><a href="https://i.sstatic.net/zwn2W.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/zwn2W.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit code added</strong></p>
  
  <pre><code>{% for block in entry.productBlock.type('products') %}
  
              {% if block.layout == "leftFeatured" %}
  
              &lt;section class="center mv5"&gt;
                  &lt;section class="cf nl4 nr4 Grid--gutters"&gt;
                  {% if block.product|length %}
                      {% for product in block.product %}
  
                          {% set mainImage = product.productImages.first() %}
                          {% set mainImageUrl = mainImage.getUrl() %}
                          {% set body = product.body|e %}
                          {% set groupedFieldData = [] %}
                          {% set groupedFieldData = groupedFieldData|merge({('id'):product.id}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('title'):product.title}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('productImage'):mainImageUrl}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('body'):body}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('brand'):product.productBrand.first().title}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('designer'):product.productDesigner.first().title}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('url'):product.url}) %}
  
  
                          &lt;article id="product-{{ product.id }}" class="{% if loop.index == 1 %}w-50-ns w-100{% else %}w-25-ns w-100{% endif %} fl mb3 Grid-cell"&gt;
                              &lt;span class="bg Grid-fill product--hover" style="background-image:url({{ mainImageUrl }});"&gt;
                                  &lt;div class="block"&gt;
                                      &lt;div class="absolute top-1 left-1 share-hover link z-2"&gt;
                                          &lt;svg class="share-icon absolute" width="19" height="18"&gt;
                                              &lt;use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#share_icon"&gt;&lt;/use&gt;
                                          &lt;/svg&gt;
                                          &lt;ul class="ma0 pa0 mb4 list share-list relative"&gt;
                                              &lt;li class="dib v-top mw2"&gt;
                                                  &lt;div class="icon icon--kudos_icon"&gt;
                                                      &lt;a class="share twitter" v-on:click.stop.prevent="openShareWindow($event)" href="https://twitter.com/share?url=https://simplesharebuttons.com&amp;amp;text=Simple%20Share%20Buttons&amp;amp;hashtags=simplesharebuttons"&gt;
                                                          &lt;svg width="100%" height="20"&gt;
                                                              &lt;use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#twitter_logo"&gt;&lt;/use&gt;
                                                          &lt;/svg&gt;
                                                      &lt;/a&gt;
                                                  &lt;/div&gt;
                                              &lt;/li&gt;
                                              &lt;li class="dib v-top mw2"&gt;
                                                  &lt;div class="icon icon--kudos_icon"&gt;
                                                      &lt;a href="https://www.facebook.com/sharer.php?u=https://codepen.io/patrickkahl" v-on:click.stop.prevent="openShareWindow($event)"&gt;
                                                          &lt;svg width="100%" height="20"&gt;
                                                              &lt;use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#facebook_logo"&gt;&lt;/use&gt;
                                                          &lt;/svg&gt;
                                                      &lt;/a&gt;
                                                  &lt;/div&gt;
                                              &lt;/li&gt;
                                              &lt;li class="dib v-top mw2"&gt;
                                                  &lt;div class="icon icon--kudos_icon"&gt;
                                                      &lt;a href="http://pinterest.com/pin/create/button/?url={{ product.url }}&amp;media={{ product.url }}&amp;description={{ product.title }}" v-on:click.stop.prevent="openShareWindow($event)"&gt;
                                                          &lt;svg width="100%" height="20"&gt;
                                                              &lt;use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#pinterest_logo"&gt;&lt;/use&gt;
                                                          &lt;/svg&gt;
                                                      &lt;/a&gt;
                                                  &lt;/div&gt;
                                              &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/div&gt;
  
                                      &lt;a href="#" v-on:click.stop.prevent="quickView($event)" class="absolute bottom-1 left-1 link gray z-2"&gt;
                                          &lt;span style="display: none;" class="product-data"&gt;{{ groupedFieldData|json_encode()|raw }}&lt;/span&gt;
                                          &lt;svg class="v-mid" width="19" height="18"&gt;
                                              &lt;use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#colour_icon"&gt;&lt;/use&gt;
                                          &lt;/svg&gt;
                                          &lt;span class="v-mid"&gt;(12)&lt;/span&gt;
                                      &lt;/a&gt;
                                      {% if craft.like.isLike(product.id) %}
                                          &lt;a href="{{actionUrl('like/remove', {id:product.id})}}" v-on:click.stop.prevent="addFavourite($event)" class="absolute top-1 right-1 z-2"&gt;
                                              &lt;svg width="19" height="18"&gt;
                                                  &lt;use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#favourite_icon_added"&gt;&lt;/use&gt;
                                              &lt;/svg&gt;
                                          &lt;/a&gt;
                                      {% else %}
                                          &lt;a href="{{actionUrl('like/add', {id:product.id})}}" v-on:click.stop.prevent="addFavourite($event)" class="absolute top-1 right-1 z-2"&gt;
                                              &lt;svg width="19" height="18"&gt;
                                                  &lt;use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#favourite_icon"&gt;&lt;/use&gt;
                                              &lt;/svg&gt;
                                          &lt;/a&gt;
                                      {% endif %}
                                      &lt;a href="{{ product.url }}" style="display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/span&gt;
                              &lt;div class="mv2 lh-copy"&gt;
                              &lt;p class="text-product"&gt;{{ product.title }}&lt;br&gt;
                              {% if product.productBrand | length &gt; 0 %}
                                  {{ product.productBrand.first() }}
                              {% endif %} {% if product.productDesigner | length &gt; 0 %}
                                  for {{ product.productDesigner.first() }}
                              {% endif %}&lt;br&gt;
                              &lt;/p&gt;
                              &lt;p&gt;{{ product.defaultVariant.price|commerceCurrency(cart.currency) }}&lt;/p&gt;
                              &lt;/div&gt;
  
                          &lt;/article&gt;
                      {% endfor %}
                  {% endif %}
                  &lt;/section&gt;
              &lt;/section&gt;
  
  
              {% elseif block.layout == "rightFeatured" %}
  </code></pre>
  
  <p>Is there a robust way of being able to build up the URLs or query multiple types of content from products related to sections in matrix fields and products related to product fields?</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-08-08T15:57:08.963Z
Comments.Text: Can you show us your current `craft.commerce.products` tag?
Comments.UserDisplayName: Stephen Callender
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-08-10T12:08:35.820Z
Comments.Text: Stephen Callender I have now reverted to using Algolia with faceted search instead
Comments.UserDisplayName: M dunbavan
Tags: <entries><plugin-craftcommerce><relations><ecommerce><query>
Title: Can Craft Commerce products be filtered with multiple query params?
ThreadText: # Can Craft Commerce products be filtered with multiple query params?
  
  (Asked by: username_0 on 2017-08-08)
  
  I am using Craft CMS 2.6.2987 and the Craft Commerce plugin.
  
  I am building a list of products on a page using query params. The idea is that there are 2 approaches.
  
  1) A user clicks a set of checkboxes and it populates the URL dynamically with these values and ajax updates the container with the results from that.
  
  2) When a user arrives at a page with query params on it I loop through the products and get them based on the params in the URL.
  
  I am currently ordering products in a structure like so:
  
  [![enter image description here](https://i.sstatic.net/eu9xy.png)](https://i.sstatic.net/eu9xy.png)
  
  The reason I am doing this is because the client wants full control over ordering of products on these pages via drag and drop.
  
  Within each structure entry there are matrix fields that have the actual products in them that are taken from commerce products like the below:
  
  [![enter image description here](https://i.sstatic.net/4ee9Y.png)](https://i.sstatic.net/4ee9Y.png)
  
  With this setup we have the following on this URLfor example
  
  /products/tables
  
  [![enter image description here](https://i.sstatic.net/0wE35.png)](https://i.sstatic.net/0wE35.png)
  
  In the filter buttons there are dropdowns that when clicked populate the url with query params that output the following:
  
  `/products/tables?types=dining-table,placemats`
  
  What I would like to know is if it is possible to query commerce products based on the above because `dining-table,placemats` will be linked directly to Commerce product types as you can see below:
  
  [![enter image description here](https://i.sstatic.net/zwn2W.png)](https://i.sstatic.net/zwn2W.png)
  
  **Edit code added**
  
  ```
  {% for block in entry.productBlock.type('products') %}
  
              {% if block.layout == "leftFeatured" %}
  
              <section class="center mv5">
                  <section class="cf nl4 nr4 Grid--gutters">
                  {% if block.product|length %}
                      {% for product in block.product %}
  
                          {% set mainImage = product.productImages.first() %}
                          {% set mainImageUrl = mainImage.getUrl() %}
                          {% set body = product.body|e %}
                          {% set groupedFieldData = [] %}
                          {% set groupedFieldData = groupedFieldData|merge({('id'):product.id}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('title'):product.title}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('productImage'):mainImageUrl}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('body'):body}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('brand'):product.productBrand.first().title}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('designer'):product.productDesigner.first().title}) %}
                          {% set groupedFieldData = groupedFieldData|merge({('url'):product.url}) %}
  
                          <article id="product-{{ product.id }}" class="{% if loop.index == 1 %}w-50-ns w-100{% else %}w-25-ns w-100{% endif %} fl mb3 Grid-cell">
                              <span class="bg Grid-fill product--hover" style="background-image:url({{ mainImageUrl }});">
                                  <div class="block">
                                      <div class="absolute top-1 left-1 share-hover link z-2">
                                          <svg class="share-icon absolute" width="19" height="18">
                                              <use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#share_icon"></use>
                                          </svg>
                                          <ul class="ma0 pa0 mb4 list share-list relative">
                                              <li class="dib v-top mw2">
                                                  <div class="icon icon--kudos_icon">
                                                      <a class="share twitter" v-on:click.stop.prevent="openShareWindow($event)" href="https://twitter.com/share?url=https://simplesharebuttons.com&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons">
                                                          <svg width="100%" height="20">
                                                              <use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#twitter_logo"></use>
                                                          </svg>
                                                      </a>
                                                  </div>
                                              </li>
                                              <li class="dib v-top mw2">
                                                  <div class="icon icon--kudos_icon">
                                                      <a href="https://www.facebook.com/sharer.php?u=https://codepen.io/patrickkahl" v-on:click.stop.prevent="openShareWindow($event)">
                                                          <svg width="100%" height="20">
                                                              <use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#facebook_logo"></use>
                                                          </svg>
                                                      </a>
                                                  </div>
                                              </li>
                                              <li class="dib v-top mw2">
                                                  <div class="icon icon--kudos_icon">
                                                      <a href="http://pinterest.com/pin/create/button/?url={{ product.url }}&media={{ product.url }}&description={{ product.title }}" v-on:click.stop.prevent="openShareWindow($event)">
                                                          <svg width="100%" height="20">
                                                              <use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#pinterest_logo"></use>
                                                          </svg>
                                                      </a>
                                                  </div>
                                              </li>
                                          </ul>
                                      </div>
  
                                      <a href="#" v-on:click.stop.prevent="quickView($event)" class="absolute bottom-1 left-1 link gray z-2">
                                          <span style="display: none;" class="product-data">{{ groupedFieldData|json_encode()|raw }}</span>
                                          <svg class="v-mid" width="19" height="18">
                                              <use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#colour_icon"></use>
                                          </svg>
                                          <span class="v-mid">(12)</span>
                                      </a>
                                      {% if craft.like.isLike(product.id) %}
                                          <a href="{{actionUrl('like/remove', {id:product.id})}}" v-on:click.stop.prevent="addFavourite($event)" class="absolute top-1 right-1 z-2">
                                              <svg width="19" height="18">
                                                  <use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#favourite_icon_added"></use>
                                              </svg>
                                          </a>
                                      {% else %}
                                          <a href="{{actionUrl('like/add', {id:product.id})}}" v-on:click.stop.prevent="addFavourite($event)" class="absolute top-1 right-1 z-2">
                                              <svg width="19" height="18">
                                                  <use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#favourite_icon"></use>
                                              </svg>
                                          </a>
                                      {% endif %}
                                      <a href="{{ product.url }}" style="display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;"></a>
                                  </div>
                              </span>
                              <div class="mv2 lh-copy">
                              <p class="text-product">{{ product.title }}<br>
                              {% if product.productBrand | length > 0 %}
                                  {{ product.productBrand.first() }}
                              {% endif %} {% if product.productDesigner | length > 0 %}
                                  for {{ product.productDesigner.first() }}
                              {% endif %}<br>
                              </p>
                              <p>{{ product.defaultVariant.price|commerceCurrency(cart.currency) }}</p>
                              </div>
  
                          </article>
                      {% endfor %}
                  {% endif %}
                  </section>
              </section>
  
              {% elseif block.layout == "rightFeatured" %}
  
  ```
  
  Is there a robust way of being able to build up the URLs or query multiple types of content from products related to sections in matrix fields and products related to product fields?
  
  **Tags:** entries, plugin-craftcommerce, relations, ecommerce, query
  
  > **Comments:**
  > **username_1**: Can you show us your current `craft.commerce.products` tag?  
  > **username_0**: username_1 username_1 I have now reverted to using Algolia with faceted search instead  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2017-08-11. Score: 1
  
  I think you could use the relatedTo parameters for this:
  <https://craftcms.com/docs/relations#the-relatedTo-param>
  
  It basically allows you to filter elements based on their relationships with other elements.
  
  
  ---
  
  