Tuesday, August 23, 2011

Show product video in magento product details page

Here’s the sequence of steps we’re going to take:
1. Create a product attribute for the video code.

Log in to your Magento Admin Panel. Navigate to Catalog > Attributes > Manage Attributes. Click on the “Add New Attribute” button found close to the top-right hand corner of the screen. The first tab that’s open is the *Properties* tab. You are presented with lots of textboxes and dropdowns.

- Attribute Code: video
- Scope: Global
- Catalog Input Type of Store Owner: Text Area
- Default Value: [leave blank]
- Unique Value: No
- Values Required: No
- Input Validation for Store Owner: None
- Apply To: All Product Types

- Use in quick search: No
- Use in advanced search: No
- Comparable on Front-end: No
- Use in Layered Navigation: No
- Use in Search Results Layered Navigation: No
- Use for Price Rule Conditions: No
- Position: 0
- Enable WYSIWYG: Yes
- Allow HTML-tags on Front-end: Yes
- Visible on Product View Page on Front-end: No
- Used in product listing: No
- Used for sorting in product listing: No

--------------------------------------------------------
Then navigate to the *Manage Label / Options* tab. You only have to fill in the "Admin" value, and for this use "Video". This can be changed later if you need to.
Click the "Save Attribute" button to save the attribute.


2. 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.

3. Now create a video.phtml And save the file as /app/design/frontend/[your-package]/[your-theme]/template/catalog/product/view/

<?php $_product = $this->getProduct(); ?>
<?php $video = $_product->getData('video'); ?>
<?php if( $video !='' ){ ?>
<h2>Product Video</h2>
<div class="products">
<?php //echo( Mage::getBaseDir('media').'\\'. $video); ?>
<?php if( file_exists( Mage::getBaseDir('media').'\\'. $video) )
{
?>
<div id="mediaspace">&nbsp;</div>
<script src="http://code.jquery.com/jquery-1.6.1.js"></script>
<script>
$( document ).ready( function(){
$.getScript( '<?php echo $this->getSkinUrl('videos/mediaplayer/swfobject.js'); ?>', function(){
var so = new SWFObject('<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN); ?>
/frontend/default/default/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(Mage_Core_Model_Store::URL_TYPE_MEDIA). $video; ?>');
so.write('mediaspace');
} );
} );
</script>
<?php } ?>
</div>
<?php } ?>


4. 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"/>
under
<block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
this block.

5. catalog/product/view.phtml

Open up /app/design/frontend/[your-package]/[your-theme]/catalog/product/view.phtml and add this line:
getChildHtml('product_video'); ?>
6. Obtain and upload a copy of the free JWPlayer

Download the player 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"

7. now just write your video file location like:- wysiwyg/product1.flv

Friday, August 5, 2011

Currency drop down selector in header, Magento

Step 1

You will need to create a new directory, named “directory” and create a new file called “currency-top.phtml“:


/app/design/frontend/template/default/YOUR-TEMPLATE-NAME/template/directory/currency-top.phtml and write the following code in it :-


<?php if($this->getCurrencyCount()>1): ?>

<div class="box language-switcher" style="margin-left:15px">

<label for="select-language">Your Currency: </label>

<select name="currency" onchange="changeCurrency(this)">

<?php foreach ($this->getCurrencies() as $_code => $_name): ?>

<option value="<?php echo $_code ?>"<?php if($_code==$this->getCurrentCurrencyCode()): ?> selected="selected"<?php endif; ?>>

<?php echo $_name ?> - <?php echo $_code ?>

</option>

<?php endforeach; ?>

</select>

</div>

<script type="text/javascript">

//<![CDATA[

function changeCurrency(sObject){

if(sObject.value){

setLocation('<?php echo $this->helper('directory/url')->getSwitchCurrencyUrl() ?>currency/'+sObject.value);

}

}

//]]>

</script>

<?php endif; ?>




Step 2


/app/design/frontend/template/default/YOUR-TEMPLATE-NAME/layout/page.xml


Add currency_top block after store_language block inside header block of page.xml present around line #66 :-


<block type="page/html_header" name="header" as="header">

<block type="page/template_links" name="top.links" as="topLinks"/>

<block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>

<block type="directory/currency" name="currency_top" template="directory/currency-top.phtml"/>

<block type="core/text_list" name="top.menu" as="topMenu"/>

</block>




Step 3:


Add getChildHtml(‘currency_top’) below getChildHtml(’store_language’) in


/app/design/frontend/template/default/YOUR-TEMPLATE-NAME/template/page/html/header.phtml like below :-


<?php echo $this->getChildHtml('store_language') ?>

<?php echo $this->getChildHtml('currency_top') ?>