1

Here is my issue.

I am working on the layered navigation menu. In "filter.phtml", I added checkboxes to "li" tags, so that we can click on them in the frontend to get our research filtered.

I tested the filter with Mozilla Firefox, Internet Explorer, Google Chrome an Dolphin browsers. Clicking on checkboxes to activate the filter only works with Mozilla Firefox. With the others, I just get the checkbox selected but nothing else happens.

Do you know the method to get an URL redirection working with the most recent internet browsers? Thanks for your help.

Below is the code I use:

<ol class="filter-<?php echo trim(preg_replace('/[^a-z0-9]+/', '-', strtolower($this->_filter->getRequestVar())), '-'); ?>"> 
<?php foreach ($this->getItems() as $_item): ?>

<li>
    <?php if (!$this->getFilterOptions()->getDisableNoResultOptions() || $_item->getCount() > 0 || $_item->getMSelected()): ?>

      <?php if ( $_item->getMShowSelected() ): ?> 
         <a href="<?php echo $_item->getRemoveUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>" >
            **<input type="checkbox" class="checkbox" value="lien" name="rou" checked="checked" />**
            <?php $img = $_item->getValueString(); ?>
    <?php $path = Mage::getDesign()->getSkinBaseDir(); 
    if (is_file($path . DS . 'images/layer/' . $img . '.png')): ?>
    <img src="<?php echo $this->getSkinUrl('images/layer/' . $img . '.png') ?>" alt="frame shape" /> 
    <?php endif; ?>
            <?php echo $this->escapeHtml($_item->getLabel()) ?>
         </a>

      <?php else : ?>                
         <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>" title="<?php echo $this->escapeHtml($_item->getLabel()) ?>" >
            **<input type="checkbox" class="checkbox"  value="lien" name="rou" />**
            <?php $img = $_item->getValueString(); ?>
    <?php $path = Mage::getDesign()->getSkinBaseDir(); 
    if (is_file($path . DS . 'images/layer/' . $img . '.png')): ?>
    <img src="<?php echo $this->getSkinUrl('images/layer/' . $img . '.png') ?>" alt="frame shape" /> 
    <?php endif; ?>
            <?php echo $this->escapeHtml($_item->getLabel()) ?>
         </a>


      <?php endif; ?>

   <?php else: echo $this->escapeHtml($_item->getLabel()) ?>
   <?php endif; ?>


    <?php if (!Mage::getStoreConfigFlag('mana_filters/display/count')) : ?>
        (<?php echo $_item->getCount() ?>) 
    <?php endif; ?> 
</li>
0

If I see this correctly your problem is a standard HTML/JavaScript problem.

The code sample you provided should result in some HTML code like this:

<ol class="filter-someClass">
    <li>
        <a href="http://example.com/item-url" title="exampleItem" >
              <input type="checkbox" class="checkbox"  value="lien" name="rou" />
              some lable
        </a>
    </li>
</ol>

(JSFiddle: http://jsfiddle.net/05rzwwnw/ )
where you have the problem, that your checkbox is within an anchor tag. This is handled differently in different browsers (and also depends a little on what HTML version you are using) as you already noticed: Some go to the link of the anchor tag when you click it and some don't.

So to ensure that all browsers open this link when clicking the checkbox you need to add the onchange attribute to the inpute field which represents your checkbox and specify a JavaScript function to go to your link. What should work in all browsers is window.location.href='http://example.com/item-url'. So your complete resulting HTML code should look similar to something like this:

<ol class="filter-someClass">
    <li>
        <a href="http://example.com/item-url" title="exampleItem" >
            <input onchange="window.location.href='http://example.com/item-url'" type="checkbox" class="checkbox"  value="lien" name="rou" />
            some lable
        </a>
    </li>
</ol>

(JSFiddle: http://jsfiddle.net/05rzwwnw/1/ )

Now you just have to adjust your .phtml template in a way that it produces this code. And obviously this can be done by adding onchange="window.location.href='<?php echo $_item->getRemoveUrl() ?>'" to the input element in the first part of your if clause and onchange="window.location.href='<?php echo $this->urlEscape($_item->getUrl()) ?>'" to the input element of the second part of your if clause.

  • Thanks Jey DWork!! The solution you provided works perfectly. I didn't know this "onchange" attribute. Very convenient! – Jukemax Dec 6 '14 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.