show characteristics image on mouseover

  • Posts: 45
  • Thank you received: 3
  • Hikashop Business
9 years 7 months ago #228897

-- HikaShop version -- : 2.6.1 Business
-- Joomla version -- : 3.4.8

Hello

We would like to change the image when you go over the different color by mouse. So not only when clicking on the different color - also by mouse Over

Maybe you have any tipp for me, I guess i have to include some code in the shoe_block_characteristics.php

but at the Moment I don't see how...

For any Tipp I'm very thankful

Maya

Attachments:

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

  • Posts: 84307
  • Thank you received: 13701
  • MODERATOR
9 years 7 months ago #228903

Hi,

Yes, in the show_block_characteristics, you need to change the line:
echo $this->characteristic->displayFE($this->element, $this->params) . '</div>';

to:
echo str_replace('<option','<option onmouseenter="myJSfunction(this);"',$this->characteristic->displayFE($this->element, $this->params)) . '</div>';

Then, you can define your javascript function myJSfunction(selectedOption) to replace the image area in the div hikashop_product_image_main with the HTML of the div hikashop_product_image_XXX where XXX is the id of the value of the option tag (that you can get with selectedOption.value)

The following user(s) said Thank You: bytekultur

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

  • Posts: 45
  • Thank you received: 3
  • Hikashop Business
9 years 7 months ago #229038

Thank you!!! I will try that next week!

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

  • Posts: 45
  • Thank you received: 3
  • Hikashop Business
9 years 7 months ago #229798

Thank you - I found the correct Line and puted my JS in the head ...

<script>
    function changeImage(a) {
        document.getElementById("hikashop_main_image").src=a;
    }            
</script>

It works that it changes the Image - but i can't find out how i get the image source of each caracteristics...(so when i use 'this', it changes to src='[object HTMLOptionElement]')

I tryed to get the source of the image - but it did not works...
print_r($this->element->variants);
i know it should end with the [file_path] - but in between... ???

Or is there any function how i get the source more easy?

thanks in advance
Maya

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

  • Posts: 84307
  • Thank you received: 13701
  • MODERATOR
9 years 7 months ago #229801

With a.value you get the id of the value of the characteristic dropdown that you changed as I explained in my previous message.
And then, you do :
var div_where_variant_image_tag_is = document.getElementById('hikashop_product_image_'+a.value);
etc

in order to look for the image of the variant. It is already in the HTML. You don't need to search in $this->element->variants in PHP.

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

Time to create page: 0.063 seconds
Powered by Kunena Forum