[Tutorial] Product Attribute as Additional Info

Quote

Post by qahar » Thu Jan 12, 2012 3:00 am

In this tutorial we will learn on how to use product attribute as Product Extra Fields 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:
attribute-after.gif

attribute-after.gif (105.52 KiB) Viewed 48210 times

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: Select all

      <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: Select all

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

<?php } ?>  <!-- line 108 -->
attribute-compare.gif

attribute-compare.gif (94.77 KiB) Viewed 48210 times

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: Select all

    <?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

    attribute_condition.gif (72.87 KiB) Viewed 48210 times

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

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.
User avatar
qahar
Expert Member
Posts
2096
Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia
Top
Post Reply
Return to “Themes”
Who is online

Users browsing this forum: No registered users and 1 guest