0
Hello, I have a problem making a category filter, in a store page, there are several categories, the items and the category number are removed from the Mysql database. When I open the page of the store, it shows all the items (until then ok), when I click on some category, it filters normally, but when I click on another again, the items disappear, I need to give refresh on the page for the items to appear again
The collection of items:
products: ko.observableArray([]),
getProducts: function () {
$.get("/api/webshop",
function (data) {
if (!!data) {
ctor.products(data);
}
});
}
The filter in category:
Category: function (Category) {
var products2 = ctor.products().filter(x => x.Category === parseInt(Category));
ctor.products(products2);
},
THE HTML:
<div class="shop-wrapper">
<aside class="player-cash"><span data-bind="text: 'Você possui ' + cashPoint() + ' coins'"></span></aside>
<aside class="category-wrapper" >
<header>Categorias</header>
<div class="category" data-bind="click: Category.bind($root, '1')"><span> Itens 1 </span></div>
<div class="category" data-bind="click: Category.bind($root, '2')"><span> Itens 2 </span></div>
<div class="category" data-bind="click: Category.bind($root, '3')"><span> Itens 3 </span></div>
</aside>
</div>
<div class="shop-wrapper">
<div class="products-wrapper">
<div class="product-row" data-bind="foreach: products">
<div class="product">
<div class="product-name" data-bind="text: Item.name"></div>
<img data-bind="attr: { src: '../../img/mixmall/' + $data.ItemID + '.png' }" height=84px width=84px />
<div class="product-price-wrapper">
<div class="money">$</div>
<div class="price" data-bind="text: Price"></div>
</div>
<div class="product-actions">
<button data-bind="click: $root.onDetail">Detalhes</button>
<button data-bind="click: $root.buy"><span>Comprar</span></button>
</div>
</div>
</div>
</div>
</div>
It seems that it is filtering on top of what has already been filtered, already researched and I did not find how to fix it... Can you help me?
Thank you in advance!
seem to be missing scripts to understand your code. I don’t know how the ctor class is created and what its functions do
– Ronaldo Araujo
What information do you need? And how can I pass it on?
– Gabriel Silva
need to show the ctor class. I believe it’s some api you’re using. it comes from this/webshop? api picked up on github?
– Ronaldo Araujo
No, it’s from a website that a colleague made for me, but I’m making some changes and corrections.
– Gabriel Silva
The JS of the WEB page follows as follows: http://dontpad.com/webshopjs
– Gabriel Silva