combination images on product page

[rand0m]

So I started customizing the community theme and the way combination images are managed on the product page left me pretty confused. The problem is that i assumed the thumbslist would contain the images that are being associated with the selected combination, but actually it just displays all images of the product and the association between images and combination isn't used anywhere.

I ended up modifying the product.tpl so that only main combination images are displayed and then I wanted to add a second list for the associated images, but I can't find a way to get the image urls without them being in the DOM in the first place.

So before I start adding a hidden list or something of that sort, is there a better way of getting image urls in the product.js than through DOM elements?

[Traumflug]

getting image urls in the product.js

Smarty works in a script node in a template, too. Like: ```

// or

``` Wrapping Smarty code in single quotes works, because code gets parsed by Smarty first, only (much) later by JavaScript. Once these variables are defined, one can access them from everywhere in the document.

Smarty and JavaScript both use { and }. Usually Smarty is smart enough to keep them apart, but in some rare cases one has to look at this: https://www.smarty.net/docs/en/language.escaping.tpl

[rand0m]

Thanks for the reply. Thats good to know, but I needed those urls in the product.js, I solved it by creating a smarty array and passing it with addJsDef.

But actually there is still the problem with the thumbnails not using the associations. If I'm correct the intended behavior was something like zalando does it here for example: https://www.zalando.co.uk/nike-sportswear-air-max-97-ul-17-trainers-ni112b0j5-k12.html

with the tumbslist being the one on the left of the main product image.

Otherwise I don't know why we would have the option to link images with combinations. So instead of just showing every single product image, it should display the images linked with the selected categories. As the category selection is done purely by js in product.js I worked out a solution where the child nodes of the thumbslist are generated in the findCombination() function of product.js and the product.tpl only passes the image urls.

I'll upload the files so that you can see the difference for yourselves. I looked into popular themes and they use the default ps behavior but if your working with combinations where you have multiple images for every combination the current behavior is really awkward.

01509895898094product.js 01509895927486product.tpl

[alwayspaws]

@rand0m Are you talking about this?

[Traumflug]

I needed those urls in the product.js

If you define global JS variables on the page, you have them in products.js. After both of them loaded, of course, which should be true in $(document).ready() or later.

[alwayspaws]

@Traumflug should I update my post and remove my example? I use Mass Combinations Update by @innercode to associate thumbnails to the correct colors.

[Traumflug]

should I update my post and remove my example?

Why? Your example is perfectly fine!

There's always more than one way to solve a problem :-)

[alwayspaws]

Thank you! I was afraid Lesley would say I was wrong or didn't read it correctly. :)

[rand0m]

@alwayspaws No choosing one main image for a combination works perfectly fine. What I mean is that in your example t-shirts of every color are showing in the thumbslist eventhough the color green is selected. thats not really a problem if you only have one image per combination, but if you have multiple images for one combination, this is confusing especially since you have the option to select multiple images to be associated with a combination in the backend.

Now I can understand that if you only have a single image per combination you like the way it is now with every image showing, but even if thats the case I could very well see some customers adding combinations to their carts they didn't want because the thumbnails aren't linked with the combination (the combination doesn't change if you click on the thumbnail), meaning that they see the main image being the pink t-shirt and adding it to the basket without checking the color attribute.

What we did is, that we used a color type attribute and uploaded product images as colors so that these are linked with the combination. The thumbslist on the other hand is only showing the associated images and is hidden if there is only one image.

[rand0m]

@traumflug you're right of course. But since jacascript and template files are so properly separated and there is a way to pass variables to the js files, I prefer to handle it with addJsDef.

But still really nice tip, thanks!

[alwayspaws]

@Random my mouse was hovered over the other color when I took the screenshot. I updated the image above. This is the URL:

https://www.alwayspaws.com/dog-clothes/dog-tee-shirt-for-shelter-and-rescue-dogs-with-adopt-me-and-paw-print#/69-size-sm/92-color-purple

Also see this forum post for additional info / ideas:

https://forum.thirtybees.com/topic/842/thumbnails-in-shopping-cart-do-not-show-selected-color/17

[rand0m]

Your theme handles that correctly. I actually only looked into warehouse theme which didn't seem to do that.

My point is also mainly that I think it should be added to the community theme because in my opinion this is a basic functionality.

Sorry if I caused any confusion :sweat_smile:

[alwayspaws]

@rand0m I get it. No worries. :)

[DaoKakao]

Here's my example: https://decleo.pro/gel-lacquer/342-167-3phase-rouge#/120-tondlyarouge-201 This is nail polish gel, it have some combinations, each of then have a couple of images.

I made a bunch of attributes with the images bound to them, and after that i also bound each combination with it own image. So, it works perfect

Unfortunatwly site has only russian lang.

[alwayspaws]

@DaoKakao That is really beautiful. If using google chrome it automatically translates to English. Unless that's just a setting I created a long time ago.

[lixotuka]

On 11/5/2017 at 3:35 PM, rand0m said:

I looked into popular themes and they use the default ps behavior but if your working with combinations where you have multiple images for every combination the current behavior is really awkward.

Hi rand0m,

I find myself in the same situation.

I agree with you. This behavior is nonsense if there are several images for one combination. Prestashop 1.6 manage this matter correctly.

Could you fix it?

 

Edited October 8, 2019 by lixotuka