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:
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:
With this setup we have the following on this URLfor example
/products/tables
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:
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&text=Simple%20Share%20Buttons&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?
craft.commerce.productstag?