Javascript Issue on Product details pages

  • Posts: 21
  • Thank you received: 3
10 years 11 months ago #172909

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

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

  • Posts: 84304
  • Thank you received: 13698
  • MODERATOR
10 years 11 months ago #172968

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.

The following user(s) said Thank You: ssbuchan

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

  • Posts: 21
  • Thank you received: 3
10 years 11 months ago #173082

Works perfectly!

Thanks!

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

  • Posts: 49
  • Thank you received: 0
10 years 8 months ago #184445

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

tanks

With them the Seed of Wisdom did I sow,
And with my own hand labour’d it to grow:
And this was all the Harvest that I reap’d—
“I came like Water, and like Wind I go.”

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

  • Posts: 21
  • Thank you received: 3
10 years 7 months ago #189725

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:

<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div">

Paste:
<!-- sbSlider 1 of 2 -->
  <div style="width:100%; padding-bottom:10px;text-align:center;color:#eee;font-weight:bold;font-size:14px;margin-top:-20px;">
    Product Images
  </div>
  <div id="sbSlider-container" style="">
  <!-- left button -->
    <div style="float:left; margin-right:2px; width:10px;">
      <div id="leftB" style="" title="Previous">
		</div>
	</div>	
	
	<!-- thumbnails -->
    <div style="margin-left:1px; height:37px; width:199px; background:#222; float:left; 

overflow:hidden;">
      <div id="sbSlider" style="padding-left:1px; margin-top:-1px; position: relative;">
			<div id="aImages" style="width:1000px;">
    <!-- end sbSlider 1 of 2 -->

And below the closing div, paste:
<!-- sbSlider 2 of 2 -->
    </div>
		</div>
	</div>
	
	<!-- right button -->
    <div style="float:left; margin-left:2px; width:11px;">
      <div id="rightB" style="" title="Next">
		</div>
	</div>    
  </div>
    <div style="clear:both;"></div>
    <!-- end sbSlider 2 of 2 -->

At the end of the last javascript tag, add this:
<script type="text/javascript">
jQuery.noConflict();
var numThumbs = <?php echo count($this->element->images);?>;
var thumbNum = 4;
var moveDist = 49;
var theIndex = 0;

jQuery("#leftB").click(function () {
	var p = jQuery("#sbSlider");
	//fixes rapid clicking errors
	if( !p.is(':animated') ){
		if(theIndex > 0){
			jQuery("#sbSlider").animate({ "left": "+=" + moveDist + "px" }, "fast", 

function() { });
			theIndex--;
		}
	}
});

jQuery("#rightB").click(function () {
	var p = jQuery("#sbSlider");
	//fixes rapid clicking errors
	if( !p.is(':animated') ){
		if(theIndex < (numThumbs-thumbNum)){
			jQuery("#sbSlider").animate({ "left": "-=" + moveDist + "px" }, "fast", 

function() { });
			theIndex++;
		}
	}
});
</script>

In your template's css file place this:
/** product thumb slider **/
div#hikashop_product_left_part div .hikashop_small_image_div { text-align:left; padding:2px 0; }
img.hikashop_child_image {margin:1px;margin-right:0px; border:1px solid #222; }
img.hikashop_child_image { height:31px; }

#sbSlider-container {
	margin:auto; 
	margin-top:-5px; 
	height:37px; 
	width:225px;
}

#leftB {
	width:12px;
	height:37px;
	background: url('../images/arrow_left.png') no-repeat -2px 10px;
	cursor:pointer;
}

#rightB {
	width:11px;
	height:37px;
	background: url('../images/arrow_right.png') no-repeat -1px 10px;
	cursor:pointer;
}
/** end product thumb slider **/

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!

The following user(s) said Thank You: Jerome, armanemadi

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

  • Posts: 49
  • Thank you received: 0
10 years 7 months ago #189733

Hi

tanks a lot for your sharing .

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

With them the Seed of Wisdom did I sow,
And with my own hand labour’d it to grow:
And this was all the Harvest that I reap’d—
“I came like Water, and like Wind I go.”

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

Time to create page: 0.071 seconds
Powered by Kunena Forum