search

imranhsayed / gatsby-woocommerce-themes

⚡ A Gatsby Theme for WooCommerce E-commerce site Gatsby WooCommerce WordPress
https://gatsby-woocommerce-theme.netlify.app/
MIT License
602 stars 309 forks source link

Variable products #66

Open popeating opened 3 years ago

popeating commented 3 years ago

It looks like complex vaiable products (for example 3 attributes with 2 options each) but with limited variations (eg one of the option from the third attributes its only available in certain condition), can't be (easily) replicated when sourcing from graphql in this product for example (in wordpress theme) https://shop.popland.it/prodotto/coffee-bean/ the "dark roast" option is available only for "500 gr weight" also the packaging (tin or card) depends on weight.

we can surely access all the variations with their id, price, image, attributes, but keeping track and add/remove options based on previous selection is really a pain

anyone solved it somehow?

chriswolmarans commented 3 years ago

Any luck with this @popeating ? Trying to avoid having to add completely separate products to account for simple variations.

popeating commented 3 years ago

Hi, still working on it, it looks more complex than it looks in general i try to have full combination available (all colors available in all sizes for example), but it can happens that you can have a variation avaialable only for some other variation even in deep complexity (thinking of combination between size, color and maybe some other variation) that are not all interchangeable; and usually you dont want to split a the same product (you dont want the same tshirt in red and white on the home page, just because the red is available M and S and the white is available in M and L). Woocommerce standard templates handle this correctly, i tried to reverse their js but jsut this part is hundreds of line!

chriswolmarans commented 3 years ago

I see.. thanks @popeating sounds like a tough one indeed. Would you mind sharing the Woocommerce standard templates reference you're mentioning, would love to take a look too, definitely need to find a solution here.

popeating commented 3 years ago

sure, it is the twentytwenty basic theme check this page: https://shop.popland.it/prodotto/coffee-bean/ it is using that theme and having that behaviour, not all options can be mixed

bnbabu55 commented 3 years ago

I have a Gatsby sample site I created for my client as a POC, this https://gatsbysite.devsmr-development.com/portfolio/ page where you click on a category like Financial/Business/Industrial/Consumer button and portfolio items below are filtered based on the button value. I am doing this filtering at the client side, since I have only one list, I am maintaining a portfolio array state.

In your cases, you need maintain a state variable for each of the product attribute dropdowns and run filter functions across appropriate dropdowns based on the value chosen by the user.

If you are handling handful of items then you can do it at client side, but if you want have long list of items (thousands of items) you want to filter from, then you will have to do it at the server side to get better performance. There are tutorials available to do the same, for e.g. I followed this one to get my site done, https://www.youtube.com/watch?v=Ss1NfgBhikc.

Hope this gives you some idea about the how to get this done.