I would like to develop a similar navigation to this website: http://www.enjukuracing.com/categories/nissan
They are on the BigCommerce platform and I like how their side navigation displays the categories and subcategories. Essentially I would like to know the logic in displaying something like this as well as what components in BigCommerce I would need to do this.
I’d like to point out a few things about this example that aren’t ideal to what we want.
This site seems to be suffering from multiple locations of the same link (if you
look at the source, one link appears 4 times - my site is trying to avoid this because of upwards of 800+ internal links and also because of site load times to generate the navigation)
Each subcategory is generated for all the categories and different menu appearances—this is why they appear 4 times each
So ultimately, we’d want a navigation that does these things:
Know what category we are currently in
Display parent categories leading up to current category
Display sibling categories to current category
Display subcategory/children categories to current category
Expand down upon click to display children categories
I know the Category API can tell me the hierarchy of the categories, but I feel making AJAX calls to a PHP file on each page of my website might be counter-intuitive to making my website more speedy. Is there any simple object that I can access with JS that I can manipulate on a page-level?
I just did something like this using JS to figure out what categories to show/hide and which to have open/closed. First, include the category tree in your sidebar and hide it.
function formatCustomSideBar(){
var cats = [];
$("ul.breadcrumbs > li").each(function(){
if($(this).hasClass("is-active")){
var name = $(this).find("span").text();
cats.push(name);
} else {
var name = $(this).find("a").text();
cats.push(name);
}
});
console.log(cats);
$(".custom-nav li a").each(function(){
var subCat = $(this).text();
if( $.inArray(subCat, cats) !== -1 ){
$(this).parent("li").addClass("active-category");
}
});
};
formatCustomSideBar();
Next, add all breadcrumb values into an array because the breadcrumb always tells us where we are on the site. Then loop the navigation tree, and add a class of active-category to the list item if it is present in the breadcrumb array. Using the active-category class and CSS, you can style the feature.
To add the toggling functionality, I would add an additional few lines to the end of my function to loop list items with the active-category class, and check if they have a child <ul> to find out if they have children categories, and add a class like has-children from there.
Hope this helps.
Related
I have tried to create quick filters using the same methods as Shopware uses for their filter panel, but I've run into some problems. I want to have the 'colors' property filter both in the sidebar and in a slider above the product listing block. This is the design I've got in mind for the slider:
I am able to get this working by adding another filter panel and filtering unused properties out, but everything breaks when trying to select one of the colors. You can try this out yourself by adding two filter blocks to a category page. I don't think having multiple filter panels is supported the way filters are setup at the moment. I have tried adding support for this but there is a lot of code to edit to make that work.
Check these files together with it's parent classes to see how most of the filtering proces works:
vendor/shopware/storefront/Resources/app/storefront/src/plugin/listing/filter-property-select.plugin.js
vendor/shopware/storefront/Resources/app/storefront/src/plugin/listing/listing.plugin.js
Can this be achieved in another way?
I have implemented the similar but not color, I added new filter on top of listing that link to existing in sidebar filter https://bike-resale.de/E-Bikes
I created js plugin to listen on input changed, then find the sidebar filter by ID and dispatch change event on it that will trigger filter on listing. You can try this way.
...
_updateFilterValue(value) {
this._filterInput.value = value;
this._filterInput.dispatchEvent(new Event('change'));
}
...
In a javascript web app I am displaying a rather long table, filled with data coming from firebase, with code like the following.
̧ const dbReference = firebase.database().ref('MyCollection').child('CHD')
dbReference.on('value', function(list) {
list.forEach(function(item) {
itemR = document.createElement('tr'),
itemD = document.createElement('td'),
.... useful code laying out the item inside the table ....
}
}
It works as expected and I end up with my list of items in a table. But I need something more.
How can I make the window scroll automatically to a given position. For instance, to have the 157th item in the list to show at the top of the window. I have already searched the net and found some scroll functions that I tried, but with no success.
Note that the similar question (JavaScript to scroll long page to DIV) does not solves the problem. Maybe because it is a table.
I have tried to follow the solution provided there, using various options, but could not make it work.
I am trying to build a ad website and stuck at implementing the side filters on the sidebar navigation that are displayed based on the selected category.
1 : https://www.pigiame.co.ke/cars
2 : https://www.pigiame.co.ke/mobile-phones
Notice the different filters that appear on the sidebar based on the category selected on the main menu. Need help with showing the different filters.
The simplest form would be something like the following
Assuming you have a product_features tables, your query should look something like this:
SELECT DISTINCT(`feature`) `feature_name` FROM `product_features` `pf`
INNER JOIN `products` `p` ON `p`.`id` = `pf`.`product_id`
WHERE `p`.`category_id` = ?
this should give you all the features for a category, you can then make your menu based on your category_id which you pass to the menu
So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})
First order by items then use accordion jquery
(note: edited since I've just realized the question are somehow correlated, at least in my mind!)
I want to create a multi-filter page in which the result will be animated...
I'm trying with 2 different plugin (quicksand and Isotope) and with both solution I'm having problems...
---ISOTOPE--- (original)
With Isotope I need to filter data based on active class, or based on IDs of filters, which I've already stored in JS, does anyone know how can I do that?
I set up a page with 2 different filter like 'color' (red, blue, orange...) and 'type' (square, round...)
I already have a Javascript that assign class active to the 2 filtering lu based on selection, if all color are selected shift the 'active' class to 'all', and more than one sub-filter can be activated. And this also save the list of the id of the active li items in a string for color filter and another string for shape filter
I also already set up the page like the combination filter Isotope demo at this link: http://isotope.metafizzy.co/demos/combination-filters.html and it is working fine but doesn't allow to select more than one sub-filter at the same time.
I saw the demo at this link http://fiddle.jshell.net/desandro/JB45z/ with filtering combination, but it is based on radio button that I'd like to avoid.
I'm not sure if what I'm trying to do is easy or not... is like, how to tell to Isotope to filter based on the sub-filter that have active class or based on the sum of the li with the ID saved in my two string?
Thanks for any help, as you can easily understand I'm not skilled in js at all and english is not my first language!
--- QUICKSAND --- (edited)
I've just realized that I didn't explain why I stored the IDs of the selected items in the js string. And this is also about the different js question.
I was trying to set up the same system with Quicksand instead of Isotope.
But since quicksand need to have a starting li and a destination li to display the animation I set up the js to pass an array to a different temporary php page that use the array to display a destination li.
All until here is working fine but I'm not able to get back the li data in the original page to let Quicksand perform the animation. The last part of my js appear to have problems that I'm not able to fix (too many days trying with no success), the last part of the js is:
$.post( 'destination_li_filtered.php', {
colorString,
shapeString,
$('#ids').attr('val')
},
function(data) { // should contains the resulting data from the request (?)
$('.list').quicksand( $(data).find('li'),
{ adjustHeight: 'auto' },
function() {
callbackCode();
}
);
e.preventDefault();
});
the external page destination-li-filtered is displaying the results but the original page is not able to take back the data...
Obviously I need to set op the page with isotope or quicksand, not both.
but I'm also wondering witch is the best plugin to display 100's of results with about 20 filters (without considering the combinations). And of course, which is the easiest to use!
You should see the radio button and the change in view as separate things.
It's a common misconception that you should store all your state in the DOM (ie. which checkbox is checked). The DOM is a view, you don't keep state in a view.
You should have a state that lives in your JavaScript.
Like:
var state = "all_selected"; // green, red, blue
Then, when you check the radio button, it will set the appropriate state and update the list (show/hide elements based on state).
This allows you to make any control you want, be it a radio button, a checkbox or something completely custom.