Pick product attribute from list of images?

[digitalsymbiosis]

Hello, I am setting up a web shop that sells products that are available in various colors. These colors differ per product so I can't just use the attribute color picker. Additionally, the pattern on the product may differ depending on the color. So it's not just one color.

The dropdown menu would suffice, but not on its own, as the color attribute is expressed as a number and customers would have to go through each number to search for their color.

For that reason I would like the attribute to be picked by means of a list of images. So that each attribute option is a button containing the image (and possibly the number of the color as text). The default dropdown list should still remain for customers that do know their color number and can select it quickly without having to search through the whole list of images.

Here's an image of my current setup. So, what I basically want is additionally to the dropdown list for 'Color', the image thumbnails underneath the large image should act as a button and result in the 'Color' value being changed accordingly when selected.

So, the question is;

Is this possible? And if so, how? I'd rather not pay a whole lot for a module, if it's not too hard to code myself then I might be able to do that.. but I haven't developed anything for TB/PS before so that's a bit of a last resort. My only experience is with Wordpress basically and I still wake up screaming from the mess that is PHP which haunts me in my dreams.

[doclucas]

Try to think bigger. What if you have multiple colors and the customer wants to buy many of them? https://www.presto-changeo.com/prestashop-attribute-modules/27-87-prestashop-attribute-grid-module.html#/25-prestashopversion-allversions Does this module help? :)

[Traumflug]

Come on, PHP wants to be a beginners language :-)

In this case it's JavaScript, though. A click on the picture should change the menu. As long as the menu is set correctly when the user clicks Add to cart, shop software will pick it up correctly. No additional PHP required.

If it's just three colors you might get away with per-color product images. Each combination can have a distinct cover image (tab Combinations on the product editing page) and changing the menu will change the main image to this cover image.

[digitalsymbiosis]

@doclucas said in Pick product attribute from list of images?:

Try to think bigger. What if you have multiple colors and the customer wants to buy many of them? https://www.presto-changeo.com/prestashop-attribute-modules/27-87-prestashop-attribute-grid-module.html#/25-prestashopversion-allversions Does this module help? :)

That looks interesting, but: - it looks like the color is still defined as a 'color' and not as an image? It's important that there is an attribute Color with values 0 to 99, allowing me to add a product image for each value. Color 5 of Product X may be blue, while Color 5 of Product Y may be red. - if my customers want to buy multiple colors then I suppose they can just select it and add to cart and repeat the process.. I mean, the plugin looks nice but also makes the screen quite crowded with input fields and options. Should just be click the image and add to cart :)

@traumflug said in Pick product attribute from list of images?:

Come on, PHP wants to be a beginners language :-)

In this case it's JavaScript, though. A click on the picture should change the menu. As long as the menu is set correctly when the user clicks Add to cart, shop software will pick it up correctly. No additional PHP required.

If it's just three colors you might get away with per-color product images. Each combination can have a distinct cover image (tab Combinations on the product editing page) and changing the menu will change the main image to this cover image.

Let's not start about PHP :) :)

That's a pretty good solution. I was considering that, but figured I'd inform here first. Though I'm not sure if the HTML code of the thumbnail contains any reference to the attribute it's related to? (Haven't looked yet). And I've heard some people have browsers configured to block all JS. Not sure if the shop would even work in that case and I doubt it's not many but still something to consider.

[lesley]

Why not just use the color option and upload the swatches instead of using the pre-defined colors? The software has that ability. http://i.imgur.com/yxV0GD4.png just upload the swatch to the texture.

[digitalsymbiosis]

@lesley said in Pick product attribute from list of images?:

Why not just use the color option and upload the swatches instead of using the pre-defined colors? The software has that ability. http://i.imgur.com/yxV0GD4.png just upload the swatch to the texture.

Because the color differs per product. Yellow of Product X is a different yellow than Product Y. Besides that, the color is expressed as a number. Color number 5 may of Product X may be completely different than Color mumber 5 of Product Y.

To provide an example, this is what I want to achieve: https://www.woolwarehouse.co.uk/yarn/bernat-baby-blanket-tiny-brown-bear-14001-100g-145753

Of course, I could create an attribute group for each product. But the point of this is to make it adaptable and somewhat dynamic. So that I have Color attribute with values 0 to 99. Each product that I add may have a different range of values. Each value has a different look and relates to the color of the product.

It's a bit weird :) But if it were easy I'd have done it.

An option would be to add a new product for every product variation, so: Produxt X Color 5 Product X Color 6 Product X Color ... Product X Color 20

But this makes the product table very large and not easy to manage. And results in double data: each product has the same description, price, size, etc. so it's very inefficient to add it like that.

[doclucas]

@digitalsymbiosis said in Pick product attribute from list of images?:

And I've heard some people have browsers configured to block all JS. Not sure if the shop would even work in that case and I doubt it's not many but still something to consider.

JS disabled, at least on the default community theme, will make the FO side quite unusable. Just tested. So nothing to worry about people who block all JS, as they won't be able to properly use the site regardless.

[lesley]

The way I am talking about would produce results like this, https://back.thirtybees.com/yarn-76.html It looks like the only real change that is needed is that the color image needs to be made bigger, which is a whole lot easier than trying to program a system in.

[digitalsymbiosis]

@doclucas said in Pick product attribute from list of images?:

@digitalsymbiosis said in Pick product attribute from list of images?:

And I've heard some people have browsers configured to block all JS. Not sure if the shop would even work in that case and I doubt it's not many but still something to consider.

JS disabled, at least on the default community theme, will make the FO side quite unusable. Just tested. So nothing to worry about people who block all JS, as they won't be able to properly use t he site regardless.

Alright. But the other point, I found no reference in the HTML code to the attribute value. They're all added to the product as images, and then each image is shown regardless of if it is related to an attribute or not? Only when the attribute value is selected, the image changes. But I don't see any link or reference there that I could hook into to do that backwards (except for 'data-slide-num', if that number is correctly mapped to each attribute option..)

@lesley said in Pick product attribute from list of images?:

The way I am talking about would produce results like this, https://back.thirtybees.com/yarn-76.html It looks like the only real change that is needed is that the color image needs to be made bigger, which is a whole lot easier than trying to program a system in.

Yeah I understand but I wouldn't be able to use that attribute set for another yarn product, right? Each yarn product would require their own attribute set with its own values of textures. Because every product I have will have different texture and color variations. But they all work with a number to specify that variation. So I figured it would be most efficient to keep speficying that variation with a number, and add an image to that which is unique for that product.

The way it works in my screenshot would be correct, I'd only need a way for the images to be a button to select that variant. As suggested above that can be Javascript, but perhaps there is another way that is easier :)

[lesley]

You have two choices, you can either add that link back, which is going to be hard, or you can hide the images underneath the main image and make the images in the color area bigger.

[digitalsymbiosis]

@lesley said in Pick product attribute from list of images?:

You have two choices, you can either add that link back, which is going to be hard, or you can hide the images underneath the main image and make the images in the color area bigger.

Making the images in your example bigger would be what I need, but are those images defined in the product or in the attribute value?

[lesley]

They are in both. Once in the value for the texture and then in the product so the product will switch to the image when you click on the color swatch.

[digitalsymbiosis]

@lesley said in Pick product attribute from list of images?:

They are in both. Once in the value for the texture and then in the product so the product will switch to the image when you click on the color swatch.

Alright.. but that wouldn't work because there will be hundreds of products, each with dozens of colors. And each product has a unique color / texture. So I will end up with thousands of attribute - value pairs, while there can essentially be one color attribute with values 0 to 99 instead of a texture. Then that attribute can be applied to all products, and it will be on the product side to attach an image to it.

I guess I'll have to look at the code that switches the image depending on the value selected in the dropdown. Could you point me in the right direction for that?

[lesley]

It would be time consuming, but it would produce good results to do it the way I am suggesting.

[digitalsymbiosis]

@lesley said in Pick product attribute from list of images?:

It would be time consuming, but it would produce good results to do it the way I am suggesting.

Time is why I am investigating this approach :)

The current way it works is that each color of every product is it's own product in the backend, so this is the result: Yarn X color 1 Yarn X -color 2 Yarn X color 3 Yarn Y color 1 Yarn Y color 2 Yarn Y color 3 ...

And that results in duplicate descriptions and all that. So, ideally I'd want to have this: Yarn X - Color 1 - Color 2 - Color 3 Yarn Y - Color 1 - Color 2 - Color 3

and what you suggest would have me end up with that, along with a unique attribute group for every product. It's going to take up a lot of time. Plus every image has to be added in the product, and in the attribute value.

I want to save time by preventing entering duplicate descriptions and all that, just create a new product, add available color codes and images belonging to those colors and done.

It would be a good option if colors were consistent across the products, but they aren't, sadly enough :)

[datakick]

do you really need unique attribute group for every product? I guess all that's necessary is some small javascript code to filter out colors that are not used by any combination

[digitalsymbiosis]

@datakick said in Pick product attribute from list of images?:

do you really need unique attribute group for every product? I guess all that's necessary is some small javascript code to filter out colors that are not used by any combination

Yes because Yarn X color 1 is not the same color as Yarn Y color 1, so the attribute value should not contain any texture or color. If it does contain a texture or color, it'll have to be a unique attribute group, because the representation (color/texture) of the value is unique for each product.