Search results

You can select between the following Search results types:

.ct-sortingBar
.ct-showProducts–list
.ct-showProducts–default

Use the following HTML markup:

//sorting bar

<div class="ct-sortingBar ct-u-paddingRight10 ct-u-paddingLeft10 ct-u-marginBottom30">
    <div class="ct-sortingTitle pull-left">
        <h4 class="text-uppercase">Search Results<span> (231)</span></h4>
    </div>
    <ul class="list-inline list-unstyled pull-right ct-u-paddingBoth15">
        <li>
            <form>
                <select class="ct-js-select">
                    <option value="price">Sort by</option>
                    <option value="price">Price</option>
                    <option value="newness">Newness</option>
                    <option value="rating">Rating</option>
                    <option value="popularity">Popularity</option>
                </select>
            </form>
        </li>
        <li>
            <form>
                <select class="ct-js-select">
                    <option value="nine">12 items</option>
                    <option value="eighteen">15 items</option>
                    <option value="eighteen">21 items</option>
                    <option value="twentyseven">36 items</option>
                    <option value="fourtyfive">45 items</option>
                    <option value="ninety">90 items</option>
                </select>
            </form>
        </li>
    </ul>
    <ul class="ct-showPages list-inline list-unstyled pull-right ct-u-paddingBoth15">
        <li class="ct-showElements is-active" id="ct-js-showTiles">
            <a href="#">
                <i class="fa fa-th fa-fw"></i>
            </a>
        </li>
        <li class="ct-showElements" id="ct-js-showList">
            <a href="#">
                <i class="fa fa-th-list fa-fw"></i>
            </a>
        </li>
    </ul>
    <div class="clearfix"></div>
</div>	
	
		//products diff display

<div class="row ct-js-search-results ct-showProducts--default">
    <div class="col-sm-6 col-md-6 col-lg-4">
        <div class="ct-itemProducts ct-u-marginBottom30 ct-hover">
            <label class="control-label sale">
                Sale
            </label>
            <a href="product-single.html">
                <div class="ct-main-content">
                    <div class="ct-imageBox">
                        <img src="assets/images/demo-content/property-10.jpg" alt=""><i class="fa fa-eye"></i>
                    </div>
                    <div class="ct-main-text">
                        <div class="ct-product--tilte">
                            15421 Southwest 39th Terrace
                        </div>
                        <div class="ct-product--price">
                            <span class="ct-price--Old">$ 450,000</span>
                            <span>$ 350,000</span>
                        </div>
                        <div class="ct-product--description">
                            Beautiful apartment in a great, very calm and safe place.
                        </div>
                    </div>
                </div>
                <div class="ct-product--meta">
                    <div class="ct-icons">
                        <span>
                            <i class="fa fa-bed"></i> 3
                        </span>
                        <span>
                            <i class="fa fa-cutlery"></i> 2
                        </span>
                    </div>
                    <div class="ct-text">
                        <span> Area: <span>105 m2</span></span>
                    </div>
                </div>
            </a>
        </div>
    </div>

//sorting bar

<h4 class="text-uppercase">Search Results<span> (231)</span></h4>

</div>

<li>

<form>

<option value="price">Price</option>

<option value="newness">Newness</option>

<option value="rating">Rating</option>

<option value="popularity">Popularity</option>

</select>

</form>

</li>

<li>

<form>

<option value="nine">12 items</option>

<option value="eighteen">15 items</option>

<option value="eighteen">21 items</option>

<option value="twentyseven">36 items</option>

<option value="fourtyfive">45 items</option>

<option value="ninety">90 items</option>

</select>

</form>

</li>

</ul>

</a>

</li>

</a>

</li>

</ul>

</div>

//products diff display

Sale

</label>

</div>

15421 Southwest 39th Terrace

</div>

</div>

Beautiful apartment in a great, very calm and safe place.

</div>

<span>

<i class="fa fa-bed"></i> 3

</span>

<span>

<i class="fa fa-cutlery"></i> 2

</span>

</div>

</div>

</a>

</div>

After click on sorting panel we switch class “ct-showProducts–default” and “.ct-showProducts–list”.
This classes change styles of boxes.

We are using the following javascript for search:

	 var $tilesItems = $("#ct-js-showTiles");
            var $listItems = $("#ct-js-showList");
            var $showProducts = $(".ct-js-search-results");

            if($tilesItems && $listItems){
                $tilesItems.click(function(e){
                    e.preventDefault();

                    var $existListClass = $(".ct-showProducts--list");

                    if($existListClass){
                        $showProducts.removeClass("ct-showProducts--list");
                        $showProducts.addClass("ct-showProducts--default");
                        $showProducts.css("display", "none");
                        $showProducts.fadeIn();

                        $(this).addClass("is-active");
                        $listItems.removeClass("is-active");
                    }
                });

                $listItems.click(function(e){
                    e.preventDefault();

                    var $existDefaultClass = $(".ct-showProducts--list");

                    if($existDefaultClass){
                        $showProducts.removeClass("ct-showProducts--default");
                        $showProducts.addClass("ct-showProducts--list");
                        $showProducts.css("display", "none");
                        $showProducts.fadeIn();

                        $(this).addClass("is-active");
                        $tilesItems.removeClass("is-active");
                    }
                });
            }

var $tilesItems = $("#ct-js-showTiles");

var $listItems = $("#ct-js-showList");

var $showProducts = $(".ct-js-search-results");

if($tilesItems && $listItems){

$tilesItems.click(function(e){

e.preventDefault();

var $existListClass = $(".ct-showProducts--list");

if($existListClass){

$showProducts.removeClass("ct-showProducts--list");

$showProducts.addClass("ct-showProducts--default");

$showProducts.css("display", "none");

$showProducts.fadeIn();

$(this).addClass("is-active");

$listItems.removeClass("is-active");

}

});

$listItems.click(function(e){

e.preventDefault();

var $existDefaultClass = $(".ct-showProducts--list");

if($existDefaultClass){

$showProducts.removeClass("ct-showProducts--default");

$showProducts.addClass("ct-showProducts--list");

$showProducts.css("display", "none");

$showProducts.fadeIn();

$(this).addClass("is-active");

$tilesItems.removeClass("is-active");

}

});

}

News

Siver

Estato

Disrupt

We are elite