Today, Magento Tutorial will discuss with you how to convert multi-select field to checkbox in advanced search form of Magento.
Step 1:
Copy the following file to your working theme:
app/design/frontend/[interface]/[theme]/template/catalogsearch/advanced/form.phtml
Step 2:
Open the form.phtml (from above) and find the following line just after the case ‘select’: ?>
<div class=“input-box”>
<?php echo $this->getAttributeSelectElement($_attribute) ?>
</div>
and replace it by the following code:
<?php if(in_array($_attribute->getAttributeCode(), array(‘manufacturer’))): ?>
<div class=“input-box”>
<?php
$options = $_attribute->getSource()->getAllOptions(false);
foreach($options as $_option):
$isChecked = in_array($_option['value'],
$this->getRequest()->getParam($_attribute->getAttributeCode())) ? ‘ checked=”checked”‘ : null;
?>
<input type=”checkbox” name=”<?php echo $_attribute->getAttributeCode(); ?>[]“ value=”<?php echo $_option['value']; ?>“<?php echo $isChecked; ?> /> <?php echo $_option['label']; ?><br />
<?php
endforeach;
?>
</div>
<?php else: ?>
<div class=“input-box”>
<?php echo $this->getAttributeSelectElement($_attribute); ?>
</div>
<?php endif; ?>
Note: Here we have customized the display for manufacturer attribute, similarly you can customize for other attributes. Just you need to add the attribute code(for example: color) in the array as:
<?php if(in_array($_attribute->getAttributeCode(), array(‘manufacturer’, ‘color’))): ?>
Step 3:
Try to refresh the advanced search page: http://your-magento-url/catalogsearch/advanced
You will see:
![multi-select-attribute-default1-300x164[1]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v8DzDC_B_ZkwNOFLnMyhb0R0ByiBrlXhTJ5JmhYv15DwG1DrMnSu2IRQXek8MvMsWb8fytkLR-pIGOnP265yZ5Nz52TK0gq4t1qUymhhtPpc_2Xl9Y0jYMCfG8Flk6hP5a8BmmuaGIKXx6a8daGsgqxuibCCZMh0-7OidajA8uS-6hS1c-=s0-d)
![multi-select-attribute-converted-to-checkbox-300x225[1]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uaH9Zds3i-t8tjKaLqVUPB9LL5KsPAlWJsjw1Ydj0UGnhNbQeHfJITJDxE7TwYaE3egsWb5TauFewDwqi0ABEOjws72GR79M3uu1GV1UUjEIZdlregWL4nmhxgZN-AbYr_c74uEcnxT9juKMDNqltpRzwaSjizflvTOSoFq6ED0won6YAioFjq5JR1H9sM95xgQg=s0-d)
Note: You can use some css in order to break the checkboxes in multi-columns for better display.
Step 1:
Copy the following file to your working theme:
app/design/frontend/[interface]/[theme]/template/catalogsearch/advanced/form.phtml
Step 2:
Open the form.phtml (from above) and find the following line just after the case ‘select’: ?>
<div class=“input-box”>
<?php echo $this->getAttributeSelectElement($_attribute) ?>
</div>
and replace it by the following code:
<?php if(in_array($_attribute->getAttributeCode(), array(‘manufacturer’))): ?>
<div class=“input-box”>
<?php
$options = $_attribute->getSource()->getAllOptions(false);
foreach($options as $_option):
$isChecked = in_array($_option['value'],
$this->getRequest()->getParam($_attribute->getAttributeCode())) ? ‘ checked=”checked”‘ : null;
?>
<input type=”checkbox” name=”<?php echo $_attribute->getAttributeCode(); ?>[]“ value=”<?php echo $_option['value']; ?>“<?php echo $isChecked; ?> /> <?php echo $_option['label']; ?><br />
<?php
endforeach;
?>
</div>
<?php else: ?>
<div class=“input-box”>
<?php echo $this->getAttributeSelectElement($_attribute); ?>
</div>
<?php endif; ?>
Note: Here we have customized the display for manufacturer attribute, similarly you can customize for other attributes. Just you need to add the attribute code(for example: color) in the array as:
<?php if(in_array($_attribute->getAttributeCode(), array(‘manufacturer’, ‘color’))): ?>
Step 3:
Try to refresh the advanced search page: http://your-magento-url/catalogsearch/advanced
You will see:
Note: You can use some css in order to break the checkboxes in multi-columns for better display.
can u please say how to use css and convert to multi coloumn
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you for that blog to convert multi-select field to checkbox in advanced search form of Magento...
ReplyDeleteIt has helped me.
Cado Magenge
" magento development company | website design melbourne
mobile apps development companies melbourne "