Tabbed Description on Product Page - Options

[marshallw]

I am new to the new bootstrap and v9 beta. I noticed that the products page has a tab for the description. Can we make more tabs with custom fields like Specs, or Reviews, or Related Products. What is the Coding or where are these options.

I understand how to hard code it, but I would like to make it available in the GUI of the product information so other employees can edit it.

Thanks

[Mark Hood]

Re: Tabbed Description on Product Page - Options

I am new to the new bootstrap and v9 beta. I noticed that the products page has a tab for the description. Can we make more tabs with custom fields like Specs, or Reviews, or Related Products. What is the Coding or where are these options.

I understand how to hard code it, but I would like to make it available in the GUI of the product information so other employees can edit it.

Thanks

You can add as many tabs as you want and use product custom fields to control if the show.

<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:specs">
        <li><a href="#js-specifications" data-toggle="tab">Additional Info:</a></li>
    </mvt:if>

and

<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:specs">
        <div class="tab-pane" id="js-specifications">
            <h5 class="title">Additional Info:</h5>
            &mvt:product:customfield_values:customfields:specs;
        </div>
</mvt:if>

[marshallw]

Re: Tabbed Description on Product Page - Options

Thanks! I actually found the custom fields method a few min after posting this... I figured it to be more of a work around though and didn't know if there was a built in check box I was missing on the add product page.

Thank you though.

[slabar]

Re: Tabbed Description on Product Page - Options

Am I missing something or am I looking in the wrong spot? I don't see anything on the Product itself or in the Product Pages.

[Mark Hood]

Re: Tabbed Description on Product Page - Options

Am I missing something or am I looking in the wrong spot? I don't see anything on the Product itself or in the Product Pages.

Are you using the bootstrap for 5.5?

It's part of the product display layout tab of the PROD page in 5.5

[slabar]

Re: Tabbed Description on Product Page - Options

Mark,

I'm using beta 9 and I can't get any tabs to display using the code you provided above. I can get the data to display just no tab(s). I know it's something simple.

[TFo]

Re: Tabbed Description on Product Page - Options

Stephen,

It's not a part of the Miva Merchant beta. It's functionality that's built into Bootstrap. Are you using the Bootstrap framework? Here's a link to Miva's blog post on Bootstrap.

Bootstrap Framework Info

Regards,
Todd

[slabar]

Re: Tabbed Description on Product Page - Options

Todd,

I'm using the Ready Themes which is based off of the Bootstrap from what I understand.

[Mark Hood]

Re: Tabbed Description on Product Page - Options

It doesn't look like they made tabs as a part of ready themes but this should help since it can be used on either. You'll just have to change as needed for your custom field codes.

<!-- Product Tabs -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#js-description" data-toggle="tab">Description:</a></li>
    <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:specs">
        <li><a href="#js-specifications" data-toggle="tab">Additional Info:</a></li>
    </mvt:if>
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:SizeChart">
        <li><a href="#js-SizeChart" data-toggle="tab">Size Chart</a></li>
</mvt:if>
<li><a href="#js-reviews" data-toggle="tab">Reviews</a></li>
</ul>
<div class="tab-content"> 
    <div class="tab-pane active" id="js-description">
        <h5 class="title">&mvt:product:name;</h5>
        &mvt:product:descrip;
    </div>
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:specs">
        <div class="tab-pane" id="js-specifications">
            <h5 class="title">Additional Info:</h5>
            &mvt:product:customfield_values:customfields:specs;
        </div>
</mvt:if>
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:SizeChart">
        <div class="tab-pane" id="js-SizeChart">
            <h5 class="title">Size Chart:</h5>
            <iframe src="&mvt:product:customfield_values:customfields:SizeChart;" width="100%" height="600px"></iframe>
        </div>
</mvt:if>
<div class="tab-pane" id="js-reviews">
            Your Review Code
        </div>
</div>

[marshallw]

Re: Tabbed Description on Product Page - Options

Mark, I am also using the beta to test and design in right now. Have you activated custom fields? if you have and you created a custom field then when you add a new product on the top bar there is a list of items (Product . Images . Related Products . etc.) at the end there is a *** box. click on that and select custom fields. You should have a specifications field there. just type in that box and check your product.

[slabar]

Re: Tabbed Description on Product Page - Options

Mark,

Thanks I was able to combine your code with mine and have tabs working now. I just have one small quirk to work out with width but will tackle that later.