<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Simple Tab</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".tab_content").hide();
jQuery("ul.tabs li:first").addClass("active").show();
jQuery(".tab_content:first").show();
//On Click Event
jQuery("ul.tabs li").click(function() {
if(!jQuery(this).hasClass('active')){
jQuery("ul.tabs li").removeClass("active");
jQuery(this).addClass("active");
jQuery(".tab_content").hide();
var activeTab = jQuery(this).find("a").attr("href");
jQuery(activeTab).fadeIn();
return false;
}else{
return false;
}
});
});
</script>
<style type="text/css">
.details-tab-container{width: 800px; height:auto; position:absolute;}
.details-tab{ width:800px; float:left;}
.details-tab ul.tabs{ list-style-type:none;}
.details-tab li{background:#999; border:1px solid; float:left; padding:3px; margin:1px; border-radius: 6px;}
.details-tab li.active{background:#000;}
.details-tab li.active a{color:#FFF; font-size:14px; }
.details-tab li a{ text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-weight:bold; font-size:11px; color:#000;}
.tab-container{ width:800px; float:left; border:2px solid;}
</style>
</head>
<body>
<div class="details-tab-container">
<div class="details-tab">
<ul class="tabs">
<li><a href="#description"><span>Product Description</span></a></li>
<li><a href="#attribute"><span>Product Attributes</span></a></li>
<li><a href="#review"><span>Product Reviews</span></a></li>
</ul>
</div>
<div class="tab-container">
<div class="tab_content" id="description">Description Lorem ipsum dolor sit amet, tation intellegebat cum ea, at vidit splendide has, te sit ridens salutatus abhorreant. Eum te augue cetero. Clita interpretaris eos cu. Per no senserit suscipiantur. Altera molestie eos ad, pro no fierent periculis. Ponderum convenire sit no.</div>
<div class="tab_content" id="attribute">Attributes Lorem ipsum dolor sit amet, tation intellegebat cum ea, at vidit splendide has, te sit ridens salutatus abhorreant. Eum te augue cetero. Clita interpretaris eos cu. Per no senserit suscipiantur. Altera molestie eos ad, pro no fierent periculis. Ponderum convenire sit no.</div>
<div class="tab_content" id="review">Review Lorem ipsum dolor sit amet, tation intellegebat cum ea, at vidit splendide has, te sit ridens salutatus abhorreant. Eum te augue cetero. Clita interpretaris eos cu. Per no senserit suscipiantur. Altera molestie eos ad, pro no fierent periculis. Ponderum convenire sit no.</div>
</div>
</div>
</body>
</html>
see the demo here.. :-)
Wednesday, January 9, 2013
Add social share button with custom image in your web page
>> Add facebook share...
<a href="javascript:;" onclick="window.open('http://www.facebook.com/share.php?u=your page url','facebook share','resizable=yes,width=700,height=500,scrollbars=yes,status=yes')"><img alt="facebook" src="yourimage.jpg"></a>
>> Twitter Share...
<a href="javascript:;" onclick="window.open('https://twitter.com/share','twitter share','resizable=yes,width=700,height=500,scrollbars=yes,status=yes')"><img alt="twitter" src="yourimage.jpg"/></a>
>> Pin It share ....
<a target="_blank" href="http://pinterest.com/pin/create/button/?url=your page url&media=image url&description=image description" class="pin-it-share" count-layout="horizontal"><img alt="pinit" src="yourimage.jpg"></a>
:-)
Thursday, January 3, 2013
Magento Error : "You cannot define a correlation name 'size_idx' more than once"....
>> The error occurs if you use <block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml"/> this block twice in your catalog.xml(in your theme folder).
Make sure there is only one layered block.
I got this error when I copied the leftnav block within content block without removing the leftnav block from the left block.
<reference name="left">
<block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml"/>
</reference>
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
<block type="catalog/layer_view" name="content.leftnav" as="cat_left_nav" template="catalog/layer/view.phtml"/>
</reference>
Friday, December 21, 2012
Create placeholder input field in javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function removeText(id, val)
{
if(document.getElementById(id).placeholder == val){
document.getElementById(id).placeholder ='';
document.getElementById(id).style.color= '#000';
}
}
function newText(id, val)
{
if(document.getElementById(id).value == ''){
document.getElementById(id).placeholder = val;
document.getElementById(id).style.color = '#aaa';
}
}
</script>
</head>
<body>
<input type="text" name="abc" id="abc" placeholder="Enter your name" onfocus="removeText(this.id, 'Enter your name')" onblur="newText(this.id, 'Enter your name')"/>
<input type="text" name="abc1" id="abc1" placeholder="Enter your address" onfocus="removeText(this.id,'Enter your address')" onblur="newText(this.id,'Enter your address')"/>
<input type="text" name="abc2" id="abc2" placeholder="Enter your phone" onfocus="removeText(this.id,'Enter your phone')" onblur="newText(this.id,'Enter your phone')"/>
</body>
</html>
see the demo here.
Thursday, December 13, 2012
How to use dynamic value in a dropdown attribute in magento
>> Here I'll show you how to use dynamic value in a dropdown product attribute. Suppose you need to store Customer Id with a product, then you've to list all customers when you creating a product.
=> First create an attribute of select type and don't need to put the option value there.
=> Now you just need to change the Source Model of this attribute. You can also do it by code. But I'm showing you the easiest way. Go to your phpMyadmin database, find the table "eav_attribute". Search the attribute that you've created. Here I've changed the source model to "vendor/product_attribute_unit". You can use your own.
I've used a module named "vendor" and a page within app/code/local/JR/Vendor/Model/Product/Attribute/Unit.php .
Now this the model code.
<?php
class JR_Vendor_Model_Product_Attribute_Unit extends Mage_Eav_Model_Entity_Attribute_Source_Abstract
{
public function getAllOptions()
{
$model = Mage::getModel('customer/customer');
$collection = $model->getCollection();
$customerArr = array();
$customerArr[] = array('value' => '0','label' => 'Admin');
foreach($collection as $customer)
{
$customer = $model->load($customer->getId());
$customerArr[] = array(
'value' => $customer->getId(),
'label' => $customer->getEmail(),
);
}
if (!$this->_options) {
$this->_options = $customerArr;
}
return $this->_options;
}
}
?>
Now you're ready to use your customer to assign in a product.
Send custom transactional email in Magento.
>> Here I'll show you how to use custom transactional mail in Magento. It's very simple, you can use it for your custom page.
=> First create your mail template. Go to Admin=>System=>Transactional Emails=> Click "Add New Template" button. There you'll find a page like :
Select a template from "Template" dropdown. You can use the "Contact Form". Now fill the all require fields and click save template. Now note the "Template Id" of this template.
=> Use this method to send the mail.
public function sendJrTransactionalEmail()
{
// set the Transactional Email Template's ID that you've created...
$templateId = 1;
// Set sender information
$senderName = Mage::getStoreConfig('trans_email/ident_support/name');
$senderEmail = Mage::getStoreConfig('trans_email/ident_support/email');
$sender = array('name' => $senderName,
'email' => $senderEmail);
// Set recepient information
$recepientEmail = 'jayanta@example.com';
$recepientName = 'Jayanta Roy';
// Get Store ID
$storeId = Mage::app()->getStore()->getId();
// Set variables that can be used in email template. To get this variable write like {{var customerEmail}} in transactional Email.
$vars = array('customerEmail' => 'customer@example.com',
'customerName' => 'Mr. John Due');
$translate = Mage::getSingleton('core/translate');
// Send Transactional Email
Mage::getModel('core/email_template')
->addBcc($senderEmail) // You can remove it if you don't need to send bcc
->sendTransactional($templateId, $sender, $recepientEmail, $recepientName, $vars, $storeId);
$translate->setTranslateInline(true);
}
Hope it'll help you........ :)
Monday, December 10, 2012
Override controllers in Magento
>> I've described admin controller override in my previous post. You just need to change config.xml and controller page with this code :
<?xml version="1.0"?>
<config>
<modules>
<JR_Overridecontroller>
<version>1.0.0</version>
</JR_Overridecontroller>
</modules>
<frontend>
<routers>
<catalog><!-- Name of core module to be overridden -->
<args>
<modules>
<JR_Overridecontroller before="Mage_Catalog">JR_Overridecontroller_Catalog</JR_Overridecontroller><!-- Tell Magento to call our custom module before the Mage/Catalog module -->
</modules>
</args>
</catalog>
</routers>
</frontend>
</config>
and in your controller page :
<?php
include_once("Mage/Catalog/controllers/ProductController.php");
class JR_Overridecontroller_Catalog_ProductController extends Mage_Catalog_ProductController
{
public function editAction(){
// Here is your overridden controller method.....
}
}
?>
You can override any controller with the help of this.....
Subscribe to:
Posts (Atom)