Magento provides simple input text field on product page for quantity. But to make it more attractive and easier for customers, you can add an increment quantity button in Magento.
Today, we are going to learn how to add quantity increment buttons to product page. We can do this by editing core files but it’s not the right approach. So, we’ll add quantity increment buttons to product page in Magento by using custom module.
Create Directories
We will use Rajendra as Namespace and Quantity as Module name.
Go to your module and create the following directories in it:
1. etc
2. Model
3. Block
4. Template
Configuration of Module
Go to app/code/local/Rajendra/Quantity/etc and create config.xml. Now place the following code in it:
|
<config>
<modules>
<Rajendra_Quantity>
<version>0.1.0</version>
</Rajendra_Quantity>
</modules>
<global>
<models>
<grouped>
<class>Rajendra_Quantity__Model</class>
</grouped>
</models>
<blocks>
<grouped>
<class>Rajendra_Quantity_Blocks</class>
</grouped>
</blocks>
</global>
<frontend>
<events>
<core_block_abstract_to_html_after>
<observers>
<rajendra_grouped_init>
<class>Rajendra_Quantity_Model_Observer</class>
<method>applyJavascript</method>
</rajendra_grouped_init>
</observers>
</core_block_abstract_to_html_after>
</events>
</frontend>
</config>
|
Activation Of Module
Go to app/etc/modules and create Rajendra_Quantity.xml. Now place the following code in it:
|
<config>
<modules>
<Rajendra_Quantity>
<active>true</active>
<codePool>local</codePool>
</Rajendra_Quantity>
</modules>
</config>
|
Create Model
Go to app/code/local/Rajendra/Quantity/Model and create Observer.php. Now place the following code in it:
|
<?php
class Rajendra_Quantity_Model_Observer
{
const MODULE_NAME = 'Rajendra_Quantity';
public function applyJavascript($observer = NULL)
{
if (!$observer)
{
return;
}
if ('product.info.addtocart' == $observer->getEvent()->getBlock()->getNameInLayout())
{
if (!Mage::getStoreConfig('advanced/modules_disable_output/'.self::MODULE_NAME))
{
$transport = $observer->getEvent()->getTransport();
$block = new Cloudways_Qty_Block_Injection();
$block->setPassingTransport($transport['html']);
$block->toHtml();
}
}
return $this;
}
}
|
Create Block
Go to app/code/local/Rajendra/Quantity/Block and create Injection.php. Now place the following code in it:
|
<?php
class Rajendra_Quantity_Block_Injection extends Mage_Core_Block_Text
{
protected $a = 'grouped.qty_javascript';
protected $b = 'qty_javascript';
public function setPassingTransport($transport)
{
$this->setData('text', $transport.$this->_generateJavaScript());
}
private function _generateJavaScript()
{
$directory = dirname(dirname(__FILE__));
$File = 'quantity.phtml';
$template = 'template';
return file_get_contents($directory . DS . $template . DS . $File);
}
}
|
Create Template File
Go to app/code/local/Rajendra/Quantity/template and create quantity.phtml. Now place the following code in it:
|
<script type="text/javascript">
var parentTD;
var newDiv;
var navigationDiv;
var i = 1;
var currentElement = null;
$$('input.qty').each(function(el)
{
parentTD = el.parentNode;
newDiv = document.createElement('div');
Element.extend(newDiv);
newDiv.id = i++;
newDiv.update(parentTD.innerHTML).innerHTML;
parentTD.update().innerHTML;
parentTD.appendChild(newDiv);
navigationDiv = document.createElement('div');
Element.extend(navigationDiv);
navigationDiv.update('<p class="add">+</p><p class="sub">-</p>').innerHTML;
newDiv.appendChild(navigationDiv);
});
$$('p.add').each(function(el)
{
el.observe('click',function(event)
{
currentElement = el.parentNode.previous();
i = 0;
while(currentElement.type != 'text' && i < 5)
{
currentElement = currentElement.previous();
i++;
}
currentElement.value = parseInt(currentElement.value) + 1;
});
});
$$('p.sub').each(function(el)
{
el.observe('click',function(event)
{
currentElement = el.parentNode.previous();
i = 0;
while(currentElement.type != 'text' && i < 5)
{
currentElement = currentElement.previous();
i++;
}
if(parseInt(currentElement.value) > 0){
currentElement.value = parseInt(currentElement.value) - 1;
}
});
});
</script>
|
Add CSS
Go to skin/frontend/your theme/default/css in the root directory of Magento and create custom.css. Add the following code in it:
|
.add
{
color: #3399cc;
font-weight: bold;
font-size: 20px;
text-align: center;
margin-left: 46px;
cursor: pointer;
position: absolute;
margin-top: -34px;
}
.sub
{
color: #3399cc;
font-weight: bold;
font-size: 20px;
text-align: center;
margin-left: 32px;
cursor: pointer;
}
|
Now, to execute your custom css file, go to app/design/frontend/your theme/default/layout/page.xml and place following code before </default>:
|
<reference name="head">
<action method="addItem"><type>skin_css</type><file>css/custom.css</file></action>
</reference>
|
Go to your product page now and you will see the result.
Final Words
After this tutorial, you should be able to add quantity increment buttons to product page. After you’ve done this, it will be easier for your customers to add the quantity of products. I hope that you had no problem in following the simple steps of the process. If you have a problem or would like to add to the discussion, leave a comment below!
