Javascript Issue on Product details pages

-- HikaShop version -- : 2.3.2
-- Joomla version -- : 3.3.3
-- PHP version -- : 5.3

Hi,

I have created a slider for the product image thumbnails. You can see this on a development site in the link I submitted with this post.

The slider consists of some html and some javascript. My code for the slider and javascript is in the file products / show_block_img.php

I'm having an issue on any product pages that contain a dropdown with characteristics. My thumbnail slider works perfectly until I make a selection from the dropdown. After I make a selection the slider no longer functions. All of the code seems to be visible in the page's html, but for some reason it stops working.

What can I do to fix this?

Thanks!

Hi,

The characteristic system works like this:
- the HTML of the data of each variant is stored in hidden (display:none) divs on the page.
- when you change the value of a characteristic dropdown, it triggers a javascript function
- that function will copy automatically the HTML of the variant data over the HTML of the default variant data displayed on the page.
- this includes the HTML of the image display.

So in your case, I guess that the issue is that your custom javascript gets messed up during that copy.
The simplest is to edit product/show.php and remove the hidden image HTML of the variants from the pages (loadTemplate on show_block_img). That way, the copy won't happen for the product image and your code won't be affected by the selection of the variants.

Works perfectly!

Thanks!

hi
@ssbuchan
i need this thumbnails scroll can you share it with me ??

tanks

armanemadi,

sorry for the long delay...

This definitely could be put together better and be set up to alter it's layout much easier so it may give you a little bit of a headache, but here it is.

You will need to edit the view products/show_img_block.php

Directly above:

Paste:

And below the closing div, paste:

At the end of the last javascript tag, add this:

In your template's css file place this:

Once you get that set up you can edit the sizes and everything to fit the layout you need, but you have to alter multiple areas in the code and in the css to do this. Also, some of the styles are directly in the code vs. in the style sheet. This is what I mean by it could be put together much better.

The main html / template values I think you will want to work with will be:

height:37px - this is in multiple places(html and template css) and would need to be the same everywhere.
width:1000px - this is in the html code. this should be wide enough to contain all of your thumbnails. If it isn't wide enough you wont see all of the thumbnails as you scroll.
width:199px / width:225px - these are in the the html code and template css, repectively. If 1 is changed the other will most likely need to be adjusted appropriately.

The javascript values to change:

thumbNum - this is the number of thumbnails you want visible at once.
moveDist - how far, in pixels, the the scroller should advance each time one of the navigation arrows is clicked. This would be the image width + factoring in any applicable margins/padding.

That's about it. Again, sorry for how messy and cumbersome it is, but it really wasn't fine tuned for ease of use. I hope it works for you and anyone else who may try to implement it. If you have any questions let me know.

Thanks!

Hi

tanks a lot for your sharing .

دمت گرم :woohoo: :woohoo: :woohoo: :woohoo: :woohoo: