1

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

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

With this setup we have the following on this URLfor example

/products/tables

enter image description here

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

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?

  • Can you show us your current craft.commerce.products tag? – Stephen Callender Aug 8 '17 at 15:57
  • Stephen Callender I have now reverted to using Algolia with faceted search instead – M dunbavan Aug 10 '17 at 12:08
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.