Product Tabs

[BkraM]

I added additional tabs using the tabs_xxxx format name for the custom fields. I want to have specific tabs only show up on specific products so I added this to the product list layout "<mvt:if expr="l.settings:tab:value NE ''">"

Is there a better way to do this so without modifying the template code? Or what is the best way to update a readytheme in the future and maintain all the custom template updates? Do you just manually update the templates than have custom changes?

Also I am trying to get the tabs to load contentsections but it doesnt seem to work. I checked the content and custom field items for the PROD page, am I missing anything else. Will I be able to use custom fields in content sections within the tabs?

Thanks

Mark

[BkraM]

I can add a tab to the template the same way the description is added and use <mvt:item name="readytheme" param="contentsection( 'TabRacquetRatings' )" /> and it will work but if i create a tabs_xxxx custom field and put <mvt:item name="readytheme" param="contentsection( 'TabRacquetRatings' )" /> in the field it doesnt work. I am fine doing it this way but I still have the question about the best practice to allow for future updates to the theme. Sites I have done in the past kind of get stuck at the original theme release. I understand best way to do css with a separate file to update but what is the best thing for template pages?

[Matt Zimmermann]

Hi Mark,

Only tabs custom fields populated for the product will show. Are you seeing unpopulated tabs showing on your product page?

As for loading in custom content from a ReadyTheme Content Section, you should be able to do this. You would need to load the content section and create a variable to check to see if it is populated.

<mvt:item name="readytheme" param="Load_ContentSection('promo_1',g.promo)" />

https://docs.miva.com/template-langu...-documentation

[Zinbar]

I am seeing unpopulated tabs, hence the tab WARRANTY shows even if the particular product has no data in the custom field.

[BkraM]

Yes I also have unpopulated fields tabs show.

I have a tab for ratings I tried with both a text field and text custom fields. I put <mvt:item name="readytheme" param="contentsection( 'TabRacquetRatings', g.ratings )" /> in the custom field but nothing shows and the variable is blank.

If I add this to the page template it works

<input id="tab-test" data-flex-tab type="radio" name="flex-tab" checked>
<label class="x-flex-tabs__tab u-text-uppercase" for="tab-test">Test</label>
<div class="x-flex-tabs__content" itemprop="test">
<mvt:item name="readytheme" param="contentsection( 'TabRacquetRatings' )" />
</div>

[Matt Zimmermann]

Here is some updated code for the tabbed information section. This update not only checks for the correct tab custom fields, but also checks if they have content before creating the output.

<section class="o-layout x-product-description">
    <div class="o-layout__item">
        <div class="x-flex-tabs o-layout--justify-center">
            <input id="tab-description" data-flex-tab type="radio" name="flex-tab" checked>
            <label class="x-flex-tabs__tab u-text-uppercase" for="tab-description">Description</label>
            <div class="x-flex-tabs__content" itemprop="description">
                &mvt:product:descrip;
            </div>
            <mvt:item name="customfields" param="Read_Product_ID(l.settings:product:id, '', l.settings:product:tabs)" />
            <mvt:foreach iterator="tab" array="product:tabs">
                <mvt:if expr="'tabs_' CIN l.settings:tab:code AND NOT ISNULL l.settings:tab:value">
                    <input id="tab-&mvte:tab:code;" data-flex-tab type="radio" name="flex-tab">
                    <label class="x-flex-tabs__tab u-text-uppercase" for="tab-&mvte:tab:code;">&mvte:tab:name;</label>
                    <div class="x-flex-tabs__content">
                        &mvt:tab:value;
                    </div>
                </mvt:if>
            </mvt:foreach>
        </div>
    </div>
</section>

If you would like to include a ReadyTheme Content Section, you could use the following code; you will need to update CONTENT_SECTION_CODE and OUTPUT_VARIABLE as necessary.

<section class="o-layout x-product-description">
    <div class="o-layout__item">
        <div class="x-flex-tabs o-layout--justify-center">
            <input id="tab-description" data-flex-tab type="radio" name="flex-tab" checked>
            <label class="x-flex-tabs__tab u-text-uppercase" for="tab-description">Description</label>
            <div class="x-flex-tabs__content" itemprop="description">
                &mvt:product:descrip;
            </div>
            <mvt:item name="customfields" param="Read_Product_ID(l.settings:product:id, '', l.settings:product:tabs)" />
            <mvt:foreach iterator="tab" array="product:tabs">
                <mvt:if expr="'tabs_' CIN l.settings:tab:code AND NOT ISNULL l.settings:tab:value">
                    <input id="tab-&mvte:tab:code;" data-flex-tab type="radio" name="flex-tab">
                    <label class="x-flex-tabs__tab u-text-uppercase" for="tab-&mvte:tab:code;">&mvte:tab:name;</label>
                    <div class="x-flex-tabs__content">
                        &mvt:tab:value;
                    </div>
                </mvt:if>
            </mvt:foreach>

            <mvt:item name="readytheme" param="Load_ContentSection('CONTENT_SECTION_CODE', g.OUTPUT_VARIABLE)" />
            <mvt:if expr="g.OUTPUT_VARIABLE:active">
                <input id="tab-&mvt:global:OUTPUT_VARIABLE:code;" data-flex-tab type="radio" name="flex-tab">
                <label class="x-flex-tabs__tab u-text-uppercase" for="tab-&mvt:global:OUTPUT_VARIABLE:code;">&mvt:global:OUTPUT_VARIABLE:name;</label>
                <div class="x-flex-tabs__content">
                    &mvt:global:OUTPUT_VARIABLE:descrip;
                </div>
            </mvt:if>

        </div>
    </div>
</section>

[BkraM]

Thanks Matt

Now I see why I couldnt get "& NOT ISNULL l.settings:tab:value" to work looked at it too long and didnt really notice I had "&" not "AND"

[BkraM]

Is there an advantage to use the Load_ContentSection with the variable?

            <mvt:item name="readytheme" param="Load_ContentSection('CONTENT_SECTION_CODE', g.OUTPUT_VARIABLE)" />
            <mvt:if expr="g.OUTPUT_VARIABLE:active">
                <input id="tab-&mvt:global:OUTPUT_VARIABLE:code;" data-flex-tab type="radio" name="flex-tab">
                <label class="x-flex-tabs__tab u-text-uppercase" for="tab-&mvt:global:OUTPUT_VARIABLE:code;">&mvt:global:OUTPUT_VARIABLE:name;</label>
                <div class="x-flex-tabs__content">
                    &mvt:global:OUTPUT_VARIABLE:descrip;
                </div>
            </mvt:if>

vs this?

<input id="tab-test" data-flex-tab type="radio" name="flex-tab" checked>
<label class="x-flex-tabs__tab u-text-uppercase" for="tab-test">Test</label>
<div class="x-flex-tabs__content" itemprop="test">
<mvt:item name="readytheme" param="contentsection( 'TabRacquetRatings' )" />
</div>

The above code would also have a condition to only show if a custom field was set to true for the product

[Matt Zimmermann]

By using Load_ContentSection, if the content section is not active, the tab itself will not show as well as the content.

[BkraM]

Thanks I use it on sections I know will be active so I use something like this to control what tabs show but there may be situations where yours makes more sense.

<mvt:item name="customfields" param="Read_Product_Code( g.Product_Code, 'cattype', g.cattype)" />
<mvt:if expr="g.cattype EQ 'racquet'">

[Bruce - PhosphorMedia]

Was looking for another issue, but....something else to consider with empty tabs...if the custom field itself is using the RTF editor, the editor can appear empty even when something is there like <br>.
If someone 'touches' the editor input area, and updates that page, the editor will insert a <br> tag.