25 replies to this topic

[Mark]

Hey guys, I work with the Yahoo! Merchant Store platform (not by choice) and am currently upgrading my company's website. Yahoo uses its own sort of hybrid of PHP and simplified HTML called RTML that basically does not enough of either, and as such everything is basically output as static HTML. My question is this:

I want to be able to sort all the products on a given page by brand and by price, lowest to highest and highest to lowest. Is there any way of doing this based on the static HTML results? I am currently redesigning our website, so I can (for the most part) alter the code to fit whatever mold I need it to. So for example, would each individual item have to be wrapped in a unique div id? Or perhaps the javascript can simply take every number and rearrange a div that way? Or maybe javascript can do none of this?

Thanks guys.

[rc69]

Don't doubt the power of javascript

If you're outputting the items in a table and you have control over the exact html you can output for that table, then you can use the jquery tablesorter (website appears to be down right now, but it may be back later?).

If you need something a little more custom because you are restricted to using divs, then you'll have to do things in a few of steps.
1. Yes, output some sort of "key" which you would sort on as part of the html (it sounds like you'll actually need two keys)
2. Create a small object to hold those two keys so you can easily sort on them, and a reference to the DOM object
3. Iterate over the items and store them in an array of the previously mentioned objects
4. Sort the array
5. Iterate over the array and just call appendChild() on your item container, and pass the DOM reference you stored in #2 as the argument. As a note: appendChild() doesn't clone dom items if they already exist in the tree, it simply moves them.

[Mark]

I believe that Javascript can do it, and that is sort of what I'm talking about, but not exactly it.

I think I actually want two separate things going on here. The first is something sort of like this - http://razorjack.net...sand/index.html - where I set tags that I can swap in and out. This would be so that I could sort products on a page by which brand they belong to. I then want to sort it by price, highest to lowest or lowest to highest. Would this be done by having each price of an item inside of a '<span data-type="price">$100</span>' or something of that sort?

So let me try to make this a bit easier. For example, we have a list of 10 different types of ice hockey skates, all different prices. Three of them are made by Bauer, three of them are made by Reebok, and four of them are made by Easton. There would be four buttons to sort by: "All Skates", "Bauer", "Reebok", and "Easton". This all seems like a fairly simple swap, as long as a variable is created when the product is made that signifies what brand it is. So for example, all of the Bauer skates would have a 'data-type="bauer"', all Easton skates would have an easton data-type, etc. These would all be their own individual list element. So just for the sake of clarifying (mostly for myself than anything at this point), I would have ten separate unordered list items that would look something like this:

<li data-id="bauer-one05-skate-2011" data-type="bauer"><img src="image_of_bauer_skate.png" /></li>

Here is where I get confused. Let us suppose that in each of these <li>'s there is a span that contains the price of each item. How could I then sort these items from highest to lowest? I assume my code would then look something like this...

<li data-id="bauer-one05-skate-2011" data-type="bauer">
<img src="image_of_bauer_skate.png" />
<span data-type="price">$199.99</span>
</li>

It seems that "swapping" the items like I did for the brands is unnecessary. Is there some way to sort these from highest to lowest and also lowest to highest price?

...then I want to paginate the whole thing.

Sorry for the confusion, but I don't know much about Javascript, unfortunately. Hopefully you kind of see what I am trying to do!

[rc69]

Pagination is better done on the server side. It's not impossible with JS, but it's not as clean.

As for the sorting, my previous strategy still applies. However, i have two questions:
1. How familiar are you with sorting algorithms, specifically those of the "in-place" variety?
2. Do you want the user to be able to change the sort order, or do you want the items to have a fixed sorting order that you specify?

[Mark]

Pagination is better done on the server side. It's not impossible with JS, but it's not as clean.

As for the sorting, my previous strategy still applies. However, i have two questions:
1. How familiar are you with sorting algorithms, specifically those of the "in-place" variety?
2. Do you want the user to be able to change the sort order, or do you want the items to have a fixed sorting order that you specify?

I'm not sure that I can paginate from the server side is the only downfall, though pagination might not be completely necessary. I think that having people be able to narrow down their results by brand or price is more important than paginating. I'm trying to move the website towards being much simpler to use and easier to find products, especially the option to sort by lowest price.

1. I'm not, unfortunately. Willing to learn, though.
2. The brands would just be grouped all together with no specific order. The prices would be sorted by either lowest or highest price. Maybe I'm not understanding the question?

Also, thank you for helping, this question has been bugging me for quite some time.

Edited by Mark, 17 February 2011 - 08:47 PM.

[rc69]

1. Thats actually ok. For some reason, i was thinking we were going to have to make a full-blown sort function in JS, as opposed to being able to use its built-in sort function, but then i realized that the JS one should be an in-place sorter, so it's not a problem. If you want to know what i mean, then you can read the wikipedia article on it. I haven't read it myself, but it should be helpful.

2. Most shoping websites allow the user to specify what order they want the products displayed in. Do you want to allow this functionality, or will the items be sorted how you define them to be sorted as and no other way?

Also, i just realized, if you could add a little extra markup to the page, a JS pagination solution probably wouldn't be that messy. If you want to go ahead with it once we get sorting down, then we can talk. For now, if you need help writing the JS to implement the strategy i was talking about in my earlier post then could you provide a link to an example page to work with, or copy/paste the actual html output of your products page. I shouldn't need more than the product list and it's parent element.

[Mark]

1. Thats actually ok. For some reason, i was thinking we were going to have to make a full-blown sort function in JS, as opposed to being able to use its built-in sort function, but then i realized that the JS one should be an in-place sorter, so it's not a problem. If you want to know what i mean, then you can read the wikipedia article on it. I haven't read it myself, but it should be helpful.

2. Most shoping websites allow the user to specify what order they want the products displayed in. Do you want to allow this functionality, or will the items be sorted how you define them to be sorted as and no other way?

Also, i just realized, if you could add a little extra markup to the page, a JS pagination solution probably wouldn't be that messy. If you want to go ahead with it once we get sorting down, then we can talk. For now, if you need help writing the JS to implement the strategy i was talking about in my earlier post then could you provide a link to an example page to work with, or copy/paste the actual html output of your products page. I shouldn't need more than the product list and it's parent element.

Regarding #2, I want the user to specify the order. I want to be able to be able to sort by price, ascending or descending, and by brand. When sorting by brand, I also want the option to sort in ascending or descending price.

That is the other thing. I'm in the middle of a redesign, which is why I'm asking these questions now. So the current output won't do us much good. What markup would I need to implement? I suppose we could continue to speak about this hypothetically, or we could wait a bit until I have the working html?

[rc69]

Regarding #2, I want the user to specify the order. I want to be able to be able to sort by price, ascending or descending, and by brand. When sorting by brand, I also want the option to sort in ascending or descending price.

Ok, we can do that.

That is the other thing. I'm in the middle of a redesign, which is why I'm asking these questions now. So the current output won't do us much good. What markup would I need to implement? I suppose we could continue to speak about this hypothetically, or we could wait a bit until I have the working html?

Well, the thing is, at some point in the JS, we have to know how to get the two fields we're sorting on out of the html. Generally that requires either:
1) An attribute of some kind on the item container (i.e. the <li> in your previous example), or
2) A well defined structure to the html, so we can navigate the dom and get what we need out of it.

At the moment, i'm kinda brain dead so don't go quoting me, but even without the HTML, i'm sure i can get you something that would be easy enough to adapt to any html. When you're creating the markup for your new design, the only thing you'll really have to remember as that the items will need to be contained in one parent tag with nothing else in it. Otherwise things get a little more complicated. Your example where you were using <li>'s is a perfect example, as all list elements should have a single parent (in this case, i'm assuming that would be a <ul>, but it doesn't really matter).

[Mark]

I have another question that seems to be cropping up everywhere I look, will any of this affect how the search engines pick up any of these items? Does any of the javascript return unfavorable results on Google?

Anyway, I think the problem is that for each item, I want to be able to sort by different values. Let us use this as an example:

<ul>
<li>Bauer Ice Skate</li>
<li>Easton Ice Skate</li>
<li>Reebok Ice Skate</li>
<ul>

Well, that would be great if it were that simple. But if this is the page that I'm displaying all the skates, there will need to be an image and a price to go along with it. Leading to, most likely, something more like this.

<ul>
<li>
Bauer Ice Skate <br />
<img src="bauer.jpg" />
<span>Price: $100</span>
</li>
<li>
Easton Ice Skate <br />
<img src="easton.jpg" />
<span>Price: $150</span>
</li>
<li>
Reebok Ice Skate <br />
<img src="reebok.jpg" />
<span>Price: $200</span>
</li>
</ul>

I'm not sure if I'm headed in the right direction here. I would also want hidden values to sort by, if at all possible, such as size and color.

[rc69]

I have another question that seems to be cropping up everywhere I look, will any of this affect how the search engines pick up any of these items? Does any of the javascript return unfavorable results on Google?

No. As long as the html is there when the page loads and not actually generated by the JS, then google will never even have to know you're using JS.

Anyway, I think the problem is that for each item, I want to be able to sort by different values.
...
I'm not sure if I'm headed in the right direction here. I would also want hidden values to sort by, if at all possible, such as size and color.

That will only make the logic a little more complicated, but not too significantly. There are a number of ways to handle sorting on a "hidden" field however, i would assume a customer would be interested in seeing the size/color, so why hide it?

Either way, to make things simple and easy to extend/maintain, i'd recommend using the following markup:

<ul>
<li brand="Bauer" price="100" color="green">
Bauer Ice Skate <br /> 
<img src="bauer.jpg" /> 
<span>Price: $100</span> 
</li> 
<li brand="Easton" price="150" color="blue">
Easton Ice Skate <br /> 
<img src="easton.jpg" /> 
<span>Price: $150</span> 
</li> 
</ul>

Obviously you can change what you need, but having the attributes on the <li> will allow you to change the layout/add to it without having to change the JS.

[Mark]

Is it also easy, then, to sort in succession? Like, narrowing things down?

Say someone searches by brand. Then could they search by price within that brand? And then by color, with lowest price, in a brand?

[rc69]

Yes and no. If you want the ability to sort by so many parameters then you'd probably be better off building a script to filter results instead of sorting them. I recommend that as it would be better from a usability stand point. Now while sorting by multiple fields is possible the trick is coming up with an easy to use UI for it. Things to consider there are:
1. How does a user specify a sort direction/criteria pair (i.e. ASC on Price)?
2. After selecting one sort operation, how would they specify another? Keep in mind, the order they apply the operations does matter.
3. How do they remove a sort operation?

A UI for two fields is easy, any more than that and you run into those complications which is why filtering is often times a better choice. And if you can do sorting then filtering is ridiculously easy.

[Mark]

Yes and no. If you want the ability to sort by so many parameters then you'd probably be better off building a script to filter results instead of sorting them. I recommend that as it would be better from a usability stand point. Now while sorting by multiple fields is possible the trick is coming up with an easy to use UI for it. Things to consider there are:
1. How does a user specify a sort direction/criteria pair (i.e. ASC on Price)?
2. After selecting one sort operation, how would they specify another? Keep in mind, the order they apply the operations does matter.
3. How do they remove a sort operation?

A UI for two fields is easy, any more than that and you run into those complications which is why filtering is often times a better choice. And if you can do sorting then filtering is ridiculously easy.

Then perhaps filtering is what I'm looking for. What is the difference, for example, in the code that we just made a mock up of? Or would that be the same, basically?

[rc69]

No change to the html necessary. Like i said, if you already support sorting, then filtering is ridiculously easy

[Mark]

After doing a bit of research, filtering is definitely what I meant to say. All of the tutorials I have found have involved having a search field to filter the results. I figure this will be simpler than those examples. Any direction you can point me in is greatly appreciated.

Also, I've been out of the game for a while. Are brand="", color="", and size="" valid attributes in the html?

Thank you so much by the way, you've truly been a godsend!

Edited by Mark, 22 February 2011 - 01:46 AM.

[rc69]

After doing a bit of research, filtering is definitely what I meant to say. All of the tutorials I have found have involved having a search field to filter the results. I figure this will be simpler than those examples. Any direction you can point me in is greatly appreciated.

I can't say it'll necessarily be simpler, i haven't seen the examples you are referring to. However, you will likely have to have a field to input the criteria you'll be filtering on. Otherwise, how would we know what we are looking for?

Also, I've been out of the game for a while. Are brand="", color="", and size="" valid attributes in the html?

Nope, they're not. If you're going for 100% valid code, we'll have to do something a little different. If you're willing to allow for some less-than-valid attributes on tags, then we can stick with. Invalid attributes are only a problem in the eyes of the W3C validator, they don't actually have any side effects (at least, none that i've seen yet, and i've been around the block a couple of times if you know what i mean).

Thank you so much by the way, you've truly been a godsend!

You're welcome

[Mark]

After doing a bit of research, filtering is definitely what I meant to say. All of the tutorials I have found have involved having a search field to filter the results. I figure this will be simpler than those examples. Any direction you can point me in is greatly appreciated.

I can't say it'll necessarily be simpler, i haven't seen the examples you are referring to. However, you will likely have to have a field to input the criteria you'll be filtering on. Otherwise, how would we know what we are looking for?

Also, I've been out of the game for a while. Are brand="", color="", and size="" valid attributes in the html?

Nope, they're not. If you're going for 100% valid code, we'll have to do something a little different. If you're willing to allow for some less-than-valid attributes on tags, then we can stick with. Invalid attributes are only a problem in the eyes of the W3C validator, they don't actually have any side effects (at least, none that i've seen yet, and i've been around the block a couple of times if you know what i mean).

Thank you so much by the way, you've truly been a godsend!

You're welcome

Well, instead of having a search field, I figured they would just be text to click on that would filter the results. For example:

http://www.newegg.co...ry=65&name=Mice

On the left navigation bar, there are the price brackets ($0-$10, $10-$25, etc) and manufacturers (Microsoft, Logitech, Razer, etc). It would be something like that, except in my case, ice skates instead of computer mice. Clicking on one of these links would filter my results. The general idea is what I'm going for, that clicking on a predefined link (in this case, Easton Skates) would display only those that I have already labeled as something. So, going back to our original example:

<ul>
<li brand="Bauer" price="100" color="green">
Bauer Ice Skate <br /> 
<img src="bauer.jpg" /> 
<span>Price: $100</span> 
</li> 
<li brand="Easton" price="150" color="blue">
Easton Ice Skate <br /> 
<img src="easton.jpg" /> 
<span>Price: $150</span> 
</li> 
</ul>

I would want links, say on the side, that would say:

Search by Brand:
Bauer
CCM
Easton
Reebok

I want it so that when someone clicks on one of these links, say the Easton link, only the items marked with a brand="easton" would be filtered, or displayed, or sorted. Whatever term we want to use here. And no, I don't care much about the W3C validation, as long as the code works. It is much more logical this way, anyway.

That is my main concern, though. I want to be able to sort the items by brand. Is it then plausible to sort them more in depth? To sort by brand, and then to sort by color for each brand, things like that?

Then as far as price, is it easier to have price brackets (like on newegg) or to go from lowest to highest?

Edited by Mark, 22 February 2011 - 08:48 PM.

[rc69]

Well, instead of having a search field, I figured they would just be text to click on that would filter the results. For example:

http://www.newegg.co...ry=65&name=Mice

On the left navigation bar, there are the price brackets ($0-$10, $10-$25, etc) and manufacturers (Microsoft, Logitech, Razer, etc). It would be something like that, except in my case, ice skates instead of computer mice. Clicking on one of these links would filter my results. The general idea is what I'm going for, that clicking on a predefined link (in this case, Easton Skates) would display only those that I have already labeled as something...
That is my main concern, though. I want to be able to sort the items by brand. Is it then plausible to sort them more in depth? To sort by brand, and then to sort by color for each brand, things like that?

So you essentially want to replicate newegg's filtering functionality, where you can filter by one thing, then another, and another, until there is nothing left to fitler on? Yep, that's possible. Naturally, it will be more complicated than an input box on the page though. However, you shouldn't take the difference between sorting and filtering lightly. While the data that they rely on can be identical, they are not interchangeable ideas.

Then as far as price, is it easier to have price brackets (like on newegg) or to go from lowest to highest?

If you have a large number of products, then filtering on the brackets would definitely be useful. It is especially useful when you have a large number of products in each bracket. If you don't have that many items, then sorting by price would be easier; both on the user and us.

Edited by rc69, 22 February 2011 - 10:20 PM.

[Mark]

Well, instead of having a search field, I figured they would just be text to click on that would filter the results. For example:

http://www.newegg.co...ry=65&name=Mice

On the left navigation bar, there are the price brackets ($0-$10, $10-$25, etc) and manufacturers (Microsoft, Logitech, Razer, etc). It would be something like that, except in my case, ice skates instead of computer mice. Clicking on one of these links would filter my results. The general idea is what I'm going for, that clicking on a predefined link (in this case, Easton Skates) would display only those that I have already labeled as something...
That is my main concern, though. I want to be able to sort the items by brand. Is it then plausible to sort them more in depth? To sort by brand, and then to sort by color for each brand, things like that?

So you essentially want to replicate newegg's filtering functionality, where you can filter by one thing, then another, and another, until there is nothing left to fitler on? Yep, that's possible. Naturally, it will be more complicated than an input box on the page though. However, you shouldn't take the difference between sorting and filtering lightly. While the data that they rely on can be identical, they are not interchangeable ideas.

Then as far as price, is it easier to have price brackets (like on newegg) or to go from lowest to highest?

If you have a large number of products, then filtering on the brackets would definitely be useful. It is especially useful when you have a large number of products in each bracket. If you don't have that many items, then sorting by price would be easier; both on the user and us.

Could you describe the differences between the sorting and filtering, perhaps? Or at least point me in the right direction?

Also, for example, we currently carry 53 different skates. That number will go up in a couple months once the new stock comes in. We probably have less skates in total than any other (major) category. I would say having price brackets would be a pretty good idea.

I guess I'm basically going for all the functionality of a high-end e-commerce CMS. Through javascript.

Edited by Mark, 22 February 2011 - 11:20 PM.

[rc69]

Could you describe the differences between the sorting and filtering, perhaps? Or at least point me in the right direction?

Think of a deck of cards. Typically, you'll only ever want to sort them, first by suit, then from highest to lowest. In the end, you still have the same number of cards, but they are in a different order. The only time you would want to filter them would be when you wanted to remove a few, like say you have joker cards in your deck that you don't want in there.
Make sense?

Also, for example, we currently carry 53 different skates. That number will go up in a couple months once the new stock comes in. We probably have less skates in total than any other (major) category. I would say having price brackets would be a pretty good idea.

I guess I'm basically going for all the functionality of a high-end e-commerce CMS. Through javascript.

53 skates, you could do 10-25 per page, that would mean 3-6 pages. I was gonna say any more than 3 pages and you'd probably want to use brackets, so that works. Of course, the range of the prices can some times make a difference, but i can't say what a good/bad range would be, so we can go with brackets.

However, i'll only help you with the sorting/filtering. You'll have to come up with the brackets and how to filter by them on your own