Drop Down Product Filter

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
10 years ago
Working Result: http://jevell.com/anklet


The Product Attribute Filter area can get very long.

In order to move the filter horizontally you want to remove the clear:both in the css:

.product-spec-filter .group
{
/*  clear:both; */




If moved to the left side you might still need to limit your length. Drop down grouping provides a solution. I have outlined how to make the product filters a drop down below.


1) In the css you want to create a couple boxes for the new buttons (you'll also need some images - Minus.png. Plus.png):

.expand { float:left; padding-right:5px;  width:15px; height:15px; display:none;} 
     
.collapse {  float:left; padding-right:5px;  width:15px; height:15px;  }  




2) In _ColumnsTwo.cshtml  (or whatever format you are using) add this simple java to the bottom

   <script type="text/javascript" language="javascript">

        $(".expand").click(function ()
    { 
             $(this).toggle();
             $(this).next().toggle(); 
             $(this).parent().next().toggle(); 
        }); 

        $(".collapse").click(function ()
     { 
             $(this).toggle();
       $(this).prev().toggle(); 
             $(this).parent().next().toggle(); 
        });

    </script>



3)   In Views/Catalog/_FilterSpecsBox.cshtml wrap your SpecificationAttributeName in a new div with the img's

                <div class="groupName">

                    <img alt="" class="expand" src="Administration/Content/images/Minus.png" /> 
                    <img alt="" class="collapse" src="Administration/Content/images/Plus.png" /> 

                    <strong>@groupList[0].SpecificationAttributeName</strong>

    </div>




Good luck!
0
10 years ago
This is technically not a drop down but a tree list view for the product filter. But it isn't really a tree....

It seems theoretically you could have the attributes in a tree list if nop supported it. For example, you have a Hoody for sale in these styles:

League

   NFL
      Dallas
      Denver

   NHL
      New York
      Los Angeles
0
10 years ago
I have a new version that fits with the DefaultClean layout.

Working Example: http://jevell.com/earrings


1) To get your product filter on the left side use this code: tonics cool hack


2) The new custom css:

.filter-content .available-items .expand 
{ 
  padding-left:14px;
  padding-top:2px;
  padding-bottom:2px;
  padding-right:5px;
  background:url(images/bullet-right.gif) no-repeat 0 6px; 
} 
 
.filter-content .available-items .collapse
{
  display:none;
  padding-left:14px;
  padding-top:2px;
  padding-bottom:2px;
  padding-right:5px;
  background:url(images/top-menu-triangle.png) no-repeat 0 8px;
}  

.filter-content .available-items .expand:hover, .filter-content .available-items .collapse:hover
{
  background-color:#d8d8d8;
}

.filter-content .available-items .available-title
{
  padding-top:4px;
}

    

3) Edit _FilterPriceBox.cshtml:

<div class="available-title">
   <div class="expand"><strong>@groupList[0].SpecificationAttributeName</strong></div>
   <div class="collapse"><strong>@groupList[0].SpecificationAttributeName</strong></div>
</div>



4) The column code is the same as the original instructions above.
0
8 years ago
SChalice wrote:

3) Edit _FilterPriceBox.cshtml:

<div class="available-title">
   <div class="expand"><strong>@groupList[0].SpecificationAttributeName</strong></div>
   <div class="collapse"><strong>@groupList[0].SpecificationAttributeName</strong></div>
</div>



4) The column code is the same as the original instructions above.


Can you please help clarify what this means?
I'm trying to follow these instructions in nop 3.7, but it is confusing and not working.

Looking at _FilterPriceBox.cshtml, there is no SpecificationAttributeName.
Does does change go into the _FilterSpecsBox.cshtml?

The code in FilterSpecsBox.cshtml looks like this:
<ul class="group product-spec-group">
    <li class="title">
        <strong>@groupList[0].SpecificationAttributeName</strong>
    </li>

    @foreach (var spec in groupList)
    {
        <li class="item">
            <a href="@spec.FilterUrl">@spec.SpecificationAttributeOptionName</a>
        </li>
    }
</ul>


I tried to add the new div tags inside the <li> tag like this:
<li class="title">
    <div class="available-title">
        <div class="expand"><strong>@groupList[0].SpecificationAttributeName</strong></div>
        <div class="collapse"><strong>@groupList[0].SpecificationAttributeName</strong></div>
    </div>
</li>

But this did not work.

Also, do we still need the JavaScript, or is the CSS enough?
0
6 years ago
Hi,

Did you or the OP ever manage to get this to work? I'd like this for 3.9

Thanks,
Mike
0
5 years ago
hayes33781 wrote:
Did you or the OP ever manage to get this to work? I'd like this for 3.9

This may be a little late but...

Everything was correct with the CSS and the html as shown, but the JavaScript was a little off.
Here is my revised version:

<script type="text/javascript" language="javascript">
    $(".expand").click(function () {
        $(this).toggle();
        $(this).next().toggle();
        $(this).closest('li').siblings().toggle();
    });

    $(".collapse").click(function () {
        $(this).toggle();
        $(this).prev().toggle();
        $(this).closest('li').siblings().toggle();
    });
</script>
0
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.