Category Page Product Filters v2.0

Does anyone know how to place v2.0's product filters in the left sidebar?

erichan2011 wrote:

<div class="yourClass">
    @*filtering*@
    @if (Model.PagingFilteringContext.PriceRangeFilter.Enabled ||
        Model.PagingFilteringContext.SpecificationFilter.Enabled)
    {
        <div class="filterItem">
            <div>
                @Html.Partial("_FilterSpecsBox", Model.PagingFilteringContext.SpecificationFilter, new ViewDataDictionary())
            </div>
            <div>
                @Html.Partial("_FilterPriceBox", Model.PagingFilteringContext.PriceRangeFilter, new ViewDataDictionary())
            </div>
        </div>
        <div class="clear">
        </div>
    }
</div>

in .css make a class somethink like:

.yourClass{
   float: left;
}

and all other code bit put to other <div> and float right.

does this make sense?

in Category.cshtml modify code like below

@section left {
@*filtering*@
    @if (Model.PagingFilteringContext.PriceRangeFilter.Enabled ||
        Model.PagingFilteringContext.SpecificationFilter.Enabled)
    {
        <div class="product-filters">
            <div class="filter-title">
                <span>@T("Filtering.FilterResults")</span>
            </div>
            <div class="filter-item">
                @Html.Partial("_FilterPriceBox", Model.PagingFilteringContext.PriceRangeFilter, new ViewDataDictionary())
            </div>
            <div class="filter-item">
                @Html.Partial("_FilterSpecsBox", Model.PagingFilteringContext.SpecificationFilter, new ViewDataDictionary())
            </div>
        </div>
        <div class="clear">
        </div>
    }
}

now modify _ColumnsThree.cshtml

<div class="master-wrapper-leftside-3">
    @if (IsSectionDefined("left"))
    {
        @RenderSection("left")

        @Html.Action("CategoryNavigation", "Catalog", new { currentCategoryId = currentCategoryId })
        <div class="clear">
        </div>
        @Html.Action("ManufacturerNavigation", "Catalog", new { currentManufacturerId = currentManufacturerId })
        <div class="clear">
        </div>
        @Html.Action("PopularProductTags", "Catalog")
        <div class="clear">
        </div>
        @Html.Action("InfoBlock", "Common")
        <div class="clear">
        </div>
        @Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" })
    }
</div>

and it is done.

<hr />

http://www.pramitpatel.com

Thanks for this, a great help.

I am only using colours for my filters. Is there any way to change the list to colour swatches. I thought of maybe using CSS and background colours but I see that each item in the list shares the same class of "item" so not sure how to differentiate them or target a specific row.

I see others have done this in templates, I just don't know how to do it and reluctant to use a third party template after my bad experience with trendy shoes.

This is working great on my category pages but I just realized it breaks my homepage. My left side is fixed size (180px) in css and I amended size of .product-filters to fit but the left side has still disappeared altogether.

If I leave the left side master page unmodified I can still get the filters to display in the left on category pages but lose the other menu boxes. Bit of a catch 22.