Level 61
As you've described, they probably have products table and product_variations tables with a one to many relationship where one product can have many variations and variation belongs to product.
Mar 6, 2021
8
Level 4
Amazon Style Product Variation/Options
Hello (again)
I don't know if I can post this link from Amazon but anyway... here it is
I would like to create something similar with the product variations they have. In the above example where you can pick color, Size, Style, but depending on what is selected have the other options be available (solid border) or not available with a particular combination (dashed border) but still link to the first available with that option.
Can someone shed some light on how to create relationships and achieve a similar result?
Level 80
@laracastsluvr When dealing with physical products, you will normally have multiple SKUs for a single product, with each SKU representing a particular variant of a product. So if you have a t-shirt product, you’d have a SKU for every possible colour and size combination that t-shirt is available in (L/red, L/blue, etc). So I’ve modelled many ecommerce sites this way: a top-level Product model with a has-many relation to a Sku model.
If you want to add attributes then you could add a model for that, too. At its simplest, your Product model could have many Attribute models. This model would contain the name of the attribute only (i.e. size, colour, etc). You could then have a many-to-many relation between your SKUs and its products attributes (attribute_sku pivot table), that has the value for that SKU and attribute combination as a pivot value. So for SKU X, you might say for attribute Y (size) the value is “L”, and for SKU X and attribute Z (colour) the value is “red”. You then know that SKU X is the red, L t-shirt.
Back to your UI, you can then build your attribute select lists so that if you choose size L, then it shows all SKUs whose value is “L” for the size attribute, and your colour options are updated to show all the colours available for that sized shirt. And when you select a colour, it will most likely match a single SKU so you can show the price for that shirt in the selected size and colour.
Level 4
Thanks for replying. I have the relationships already in place.
- SKUs <-> Attribs (many-to-many)
- SKUs <-> Models (one-to-many)
I'm mostly interested in how to build a similar UI/UX to Amazon's. Not with chained selects/dropdowns, but with "buttons", showing all possible attributes.
If you check the link I've posted you will notice that some buttons have solid border while others have dotted/dashed border.
A solid border means that the selected color (1st level) is available in the 2nd level option (size) and 3rd level (style). While the example's 3rd level is redundant, I have a situation that requires this type of functionality.
I'll try to make an example
### Product Model: "Device A"
--------------------------------
Color: | Grey | Green | Red |
--------------------------------
RAM: | 4GB | 6GB | 8GB |
--------------------------------
Storage| 64GB | 128GB | 256GB|
--------------------------------
In the above example, the Red product is available only in 6GB & 8GB RAM and 128GB & 256GB storage options.
- Red/6/128
- Red/6/256
- Red/8/128
- Red/8/256).
While the rest of the colors are available only in 4GB & 6GB RAM, but have all storage options.
- Grey/4/64
- Grey/4/128
- Grey/4/256
- Grey/6/64
- Grey/6/128
- Grey/6/256
- Green/4/64
- Green/4/128
- Green/4/256
- Green/6/64
- Green/6/128
- Green/6/256
When the page is showing the Grey-4GB-64GB SKU, the Grey&4GB&64GB options/attribs are highlighted. The 6GB RAM option will have a solid border indicating that the Grey SKU also has a 6GB version, but the 8GB version should be dashed indicating that the Grey SKU is not available in 8GB. Same for the storage options. Since Grey is available in all storage options, they should have solid borders around them.
Continuing with the Grey-4GB-64GB SKU page, when you click on the 8GB option (which we know is only available to the Red SKU) we should be redirected to the Red SKU page. That page will now have Red & 8GB & 128GB* highlighted. 4GB RAM & 64GB Storage is now dashed because it is only available with Grey & Green SKUs. Dashed but clickable not disabled even tho we're on Red SKU page now.
This is what I wish I could build in the UI. Display all options associated with the SKUs for a particular product model.
Level 80
@laracastsluvr The UI will just be doing the same, whether it’s drop-down lists, radio selects, or whatever. When you choose one option, it will filter the SKUs down to options for that attribute.
So in the example URL you gave, choosing a specific colour will update the size and style options to those appropriate for that selected colour. Then choosing a size will restrict the style options to SKUs matching that colour and size. Finally, selecting a style will then match a single SKU, and you can see this as the price is then presented now Amazon knows which individual variant has been selected.
Level 4
It should not fully restrict subsequent options. That's why I made the long post in my first reply. I get what you trying to say and it is the default implementation to almost all eCommerce platforms. Meaning that selecting a 1st-level options filters down to the 2nd-level and 3rd and so on but restricts every subsequent selection based on the previous level. So 3rd depends on 2nd and 2nd depends on 1st.
I need to show all available options in 2nd and 3rd levels (or any level) even tho the 1st level doesn't qualify for all.
So if I select Grey (see my long reply to you) the interface should not restrict the 8GB RAM option even tho Grey doesn't have an 8GB option. By selecting that 8GB option it should switch to the first available color (or 1st level) having that option.
Level 80
@laracastsluvr Right, so do that? Just disable the options where there isn’t a SKU available for that particular combination.
Using attributes and values, you can easily query all available values for each attribute. Then when a particular attribute value is selected, update the other options to disable any that aren’t applicable.
1 like
Level 4
Thanks for taking the time to reply btw :)
So no, I want the non-applicable options to be available to the visitor, but when a non-applicable option is selected to direct the visitor to the first applicable SKU for that option.
Again with my example:
- Grey/Green SKUs (1st level) do not have the 8GB Ram option from 2nd level.
- I need the interface to display the 8GB option regardless of whether Grey/Green SKUs apply or do not apply to that option.
When a user is visiting any of them (Grey/Green SKUs) and clicks on that 8GB RAM option which isn't applicable to Grey/Green SKUs it should direct the visitor to the Red SKU page or any applicable SKU page that the option applies to. Just imagine the block-code in the long example to be rendered in the page with every option available as is, like that 3x3 grid.
Level 75
I would suggest you visit some online shops and get an idea of how things are done.
Many times a basic SKU will be the same for a line of products followed by a dash with color and another with size.
You could actually go to github, do a search for laravel shopping carts, and study the code to see how things are done.
1 like
Please or to participate in this conversation.