Cartzilla component

# Shop filters

Filter widgets for the sidebar, allowing users to refine product listings based on various attributes like price, brand, size, etc.

Several filter components utilize third-party plugins for enhanced functionality:

- The range slider is powered by the noUISlider plugin.
- The search bar integrates with the List.js plugin.
- The custom scrollbar is implemented using the SimpleBar plugin.

Ensure that you include the necessary references to the plugin's CSS and JavaScript files.

CSS files are linked in the `<head>` section and above `theme.min.css` reference in your document:

    <link rel="stylesheet" href="assets/vendor/nouislider/dist/nouislider.min.css">
    <link rel="stylesheet" href="assets/vendor/simplebar/dist/simplebar.min.css">

JavaScript files are linked before the closing `</body>` tag and above `theme.min.js` reference in your document:

    <script src="assets/vendor/nouislider/dist/nouislider.min.js"></script>
    <script src="assets/vendor/list.js/dist/list.min.js"></script>
    <script src="assets/vendor/simplebar/dist/simplebar.min.js"></script>

#### Checkboxes

####

Adidas(425)
Ann Taylor(15)
Armani(18)
Banana Republic(103)
Bilabong(27)
Birkenstock(10)
Calvin Klein(365)
Columbia(508)
Converse(176)
Dockers(54)
Fruit of the Loom(739)
Hanes(92)
Jimmy Choo(17)
Levi's(361)
Men's Wearhouse(75)
New Balance(218)
Nike(810)
Old Navy(147)
Puma(370)
Skechers(209)
Tommy Hilfiger(487)
Under Armour(90)

    <!-- Collapsible list of checkbox based filter items with quick search and custom scrollbar -->
    <div class="accordion">
      <div class="accordion-item border-0">
        <h4 class="accordion-header" id="headingBrands">
          <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#brands" aria-expanded="true" aria-controls="brands">
            Brands
          </button>
        </h4>
        <div class="accordion-collapse collapse show" id="brands" aria-labelledby="headingBrands">
          <div class="accordion-body p-0 pb-4" data-filter-list='{"searchClass": "brands-search", "listClass": "brands-list", "valueNames": ["form-check-label"]}'>
            <div class="position-relative mb-3">
              <i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
              <input type="search" class="brands-search form-control form-icon-start" placeholder="Search">
            </div>
            <div style="height: 210px" data-simplebar data-simplebar-auto-hide="false">
              <div class="brands-list d-flex flex-column gap-2">
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="adidas" checked>
                  <label for="adidas" class="form-check-label text-body-emphasis">
                    Adidas<span class="fs-xs text-body-secondary ms-1">(425)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="taylor">
                  <label for="taylor" class="form-check-label text-body-emphasis">
                    Ann Taylor<span class="fs-xs text-body-secondary ms-1">(15)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="armani">
                  <label for="armani" class="form-check-label text-body-emphasis">
                    Armani<span class="fs-xs text-body-secondary ms-1">(18)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="banana">
                  <label for="banana" class="form-check-label text-body-emphasis">
                    Banana Republic<span class="fs-xs text-body-secondary ms-1">(103)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="bilabong" checked>
                  <label for="bilabong" class="form-check-label text-body-emphasis">
                    Bilabong<span class="fs-xs text-body-secondary ms-1">(27)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="birkenstock">
                  <label for="birkenstock" class="form-check-label text-body-emphasis">
                    Birkenstock<span class="fs-xs text-body-secondary ms-1">(10)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="klein">
                  <label for="klein" class="form-check-label text-body-emphasis">
                    Calvin Klein<span class="fs-xs text-body-secondary ms-1">(365)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="columbia">
                  <label for="columbia" class="form-check-label text-body-emphasis">
                    Columbia<span class="fs-xs text-body-secondary ms-1">(508)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="converse">
                  <label for="converse" class="form-check-label text-body-emphasis">
                    Converse<span class="fs-xs text-body-secondary ms-1">(176)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="dockers">
                  <label for="dockers" class="form-check-label text-body-emphasis">
                    Dockers<span class="fs-xs text-body-secondary ms-1">(54)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="fruit">
                  <label for="fruit" class="form-check-label text-body-emphasis">
                    Fruit of the Loom<span class="fs-xs text-body-secondary ms-1">(739)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="hanes">
                  <label for="hanes" class="form-check-label text-body-emphasis">
                    Hanes<span class="fs-xs text-body-secondary ms-1">(92)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="choo">
                  <label for="choo" class="form-check-label text-body-emphasis">
                    Jimmy Choo<span class="fs-xs text-body-secondary ms-1">(17)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="levis">
                  <label for="levis" class="form-check-label text-body-emphasis">
                    Levi's<span class="fs-xs text-body-secondary ms-1">(361)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="wearhouse">
                  <label for="wearhouse" class="form-check-label text-body-emphasis">
                    Men's Wearhouse<span class="fs-xs text-body-secondary ms-1">(75)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="newbalance">
                  <label for="newbalance" class="form-check-label text-body-emphasis">
                    New Balance<span class="fs-xs text-body-secondary ms-1">(218)</span>
                  </label>
                </div>
                <div class="form-check mb-0">
                  <input type="checkbox" class="form-check-input" id="nike">
                  <label for="nike" class="form-check-label text-body-emphasis">
                    Nike<span class="fs-xs text-body-secondary ms-1">(810)</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

#### Button toggles

####

Green
Coral red
Pink
Sky blue
Black
White

####

XXS XS S M L XL 2XL 40 42 44 45 46 48 50 52

    <!-- Collapsible list of color filters based on "btn-check" and "btn-color" -->
    <div class="accordion">
      <div class="accordion-item border-0">
        <h4 class="accordion-header" id="headingColor">
          <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#color" aria-expanded="true" aria-controls="color">
            Color
          </button>
        </h4>
        <div class="accordion-collapse collapse show" id="color" aria-labelledby="headingColor">
          <div class="accordion-body p-0 pb-4">
            <div class="d-flex flex-column gap-2">
              <div class="d-flex align-items-center mb-1">
                <input type="checkbox" class="btn-check" id="green" checked>
                <label for="green" class="btn btn-color fs-xl" style="color: #8bc4ab"></label>
                <label for="green" class="fs-sm ms-2">Green</label>
              </div>
              <div class="d-flex align-items-center mb-1">
                <input type="checkbox" class="btn-check" id="red">
                <label for="red" class="btn btn-color fs-xl" style="color: #ee7976"></label>
                <label for="red" class="fs-sm ms-2">Coral red</label>
              </div>
              <div class="d-flex align-items-center mb-1">
                <input type="checkbox" class="btn-check" id="pink">
                <label for="pink" class="btn btn-color fs-xl" style="color: #df8fbf"></label>
                <label for="pink" class="fs-sm ms-2">Pink</label>
              </div>
              <div class="d-flex align-items-center mb-1">
                <input type="checkbox" class="btn-check" id="blue">
                <label for="blue" class="btn btn-color fs-xl" style="color: #9acbf1"></label>
                <label for="blue" class="fs-sm ms-2">Sky blue</label>
              </div>
              <div class="d-flex align-items-center mb-1">
                <input type="checkbox" class="btn-check" id="black">
                <label for="black" class="btn btn-color fs-xl" style="color: #364254"></label>
                <label for="black" class="fs-sm ms-2">Black</label>
              </div>
              <div class="d-flex align-items-center mb-1">
                <input type="checkbox" class="btn-check" id="white">
                <label for="white" class="btn btn-color fs-xl" style="color: #e0e5eb"></label>
                <label for="white" class="fs-sm ms-2">White</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Collapsible list of size filters based on "btn-check" -->
    <div class="accordion">
      <div class="accordion-item border-0">
        <h4 class="accordion-header" id="headingSize">
          <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#size" aria-expanded="true" aria-controls="size">
            Size
          </button>
        </h4>
        <div class="accordion-collapse collapse show" id="size" aria-labelledby="headingSize">
          <div class="accordion-body p-0 pb-4">
            <div class="d-flex flex-wrap gap-2">
              <input type="checkbox" class="btn-check" id="size-xxs" checked>
              <label for="size-xxs" class="btn btn-sm btn-outline-secondary">XXS</label>
              <input type="checkbox" class="btn-check" id="size-xs">
              <label for="size-xs" class="btn btn-sm btn-outline-secondary">XS</label>
              <input type="checkbox" class="btn-check" id="size-s">
              <label for="size-s" class="btn btn-sm btn-outline-secondary">S</label>
              <input type="checkbox" class="btn-check" id="size-m">
              <label for="size-m" class="btn btn-sm btn-outline-secondary">M</label>
              <input type="checkbox" class="btn-check" id="size-l">
              <label for="size-l" class="btn btn-sm btn-outline-secondary">L</label>
              <input type="checkbox" class="btn-check" id="size-xl">
              <label for="size-xl" class="btn btn-sm btn-outline-secondary"><span class="mx-n1">XL</span></label>
              <input type="checkbox" class="btn-check" id="size-2xl">
              <label for="size-2xl" class="btn btn-sm btn-outline-secondary">2XL</label>
              <input type="checkbox" class="btn-check" id="size-40">
              <label for="size-40" class="btn btn-sm btn-outline-secondary">40</label>
              <input type="checkbox" class="btn-check" id="size-42">
              <label for="size-42" class="btn btn-sm btn-outline-secondary">42</label>
              <input type="checkbox" class="btn-check" id="size-44">
              <label for="size-44" class="btn btn-sm btn-outline-secondary">44</label>
              <input type="checkbox" class="btn-check" id="size-45">
              <label for="size-45" class="btn btn-sm btn-outline-secondary">45</label>
              <input type="checkbox" class="btn-check" id="size-46">
              <label for="size-46" class="btn btn-sm btn-outline-secondary">46</label>
              <input type="checkbox" class="btn-check" id="size-48">
              <label for="size-48" class="btn btn-sm btn-outline-secondary">48</label>
              <input type="checkbox" class="btn-check" id="size-50">
              <label for="size-50" class="btn btn-sm btn-outline-secondary">50</label>
              <input type="checkbox" class="btn-check" id="size-52">
              <label for="size-52" class="btn btn-sm btn-outline-secondary">52</label>
            </div>
          </div>
        </div>
      </div>
    </div>

#### Links

####

- Smartphones 218
- Accessories 372
- Tablets 110
- Wearable Electronics 142
- Computers & Laptops 205
- Cameras, Photo & Video 78
- TV, Video & Audio 97
- Headphones 121
- Video Games 89
- Printers & Ink 116
- Home music 154

    <!-- Collapsible list of links with custom scrollbar -->
    <div class="accordion">
      <div class="accordion-item border-0">
        <h4 class="accordion-header" id="headingCategories">
          <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#categories" aria-expanded="true" aria-controls="categories">
            Categories
          </button>
        </h4>
        <div class="accordion-collapse collapse show" id="categories" aria-labelledby="headingCategories">
          <div class="accordion-body p-0 pb-4">
            <div style="height: 190px" data-simplebar data-simplebar-auto-hide="false">
              <ul class="list-unstyled d-block m-0 mt-n2">
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Smartphones</span>
                    <span class="text-body-secondary fs-xs ms-auto">218</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Accessories</span>
                    <span class="text-body-secondary fs-xs ms-auto">372</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Tablets</span>
                    <span class="text-body-secondary fs-xs ms-auto">110</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Wearable Electronics</span>
                    <span class="text-body-secondary fs-xs ms-auto">142</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Computers & Laptops</span>
                    <span class="text-body-secondary fs-xs ms-auto">205</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Cameras, Photo & Video</span>
                    <span class="text-body-secondary fs-xs ms-auto">78</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">TV, Video & Audio</span>
                    <span class="text-body-secondary fs-xs ms-auto">97</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Headphones</span>
                    <span class="text-body-secondary fs-xs ms-auto">121</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Video Games</span>
                    <span class="text-body-secondary fs-xs ms-auto">89</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Printers & Ink</span>
                    <span class="text-body-secondary fs-xs ms-auto">116</span>
                  </a>
                </li>
                <li class="nav d-block pt-2 mt-1">
                  <a class="nav-link animate-underline fw-normal p-0 pe-4" href="#!">
                    <span class="animate-target text-truncate me-3">Home music</span>
                    <span class="text-body-secondary fs-xs ms-auto">154</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

#### Range slider

####

    <!-- Collapsible price range slider example -->
    <div class="accordion">
      <div class="accordion-item border-0">
        <h4 class="accordion-header" id="headingPrice">
          <button type="button" class="accordion-button p-0 pb-3" data-bs-toggle="collapse" data-bs-target="#price" aria-expanded="true" aria-controls="price">
            Price
          </button>
        </h4>
        <div class="accordion-collapse collapse show" id="price" aria-labelledby="headingPrice">
          <div class="accordion-body p-0 pb-4">
            <div class="range-slider" data-range-slider='{"startMin": 40, "startMax": 150, "min": 0, "max": 200, "step": 1, "tooltipPrefix": "$"}' aria-labelledby="headingPrice">
              <div class="range-slider-ui"></div>
              <div class="d-flex align-items-center">
                <div class="position-relative w-50">
                  <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
                  <input type="number" class="form-control form-icon-start" min="0" data-range-slider-min>
                </div>
                <i class="ci-minus text-body-emphasis mx-2"></i>
                <div class="position-relative w-50">
                  <i class="ci-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
                  <input type="number" class="form-control form-icon-start" min="0"  data-range-slider-max>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

#### Selected filters

#### Filter

    <!-- Selected filters made of buttons  -->
    <div class="d-flex align-items-center justify-content-between mb-3">
      <h4 class="h6 mb-0">Filter</h4>
      <button type="button" class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline p-0 ms-2">
        Clear all
      </button>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <button type="button" class="btn btn-sm btn-secondary">
        <i class="ci-close fs-sm ms-n1 me-1"></i>
        Sale
      </button>
      <button type="button" class="btn btn-sm btn-secondary">
        <i class="ci-close fs-sm ms-n1 me-1"></i>
        Adidas
      </button>
      <button type="button" class="btn btn-sm btn-secondary">
        <i class="ci-close fs-sm ms-n1 me-1"></i>
        Bilabong
      </button>
      <button type="button" class="btn btn-sm btn-secondary">
        <i class="ci-close fs-sm ms-n1 me-1"></i>
        Size: XXS
      </button>
      <button type="button" class="btn btn-sm btn-secondary">
        <i class="ci-close fs-sm ms-n1 me-1"></i>
        $40 - $150
      </button>
    </div>

Top