Magento: Improved one page checkout design using CSS

/*  CSS */
.block-progress .block-title { background:none; margin:0 0 34px; padding:0; }
.checkout-onepage-index .col-main { padding:0; border:0; }
.checkout-onepage-index .page-title { padding-right:40px; width:auto; }
.checkout-onepage-index .page-title h1 { background:none; padding:0; }

.opc { position:relative; overflow:hidden; height:970px; padding-top:20px; text-align:center; border:1px solid #BBAFA0; background:#F9F3E3; }
.opc .buttons-set { margin:15px 0 0; opacity:1!important; }
.opc .buttons-set p.required { margin:0; padding:0 0 10px; }
.opc .buttons-set .back-link { display:none; }
.opc .buttons-set .please-wait { position:absolute; z-index:99; top:30%; left:50%; margin:-80px 0 0 -146px; border:5px solid #f3b66f; font-size:12px; background:#fff; padding:30px; white-space:nowrap; border:1px solid #c0c0c0; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 50px rgba(0,0,0,0.2); box-shadow:0 0 50px rgba(0,0,0,0.2); }
.opc .buttons-set a { color:#214D90; }
.opc .ul { list-style:disc outside; padding-left:18px; }
.opc li.section { display:inline; }
.opc .step-title,.opc .allow .step-title { border:1px solid #F9F3E3; height:69px }
.opc .step { padding:30px 20px; position:absolute; border:0; top:110px; left:0; z-index:1; background:#FBFAF6; width:605px; height:900px; border-bottom:1px dotted #ccc; border:none; width:643px; text-align:left; border-top:1px solid #BBAFA0; }
.opc .step-title .number,.opc .allow .step-title .number,.opc .active .step-title .number { float:none; display:block; margin:0 auto; margin-bottom:10px; }
.opc .step-title { position:relative; float:left; text-align:center; padding:15px 11px 0; margin-left:-1px; background:none; }
.opc .step-title a { display:none; }
.opc .step-title .number { background:#ccc; color:#fff; width:30px; height:30px; line-height:30px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; margin-bottom:10px; padding:0; border:0; }
.opc .step-title h2 { font-size:12px; color:#bbb; clear:both; }
.opc .allow .step-title { cursor:pointer; background:none; }
.opc .allow .step-title .number { background:#000; color:#fff; }
.opc .allow .step-title h2 { color:#000; }
.opc .active .step-title { color:#ef0606; cursor:default; border:1px solid #BBAFA0; border-bottom:1px solid #FBFAF6; z-index:2; background:#FBFAF6 url(../images/bkg_checkout.gif) 0 0 repeat-x; }
.opc .active .step-title .number { background:#F18200; border-color:#fff; color:#fff; }
.opc .active .step-title h2 { color:#F18200; }
.opc .step-title h2,.opc .allow .step-title h2,.opc .active .step-title h2 { width:100%; text-align:center; }
.opc .step-title { width:16%; }
.opc .form-list .field,.opc .form-list .wide { }
.opc .form-list li fieldset { margin-bottom:40px; }
.opc .form-list label { float:left; width:220px; text-align:right; padding:4px 0 0; }
.opc .form-list label.required em { float:none; position:relative; right:4px; }
.opc .form-list li.fields { margin:0; }
.opc .form-list div.fields { width:100%; overflow:hidden; margin:0 0 8px; }
.opc .form-list .wide,.opc .form-list li.fields .field { width:645px; margin:0 0 8px; }
.opc .form-list li.wide .input-box,.opc .form-list .input-box { clear:none; float:right; margin-right:140px; width:260px; }
.opc .form-list li.wide select { width:390px; }
.opc .form-list li.wide input.input-text { width:254px; }
.opc .form-list .control input { margin:8px 0 0 25px; }
.opc .form-list li.control label { float:left; }
.opc form .form-list li.wide { margin-bottom:8px; }
.opc form .address-select { margin:8px 0 40px; }

.opc:first-of-type .step{-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.opc:first-of-type .step[style*='display:none;'],
.opc:first-of-type .step[style*='display: none;']{display:block !important;}
.opc:first-of-type .section .step{left: 100%;}
.opc:first-of-type .allow .step{left: -100%;}
.opc:first-of-type .active .step{left:0;}
.opc:first-of-type li:last-child .step-title a{width:50%}
.opc:first-of-type li:first-child .step-title a{width:50%;left:50%}

#opc-login p.required { display:none; }
#opc-login h3 { margin-bottom:18px; }
#opc-login .col-2 { float:left; }
#opc-login .col-2 form fieldset h4 { display:none; }
#opc-login .col-2 { display:block; width:300px; }
#opc-login .col-2 fieldset { width:300px; }
#opc-login .col-2 .input-box { width:188px; margin:0; float:left; }
#opc-login .col-2 .input-text { width:182px; }
#opc-login .col-2 .form-list label { text-align:left; }
#opc-login .col-2 .form-list label { width:110px; }
#opc-login .form-list li.control label { float:none; }
#opc-login .form-list li.control input { margin:0 8px 0 0; }
#opc-login .col-1 { float:right; }
#opc-login .col-1 { width:290px; }
#opc-login .col-1 h4,#opc-login .col-1 .ul { display:none; }
#checkout-step-review.step { width:645px; }

#opc-review .step { padding:30px 20px; border-top:1px solid #BBAFA0; }
#opc-review .product-name { font-weight:bold; color:#0a263c; }
#opc-review .item-options { margin:5px 0 0; }
#opc-review .buttons-set { padding:20px 0; border:0; }
#opc-review .buttons-set p { margin:0; line-height:40px; }
#opc-review .buttons-set .please-wait { height:40px; line-height:40px; }
#opc-shipping_method .buttons-set { border-top:1px solid #E4E4E4; }

.block-progress .block-title { background:none; margin:0 0 34px; padding:0; }
.checkout-onepage-index .col-main { padding:0; border:0; }
.checkout-onepage-index .page-title { padding-right:40px; width:auto; }
.checkout-onepage-index .page-title h1 { background:none; padding:0; }

.opc { position:relative; overflow:hidden; height:970px; padding-top:20px; text-align:center; border:1px solid #BBAFA0; background:#F9F3E3; }
.opc .buttons-set { margin:15px 0 0; opacity:1!important; }
.opc .buttons-set p.required { margin:0; padding:0 0 10px; }
.opc .buttons-set .back-link { display:none; }
.opc .buttons-set .please-wait { position:absolute; z-index:99; top:30%; left:50%; margin:-80px 0 0 -146px; border:5px solid #f3b66f; font-size:12px; background:#fff; padding:30px; white-space:nowrap; border:1px solid #c0c0c0; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 50px rgba(0,0,0,0.2); box-shadow:0 0 50px rgba(0,0,0,0.2); }
.opc .buttons-set a { color:#214D90; }
.opc .ul { list-style:disc outside; padding-left:18px; }
.opc li.section { display:inline; }
.opc .step-title,.opc .allow .step-title { border-color:#FBFAF6; }
.opc .step { padding:30px 20px; position:absolute; border:0; top:100px; left:0; z-index:1; background:#fff; width:605px; height:900px; border-bottom:1px dotted #ccc; border:none; background:none; width:643px; text-align:left; background:#FBFAF6 url(../images/bkg_checkout.gif) 0 0 repeat-x; border-top:1px solid #BBAFA0; }
.opc .step-title .number,.opc .allow .step-title .number,.opc .active .step-title .number { float:none; display:block; margin:0 auto; margin-bottom:10px; }
.opc .step-title a { display:none; }
.opc .step-title .number { background:#fff; color:#ccc; width:30px; height:30px; line-height:30px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; margin-bottom:10px; padding:0; border:0; position:relative; z-index:1; }
.opc .step-title h2 { font-size:12px; color:#bbb; clear:both; margin-bottom:10px; }
.opc .allow .step-title .number { background:#000; border-color:#fff; color:#fff; }
.opc .allow .step-title h2 { color:#000; }
.opc .active .step-title .number { background:#F18200; border-color:#fff; color:#fff; }
.opc .active .step-title h2 { color:#F18200; }
.opc .step-title,.opc .allow .step-title,.opc .active .step-title { position:relative; text-align:center; border:none; background:none; padding:0; overflow:hidden!important; height:80px; display:inline-block; vertical-align:top; }
.opc .step-title,.opc .allow .step-title,.opc .active .step-title { *display:block; *float:left; }
.opc .step-title h2,.opc .allow .step-title h2,.opc .active .step-title h2 { width:100%; text-align:center; }
.opc .step-title { width:16%; }
.opc .form-list .field,.opc .form-list .wide { }
.opc .form-list li fieldset { margin-bottom:40px; }
.opc .form-list label { float:left; width:220px; text-align:right; padding:4px 0 0; }
.opc .form-list label.required em { float:none; position:relative; right:4px; }
.opc .form-list li.fields { margin:0; }
.opc .form-list div.fields { width:100%; overflow:hidden; margin:0 0 8px; }
.opc .form-list .wide,.opc .form-list li.fields .field { width:645px; margin:0 0 8px; }
.opc .form-list li.wide .input-box,.opc .form-list .input-box { clear:none; float:right; margin-right:140px; width:260px; }
.opc .form-list li.wide select { width:390px; }
.opc .form-list li.wide input.input-text { width:254px; }
.opc .form-list .control input { margin:8px 0 0 25px; }
.opc .form-list li.control label { float:left; }
.opc form .form-list li.wide { margin-bottom:8px; }
.opc form .address-select { margin:8px 0 40px; }

.opc:first-of-type .step{-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.opc:first-of-type .step[style*='display:none;'],
.opc:first-of-type .step[style*='display: none;']{display:block !important;}
.opc:first-of-type .section .step{left: 100%;}
.opc:first-of-type .allow .step{left: -100%;}
.opc:first-of-type .active .step{left:0;}
.opc:first-of-type li:last-child .step-title a{width:50%}
.opc:first-of-type li:first-child .step-title a{width:50%;left:50%}
.opc:first-of-type .step-title a { display:block;height:1px;border-bottom:1px dashed #ccc; width:100%; text-indent:-3000px; position: absolute;top:15px;z-index: 0}
.opc:first-of-type .allow .step-title a {}

#opc-login p.required { display:none; }
#opc-login h3 { margin-bottom:18px; }
#opc-login .col-2 { float:left; }
#opc-login .col-2 form fieldset h4 { display:none; }
#opc-login .col-2 { display:block; width:300px; }
#opc-login .col-2 fieldset { width:300px; }
#opc-login .col-2 .input-box { width:188px; margin:0; float:left; }
#opc-login .col-2 .input-text { width:182px; }
#opc-login .col-2 .form-list label { text-align:left; }
#opc-login .col-2 .form-list label { width:110px; }
#opc-login .form-list li.control label { float:none; }
#opc-login .form-list li.control input { margin:0 8px 0 0; }
#opc-login .col-1 { float:right; }
#opc-login .col-1 { width:290px; }
#opc-login .col-1 h4,#opc-login .col-1 .ul { display:none; }

#checkout-step-review.step { width:645px; }
#opc-review .step { padding:30px 20px; border-top:1px solid #BBAFA0; }
#opc-review .product-name { font-weight:bold; color:#0a263c; }
#opc-review .item-options { margin:5px 0 0; }
#opc-review .buttons-set { padding:20px 0; border:0; }
#opc-review .buttons-set p { margin:0; line-height:40px; }
#opc-review .buttons-set .please-wait { height:40px; line-height:40px; }
#opc-shipping_method .buttons-set { border-top:1px solid #E4E4E4; }

Facebook Fan Box

<?php
$fb_page_url= Mage::getStoreConfig('setting/fbfanbox/fb_page_url');
$box_width=250;
$box_height=290;
$header=TRUE;
$stream=FALSE;
$box_content="";
$box_content .='<iframe src="http://www.facebook.com/plugins/likebox.php?href='. urlencode($fb_page_url);
if($box_width)
{
$box_content .= '&amp;width='. $box_width;
}
if($box_height)
{
$box_content .= '&amp;height='. $box_height;
}

$box_content .= '&amp;connections='. $connection;

if($header)
{
$box_content .= '&amp;header=true';
}

if($stream)
{
$box_content .= '&amp;stream=true';
}
$box_content .= '" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; ';

if($box_width)
{
$box_content .= ' width:'. $box_width . 'px; ';
}
if($box_height)
{
$box_content .= ' height:'. $box_height. 'px; ';
}
$box_content .= '"></iframe>';
?>
<div id='fbfanbox'>
<?php echo($box_content); ?>
</div>

Magento: Use ajax filter in magento catalog

There are two things need to do
1.Convert all request into ajax request using following script

function filter(){
    jQuery('.toolbar a').each(function(index){
        jQuery(this).click(function(){
            filterAjax(jQuery( this ).attr('href'));          
            console.log( index + ": " + jQuery( this ).text() ); return false;
        });
     
    });
    jQuery('.toolbar select').each(function(index){
        jQuery(this).removeAttr('onchange');
        jQuery(this).change(function(){
            filterAjax(jQuery( this ).val());
            console.log( index + ": " + jQuery( this ).text() ); return false;
        });
     
    });
    jQuery('.block-layered-nav a').each(function(index){
        jQuery(this).click(function(){        
            filterAjax(jQuery( this ).attr('href'));
            console.log( index + ": " + jQuery( this ).text() ); return false;
        });
     
    });
}
function filterAjax(s_url){
    jQuery('#loader').show();
    jQuery.ajax({
            type: "GET",
            //data : {is_ajax:1},
            url: s_url,
            success: function(data) {
            jQuery('.category-products').remove();
            jQuery('.col-main').append(data.page);                  
            jQuery('.block-layered-nav').remove();
            jQuery('.col-left').prepend(data.block);
            //jQuery('body').append(data.js);
            jQuery('#loader').hide();
            filter();
      }
    });
}
jQuery(document).ready(function(){
    filter();
});

2. Then convert output into JSON using following script

$layout = Mage::getSingleton('core/layout');
if (!$layout)
return;
if (!Mage::app()->getRequest()->isXmlHttpRequest())
return;          
$layout->removeOutputBlock('root');  
Mage::app()->getFrontController()->getResponse()->setHeader('content-type', 'application/json');

$page = $layout->getBlock('product_list');
if (!$page)
return;
$block='';
foreach ($layout->getAllBlocks() as $child){              
if (!in_array($child->getNameInLayout(), array('catalog.leftnav'))){
    continue;
}
$block = $child;
}
if (!$block)
return;      
$container = $layout->createBlock('core/template', 'sparx_container');
//$container->setData('js', $layout->createBlock('core/template', 'ajaxfilter_js')->setTemplate('ajaxfilter/js.phtml')->toHtml());
$container->setData('block', $block->toHtml());
$container->setData('page', $page->toHtml());
$layout->addOutputBlock('sparx_container', 'toJson');

Here we have to use event observer concept.
(controller_action_layout_render_before_catalog_category_view)

Magento : How to add Indexes in a custom module

Follow these steps:

config.xml:

<index>                              

<indexer>

<cms_indexer>

<model>module/cmsindexer</model>

</cms_indexer>

</indexer>

</index>            

Model:

cmsindexer.php

Class Module_Model_CmsIndexer extends Mage_Index_Model_Indexer_Abstract

{

public function getName(){

                return 'Add CMS Cache';

}

public function getDescription(){

return 'Rebuild Cache Index for all CMS Pages';

}

protected function _processEvent(Mage_Index_Model_Event $event){

// process

}

public function reindexAll(){

//Your Function to be executed

}

Magento : Full Page Cache

Full Page Cache (FPC) is:
As in every thing that is generated from a script is written to HTML and served next time, improving performance (by reducing load and not having to generate the page for every visit).


In order to understand Magento Full Page Cache, we need to understand what the run function in Mage_Core_Model_App

public function run($params)
    {
        $options = isset($params['options']) ? $params['options'] : array();
        $this->baseInit($options);
        Mage::register('application_params', $params);

        if ($this->_cache->processRequest()) {
            $this->getResponse()->sendResponse();
        } else {
            $this->_initModules();
            $this->loadAreaPart(Mage_Core_Model_App_Area::AREA_GLOBAL, Mage_Core_Model_App_Area::PART_EVENTS);

            if ($this->_config->isLocalConfigLoaded()) {
                $scopeCode = isset($params['scope_code']) ? $params['scope_code'] : '';
                $scopeType = isset($params['scope_type']) ? $params['scope_type'] : 'store';
                $this->_initCurrentStore($scopeCode, $scopeType);
                $this->_initRequest();
                Mage_Core_Model_Resource_Setup::applyAllDataUpdates();
            }

            $this->getFrontController()->dispatch();
        }
        return $this;
    }

Here $this->_cache->processRequest()
line checks if you have defined a caching node like this under app/etc/test.xml

<config>
<global>
<cache>
<request_processors>
<lt>Bd_Fullpagecache_Model_Processor</lt>
</request_processors>
</cache>
</global>
</config>

The next thing that magento does is to find/initialize the class you have defined and it expects that you have an extractContent function defined in your model.

Magento : Dynamically adding and changing blocks

Store-specific handle:
<STORE_#> (where '#' is the store ID — if you only have one store it is most likely '1')

Category-specific handle:
<CATEGORY_#> (where '#' is the ID number of the current category)

Product-specific handle:
<PRODUCT_#> (where '#' is the ID number of the current product)

Product type-specific handle:
<PRODUCT_TYPE_NAME> (where 'name' is the product type, example: 'simple', 'grouped', 'configurable', etc.)

Customer logged in or out:
<CUSTOMER_LOGGED_STATUS> (where 'status' is either 'in' or 'out')

If CMS page:
<cms_page>

Close a div popup after clicking outside it

Remember that jQuery library must be included.

Use following js code

jQuery(document).mouseup(function (event){
    var divcontainer = jQuery(".forclose" ); // Object of DIV
    if (divcontainer.has(event.target).length === 0){
        divcontainer.hide();
    }
});