This is the blog for getting Idea regarding PHP, Magento, jQuery and JavaScript for Customization.

Thursday 6 September 2012

Magento : Add Video to products



Here, I think you have the jQuery Javascript library installed and have "jQuery.noConflict()"' set up.  If you don't have jQuery.noConflict(), then simply replace instances of "jQuery" with "$".  If you don't have this library, download jQuery here.
Create a product attribute for the video code
Obtain and upload a copy of the free JWPlayer
Add video to a product using HTML embed code or using an FLV file

(A). Create a product attribute for the video code.
Navigate to Catalog > Attributes > Manage Attributes. Click on the "Add New Attribute" .The first tab that's open is the *Properties* tab. You are presented with lots of textboxes and dropdowns.
Attribute Properties
- Attribute Code: video
- Scope: Global
- Catalog Input Type of Store Owner: Text Area
- Default Value: [leave blank]
- Input Validation for Store Owner: None
Click the "Save Attribute" button to save the attribute.

(B). Assign the newly created attribute to an attribute set (likely Default)
While still in the Admin Panel, navigate to Catalog > Attributes > Manage Attribute Sets. From the right-hand column, labeled "Unassigned Attributes", drag our new video attribute to the "General" group found in the middle column.
Click "Save Attribute Set" button to save the attribute set.
(C). Modify the template files

c1=>. video.phtml
Create a video.phtml file with these:
<?php
$_product = $this->getProduct();
?>
<?php if( $video = $_product->getVideo() ){ ?>
<h2>Product Video</h2>
<div class="products">
<?php if( file_exists( getcwd() .'/skin/frontend/[your-package]/[your-theme]/videos/'. $video ) ){ ?>
<div id="mediaspace"> </div>
<script>
jQuery( document ).ready( function(){
jQuery.getScript( '<?php echo $this->getSkinUrl('videos/mediaplayer/swfobject.js'); ?>', function(){
var so = new SWFObject('/skin/frontend/[your-package]/[your-theme]/videos/mediaplayer/player.swf','ply','470','320','9','#ffffff');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','<?php echo Mage::getBaseUrl(); ?>/skin/frontend/[your-package]/[your-theme]/videos/<?php echo $video; ?>');
so.write('mediaspace');
} );
} );
</script>
<?php } else { ?>
<?php echo $video; ?>
<?php } ?>
</div>
<?php } ?>
And save the file as /app/design/frontend/[your-package]/[your-theme]/template/catalog/product/view/video.phtml
c2=>. catalog.xml
Open up /app/design/frontend/[your-package]/[your-theme]/layout/catalog.xml and add this line:
<block type="catalog/product_view" name="product_video" as="product_video" template="catalog/product/view/video.phtml"/>
as a child anywhere inside this node:
<block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
... and save the file.
c3=>. catalog/product/view.phtml
Open up /app/design/frontend/[your-package]/[your-theme]/catalog/product/view.phtml and add this line:
<?php echo $this->getChildHtml('product_video'); ?>
wherever you want the video to appear on the page. Save the file.

(D). Obtain and upload a copy of the free JWPlayer

Download the JWPlayer from: http://www.longtailvideo.com/players/jw-flv-player/
After you download the ZIP file, extract and upload the files using an FTP client to: /skin/frontend/[your-package]/[your-theme]/videos/*
With the FTP client, rename the "mediaplayer-viral" folder to "mediaplayer"

(E). Add video to a product

In the Magento Admin Panel, navigate to Catalog > Manage Products and click on the product you'd like to add video to. You should see a textarea labeled "Video".
e1=>. Use HTML embed code
In the "Video" textarea, simply drop in the HTML code you've received (such as from YouTube) and click "Save" to save the product.
e2=>. OR use an FLV file
- Upload your FLV file to /skin/frontend/[your-package]/[your-theme]/videos/
- In the "Video" textarea, specify the filename of the FLV you've just uploaded.
Repeat Step 5 for all of the products you want to add video to.
Congratulations, you've added video to your products.
* This method is tested and working for Magento v 1.3.2.4 and 1.7.0.2

1 comment:

  1. I didn't know you can videos too. I'm glad I read your article. It opened my eyes to new possibilities with Magento.

    ReplyDelete