Organizing hundreds of products from 2 categories, even if the products of this two categories share a lot of common tags

Developer help
1

Hello Ghost community!!

I have two product categories, say cats and dogs. Two hundred dogs and two hundred cats to be more clear. As you may imagine most of them share common tags, for example there are black cats and also black dogs. (same tag, but different category, and here different category means different primary tag i guess), also there are blue eyed cats and blue eyed dogs, and so forth and so on.

Now imagine someone arrives at my imaginary website catsndogs4u.com

On the index page the user sees cats and dogs. And he sees more and more of them as he or she scrolls down. That is fine of course cause we sell cats and dogs

But lets say the user decides he want to explore dogs only -cause he’s a dog person-. So he clicks on the main navigation menu where it says DOGS.

Of course as on would expect, now he sees a section that displays all the posts who are tagged “dogs”. On that DOGS section the user also sees a nice sidebar with filters (which are tags really), so now he clicks on a filter labeled "blue eyed" cause he likes to see blue eyed dogs.

So now the page reloads, and the user sees all blue-eyed dogs but ALSO cats, because of course some cats and dogs share this common tag. And thats the problem im talking about. The user oughta see only dogs with blue eyes, cause he was in the dog section (tag/dogs). He is NOT expecting to see cats when clicking on a blue eyed filter within a dog section.

I have managed to solve this problem by showing different sidebars with different tags depending if the user is looking at dogs or cats. For example if user is looking at tag/dogs, then he sees side bar A, but if user is looking at slug tag/cats he sees sidebar B. Sidebar A shows tags related to dogs, and sidebar B has tags related to cats.

The problem with this approach is that cats and dogs CANT share common tags. So i end up with one black tag for cats, and one black tag for dogs. Its not a real problem for me to have “duplicated” tags on the admin, but would like to know if someone has solved this problem on a more elegant way.

Im pretty sure there must be an more elegant way.

Any ideas?

2

Hey there! This filtering pattern sounds a lot like ones used on large ecommerce sites, where people want filter down by multiple attributes to see a subset of items they are interested in.

Using a templating language to create all the possible variations of tag combinations is going to be a really inefficient, hence why large ecommerce sites use JavaScript to filter products. There’s a couple of approaches you could take:

  1. Output all posts and apply to each post all the tags that have been set to them. Then use JavaScript to determine what the user has selected and hide the posts that don’t fit those selected values. Drawbacks to this is that outputting the hundreds of posts will make the initial page load really slow, and pagination won’t work as originally intended
  2. Use the Ghost Content API (Content API JavaScript Client) and JavaScript, or even Algolia (refinementList | InstantSearch.js | Algolia) to create a directory of your sites content and some UI to filter that content
  3. Switch to a fully headless version of Ghost and create a JavaScript application that can consume all of the content from your Ghost site and create the interface you need (Ghost on the JAMstack – Future-proof Professional Publishing)

I realise that most of these options are a bit more involved than you might have been expecting, however this sort of functionality will most likely require some client side functionality and won’t be all possible on the server alone

3

Thank you @DavidDarnes . I think the first approach you shared could work, without outputting hundreds of products thus avoiding slow pagination. Here’s an idea based on your description:

User arrives, page loads and he sees the first 25 posts (cats and dogs). But he has a sidebar with javascript filters on the right side, this sidebar is static, meaning the user can keep scrolling down and more and more posts are being rendered on the left side (just like casper infinite scroll script does), but the right side navbar is static (a very common css trick). Now the user selects a checkbox on the right side which says: cats. Barabim, barabum barabam! All the dogs dissapear, (cause the user checked cats) and the layout automagically re-arrange itself. The re-arrengement is very important. We don’t want the grid to be filled with blank white squares where the dogs used to be. If the user turns off the cats filter, dogs appear again, the layout re-arrenge again.

Be it as it may, thank you for your direction, i am definitely going to keep thinking about the options you mention.

4

That sounds like a decent solution! I’d recommend hiding them with a block of CSS at the top of the page rather than hiding those selected elements. That way you won’t get bugs with infinite scrolling, as that will push both cats and dogs in and the javascript won’t know about those new items