Variant Images Dont Display

  • Posts: 6
  • Thank you received: 0
11 years 6 months ago #101698

I am trying to setup an online clothing store and everything works up until managing variant characteristics of a product. For example, I have a pair of pants that can be ordered in different colors. What I was trying to do was have a variant called colors that when a user selected a color from the dropdown box, the default product image would change to reflect that color. The default image (black pants) shows fine, but when I click on a different color (tan pants) the image doesn't display... however when I hover over the area where the image should be the cursor changes to the pointing finger. If I click on it, the image preview opens up and says there was an error. I have tried placing the images in media/com_hikashop/upload and using a relative link with no luck, along with using the upload feature with no luck. Any ideas? Thanks

Please Log in or Create an account to join the conversation.

  • Posts: 82760
  • Thank you received: 13346
  • MODERATOR
11 years 6 months ago #102026

You need to use the "images" zone of each variant edit page to upload the image to the corresponding variant.
You can reach that page via the "manage variants" button of your product once you added the characteristic to the product.

The image will then change automatically based on the variant selected on the product page.
There is no need to upload the images manually in media/com_hikashop/upload.

If that doesn't work, please provide a link to your product page.

Please Log in or Create an account to join the conversation.

  • Posts: 6
  • Thank you received: 0
11 years 6 months ago #102063

That's what I tried doing but it's still not working. The default image displays but when I change the size, the image disappears and doesn't come back unless I refresh the page. Here's the link to the product page:

dance.web-estates.com/index.php/shop-now...roduct/1-black-pants

I have a variant called sizes that contains the list of, well, sizes. Currently, only the CS size has an image assigned to it. Eventually I want to have a colors variant that changes the image to the correct color when a user chooses it from the dropdown box.

I guess while I'm typing this up, I'll ask another question. Is it possible to have a price range for an item instead of a single price? And then how do I remove the word "each" after the price? Thanks!

Please Log in or Create an account to join the conversation.

  • Posts: 82760
  • Thank you received: 13346
  • MODERATOR
11 years 6 months ago #102066

It comes from the lazyload system that you have on your website which hides the variants images. Deactivate it and it will work fine.

What do you mean by a "price range" ?
You can set different prices for each variant if that's what you're asking.

The each word can be removed with a translation override:
www.hikashop.com/en/download/languages.html#modify

Please Log in or Create an account to join the conversation.

  • Posts: 6
  • Thank you received: 0
11 years 6 months ago #102082

Lazyload system... I apologize for this noob question but how do I disable it? Out of curiosity, how did you know I have that installed/running, or is that just a standard for the HikaShop extension?

Regarding the price range, my client sells dance/skate costumes and the product page I mentioned is for pants. She sells these pants for between $55-$60 , or $45-$50, etc... and this is what she wants displayed besides $55 each. I'm trying to get her on-board so that when a customer chooses the size, the price will update to reflect that, but she is undecided as of right now. I think this (price range) is a feature of the business edition though.

Thanks for the link to the translation override. That will work.

Please Log in or Create an account to join the conversation.

  • Posts: 82760
  • Thank you received: 13346
  • MODERATOR
11 years 6 months ago #102211

I don't know how to disable it as I don't know how you added it. That's not part of HikaShop.

I can see it because once you change the characteristic, if you look at the HTML of the left area of the product page where the image should be, you actually see that the image is there:

<img src="/media/com_hikashop/upload/thumbnail_100x53/p04.jpg" alt="P04" id="hikashop_main_image_2" style="margin-top: 10px; margin-bottom: 10px; display: inline-block; vertical-align: middle; opacity: 0;" class="s5_lazyload">
However, there is a CSS attribute opacity: 0 which is added to it (it's not there normally in HikaShop) which hides the image, and the class s5_lazyload is also added to it.

It looks like something coming from your template, so maybe there are some options in your template to deactivate that...

I'm still not sure about the price range. Normally, when you buy/sell something, you have a fixed price for it. How can the price change ?
Anyway, you put both prices on the same row with a dash between them, you can also use a translation override:
PRICE_SEPARATOR="-"

The following user(s) said Thank You: a404error

Please Log in or Create an account to join the conversation.

  • Posts: 6
  • Thank you received: 0
11 years 6 months ago #102237

Both of those pieces of advice worked. Thanks for helping me out. On last question I have is how do I place the lower price before the higher price? Right now, for example, it reads $60 - $55. I want it to read in a normal way like $55 - $60. I have two different prices set in the backend and have tried putting 55 in the top box and 60 in the bottom, and vice versa, but neither result in having the price range display from lowest to highest. I'm sure its in the translation override but I tried searching with no luck... unless I completely skipped over it or miss read it. Thanks again for your help!

Please Log in or Create an account to join the conversation.

  • Posts: 82760
  • Thank you received: 13346
  • MODERATOR
11 years 6 months ago #102371

You won't be able to do that with translation overrides.

You'll have to edit the file "listing_price" of the view "product" via the menu Display->Views and add such line at the top:
<?php $this->row->prices = array_reverse($this->row->prices); ?>

The following user(s) said Thank You: a404error

Please Log in or Create an account to join the conversation.

  • Posts: 6
  • Thank you received: 0
11 years 6 months ago #102733

Awesome!! Thank you so much for your help! Apparently, I really haven't/need to delve deeper into learning some PHP.

Please Log in or Create an account to join the conversation.

Time to create page: 0.066 seconds
Powered by Kunena Forum