Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

  • 0
rand0m

combination images on product page

Question

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?

Share this post


Link to post
Share on other sites

15 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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 :-)

Share this post


Link to post
Share on other sites
  • 0

@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.

Share this post


Link to post
Share on other sites
  • 0

@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!

Share this post


Link to post
Share on other sites
  • 0

@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

Share this post


Link to post
Share on other sites
  • 0

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:

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

@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.

Share this post


Link to post
Share on other sites
  • 0
Posted (edited)
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 by lixotuka

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...