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:
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.)
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]]:
@wallacio First, sorry for my late reply, I was a week off and then it took me way to long to wrap my head around this, but I think I figured it out mostly and your example was of great use! Thank you very much!
One last thing I’m trying right now is to get the “Product Details (#details)” link working. Basically I want a link to the page of the product which was selected.
Here’s my updated (and shortened) wrapperTpl:
<!-- This works fine for single products obviously: -->
<a id="details" href="[[~[[+id]]]]">Product Details</a>
<select id="choose-variation" name="product">[[+output]]</select>
<!-- This doesn't work: -->
<a id="details" href="[[~[[commerce.get_product? &product=`[[+tv.products]]` &field=`id`]]]]">Product Details</a>
I know that getting a link to the initial selected item and getting the link to the new selected item is a different thing. First I’m trying to get the initial product link and I guess the rest has to be done with JS anyway? Any ideas on this?
I’m not completely sure what you’re trying to do here. The [[+output]] tag will contain the contents of the repeated template for each product (so in my example above, tplProductSimpleOption is repeated here).
I don’t believe you have any access to anything other than total_products and output placeholders in your wrapper tag but surely, the product you’re trying to link to in that Product Details link will already appear in the select list above it?
If this is really what you want to do, I would have thought that the place to do this was outside of the snippet call which uses this wrapper, in the template from which you’re calling get_products to begin with.
Thank you for your help! Here’s an image of my frontend to clarify. I basically need the ID of the selected product to link to the resource of the product through the “Product Details” link at the bottom.
Now if I would just use
<a href="[[~[[+id]]]]">Product Details</a>
that would obviously link me only to the “Multi Product” resource, so my question is how do I populate the link with the right ID of the selected product (also after a different one is selected).
You might be right, that this has to happen outside the snippet, I’m just not sure how to retrieve the selected products ID and generate a working link out of it (also with FURL in mind).
I would create your Product Details link outside of the get_products snippet that you’re using to display the <select> with a simple call to get_product in the parent template, and update your link with an onchange event.
Apologies for the [[~[[+product.id]]]] suggestion - obviously untested on my part and a bit of a guess at what I thought you were trying to do.
You may wish to re-think how you structure your products and why you’re doing it the way you are. To me, this use case is for a product with a single variation, so the product being a chair, which is available in red, blue or green. The description of a chair is common to all variations so my description of the product belongs to the resource which holds the variations in the products TV, not the actual product.
No worries @wallacio, really appreciate all your thinking and I see now how it’s a more structural issue. I’ll have to check whether or not this is working for my usecase. As my initial problem is fixed, I will consider this case closed for now, though. Thanks again (also to you @mhamstra as always)