Show/hide entire product select template for product variations

I want to show a select dropdown for product variations, but only if there are any in the first place. So I’ve looked at this part of the docs under “Showing product variations”, but in my case I want to hide the entire div containing the select input if there is only one product:

[[!commerce.get_products? 
   &products=`[[+tv.products]]`
   &tpl=`product_select`
]]

// product_select chunk:

[[+total_products:eq=`1`:then=`
    <input type="hidden" name="product" value="[[+id]]">
`:else=`
    <div class="product-variation select-wrapper">
        <label for="choose-variation">Option:</label>
        <select id="choose-variation" name="product">
            <option value="[[+id]]">[[+name]]</option>
        </select>
    </div>
`]]

Of course as of right now this doesn’t work as it gives me a individual dropdown for each option, but I don’t know how I can access every product on its own for the option part.

Thanks for any help!

May I be so bold to request some direct help here, @mhamstra? I just don’t know how to tackle this issue. If my question needs any more clarification let me know.

Of course, sorry for not replying sooner. I can’t think of a clean way to do that either with the current templating. You’d need to do something with comparing the [[+idx]] to the [[+total_products]] and 0 and conditionally add the additional markup that way. Might work, but that code would get real messy real fast.

The better solution would be a new &wrapperTpl property that would hold the logic based on [[+total_products]] on wether to add a <select> or not. I’ve added that property to 1.1. That release is tentatively planned for mid-end July.

(An alternative option I have planned is supporting twig templates in snippets that currently only use chunks; but that’s not currently roadmapped to any particular version yet.)

1 Like

Has this been added yet?

I seem to have forgotten to update the documentation for get_products, but yes, &wrapperTpl was added in v1.1.0-rc1 released 2019-08-15. Simply provide it the name of a chunk that has the conditional for [[+total_products]] to render [[+output]]:

[[+total_products:gt=`0`:then=`[[+output]]`:else=`no products`]]
1 Like

That explains, why I couldn’t find it! :wink: Thank you, having that feature now is awesome!

I tried implementing this today, but I’m having some issues. It works in regards that it shows the dropdown for resources with multiple products and no dropdown at all for single product resources. :+1:

The issue is that in the dropdown, it currently only shows one product (should be 4).

I list my products through pdoPage and within that chunk the products get called like this:

[[!commerce.get_products? 
    &products=`[[+tv.products]]`
    &wrapperTpl=`product_wrapper`
]]

Then I use the “new” feature and define the wrapper chunks through product_wrapper:

[[+total_products:gt=`1`:then=`[[$multiple_product_tpl]]`:else=`[[$product_tpl]]`]]

multiple_product_tpl chunk:

<div>
    <select id="choose-variation" name="product">
        [[!commerce.get_products? 
            &products=`[[+tv.products]]`
            &tpl=`product_select`
        ]]
    </select>
</div>

Did I get the general usage of &wrapperTpl right? I’m guessing I have something wrong with the tags, therefore it’s only showing one product in the dropdown instead of the four?

I think you’ll probably want to change your wrapper call. This is how I’ve implemented what you’ve pretty much described that you’re trying to do.

Here’s my snippet call:

[[!commerce.get_products?
  &products=`[[*products]]`
  &tpl=`tplProductSimpleOption`
  &wrapperTpl=`tplProductSimpleSelectWrapper` 
]]

Here’s my wrapper (tplProductSimpleSelectWrapper):

[[+total_products:eq=`1`:then=`
  [[+output]]
`:else=`
    <select name="product" class="product-simple__select">[[+output]]</select>
`]]

…and the chunk (tplProductSimpleOption)

[[+total_products:eq=`1`:then=`
<input type="hidden" name="product" value="[[+id]]">
`:else=`
<option value="[[+id]]" [[+idx:eq=`0`:then=`selected`:else=``]]
  data-sku="[[+sku]]"
  data-stock="[[+stock]]"
  data-image="[[+image]]"
  data-price="[[+price]]"
  data-price-formatted="[[+price_rendered:htmlent]]"
>[[+name]] ([[+price_formatted]])</option>
`]]