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_uGkBJhDI5yNH2koI-G0o_SVm2v_M5258GfEPoEX2ua_4jBV4nS-47bsUMXBnhj0h4BzwOie92Mlr9lXqTbIf_74f0TmaH881dmo7fS1tyYsEvGkq01Y5YGDV8hZsX757pc8kJsbK3bsUdV-Ap4DOyzevvu9L43bkdG287-U5GjAZ9EArQN=s0-d)
![multi-select-attribute-converted-to-checkbox-300x225[1]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vyybAvZGkCV9kTsfw2oUqJnIiFqTwQzNXcVINR0n5jldPD3Y1mIKhEezQo41ppk_xSZK_bu9PhPcjCCAO4R6uTkBt4i8K80eDV5laZAYU0EAJ1TN2JelT6IPItJgSdPdBwbvAqk8KfDDfhH7lU6AEdglstqqVgz5r3LEbAS6msFBO3xT99f8aJ84f7gLSEulOKgA=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 "