Magento Configurable Product – Adding Extra Fields to Products for Front End Display

configurable-productproductproduct-attribute

Apologies if this is something of an elementary question. I've been trawling google and unable to find an answer to my query.

I need to add a few new fields to products for the admin to display more info on the product (video embed code (textarea), hero image (image upload) and strap line (text field)).

I thought this could be achieved using product attributes and followed this: http://www.pixafy.com/blog/2012/12/adding-a-fourth-image-position-to-the-admin-for-a-magento-product/ (for the hero image)

All I was able to achieve with this was to allow images to be set as type "hero" and the new hero image became just another product image in the product image switcher.

How can I specify these fields to the admin and then go on to display them in the template?

Thank you

Best Answer

If you want the attributes to display in the frontend in another position than the list (or wherever they are meant to be like the media gallery) you have to edit the product view phtml file of your theme.

the file you need to change is 

/app/design/frontend/YOUR_PACKAGE/YOUR_TEMPLATE/template/catalog/product/view.phtml

if it doesn't exist copy it from

/app/design/frontend/base/default/template/catalog/product/view.phtml

1. Image

As suggested in the link you provided, insert the line 

<?php echo $this->helper('catalog/image')->init($_product, 'attribute_code')->resize(400,300); ?>

in the above file replacing 'attribute_code' with your attribute's code and the dimensions with what you want. Save it, upload it or whatever, be sure to clear the cache before trying to view the changes.

Now for the rest of your attributes.

2. Text

There are many ways to call an attribute from the product view template. In your case, that you just have a textfield some of them are

<?php echo $_helper->productAttribute($_product, $_product->getAttributeCode(), 'attribute_code'); ?>

or 

<?php echo $_product->getAttributeCode(); ?>

or 

<?php echo $_product->attributeCode; ?>

I would suggest trying the first one. Notice that if the attribute's code has an underscore, you omit it and you capitalize the next letter.

2a. Example of youtube code attribute

  • Login to your backend and navigate to Catalog -> Attributes -> Manage Attributes
  • Press 'Add New Attribute' and create an attribute of type 'text' (For information of how you do that you can read this) Be sure that the attribute is assigned to any attribute sets you are using. Let's say the attribute code you choose is yt_viewcode

Now in the phtml file mentioned above add the following code wherever you want it to show up

<div class="youtube" align="center">
    <object width="640" height="400">
            <param 
                name="movie" 
                value="http://www.youtube.com/v/<?php echo $product->getYtViewcode();?>?autoplay=0&rel=0&fs=1&loop=0">
            </param>
            <param name="allowFullScreen" value="false"></param>
            <param name="allowscriptaccess" value="always"></param>
            <embed 
                src="http://www.youtube.com/v/<?php echo $product->getYtViewcode();?>?autoplay=0&rel=0&fs=1&loop=0" 
                type="application/x-shockwave-flash" 
                allowscriptaccess="always" 
                allowfullscreen="false" 
                width="640" 
                height="400"
             ></embed>
     </object>
</div>
Related Topic