Sorting Admin Grid Fields with AJAX in Magento

Add follwing code into __construct() function in app/code/local/[Name_Space]/[Module_Name]/Block/Adminhtml/[Module_Name]/Grid.php file.

$this->setUseAjax(true);

Now Add following function at last of this file.

public function getGridUrl()
  {
      return $this->getUrl('*/*/grid', array('_current'=>true));
  }

Now Add following function at last in app/code/local/[Name_Space]/[Module_Name]/controllers/Adminhtml/[Module_Name]Controller.php file.

public function gridAction()
     {
        $this->loadLayout();
        $this->getResponse()->setBody(
               $this->getLayout()->createBlock('[Module_Name]/adminhtml_[Module_Name]_grid')->toHtml()
        );
     }
Advertisements

Display Admin Form Field only Readonly in Magento

Add follwing code into _prepareForm() function.

$fieldset->addField('professor_firstname', 'text', array(
          'label'     => Mage::helper('deskcopy')->__('Professor First Name'),
          'readonly' => true,
          'name'      => 'professor_firstname',
      ));

OR

$fieldset->addField('professor_firstname', 'hidden', array(
            'label'     => Mage::helper('deskcopy')->__('Professor First Name'),
            'after_element_html' => '<tr><td><label for="title">Professor First Name</label></td>
                <td>' .$data['professor_firstname'] . '</td></tr>',
        ));

 

Upgrade file in custom module in Magento

If you want to add extra fields in database table then you have to create upgrade file as follows.

Give file name as higher version from previous version.

For example if you have “mysql4-install-0.1.0.php.” file then upgrade file would be “mysql4-upgrade-0.1.0-0.1.1.php”.

Add following code for add extra fields.

<?php

$installer = $this;

$installer->startSetup();

$installer->run(”

— DROP TABLE IF EXISTS {$this->getTable(‘news’)};
ALTER TABLE {$this->getTable(‘news’)} ADD (
`title1` varchar(255) NOT NULL default ”,
`title2` varchar(255) NOT NULL default ”
)

“);

$installer->endSetup();

Please note that you have to change version from 0.1.0 to 0.1.1 into config.xml file.

Clear magento cache and show result. 

 

 

Display slide cart on mousehover of shopping cart image in right sidebar using prototype in Magento

First add following code in page/html/header.phtml

<div class=”ma-easycart” style=”right: 0px; top: 200px; display: none;” id=”cart_item1″>
<?php echo $this->getLayout()->createBlock(‘checkout/cart_sidebar’)->setTemplate(‘checkout/cart/sidebar.phtml’)->toHtml(); ?>
</div>

<div class=”ma-easysidebar” style=”right: 0px; background-position: 100% 0px; top: 200px; display: block;” id=”cart_icon_area”></div>
<script type=”text/javascript”>
//<![CDATA[
$(“cart_icon_area”).observe(‘mouseover’, function() {
$(‘cart_item1’).setStyle({ display: ‘block’ });
$(this).setStyle({ display: ‘none’ });
});

$(“cart_icon_area”).observe(‘mouseout’, function() {
$(‘cart_item1’).setStyle({ display: ‘none’ });
$(this).setStyle({ display: ‘block’ });
});

$(“cart_item1”).observe(‘mouseover’, function() {
$(this).setStyle({ display: ‘block’ });
$(‘cart_icon_area’).setStyle({ display: ‘none’ });
});
$(“cart_item1”).observe(‘mouseout’, function() {
$(this).setStyle({ display: ‘none’ });
$(‘cart_icon_area’).setStyle({ display: ‘block’ });
});

//]]>
</script>

Now add following css code into ma-easycart.css  which is created in skin\frontend\default\default\css path.

.ma-easycart {
    display: none;
    min-height: 120px;
    position: fixed;
    width: 200px;
}
.ma-easysidebar {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/mamycart.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    height: 120px;
    position: fixed;
    width: 28px;
}

Now add following code in page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method=”addCss”><stylesheet>css/ma-easycart.css</stylesheet></action>

Now copy following images into skin\frontend\default\default\images path. 

mamycart

Thats it…!!!

Display slide cart on onclick of shopping cart link in header in Magento

First add following code in head.phtml at last.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”&gt;
</script>

<script type=”text/javascript”>

jQuery.noConflict();

var c = jQuery ;
c(document).ready(function(){

c(‘.ma-shoppingcart’).click(function(){

c(‘.ma-topcart’).slideToggle();
});

});

</script>

Now add following code in page/html/header.phtml

<? $base_url=Mage::getUrl()?>
<?php
$count = $this->helper(‘checkout/cart’)->getSummaryCount(); //get total items in cart
$total = $this->helper(‘checkout/cart’)->getQuote()->getGrandTotal(); //get total price
//if(!$count){$count=0;}
if($count){$items= $count;}else{$items=0;}
$total=number_format($total, 2);
?>

<div class=”ma-shoppingcart” id=”ma-shoppingcart”>
<div class=”cart-item”>Shopping Cart</div>
<span class=”ma-inactive”><?php
if($items > 1){echo ” (“.$items. ” Items)”;}
else if ($items == 1){echo ” (“.$items. ” Item)”;}
else {echo ” (0 Item)”;}
?></span>
</div>

<div class=”ma-topcart” style=”display: none;” id=”ma-topcart”>
<?php echo $this->getLayout()->createBlock(‘checkout/cart_sidebar’)->setTemplate(‘checkout/cart/sidebar.phtml’)->toHtml(); ?>
</div>

Now add following css code into ma-easycart.css  which is created in skin\frontend\default\default\css path.

.ma-topcart {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: 0;
    margin-left: 30px;
    margin-right: 0;
    margin-top: -10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    position: absolute;
    text-align: left;
    width: 220px;
    z-index: 990;
}
.ma-topcart .mini-products-list .product-details {
    margin-left: 65px;
}
.ma-topcart .mini-products-list .product-image {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: #EFEFEF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #EFEFEF;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #EFEFEF;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #EFEFEF;
    border-top-style: solid;
    border-top-width: 1px;
}
.ma-topcart a.details {
    font-size: 11px;
}
.ma-topcart .btn-remove, .ma-topcart .btn-edit {
    float: right;
}
.ma-topcart .btn-remove, .ma-topcart .block .btn-edit {
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 0;
    margin-top: 1px;
}
.ma-topcart .product-name a {
    font-size: 12px;
}
.ma-topcart li {
    border-bottom-color: #FFFFFF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 7px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 7px;
}
.ma-topcart .summary {
    margin-top: 5px;
}
.ma-topcart {
    display: none;
}
.ma-shoppingcart {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #5C991F;
    font-weight: bold;
    margin-bottom: 0;
    margin-left: 30px;
    margin-right: 0;
    margin-top: -55px;
    padding-bottom: 0;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 5px;
    position: absolute;
    z-index: 900;
}
.ma-shoppingcart span:hover {
    cursor: pointer;
}
.ma-shoppingcart .ma-inactive {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
   /* background-image: url("../images/down.png");  */
    background-origin: padding-box;
    background-position: 100% 60%;
    background-repeat: no-repeat;
    background-size: auto auto;
}
.ma-shoppingcart span {
    font-size: 18px;
    padding-right: 30px;
}
.ma-shoppingcart .ma-active {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/up.png");
    background-origin: padding-box;
    background-position: 100% 60%;
    background-repeat: no-repeat;
    background-size: auto auto;
}
.ma-shoppingcart .cart-item {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/cart.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    padding-left: 28px;
}

Now add following code in page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method=”addCss”><stylesheet>css/ma-easycart.css</stylesheet></action>

Thats it…!!!

Display slide login form on onclick of login link in header in Magento

First add following code in head.phtml at last.

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”&gt;
</script>

<script type=”text/javascript”>

jQuery.noConflict();

var c = jQuery ;
c(document).ready(function(){

<?php
if (!$this->helper(‘customer’)->isLoggedIn() )
{ ?>
c(“li:last a”, “ul.links”).remove();
c(“li:last”, “ul.links”).addClass(“ma-login”);
c(‘ul.links li.last’).append(‘<a class=”login-show” href=”javascript:void(0);”>Log In</a>’);
c(‘.ma-login’).click(function(){
c(‘.ma-quicklogin’).slideToggle();
});
<?php } ?>

});

</script>

 

Now add following code in page/html/header.phtml just after  <?php echo $this->getChildHtml(‘topLinks’) ?>

<div class=”ma-quicklogin” style=”display: none;”>
<form method=”post” action=”<?php echo $base_url;?>customer/account/loginPost/”>
<div class=”ma-content-login”>
<div class=”ma-user”>
<div class=”ma-label”><label for=”mini-login”>Email:</label></div>
<input type=”text” class=”input-text” id=”mini-login” name=”login[username]”>
</div>
<div class=”ma-pass”>
<div class=”ma-label”><label for=”mini-password”>Password:</label></div>
<input type=”password” class=”input-text” id=”mini-password” name=”login[password]”>
</div>
<div class=”actions”>
<button class=”button” type=”submit”><span><span>Login</span></span></button>
<?php /* <button class=”button btn-cancel” type=”submit”><span><span>Cancel</span></span></button> */ ?>
</div>
<div class=”ma-register”><a title=”register” href=”<?php echo $base_url;?>customer/account/create/”>Register</a></div>
<div class=”ma-forgotpass”> <a title=”forgot your password” href=”<?php echo $base_url;?>customer/account/forgotpassword/”>Forgot Your Password?</a></div>
</div>
</form>
</div>

Now add following css code into ma-quicklogin.css  which is created in skin\frontend\default\default\css path.

.ma-quicklogin {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #CDCDCD;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #CDCDCD;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #CDCDCD;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #CDCDCD;
    border-top-style: solid;
    border-top-width: 1px;
    display: none;
    line-height: 30px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    position: absolute;
    right: 20px;
    text-align: left;
    top: 75px;
    width: 155px;
    z-index: 999;
}

.header .header .links li.ma-login {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}
.ma-quicklogin .ma-user, .ma-quicklogin .ma-pass, .ma-quicklogin .actions, .ma-quicklogin .ma-forgotpass, .ma-quicklogin .ma-register {
    clear: both;
    float: left;
}
.ma-quicklogin .actions {
    padding-bottom: 4px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 10px;
}
.ma-quicklogin .actions .button {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 15px;
    padding-top: 0;
}
.ma-quicklogin .actions .button {
    float: left;
}
.ma-quicklogin .ma-label {
    float: left;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 6px;
    padding-top: 0;
    width: 60px;
}
.ma-quicklogin .input-text {
    clear: both;
    float: left;
    width: 150px;
}
.ma-quicklogin .ma-forgotpass, .ma-quicklogin .ma-register {
    line-height: 25px;
}
ul.ma-account {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #CDCDCD;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #CDCDCD;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 1px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #CDCDCD;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    border-top-color: #CDCDCD;
    border-top-style: solid;
    border-top-width: 1px;
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
    position: absolute;
    text-align: left;
    visibility: hidden;
}
.header ul.ma-account li {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    display: block;
    float: none;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0;
}
.header ul.ma-account li a {
    -moz-text-blink: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #FFFFFF;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #CDCDCD;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: #000000;
    display: block;
    padding-bottom: 3px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 3px;
    width: 150px;
}
.header ul.ma-account a:hover {
    color: #EA7900;
}
.header .links li.ma-login {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}

Now add following code in page.xml just after <action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>

<action method=”addCss”><stylesheet>css/ma-quicklogin.css</stylesheet></action>

 

Thats it…!!!

 

Add Categories in Left/Right sidebar in Magento

First add following code into dropdown.js which is created in js/vertical_menu path.

function toggleMenu(el, over)
{
if (over) {
Element.addClassName(el, ‘over’);
}
else {
Element.removeClassName(el, ‘over’);
}
}

var mainNav = function() {

var main = {
obj_nav : $(arguments[0]) || $(“ma-dropdown”),

settings : {
show_delay : 0,
hide_delay : 0,
_ie6 : /MSIE 6.+Win/.test(navigator.userAgent),
_ie7 : /MSIE 7.+Win/.test(navigator.userAgent)
},

init : function(obj, level) {
obj.lists = obj.childElements();
obj.lists.each(function(el,ind){
main.handlNavElement(el);
if((main.settings._ie6 || main.settings._ie7) && level){
main.ieFixZIndex(el, ind, obj.lists.size());
}
});
if(main.settings._ie6 && !level){
document.execCommand(“BackgroundImageCache”, false, true);
}
},

handlNavElement : function(list) {
if(list !== undefined){
list.onmouseover = function(){
main.fireNavEvent(this,true);
};
list.onmouseout = function(){
main.fireNavEvent(this,false);
};
if(list.down(“ul”)){
main.init(list.down(“ul”), true);
}
}
},

ieFixZIndex : function(el, i, l) {
if(el.tagName.toString().toLowerCase().indexOf(“iframe”) == -1){
el.style.zIndex = l – i;
} else {
el.onmouseover = “null”;
el.onmouseout = “null”;
}
},

fireNavEvent : function(elm,ev) {
if(ev){
elm.addClassName(“over”);
elm.down(“a”).addClassName(“over”);
if (elm.childElements()[1]) {
main.show(elm.childElements()[1]);
}
} else {
elm.removeClassName(“over”);
elm.down(“a”).removeClassName(“over”);
if (elm.childElements()[1]) {
main.hide(elm.childElements()[1]);
}
}
},

show : function (sub_elm) {
if (sub_elm.hide_time_id) {
clearTimeout(sub_elm.hide_time_id);
}
sub_elm.show_time_id = setTimeout(function() {
if (!sub_elm.hasClassName(“shown-sub”)) {
sub_elm.addClassName(“shown-sub”);
}
}, main.settings.show_delay);
},

hide : function (sub_elm) {
if (sub_elm.show_time_id) {
clearTimeout(sub_elm.show_time_id);
}
sub_elm.hide_time_id = setTimeout(function(){
if (sub_elm.hasClassName(“shown-sub”)) {
sub_elm.removeClassName(“shown-sub”);
}
}, main.settings.hide_delay);
}

};
if (arguments[1]) {
main.settings = Object.extend(main.settings, arguments[1]);
}
if (main.obj_nav) {
main.init(main.obj_nav, false);
}
};

document.observe(“dom:loaded”, function() {
//run navigation without delays and with default id=”#nav”
//mainNav();

//run navigation with delays
mainNav(“ma-dropdown”, {“show_delay”:”100″,”hide_delay”:”100″});
});

 

Now add following code in page.xml just after <action method=”addJs”><script>mage/cookies.js</script></action>

<action method=”addJs”><script>vertical_menu/dropdown.js</script></action>

 

Now add following code into catalog.xml in <default> tag in <reference name=”left”> or <reference name=”right”>

<block type=”catalog/navigation” name=”catalog.leftnav.nav” after=”-” template=”catalog/navigation/left_nav.phtml”/>

 

Now add following code in catalog/navigation/left_nav.phtml

<div class=”block block-verticalmenu”>
<div class=”block-title”>
<strong><span><?php echo $this->__(‘Categories’) ?></span></strong>
</div><!–End block block-cart–>
<div class=”block-content”>
<ul id=”ma-dropdown” class=”dropdown”>
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?> </ul>
</div><!–End Of vertical-nav–>
<?php echo $this->getChildHtml(‘topLeftLinks’) ?>
</div><!–End Of vertical-nav-container box base-mini–>

 

Now add following css code into dropdow.css  which is created in skin\frontend\default\default\css path.

/*———– dropdown menu ———–*/
#ma-dropdown {
width: 193px;
}
/* All Levels */ /* Style consistent throughout all nav levels */
#ma-dropdown li {
position:relative;
text-align:left;
border-bottom: 1px solid #cdcdcd;
}
#ma-dropdown li.last {
border: none;
}
#ma-dropdown li.over {
z-index:998;
}
#ma-dropdown a,
#ma-dropdown a:hover {
display:block;
line-height:1.3em;
text-decoration:none;
}
#ma-dropdown span {
display:block;
cursor:pointer;
white-space:nowrap;
}
#ma-dropdown li ul span {
white-space:normal;
}
#ma-dropdown ul li.parent a {
}
#ma-dropdown ul li.parent li a {

}
/* 0 Level */
#ma-dropdown li.active a {
color:#d96708;
}
#ma-dropdown a {
padding:6px 10px;
color:#464646;
font-weight:bold;
}
#ma-dropdown li.over a,
#ma-dropdown a:hover {
color:#d96708;
}
/* 1st Level */
#ma-dropdown ul li,
#ma-dropdown ul li.active {
margin:0;
}
#ma-dropdown ul li.last {
background:#ecf3f6;
padding-bottom:0;
}
#ma-dropdown ul a,
#ma-dropdown ul a:hover {
background:none;
}
#ma-dropdown ul li a {
font-weight:normal !important;
}
/* 2nd Level */
#ma-dropdown ul,
#ma-dropdown div {
position:absolute;
width:193px;
top:-1px;
left:-10000px;
border:1px solid #cdcdcd;
}
#ma-dropdown div ul {
position:static;
width:auto;
border:none;
}
/* 3rd+ Level */
#ma-dropdown ul ul,
#ma-dropdown ul div {
top:-1px;
}
#ma-dropdown ul li a { background:#fff; }
#ma-dropdown ul li a:hover { background:#d5e4eb; }
#ma-dropdown ul li a,
#ma-dropdown ul li a:hover { color:#2f2f2f !important; }
#ma-dropdown ul span,
#ma-dropdown ul li.last li span { }
/* Show menu */
#ma-dropdown li ul.shown-sub,
#ma-dropdown li div.shown-sub { left:193px; z-index:999; }
#ma-dropdown li .shown-sub ul.shown-sub,
#ma-dropdown li .shown-sub li div.shown-sub { left:193px; }
/********** Navigation > */