tabbed content on product pages

[gjt]

I'd like to put tabbed content (Description, Dimensions, etc.) on my product pages and found a great tutorial that describes the process using javascript and CSS ( http://www.practicalecommerce.com/ar...Tabbed-Content and http://www.practicalecommerce.com/ar...Content-Part-2 ).

While the tutorial does a great job of describing the process it is not Miva specific.

How might one manage all this information, i.e. the content for the individual tabs for each product, using the Miva Admin?

[Bruce - PhosphorMedia]

Re: tabbed content on product pages

You could use Custom Fields for the individual content containers, or just include them in the product description. I.e.,

<div id=descrip> Description tab and its contents</div>
<div id=demin> Deminsion tab and its contents</div>
<div id=spec> Specification tab and its contents</div>

or

enter
<div id=descrip> &mvt:product:descrip; </div>
<div id=demin> custom_field_call1 </div>
<div id=spec> custom_field_call2 </div>

in the Product Page's Product Display Template

[gjt]

Re: tabbed content on product pages

Perfect, especially the Product Page template part.

Thanks Bruce!

[dawg1]

Re: tabbed content on product pages

I'm interesting in seeing how this worked on your site with Miva as I'm thinking about testing it out.

Did you use a conditional for items that don't have tabbed content? For instance, I want to use custom products fields, Offers & Shipping, and only display the tabbed content for those products that have offers and/or special shipping information.

Also, if you changed the div id tags to your custom fields how did it affect the javascript?

Thanks!

[gjt]

Re: tabbed content on product pages

No, I didn't use a conditional, though I see nothing to prevent you from doing so (in the way you describe).

There was no need to change the div id tags to my custom fields, so the javascript was not affected at all. The code goes something like this:

<div id="tabs">
  <ul>                    
    <li><a href="#tabs-1">Description</a></li>
    <li><a href="#tabs-2">Reviews</a></li>
    <li><a href="#tabs-3">Shipping Info</a></li>
  </ul>
<div id="tabs-1"><mvt:if expr="NOT ISNULL l.settings:product:descrip"><h2 class="prodnametabs">&mvt:product:name;</h2>&mvt:product:descrip;</mvt:if></div>
<div id="tabs-2">Reviews go here...</div>
<div id="tabs-3">Shipping info goes here...</div>
</div>

As you can see, I DID use a conditional to specify whether to display product name and description within a tab but not whether to display the tab in the first place.

BTW, I never figured out how to add more tabs, but in this case I really didn't need to. If you figure that one out, I'm all ears. You can see the tabs in action on any product page of my The Glass Baby Bottle site.

[Bruce - PhosphorMedia]

Re: tabbed content on product pages

Just add another tab, in your case "id="tabs-4", then go to the style sheet and duplicate the id parameters for id="tabs-3" and make changes as needed. (If you where creating the HTML within the template, this could even be dynamic. I.e add a new custom field or define a new content parameter and get a new tab.)