Jump to content

minor mod to product +more images


Guest iamjohngalt

Recommended Posts

Guest iamjohngalt

I'm a newbie to cubecart so if this is nothing new, please keep that in mind.

I was not happy with the product +more images popup window layout.

However, I didn't want to re-write cubecart so I made a couple of small changes that make it more usable, in my opinion.

Before you make these changes backup the following 2 files:

skins\your_skin_name\styleTemplates\content\viewProd.tpl

skins\your_skin_name\styleTemplates\popup\prodImages.tpl

I wanted the popup to have the thumbnails of the extra pics on the left in a scrollable area, and the selected full size pic on the right.

This makes better use of the space IMO.

To do this, I changed my skin prodImages.tp to put the output in a 1 row , 2 cell table. The entire file is below so you should be able to copy and paste if you wish:

-------------------- B E G I N F I L E ---------------------------------

<!-- BEGIN: prod_images -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset={VAL_ISO}" />

<title>{META_TITLE}</title>

<link href="../skins/{VAL_SKIN}/styleSheets/popup.css" rel="stylesheet" type="text/css" />

<script language="javascript" src="../js/jslibrary.js"></script>

</head>

<body>

<div id="pageSurround">

<div style="padding: 5px;">

<table><tr><td>

<div id="divThumbsImg">

<!-- BEGIN: thumbs -->

<div style="padding: 5px;"><a href="java script:getImage('{VALUE_SRC}');"><img src="{VALUE_THUMB_SRC}" width="{VALUE_THUMB_WIDTH}" alt="Click for larger image" border="0" class="thumbsImg" /></a></div>

<!-- END: thumbs -->

</div>

</td><td>

<div id="divMainImg">

<img id="img" src="{VALUE_MASTER_SRC}" alt="Full size view" />

</div>

</td></tr></table>

</div>

<br clear="all" />

</div>

<div style="text-align: center;">

<a href="java script:window.close();" class="popupLink">Close Window</a>

</div>

</body>

</html>

<!-- END: prod_images -->

-------------------- E N D F I L E ---------------------------------

I also changed my skin version of viewProd.tpl.

The only change here is to make the popup window larger to display the images better for my use. The resulting popup window should be 640 by 480.

Only line 13 is changed in viewProd.tpl as follows:

-------------------- B E G I N C O D E --------------------

<div style="text-align: center;"><a href="java script:openPopUp('extra/prodImages.php?productId={PRODUCT_ID}', 'images', 638, 478, 0);" class="txtDefault">{LANG_MORE_IMAGES}</a></div>

-------------------- E N D C O D E --------------------

So its fairly simple and I like the results.

your mileage may vary.

I'd love to hear of a better way if you have one.

Link to comment
Share on other sites

Guest vrakas

2 things my friend

1) What is your sites URL so we can have a look?

2) What where the changes you made or do we have to insert and replace the whole text?

:errm:

Link to comment
Share on other sites

Guest iamjohngalt

Hi, vrakas

(1)A jpg of the popup window is attached showing an example.

(The site is not available online yet.)

(2)I thought it was simpler to provide the entire code, than to try to give instructions on what was changed, but I see there are only 3 new lines. The changed lines are in BOLD

-------------------- B E G I N F I L E ---------------------------------

<!-- BEGIN: prod_images -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset={VAL_ISO}" />

<title>{META_TITLE}</title>

<link href="../skins/{VAL_SKIN}/styleSheets/popup.css" rel="stylesheet" type="text/css" />

<script language="javascript" src="../js/jslibrary.js"></script>

</head>

<body>

<div id="pageSurround">

<div style="padding: 5px;">

<table><tr><td>

<div id="divThumbsImg">

<!-- BEGIN: thumbs -->

<div style="padding: 5px;"><a href="java script:getImage('{VALUE_SRC}');"><img src="{VALUE_THUMB_SRC}" width="{VALUE_THUMB_WIDTH}" alt="Click for larger image" border="0" class="thumbsImg" /></a></div>

<!-- END: thumbs -->

</div>

</td><td>

<div id="divMainImg">

<img id="img" src="{VALUE_MASTER_SRC}" alt="Full size view" />

</div>

</td></tr></table>

</div>

<br clear="all" />

</div>

<div style="text-align: center;">

<a href="java script:window.close();" class="popupLink">Close Window</a>

</div>

</body>

</html>

<!-- END: prod_images -->

-------------------- E N D F I L E ---------------------------------

and on the line 13 from viewProd.tpl:

-------------------- B E G I N C O D E --------------------

<div style="text-align: center;"><a href="java script:openPopUp('extra/prodImages.php?productId={PRODUCT_ID}', 'images', 638, 478, 0);" class="txtDefault">{LANG_MORE_IMAGES}</a></div>

-------------------- E N D C O D E --------------------

Link to comment
Share on other sites

I thought this is what I was looking for but not quite

Here is a link to the store I'm working on:

http://www.specializedsaddles.com/ordersho...rod&productId=2

I'm moving him from just flat HTML pages to the shopping cart, but

he still wants people to be able to click on the "medium" picture for full detail

http://www.specializedsaddles.com/

like I have it set here for each saddle he designs.

the only place I see the pop ups used is in the admin section.

I don't see a place to enable pop up images per product - am I just missing it?

Thanks!

Lorri Nevil

Link to comment
Share on other sites

  • 2 weeks later...
  • 10 months later...

Just to let you know thanks - I was able to take a lot of what was here (make a few changes) and changed the language file to be more descriptive of the information I needed to convey -

http://www.specializedsaddles.com/ordersho...rod&productId=4

What a great community this is :w00t:!

Lorri Nevil

Hey, I love how your site turned out. I am also interested in showing more detail in my images, and I am wondering how you ended up doing that. Your images seem much larger than mine... Did you change the image size, or was it a change in the code itself?
Link to comment
Share on other sites

  • 1 month later...
Guest Laura Brito

I am not too worried about the scroll box on the side, that part of the mod did work for me. I removed it though, what I am really wanting is the pop up box to open up big enough to see the whole image. My images are 600 x XXX. Always 600 wide, but the height will vary depending on the image. I tried adding in the 638, 478 portion to the viewProd file and I also tried 638, 638......but nothing different happens. It is still the same size, it is still cutting off the image, and nothing changes. I am using the killer skin because it is full width. So if anyone has an idea please let me know, I have been trying to get this to work now for hours and hours.....

Thanks!

Laura :P

Link to comment
Share on other sites

Guest Laura Brito

Thanks Mark, Bummer though, I see alot of people who would like this addressed. It makes the site look unprofessional, I know I am just starting, but still, it shouldn't be that hard to fix this problem. It seems to be an issue whatever we do. I tried alot of things as well and I don't know much about this program, I was able to get things different, but not how I wanted them. I need bigger images...at the very least you click the thumbnail and it pops up....at least that, I would rather do away with the popup box all together, but at the same time I am not ready to purchase a mod...so it makes it tricky. The reason I would like to do away with the pop up box is alot of people have pop ups blocked. So if it would just show all the images, one as the main, and then you click on the thumbnail and it opens up or changes it...that would work ok.

Thanks anyway! I appreciate the info.

Laura, I'd like to know the answer myself. Months ago I tried to help a guy with his site, who wanted this popup larger. The code there was the first attempt, but no dice. I worked in popup.tpl, css, js folder, etc. etc. etc. but no changes ever made it work :P
Link to comment
Share on other sites

The mod you mentioned above works very well for that; I have purchased it myself long ago and have it in use at one of my sites. Very happy with all her work. I can send you a link to my store where that image mod is in action via PM, if you want to see.

Also, as to site looking unprofessional, that would depend upon what you are selling. The smaller images are just fine for a plethora of items, and the stock cubecart is just fine for most sites. Smaller images have advantages, too, less storage on your server, less bandwidth to load the images, quicker load time, etc. so IMO the cubecart stock method is professional looking for most applications.

Link to comment
Share on other sites

Guest Laura Brito

Oh I agree with you, the stock site is ok for many people and looks just fine, but for some graphic intense sites (like mine will be eventually) I need to make sure people know exactly what they are getting and because most of my shipping is from Mexico I don't want them to have a surprise that is going to cost me an arm and leg to fix. So extra pictures will assure me that they saw it in all angles and the higher quality the better. That way I avoid returns. I have done this before (sells on the internet) so I have learned some hard lessons.

I guess I will have to break down and buy the mod. I am going to first finish the rest of the cart and see how that goes.

I did find one problem though, sometimes the same image will come up at the more images pop up, duplicates? Which is weird, that might be a bug? I don't know...so far overall it is a fantastic product.

Anyway apprecie the help and I will be PMing you..

Thanks

Laura

The mod you mentioned above works very well for that; I have purchased it myself long ago and have it in use at one of my sites. Very happy with all her work. I can send you a link to my store where that image mod is in action via PM, if you want to see.

Also, as to site looking unprofessional, that would depend upon what you are selling. The smaller images are just fine for a plethora of items, and the stock cubecart is just fine for most sites. Smaller images have advantages, too, less storage on your server, less bandwidth to load the images, quicker load time, etc. so IMO the cubecart stock method is professional looking for most applications.

Link to comment
Share on other sites

This thread is old and started Jul 28 2005.

Sorry for braking your chatting but you can continue this if you wish in the .org forum where all 3rd party mods are located and supported. ;)

Thank you :)

Topic closed.

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...