Atributos en OpenCart

 

In this tutorial we will learn on how to use product attribute as Additional Info. In my opinion, store owner should show certain product info at a glance. Without scrolling the page or confusing visitor to find clickable tab. Just show important product info as soon and as fast as posible the visitor could notice it.

Why use product Attibute?
 

1. Doesn't need to create extra table or column on database.
2. Because we only modificate the product.tpl and compare.tpl.
3. You will able to put as many "extra fields" as you want + multi-language support.

Result of this tutorial:

As example, I will make Product Additional Info for a book like screenshot above. You can follow this step:

Step 1. Modificating Product Page

• Admin Page
  1. Create two Attribute Group (Catalog > Attribute > Attribute Groups)
     1. Product Info
     2. Product Details
  2. Create Attribute inside Attribute Group (Catalog > Attribute > Attributes)
     1. Product Info : ISBN, Pages, Author and Publisher
     2. Product Details: Reading Level, Pages, Author, Publisher, ISBN-10, ISBN-13, Book Dimension
  3. Create Product (ie. Harry Potter)
     1. Go to Attribute Tab
     2. On input (attribute column) choose all attribute above.
     3. For the text column, it's up to you.

 

• Product Template ( yourtheme/template/product/product.tpl )
  • Put code bellow on line 31 (marked start-end)

    Code:

    <div class="description">
  ....
  <span><?php echo $text_stock; ?></span> <?php echo $stock; ?>
  <br/><br/>
  <!-- Start Additional Info -->
  <?php if ($attribute_groups) { ?>
    <?php foreach ($attribute_groups as $attribute_group) { ?>
      <?php if ($attribute_group['name'] == 'Product Info') { ?>
        <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
          <span><?php echo $attribute['name']; ?></span> <?php echo html_entity_decode($attribute['text']); ?><br />
        <?php } ?>
      <?php } ?>
    <?php } ?>
  <?php } ?>
  <!-- End Additional Info -->
</div>

Step 2. Modificating Compare Page

• Open Compare Template ( yourtheme/template/product/compare.tpl )
  Put code bellow:

  Code:

  <?php if ($attribute_group['name'] != 'Product Info') { ?> <!-- line 88 -->

<?php } ?>  <!-- line 108 -->

Step 3. Be Creative!

1. You can change attribute group "Product Info" to any word, as long it's consist with $attribute_group['name'] filter.
2. It's not just one attribue group, you can filtering two or three attribute group.
3. If you put a link <a href=".."></a> or any html code on attribute text, do not forget use html decode.

   Code:

   <?php echo html_entity_decode($attribute['text']); ?>

4. With some modification, you can show certain product attribute on Category Page. As product info or may be product label.
5. And FYI, you able to use product attribute as a condition value.

   Code: Select all

   <?php if ( $attribute['name'] == 'prodLabel' && $attribute['text'] == 'Free Shipping') {
    echo '<span class="freeShipping">'.$attribute['text'].'</span>';
} ?>

    

   

   attribute_condition.gif (72.87 KiB) Viewed 8029 times

6. Like what old man say: The only limitation, is your imagination!

Note:
Since most user unable to reply this post, if you want to suggest think to improve this tutorial you can PM me. No Question Please!
Make new post on Support Forum if you have any question.

Extracted from: http://forum.opencart.com/viewtopic.php?f=139&t=50476