Product catalog with a twist

[jsantari]

I'm looking at building a site which will have a large product catalog (2000+ items). The twist is that each product category will have attributes like color, size etc. but the values for color, size etc. will be different based on what category is selected.  Was wondering if this was a good fit for PW and if it's possible, I was looking for a bit of direction on how to structure the product catalog so that data entry would work. Thanks to any/all who can share a bit of info.

[Jonathan Lahijani]

Hi jsantari,

Here's how I'd go about it:

(1) Make the following templates:

• products.php
• product.php
• product-categories.php
• product-category.php
• options (no need for php file)
• option (no need for php file)

(2) Make the following page structure:

• /products/ (uses products.php)
  • /product-1/ (uses product.php)
  • /product-2/ (uses product.php)
  • (etc)
• /product-categories/ (uses product-categories.php)
  • /product-category-1/ (uses product-category.php)
  • /product-category-2/ (uses product-category.php)
  • (etc)
• /options/ (uses options.php)
  • /colors/ (uses option.php)
    • /red/ (uses option.php)
    • /green/ (uses option.php)
    • /blue/ (uses option.php)
  • /sizes/ (uses option.php)
    • /small/ (uses option.php)
    • /medium/ (uses option.php)
    • /large/ (uses option.php)

(3) create the following fields:

• color (Page field; single value; use /options/colors/ as parent; regular select box); assign it to product.php
• size (Page field; single value; use /options/sizes/ as parent; regular select box); assign it to product.php
• products (Page field, multi-value; use /products/ as parent; ASM select or even better, PageListSelectMultiple since you have over 2000 products); assign it to product-category.php

Now we need to handle what you said:

"The twist is that each product category will have attributes like color, size etc. but the values for color, size etc. will be different based on what category is selected."

The way I'd approach is to create 2 more fields and assign them to the product-category.php template:

• filterable_colors (Page field; multi-value; use /options/colors/ as parent; ASM select preferably); assign it to product-category.php
• filterable_sizes (Page field; multi-value; use /options/sizes/ as parent; ASM select preferably); assign it to product-category.php

So those two filter fields will pretty much allow your category to have specific filters.

Ideally, you would then code your product-category.php template to loop through and output all the products assigned to the category, as well as loop through the filterable_colors and filterable_sizes which would act as filters to the list of the products on that page.  If doing the filtering client-side, here's a cool library:

https://mixitup.kunkalabs.com/

Hope this helps!

Jonathan

[mr-fan]

@Jonathan great example for structuring such kind of content - thanks for that lession!

i've it crosslinked to this topic:

https://processwire.com/talk/topic/3579-tutorial-approaches-to-categorising-site-content/#entry35127

regards mr-fan

[jsantari]

@Jonathan, thanks for the response. I think I see where you are going and how you envision it working on the front end. However, I plan to write my own front end search panel in javascript/ajax to fetch result counts prior to actually displaying products to optimize things for the mobile environmentsts. What I really am most concerned about is the data entry. What I am looking for is a way for the user, when entering a product, to be able to select a category for the product and then have the options for color, size etc. only display the options that are valid for the selected category. For example I might have something like this - so the select of category needs to display only the valid colors and sizes.  

• Category A​
  • ​Colors
    • ​Red
    • Blue
    • Green
  • ​Size
    • ​8 inch
    • 12 inch
• ​​Category B
  • ​Colors
    • ​Blue
    • Yello
  • ​Size
    • ​10 inch
    • 14 inch