Add class to out of stock variant - shopware

Question

I need to add a CSS class to a variant which is out of stock, that way I would know, before hand, which variant has or has not stock available.
I have been checking the detail page (specifically the buy_container.tpl file) to see if there's a clue in there. I used var dump to check the $sArticle.sConfigurator but it doesn't say if one of the variants is out of stock. I also checked the $sArticle.instock and $sArticle.isAvailable but as the detail page uses ajax to reload the data, those variables only work after selecting the out of stock variant, and I need to know which variant is out of stock before hand.
This is where I need to add the CSS class:
{foreach $sConfigurator.values as $configValue}
{if !{config name=hideNoInstock} || ({config name=hideNoInstock} && $configValue.selectable)}
<div class="variant--option {if $outofstock}OUT-OF-STOCK{/if} {if $configValue.selected}variant-selected{/if}">
<input type="radio"
class="option--input"
{if $configValue.selected} checked="checked"{/if}
value="{$configValue.optionID}"
name="group[{$sConfigurator.groupID}]"
{if $theme.ajaxVariantSwitch}
data-ajax-select-variants="true"{else}
data-auto-submit="true"{/if} />
{$configValue.optionname}{if $configValue.upprice} {if $configValue.upprice > 0}{/if}{/if}
</div>
{/if}
{/foreach}
Any clue would be appreciated,
Thanks.

Answer 1

Try to use the selection-configurator. With this configurator this information will be available. See: https://github.com/shopware/shopware/blob/5.5/themes/Frontend/Bare/frontend/detail/config_variant.tpl#L31
No other configurator will provide this data. When you want to use an other configurator, you need to implement such a variable/function yourself.