Product catalog page - filter function

[cykeltur]

Hi
i am using the built in product catalog page in Bootstrap studio.
i see there is a filter funktion, how can i use this?
i only have like 10 items i like to display so there is no “performance issue” if i just hide the one like a"table like" search, but im out of simple ideas :-/

have a nice one !

UPDATE:
sorry,
this example for filter: (from the Bootstrap -templet themes):

<main class="page catalog-page">
    <section class="clean-block clean-catalog dark">
        <div class="container">
            <div class="block-heading">
                <h2 class="text-info">Catalog Page</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna, dignissim nec auctor in, mattis vitae leo.</p>
            </div>
            <div class="content">
                <div class="row">
                    <div class="col-md-3">
                        <div class="d-none d-md-block">
                            <div class="filters">
                                <div class="filter-item">
                                    <h3>Categories</h3>
                                    <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-1" /><label class="form-check-label" for="formCheck-1">Phones</label></div>
                                    <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-2" /><label class="form-check-label" for="formCheck-2">Laptops</label></div>
                                    <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-3" /><label class="form-check-label" for="formCheck-3">PC</label></div>
                                    <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-4" /><label class="form-check-label" for="formCheck-4">Tablets</label></div>
                                </div>
                                <div class="filter-item">
                                    <h3>Brands</h3>
                                    <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-5" /><label class="form-check-label" for="formCheck-5">Samsung</label></div>
                                    <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-6" /><label class="form-check-label" for="formCheck-6">Apple</label></div>
                                    <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-7" /><label class="form-check-label" for="formCheck-7">HTC</label></div>
                                </div>
                                <div class="filter-item">
                                    <h3>OS</h3>
                                    <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-8" /><label class="form-check-label" for="formCheck-8">Android</label></div>
                                    <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-9" /><label class="form-check-label" for="formCheck-9">iOS</label></div>
                                </div>
                            </div>
                        </div>
                        <div class="d-md-none"><a class="btn btn-link d-md-none filter-collapse" data-bs-toggle="collapse" aria-expanded="false" aria-controls="filters" href="#filters" role="button">Filters<i class="icon-arrow-down filter-caret"></i></a>
                            <div class="collapse" id="filters">
                                <div class="filters">
                                    <div class="filter-item">
                                        <h3>Categories</h3>
                                        <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-1" /><label class="form-check-label" for="formCheck-1">Phones</label></div>
                                        <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-2" /><label class="form-check-label" for="formCheck-2">Laptops</label></div>
                                        <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-3" /><label class="form-check-label" for="formCheck-3">PC</label></div>
                                        <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-4" /><label class="form-check-label" for="formCheck-4">Tablets</label></div>
                                    </div>
                                    <div class="filter-item">
                                        <h3>Brands</h3>
                                        <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-5" /><label class="form-check-label" for="formCheck-5">Samsung</label></div>
                                        <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-6" /><label class="form-check-label" for="formCheck-6">Apple</label></div>
                                        <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-7" /><label class="form-check-label" for="formCheck-7">HTC</label></div>
                                    </div>
                                    <div class="filter-item">
                                        <h3>OS</h3>
                                        <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-8" /><label class="form-check-label" for="formCheck-8">Android</label></div>
                                        <div class="form-check"><input type="checkbox" class="form-check-input" id="formCheck-9" /><label class="form-check-label" for="formCheck-9">iOS</label></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="products">
                            <div class="row g-0">
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="clean-product-item">
                                        <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="tech/image2.jpg" /></a></div>
                                        <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                        <div class="about">
                                            <div class="rating"><img src="star.svg" /><img src="star.svg" /><img src="star.svg" /><img src="star-half-empty.svg" /><img src="star-empty.svg" /></div>
                                            <div class="price">
                                                <h3>$100</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="clean-product-item">
                                        <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="tech/image2.jpg" /></a></div>
                                        <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                        <div class="about">
                                            <div class="rating"><img src="star.svg" /><img src="star.svg" /><img src="star.svg" /><img src="star-half-empty.svg" /><img src="star-empty.svg" /></div>
                                            <div class="price">
                                                <h3>$100</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="clean-product-item">
                                        <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="tech/image2.jpg" /></a></div>
                                        <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                        <div class="about">
                                            <div class="rating"><img src="star.svg" /><img src="star.svg" /><img src="star.svg" /><img src="star-half-empty.svg" /><img src="star-empty.svg" /></div>
                                            <div class="price">
                                                <h3>$100</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="clean-product-item">
                                        <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="tech/image2.jpg" /></a></div>
                                        <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                        <div class="about">
                                            <div class="rating"><img src="star.svg" /><img src="star.svg" /><img src="star.svg" /><img src="star-half-empty.svg" /><img src="star-empty.svg" /></div>
                                            <div class="price">
                                                <h3>$100</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="clean-product-item">
                                        <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="tech/image2.jpg" /></a></div>
                                        <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                        <div class="about">
                                            <div class="rating"><img src="star.svg" /><img src="star.svg" /><img src="star.svg" /><img src="star-half-empty.svg" /><img src="star-empty.svg" /></div>
                                            <div class="price">
                                                <h3>$100</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="clean-product-item">
                                        <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="tech/image2.jpg" /></a></div>
                                        <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                        <div class="about">
                                            <div class="rating"><img src="star.svg" /><img src="star.svg" /><img src="star.svg" /><img src="star-half-empty.svg" /><img src="star-empty.svg" /></div>
                                            <div class="price">
                                                <h3>$100</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="clean-product-item">
                                        <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="tech/image2.jpg" /></a></div>
                                        <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                        <div class="about">
                                            <div class="rating"><img src="star.svg" /><img src="star.svg" /><img src="star.svg" /><img src="star-half-empty.svg" /><img src="star-empty.svg" /></div>
                                            <div class="price">
                                                <h3>$100</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="clean-product-item">
                                        <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="tech/image2.jpg" /></a></div>
                                        <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                        <div class="about">
                                            <div class="rating"><img src="star.svg" /><img src="star.svg" /><img src="star.svg" /><img src="star-half-empty.svg" /><img src="star-empty.svg" /></div>
                                            <div class="price">
                                                <h3>$100</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-4">
                                    <div class="clean-product-item">
                                        <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="tech/image2.jpg" /></a><a href="#"></a></div>
                                        <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                        <div class="about">
                                            <div class="rating"><img src="star.svg" /><img src="star.svg" /><img src="star.svg" /><img src="star-half-empty.svg" /><img src="star-empty.svg" /></div>
                                            <div class="price">
                                                <h3>$100</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <nav>
                                <ul class="pagination">
                                    <li class="page-item disabled"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

[dickykreedz]

No one will ever help u without giving more deep informations/screens/video. Just explain it more deeply and show a screenshot or sum cause at the moment i don’t understand what you mean there.

[cykeltur]

hi sorry i try again

[dickykreedz]

Which bootstrap studio version is it? cause im on older version and i dont have this template and i cant update cause i dont have license.

[cykeltur]

i use
BootstrapStudio: (4.6 and 5.1 does not matter)
“Clean Sky” design then Catalog page

[dickykreedz]

Oh, ive never ever seen this lemme check it.

I did check it, but I still dont get what you wanna do.

So, what do you wanna achieve there tho?

[dickykreedz]

You just wanna press the check box and display items related to the category, right?

[richards]

There is no active filter for this, it is just a layout for ideas. Usually you would do the design and then integrate into a shopping cart service to control.

If you are doing something simple without a cart, search in the online library for “Portfolio with Category switcher” by Atanas Lambev, this will help you in the right direction

[dickykreedz]

If u wanna make these checkboxes to work out as a filter you will have to use js for that. I’m using Vue as my main framework for my websites, but you could find many examples of code how to achieve stuff like this filter one without any doubt. Theres no built in filter system/option for bootstrap studio.

EDIT: You could do work out around that with stuff like tabs etc and you could achieve something like this without any doubt, but you would have to spend some time + imho its not a great practice.

[jo-r]

What??? Dicky has no license!!!

[cykeltur]

HI there!
i have find a “working” solution for filter, but i can not get it to work in bootstrapStudio
the code (https://jsfiddle.net/Cykeltur/rk4f9nqz/2/ ) :

<!DOCTYPE html>
<html>
<style>
.filterDiv {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}
</style>
<body>

<h2>Filter DIV Elements</h2>

<div class="options">
  <label><input type="radio" name="operation" value="union" id="op-union" checked> Union</label>
  <label><input type="radio" name="operation" value="intersection" id="op-inter"> Intersection</label>
</div>

<div class="categories">
  <span class="category">
    <input type="checkbox" value="cars" id="cat-cars">
    <label for="cat-cars">Cars</label>
  </span>
  <span class="category">
    <input type="checkbox" value="animals" id="cat-animals">
    <label for="cat-animals">Animals</label>
  </span>
  <span class="category">
    <input type="checkbox" value="fruits" id="cat-fruits">
    <label for="cat-fruits">Fruits</label>
  </span>
  <span class="category">
    <input type="checkbox" value="colors" id="cat-colors">
    <label for="cat-colors">Colors</label>
  </span>
</div>

<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Orange</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Red</div>
  <div class="filterDiv cars animals">Mustang</div>
  <div class="filterDiv colors">Blue</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv fruits">Melon</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Banana</div>
  <div class="filterDiv fruits">Lemon</div>
  <div class="filterDiv animals">Cow</div>
</div>


<script>
var checkboxes = document.querySelectorAll(".categories input");
for(var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("change", filter);
}
var radios = document.getElementsByName("operation");
for(var i = 0; i < radios.length; i++) {
  radios[i].addEventListener("change", filter);
}
filter();
function filter() {
  var i, j;

  // Choose an operation
  var operation = document.getElementById("op-union").checked ? "union" : "intersection";

  // Get the selected categories
  var checkboxes = document.querySelectorAll(".categories input");
  var categories = [];
  var c;
  for(i = 0; i < checkboxes.length; i++) {
    if(checkboxes[i].checked) {
      c = checkboxes[i].value;
      categories.push(c);
    }
  }

  // Apply the filter
  var items = document.querySelectorAll(".filterDiv");
  var item, show;
  for(i = 0; i < items.length; i++) {
    item = items[i];
    if(categories.length == 0) {
      show = true;
    } else if(operation == "union") {
      // Union: Only one of the categories needs to exist
      show = false;
      for(j = 0; j < categories.length; j++) {
        if(item.classList.contains(categories[j])) {
          show = true;
          break;
        }
      }
    } else {
      // Intersection: All of the categories must apply
      show = true;
      for(j = 0; j < categories.length; j++) {
        if(!item.classList.contains(categories[j])) {
          show = false;
          break;
        }
      }
    }

    if(show) {
      item.classList.add("show");
    } else {
      item.classList.remove("show");
    }
  }
}
</script>

</body>
</html>

the sad part is that i can not “translate” this to BOOTSTRAP studios template,
i try to "shovel " it in ( https://jsfiddle.net/Cykeltur/9j1azsck/8/ ) :
JS-file:

var checkboxes = document.querySelectorAll(".categories input");
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener("change", filter);
}
var radios = document.getElementsByName("operation");
for (var i = 0; i < radios.length; i++) {
  radios[i].addEventListener("change", filter);
}
filter();
function filter() {
  var i, j;

  // Choose an operation
  var operation = document.getElementById("op-union").checked ? "union" : "intersection";

  // Get the selected categories
  var checkboxes = document.querySelectorAll(".categories input");
  var categories = [];
  var c;
  for(i = 0; i < checkboxes.length; i++) {
    if(checkboxes[i].checked) {
      c = checkboxes[i].value;
      categories.push(c);
    }
  }

  // Apply the filter
  var items = document.querySelectorAll(".filterDiv");
  var item, show;
  for(i = 0; i < items.length; i++) {
    item = items[i];
    if(categories.length == 0) {
      show = true;
    } else if(operation == "union") {
      // Union: Only one of the categories needs to exist
      show = false;
      for(j = 0; j < categories.length; j++) {
        if(item.classList.contains(categories[j])) {
          show = true;
          break;
        }
      }
    } else {
      // Intersection: All of the categories must apply
      show = true;
      for(j = 0; j < categories.length; j++) {
        if(!item.classList.contains(categories[j])) {
          show = false;
          break;
        }
      }
    }

    if(show) {
      item.classList.add("show");
    } else {
      item.classList.remove("show");
    }
  }
}
**then HTML code:**


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Catalog</title>
    
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
    <link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
    <link rel="stylesheet" href="assets/css/Btn-Switch-Element-1.css">
    <link rel="stylesheet" href="assets/css/Btn-Switch-Element.css">
    <link rel="stylesheet" href="assets/css/Contact-Form-by-Moorcam.css">
    <link rel="stylesheet" href="assets/css/Features-Boxed.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
    <link rel="stylesheet" href="assets/css/Multiple-Input-Select-Pills.css">
    <link rel="stylesheet" href="assets/css/News-Cards-4-Columns-v2.css">
    <link rel="stylesheet" href="assets/css/Pretty-Product-List.css">
    <link rel="stylesheet" href="assets/css/Team-Grid.css">
    <link rel="stylesheet" href="assets/css/Toggle-Switch-1.css">
    <link rel="stylesheet" href="assets/css/Toggle-Switch.css">
    <link rel="stylesheet" href="assets/css/Toggle-Switches.css">
    <link rel="stylesheet" href="assets/css/untitled.css">
    <link rel="stylesheet" href="assets/css/vanilla-zoom.min.css">

<script type="text/javascript">
        	$(window).load(function() {
                hideTdo();

setInterval(hideTdo, 10);
            	$('.paginate').blueMenuSlider();
			});
</script>
      
<script > 
          var open = false;
 
function playingVideoFunction(theTag)
    {
    if(open){
        $(theTag).attr("width","150");
        $(theTag).attr("height","80");
        open = false;        
    }else{
        $(theTag).attr("width","500");
        $(theTag).attr("height","500");
        open = true;
    }
    }
         
</script>
</head>

<body>
    
    <main class="page catalog-page">
        <section class="clean-block clean-catalog dark">
            <div class="container">
                <div class="block-heading">
                    <h2 class="text-info">Catalog Page</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna, dignissim nec auctor in, mattis vitae leo.</p>
                </div>
                <div class="content">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="d-none d-md-block">
                                <div class="filters">
                                    <div class="filter-item">
                                        <h3>Filterfunktion</h3>
                                        <div class="form-check"><input class="form-check-input" type="checkbox" id="op-union" name="union" value="union"><label class="form-check-label" for="formCheck-1">uniqenes</label></div>
                                    </div>
                                    <div class="filter-item categories">
                                        <h3>Categories</h3>
                                        <div class="form-check category"><input class="form-check-input" type="checkbox" id="cat-cars" value="cars"><label class="form-check-label" for="formCheck-1">Phones</label></div>
                                        <div class="form-check category"><input class="form-check-input" type="checkbox" id="cat-animals" value="animals"><label class="form-check-label" for="formCheck-2">Laptops</label></div>
                                        <div class="form-check category"><input class="form-check-input" type="checkbox" id="cat-fruits" value="fruits"><label class="form-check-label" for="formCheck-3">PC</label></div>
                                        <div class="form-check category"><input class="form-check-input" type="checkbox" id="cat-colors" value="colors"><label class="form-check-label" for="formCheck-4">Tablets</label></div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-md-none"><a class="btn btn-link d-md-none filter-collapse" data-bs-toggle="collapse" aria-expanded="false" aria-controls="filters" href="#filters" role="button">Filters<i class="icon-arrow-down filter-caret"></i></a>
                                <div class="collapse" id="filters">
                                    <div class="filters">
                                        <div class="filter-item">
                                            <h3>Filterfunktion</h3>
                                            <div class="form-check"><input class="form-check-input" type="checkbox" id="op-union" name="union" value="union"><label class="form-check-label" for="formCheck-1">uniqenes</label></div>
                                        </div>
                                        <div class="filter-item categories">
                                            <h3>Categories</h3>
                                            <div class="form-check category"><input class="form-check-input" type="checkbox" id="cat-cars" value="cars"><label class="form-check-label" for="formCheck-1">Phones</label></div>
                                            <div class="form-check category"><input class="form-check-input" type="checkbox" id="cat-animals" value="animals"><label class="form-check-label" for="formCheck-2">Laptops</label></div>
                                            <div class="form-check category"><input class="form-check-input" type="checkbox" id="cat-fruits" value="fruits"><label class="form-check-label" for="formCheck-3">PC</label></div>
                                            <div class="form-check category"><input class="form-check-input" type="checkbox" id="cat-colors" value="colors"><label class="form-check-label" for="formCheck-4">Tablets</label></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="products">
                                <div class="row g-0 container">
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv cars">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv colors fruits">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv cars">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv colors">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv cars animals">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv colors">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv animals">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv animals">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv fruits">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a><a href="#"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv fruits animals">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a><a href="#"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv fruits">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a><a href="#"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv fruits">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a><a href="#"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-4 filterDiv animals">
                                        <div class="clean-product-item">
                                            <div class="image"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/tech/image2.jpg"></a><a href="#"></a></div>
                                            <div class="product-name"><a href="#">Lorem ipsum dolor sit amet</a></div>
                                            <div class="about">
                                                <div class="rating"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star.svg"><img src="assets/img/star-half-empty.svg"><img src="assets/img/star-empty.svg"></div>
                                                <div class="price">
                                                    <h3>$100</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <nav>
                                    <ul class="pagination">
                                        <li class="page-item disabled"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer class="page-footer dark">
        <div class="container"></div>
    </footer>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/bs-init.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script src="assets/js/vanilla-zoom.js"></script>
    <script src="assets/js/theme.js"></script>
    <script src="assets/js/filter.js"></script>

</body>

</html>

[kuligaposten]

You call jQuery before jQuery is loaded.
move your script from the head and put it in a javascript file so it comes under the script tag

<script src="assets/js/jquery.min.js"></script>

[cykeltur]

@kuligaposten

<script src="assets/js/jquery.min.js"></script>

Hi
thanks for your answer,
please look at the https://jsfiddle.net/Cykeltur/9j1azsck/8/ , there you see the 2 files in “action and dont work…”
i have paste the 2 files in the same code because the forum-translate (try to anyway…) the html to “a site” :-/ (I also try to add the first, but no luck )

[dickykreedz]

I prolly will get one again as soon as the e-commerce update will be on cause for now theres no reason for me to get the license snd im ususlly getting the year one just to keep supporting the devs

[jo-r]

I hear ya, I started that way too till I realized that the third time you subscribe you go over what the lifetime deal is so I went with the lifetime one instead. It’s a great deal either way. Other than that, just giving you a hard time lol

[kuligaposten]

@cykeltur

Catalog - Brand

[dickykreedz]

@cykeltur Okey, so I took my own time after waking up and have made simplier version of the filtering. I wanted to make much more options like slider with price etc, but I don’t really have that much time, so Ive mad simplier version of it.

I will make a guidelines for yaa, to understand how to use it.

First of all, download this file Download of BSSdesign file

In the ShopList.js you have comments which explains you how to use it

You will see only a one card with weird text inside it like here:
dont be scared Ive used Vue to make the filtering, and that all will just look weirdly in the preview in bss, but in the website it looks much better like this:

You can add items to the list in ShopList.js here:

Just copy one of existing lines here and change all to whatever u want to, but keep in mind to add next number in id section over here:

so if you will add another item to the list you have to put id 6 to the next one

If you will want to export this project you will have to change before exporting it the path of img cause i had no time to make it more complex, so instead of this path to the exported product:

you will have to change change it to this:

cause after exporting it adds subfolders, just always remember to add assets/img before ur path to the export version of product.

You cant setup stars for each items

cause i had no time to make it and it would require more lines of code, not alot, but i didnt want to bother myself ot setup it so you will have to be satisfied with the static stars component.

Dont touch attributes in the card components which exist, they could be weird to you (here few examples)


but theyre a part of vue framework and it makes work the filtering and dynamic displaying cards as it does

Keep in mind that ure limited to the filtering of checkboxes visible in this screenshot:

if u will want to add your own ones like additional ones you will have to figure it out by urself cause i dont have time to explain every single part of it.

Overall you can just add products to the list in ShopList.js file and be satisfied with that whatcha got. Basically after pressing one of those checkboxes you will have displayed filtered cards depending on which checkbox you will check. Keep in mind that you cant mix few checkboxes with themselves like select android and samsung at the same time cause it wont display anything cause i had no time to code this feature

Overall enjoy and I have hope it will be usefull for yaa

[dickykreedz]

Really cool altho theres some visual glitches, but nice solution

[kuligaposten]

@dickykreedz

The filter works as it should, but it is a simple example that only shows how to filter what is in the DOM using isotope

[dickykreedz]

Never used it cause im using other things for these, but it works pretty well, so ;p