0

EDITED FOR MORE CLARITY

I have a really stupid problem I'm trying to fix... This is (a part of) template code

<dl class="tabs contained">
    {if "{products_related_products:total_children}"}
        <dd class="active"><a href="#simpleContained1"><!-- Gerelateerde producten -->{bbr-mls-54}</a></dd>
    {/if}

    {if "{products_related_lexicon:total_children}"}
        <dd class="hide-for-small">
        <a href="#simpleContained2"><!-- Gerelateerde lexicon -->{bbr-mls-57}</a></dd>
    {/if}

    {if products_additional_remarks_{language_code}}
        <dd class="hide-for-small"><a href="#simpleContained3"><!-- Bijkomende opmerkingen -->{bbr-mls-53}</a></dd>
    {/if}

    {if products_videos_{language_code}}
        <dd class="hide-for-small"><a href="#simpleContained4"><!-- Video -->Video</a></dd>
    {/if}

    {if {exp:playa:total_parents channel="downloads"}!="0"}
        <dd class="hide-for-small"><a href="#simpleContained5"><!-- Downloads -->Downloads</a></dd>
    {/if}
</dl>

This code is shown below a product detail page to show other related content like downloads and videos and so on...

As you can see I'm using a If Then statement to determine if there are any related records for this product and if there are a tab is shown, if nothing is shown.

The problem I'm trying to solve is the set the right tab to class="active". In the current example this is the case for the first tab in hardcoded way.

In other programming language I would include a variable to every if/then routine and it is executed (because there is content) I would set a variable e.g. ThereIsAnActiveTab to 1 After that I would put a conditional in every

As an example in non-working code this would the code

<dl class="tabs contained">
    {if "{products_related_products:total_children}"}
        <dd class="active"><a href="#simpleContained1"><!-- Gerelateerde producten -->{bbr-mls-54}</a></dd>
    {variable:ThereIsAnActiveTab = "1"}
    {/if}

    {if "{products_related_lexicon:total_children}"}
        <dd class="{if variable:ThereIsAnActiveTab=="1"}hide-for-small{if:else}active{/if}">
        <a href="#simpleContained2"><!-- Gerelateerde lexicon -->{bbr-mls-57}</a></dd>
            {variable:ThereIsAnActiveTab = "1"}
    {/if}

and so on ... But that does not work in EE due the way the template gets parsed. Any ideas on how to solve this?

rg,

Tim

8
  • Can you be more specific with your question? The title mentions using a variable in a conditional, but the question is asking about setting a active class.
    – Siebird
    May 16 '13 at 20:15
  • I've added some additional info to make it more clear.. Let me know it helps... May 16 '13 at 20:23
  • What type of variable is variable:ThereIsAnActiveTab? Global or custom field?
    – Siebird
    May 17 '13 at 0:24
  • Is the active tab always the first one?
    – Sobral
    May 17 '13 at 1:19
  • What's the condition for a tab to be marked as active?
    – notacouch
    May 17 '13 at 20:13
3

From your code samples, it looks like you have several different custom fields that generate the tabs–so there is really no clean way of 'hard-coding' in the first active tab. If your tab structure was within a custom field loop, it would be easy with the {count} variable.

If you're using jQuery, you could do this to add the class names:

$('.tabs dd:first').addClass('active');
$('.tabs dd').not(':first').addClass('hide-for-small');

2nd Option

Using advanced conditionals, but it gets messy quick:

<dl class="tabs contained">
    {if "{products_related_products:total_children}"}
        <dd class="active"><a href="#simpleContained1"><!-- Gerelateerde producten -->{bbr-mls-54}</a></dd>
    {/if}

    {if "{products_related_lexicon:total_children}"}
        <dd class="{if products_related_products:total_children == 0}active{if:else}hide-for-small{/if}">
        <a href="#simpleContained2"><!-- Gerelateerde lexicon -->{bbr-mls-57}</a></dd>
    {/if}

    {if products_additional_remarks_{language_code}}
        <dd class="{if products_related_products:total_children == 0 && products_related_lexicon:total_children == 0}active{if:else}hide-for-small{/if}"><a href="#simpleContained3"><!-- Bijkomende opmerkingen -->{bbr-mls-53}</a></dd>
    {/if}

    {if products_videos_{language_code}}
        <dd class="{if products_related_products:total_children == 0 && products_related_lexicon:total_children == 0 && products_additional_remarks_{language_code} == ""}active{if:else}hide-for-small{/if}><a href="#simpleContained4"><!-- Video -->Video</a></dd>
    {/if}

    {if {exp:playa:total_parents channel="downloads"}!="0"}
        <dd class="{if products_related_products:total_children == 0 && products_related_lexicon:total_children == 0 && products_additional_remarks_{language_code} == "" && products_videos_{language_code} == ""}active{if:else}hide-for-small{/if}><a href="#simpleContained5"><!-- Downloads -->Downloads</a></dd>
    {/if}
</dl>
3
  • hi siebird, not unfortunately it is not in a field loop. Thanks for pointing me the jQuery solution, it works great! I'm still very interested to know however how I would do this server-sided. Nevertheless a bit thanks for your suggestion as this issue is solved!! May 20 '13 at 13:22
  • Since your tabs are built from several custom fields, you could potentially do this with advanced conditionals that checks if those fields are empty and then apply the correct class. The conditionals would cascaded down and get messy quick. See updated answer.
    – Siebird
    May 20 '13 at 13:33
  • thanks! yes, I explored that path too, but quickly left it as there are other elements on that same page that need similar logic and as you say it becomes quite messy (not to speak the hit on performance) May 20 '13 at 13:39

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.