HTML/JavaScript

Sunday, July 7, 2013

How to convert multi-select field to checkbox in advanced search form of Magento

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:



Note: You can use some css in order to break the checkboxes in multi-columns for better display.

3 comments:

  1. can u please say how to use css and convert to multi coloumn

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Thank you for that blog to convert multi-select field to checkbox in advanced search form of Magento...
    It has helped me.

    Cado Magenge
    " magento development company | website design melbourne
    mobile apps development companies melbourne "

    ReplyDelete