Shopping Cart Community

The overflow hidden is there so that the carousel will work - have 8 images in space for 5, you need 3 to vanish

Pretty much ALL of the styles are done via the JS, that is where you need to hack

So far my crash course in JS has been interesting... *he says with less hair*

I have gone through the product.functions script and in particular the function initiateImageCarousel() to see if I can gain anything that might point me.. I have thus far --

var carouselHeight = $("#ProductDetails .ProductTinyImageList").height();
carouselHeight = 108 <-- thumb nail image height plus padding

$("#ProductDetails .ProductThumb").width(ProductThumbWidth+20);
#ProductDetails .ProductThumb width(220+20) = 240 <-- 220 is width of image from upload before padding. 240 is wdith of div container ProductThumb when shown live on page.

$("#ProductDetails .ProductThumb").height(ProductThumbHeight+carouselHeight+10);
#ProductDetails .ProductThumb height(300+108+10); = 418 <-- 300 is actual height of image from upload. 418 is height of div container ProductThumb when shown live on page.

var CarouselImageWidth = $('#ProductDetails .ProductTinyImageList > ul > li').outerWidth(true); <-- Variable used
var CarouselButtonWidth = $("#ProductDetails #ImageScrollPrev").outerWidth(true); <-- Variable used

var MaxCarouselWidth = $("#ProductDetails .ProductThumb").width() - (CarouselButtonWidth * 2);
var MaxCarouselwidth = 240 <-- This fits in side div container ProductThumb.

var MaxVisibleTinyImages = Math.floor(MaxCarouselWidth/CarouselImageWidth);
MaxVisibleTinyImages = Math.floor(240/69) = 3.479 = 3 <-- Show 3.5 images (??)

$('#ProductDetails .ImageCarouselBox').css('padding-left', Math.floor(($("#ProductDetails .ProductThumb").width() - (visible * CarouselImageWidth) - (2 * CarouselButtonWidth)) / 2)); <-- Variables from other lines in make up but this line may need changing to ensure the thumb nails start left of page not center when displayed.
var visible = MaxVisibleTinyImages = 3.479 = 3 <-- Number of thumb nail images that is shown
CarouselButtonWidth = 0; <-- This value is assigned below the first call for this variable (??) not above or sooner so assumed to be 0
$('#ProductDetails .ImageCarouselBox').css('padding-left', Math.floor((240-(3*69)-(2*0))/2)) == (240-(207)-(0))/2 = 33/2 = 16.5

$("#ProductDetails .ProductTinyImageList").width($("#ProductDetails .ProductTinyImageList").width()+4);
$("#ProductDetails .ProductTinyImageList").width(138+4) = 142

var liHeight = $("#ProductDetails .ProductTinyImageList li").height();
liHeight = 104 <-- Height of thumb nail set on upload

$("#ProductDetails .ProductTinyImageList").height(liHeight+2);
$("#ProductDetails .ProductTinyImageList").height(104+2) = 106 <-- Thumb nail plus padding

So far I think I can see where values are coming from and being used for --

<div class="ProductThumb" style="width:220px; height:300px; position:relative;"> where 300px is the height of the zoomable image set on image upload.

<div class="ProductTinyImageList" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 138px;"> where 138 seems to be dependant on how many thumbnails are being shown (needs to be tested)

<ul style="margin: 0pt;Padding: 0pt; position: relative; list-style-type: none; z-index 1; width: 138; left: 0px;"> where 138 is because only two images are shown so will match the ProductTinyImageList

<li style = "height:104px; width:64px;" onmouseover="showProductThumbImage(0)" id="TinyImageBox_0"> first thumb nail to be shown starts here

My cliff face learning curve continues..

**** Quick update..

I used four images and worked the maths around them unlike two used above. What I found was --

<div class="ProductTinyImageList" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 207px;">
<ul style="margin: 0pt;Padding: 0pt; position: relative; list-style-type: none; z-index 1; width: 276; left: 0px;">

This shows me that four thumb nails images are being shown <ul> has a box width of 276px. But has been 'hidden' by the fact its on a lower layer (z-index 1) and that the cover layer (z-index 2) by ProductTinyImageList that prevents overflow (the last image) from showing through its window of 207px (max or default size ??)

So.. I can now see what I think is doing what. I think I need to change the deafult size of 'window' for ProductTinyImageList (207 ??) and perhaps not worry about style functions that will be un-used as conseqence. Where is this 207 coming from ?!!

Another late night me thinks..

Most likely

$("#ProductDetails .ProductTinyImageList").width($("#ProductDetails .ProductTinyImageList").width()+4);

is setting the width.

Any parts where there is a $ sign followed by div ids and styles, is setting that style

I suspect your right Tony with regards the line –

$("#ProductDetails .ProductTinyImageList").width($("#ProductDetails .ProductTinyImageList").width()+4);

But that initself did not seem to complete the picture. I still need to look closer at this IE section it seems. And I am sure I shall need help here… What ever I do messes things...

Here is where I am..The figure of 207 from earlier, was I felt sure, the result of iterative maths based on the number of ‘child’ inputs – thumb nail images detected for the product. If right, a simple one line change might be all thats needed here to complete the single line of thumb nails I require.

So I simply add 5 to the line - Var visible = MaxVisibleTinyImages ;

Var visible = MaxVisibleTinyImages + 5;

You get visible which is currently calculated as 3 (it seems) and adding 5 make 8 the required number to be shown. A quick test to see if I was right suggests the red outline shown in the image below is now the new div container for ImageCarouselBox and is about equal to 8 thumb nails. So I now check this.
In ISC admin I set up a test sample of 8 images to represent the make up of max number of colours (4) at two images per product. In Firefox and Opera, all 8 are shown and all 8 work normally – image rollovers okay, zoom okay and I can use the shopping cart normally. Change the thumb nail count to 4 same working result, I then tried 2 thumb nails etc etc. There is the impression I have sorted my problem out -



In IE show 2 thumb nails and the rollovers etc wok okay. Zoom works, shopping cart works. However, when I made the thumb nail count 4 they show but positioned midway in section (based on area shown in red above image). This is true for 8 images. In fact after a page showing just 2 thumb nails with out issue, adding more, and now you see lower left of browser window - 'DONE but with errors on page'. A subtle observation is that the image that is zoom active has now moved upwards a pixel or two and is underlapping the section header lable. This layer shift maybe unrelated, but you can use the thumb nail rollovers, but not use the zoom. So this suggests the carousel section has been affected by IE clearly not playing ball !



I have added numbers to the script below, here and there (stabs in the dark) and saw no changes, errors yes, but changes no.. I have no idea why IE needs this so-called fix or what exactly it is doing. I thought, wrongly, that whatever was used above would be passed down to this section and made IE safeand with an in theory, no need to change code.
But here is where my very limigted knowledge of JS ends and where the lap of gods (yourselves) might step in.. This is the only place I can think is where my final problem might be in here someplace, although how this has affected the zoom I have no idea. I maybe looking in the wrong place regarding the zoom or it is the right place and the image underlapping a header is why zoom does not work?!! Questions questions?

// end this floating madness
$('#ImageScrollNext').after('<br clear="all" />');
// pad the carousel box to center it
$('#ProductDetails .ImageCarouselBox').css('padding-left', Math.floor(($("#ProductDetails .ProductThumb").width() - (visible * CarouselImageWidth) - (2 * CarouselButtonWidth)) / 2));
// IE 6 doesn't render the carousel properly, the following code is the fix for IE6
if($.browser.msie && $.browser.version.substr(0,1) == 6) {
$("#ProductDetails .ProductTinyImageList").width($("#ProductDetails .ProductTinyImageList").width()+4);
var liHeight = $("#ProductDetails .ProductTinyImageList li").height();
$("#ProductDetails .ProductTinyImageList").height(liHeight+2);
}

I THINK if I can get IE to work as I can with Firefox and Opera I would have found (with Tonys finger pointing) a crude mod for future ISC owners. anybody have any ideas...???

You'll likely need to mess with that bottom bit that is IE specific - in honesty all I would be doing in your shoes is hacking away until it worked, not much reason to it! lol

In firefox and Opera you can select any item from the test store. Image roll over any thumbnail and zoom the image. You can select an item. You can (in my sample) see stock levels, change the buying number and transfer over to shopping cart.

In IE you can do exactly the same as above IF and ONLY IF, you use a garment with 2 or 3 thumbnails. But like i say; If you add 4 images plus, you can use image roll over and see the zoom active image change. You can not use zoom, You can not select any garment or progress with a purchase into the check out. This is looking like something else is involved in the background (??) or is IE (??)

Well, besides (as aside) setting up a three screen environment so I can see IE and FF running the same pages together; I sat with pen and paper and an onscreen javascript trace, a calculator and the mrs ensuring coffee was on tap !!

I went through every line of code that is the carousel and mapped what was going on for every step of the route.. To discover I was wrong about the IE script I thought was bain of my problems. It turns out that what I needed to do was prevent one question from being asked that mathematically made no sense now the carousel script was removed.

So, from product.functions.js I took this snip of script –
And then made this mod –
That’s it !! *bows*

So okay, I need to reduce the 621px width down to 600 and find a way to ensure that 2 thumb nail images looks as neat as 4 or 8. This is cosmetic stuff, but I now have a solution that removes the carousel from ISC and this works fully in Opera, Firefox AND bluddy IE !!!!

I have posted an abbreviated version of this ‘rant’ in the --

Interspire Shopping Cart ‹ [SC] Knowledge Base ‹ Shopping Cart (ALL) thread..

Please check if what I have placed there IS correct and report glaring errors before I ask admin to take down this thread in its entirety ..

I told you it would be something simple

I know why they used JS on these pages, as it makes it easy to get things set "correctly" on the assumption you aren't modding. However for anyone who is modding it's a fecking knightmare... ALL of the silly variables, and calculations, etc, should be loaded from variables set in the control panel. You shouldn't have to hack around like this, hoping and praying that it's gonna work

Glad you got it sorted though

Quote from front of Interspire site --

"Interspire Shopping Cart was designed with you, the business owner in mind. It runs from your web browser and can be completely customized without editing any HTML files..... "

See that ? *points to head* That was a blimmin afro.. Now I know how Kojak feels !!!

Anyway, now to sort out from the checkout
• how to remove shipping selection, I am only using one choice and that does not need a customer to agree to my choice, so no need to auto tick or show for that matter
• remove second shipping/ billing address, I don’t want to invite rogue buyers using stolen cards etc at one address having me send anything to an address that happens to be a bed sit where people suffer memory loss about what they did or did not receive by parcel
• remove countries I am not willing to ship too, and I can see a fair few who are high on my hit list.. Just need to be sure taking them out will not harm the site at CMS etc. CharlieFoxtrot gave one direction worth looking at.
• place customers notes on same line as enter discount coupon so there is nolonger two lines and a mass of white space

Oh and find a way of adding a tick box to the checkout page that a customer has to tick before sending shopping cart to paypal since this will customer agreeing to terms and conditions of buying etc etc..

And this list is just at the shopping cart !!!!!!! Ideas anybody ??

But yes, your right Tony, pity Interspire can talk the talk, but not do the do or let us instead. Thanks for the finger points by the way..