1

this is my first Craft CMS & Commerce build and I need some help with searching products by a tag field.

I have a tag field ("designTag") for each product and I would like to have a search bar that will only query the tag field for a specific product type ("designMedia") and return those products with matching or similar tag titles and also account for pagination. I can't seem to get it to work. Any help would be appreciated.

SEARCH FORM CODE:

<form action="{{ url('design/keywords') }}">
    <label>Search By Keywords</label>
    <div class="append-icon">
        <input type="search" name="q" class="form-control input-lg" placeholder="Enter Keyword...">
        <button class="btn" type="submit"><i class="nc-icon-outline ui-1_zoom"></i></button>
    </div>
</form>

RESULTS CODE:

{% set tagTitle = craft.request.getParam('q') %}
{% set tag = craft.tags.title(tagTitle) %}    
{% set product = craft.commerce.products.search(query).order('score') %}

{% if product|length %}

{% paginate craft.commerce.products.type('designMedia').limit(48) as mediaProducts %}

{% for product in mediaProducts %}    
       <div class="item">
          <div class="item-wrapper">
            <figure class="he-3 cyan">
              <img src="{{ product.presentationSlides.first().getUrl('mediaDetail') }}" alt="{{ product.name }}">
              <div class="hover-icons">
                <div class="hover-icons-wrapper">
                  <a href="{{ product.presentationSlides.first().getUrl('mediaLightbox') }}" class="magnific hidden-xs-down">
                    <i class="nc-icon-outline ui-1_zoom"></i>
                  </a>
                  <a href="{{ product.url }}">
                    <i class="nc-icon-outline ui-2_link-71"></i>
                  </a>
                  <a href="#" class="hidden-xs-down">
                    <i class="nc-icon-outline ui-2_favourite-28"></i>
                  </a>
                </div>
              </div>
            </figure>
          </div>
        </div>
{% endfor %}
{% else %}
    <p>No Results</p>  
{% endif %}

/*pagination code */
{% endpaginate %}
2

This should work (set the limit to whatever you want/need):

{% set tag = craft.tags.title(tagTitle).first() %}    

{% paginate craft.commerce.products.relatedTo(tag).limit(10) as pageInfo, products %}

    {% for product in products %}

        {{ product.title }} etc

    {% endfor %}

    {% if pageInfo.prevUrl %}<a href="{{ pageInfo.prevUrl }}">Previous Page</a>{% endif %}
    {% if pageInfo.nextUrl %}<a href="{{ pageInfo.nextUrl }}">Next Page</a>{% endif %}

For more on the pagination side of things, see: https://craftcms.com/docs/templating/paginate

1

So I found that using the paginate tag would return all entries regardless of the keyword. I was able to get it to work by using the below results code. (pagination still worked without the use of the pagination tag)

{% set query = craft.request.getParam('q') %}

{% set tag = craft.tags.title(query).first() %}

{% set products = craft.commerce.products.search(query).limit(48) %}
{% if products|length %}
{% for product in products %}
   <div class="item">
      <div class="item-wrapper">
        <figure class="he-3 cyan">
          <img src="{{ product.presentationSlides.first().getUrl('mediaDetail') }}" alt="{{ product.name }}">
          <div class="hover-icons">
            <div class="hover-icons-wrapper">
              <a href="{{ product.presentationSlides.first().getUrl('mediaLightbox') }}" class="magnific hidden-xs-down">
                <i class="nc-icon-outline ui-1_zoom"></i>
              </a>
              <a href="{{ product.url }}">
                <i class="nc-icon-outline ui-2_link-71"></i>
              </a>
              <a href="#" class="hidden-xs-down">
                <i class="nc-icon-outline ui-2_favourite-28"></i>
              </a>
            </div>
          </div>
        </figure>
      </div>
    </div>
{% endfor %}
{% else %}
   <p>No Results</p>  
{% endif %}

/*pagination code */

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.