megwoo
6/25/2015 - 7:17 PM

Magento Add Tabs

add to catalog.xml AFTER
<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
	<action method="addToParentGroup"><group>detailed_info</group></action>
	<action method="setTitle" translate="value"><value>Description</value></action>
</block>

<block type="catalog/product_view_attributes" name="product.attributes" as="ingredients" template="catalog/product/view/ingredients.phtml">
	<action method="addToParentGroup"><group>detailed_info</group></action>
	<action method="setTitle" translate="value"><value>Ingredients</value></action>
</block>

#### NOTE: "detailed_info" is NOT changed

You must also then create the ingredients.phtml template:
<?php $_ingredients = $this->getProduct()->getIngredients(); ?>
<?php if ($_ingredients): ?>
    <h2><?php echo $this->__('Ingredients') ?></h2>
    <div class="std">
        <?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_ingredients, 'ingredients') ?>
    </div>
<?php endif; ?>


// optional tab styling

.toggle-tabs { 
			border: 1px solid $c-divider-border;
			background: none;
				
			li {
				position: relative;
				width: 25%;
				text-align: center;
				border-right: 1px solid $c-divider-border;
				cursor: pointer;
				
				span {
					padding: 0;
					background: none;
					font-size: $f-size;
				}
			}
			
			li.current {
				border-right: none;
			}
			
			li.current:after {
				content: " ";
				position: absolute;
				background: url(../images/tab-arrow@2x.png) no-repeat;
				background-size: 9px 5px;
				width: 9px;
				height: 5px;
				display: table;
				left: calc(50% - 5px); // 1/2 of background width
				bottom: -5px;
			}
			
			li:last-child {
				border-right: none;
			}
		}