| ||||||||||
Shopping cart software Solutions for online shops and malls | ||||||||||
|
X-Cart Home | FAQ | Forum rules | Calendar | User manuals | Login |
Dynamic Variant Images Display Mod | |||
|
|
Thread Tools | Search this Thread |
#1
|
|||||||||
|
|||||||||
Dynamic Variant Images Display Mod
PURPOSE: Display dynamically-sized thumbnails of all active Product Variant images directly on the product page, while forcing the main image on the product page to always display the original Product Image. Clicking on any variant thumbnail launches a Lytebox lyteshow of the original size variant images.
Here's a screenshot: http://www.coppercupimages.com/files/variantpicssample_dontdelete.jpg You can see this module in action at www.theholebeadshoppe.com. Look at the Lucite > Lucite Flowers category. Note that at the time of this post, the site is not yet fully functional. DEPENDENCIES: The free Dynamic Images module from PHP Site Solutions: http://forum.x-cart.com/showthread.php?t=41912 How To: Dynamic Images mod plus Lytebox image viewer instructions found here: http://forum.phpsitesolutions.com/open-source-software/dynamic-images/how-to-dynamic-images-mod-plus-lyteb...viewer-t4.html Before installing this Dynamic Variant Images Display Mod, first follow the instructions to install Dynamic Images and follow the How To┘ Lytebox image viewer instructions linked to above. FINE PRINT: This mod is offered as a service to the community, but I cannot offer any support or suggestions for further modifications. I have this mod working in X-Cart Gold 4.1.10, but it has not been tested in any other version. INSTRUCTIONS: Step 1 √ Disable the default behavior that results in X-Cart switching the main image on the product page to the currently selected variant option. With a little work, someone may figure out how to make Dynamic Images resize the variant images in this context, and this can be reenabled. Open /skin1/modules/Product_Options/func.js FIND: Code:
COMMENT this entire bit of code out like this: Code:
Next FIND: Code:
REPLACE with: Code:
Step 2 - Create a template file for the variant thumbnail display and save it here: /skin1/modules/Product_Options/customer_tn_options.tpl PASTE this code into the file: Code:
I'll come back and talk about a few things to pay attention to in this file. Step 3 - Call the customer_tn_options.tpl template from within the product template. Open /skin1/customer/main/product.tpl FIND: Code:
REPLACE with (nothing changes except the addition of the include line): Code:
Step 4 - Add style code to the CSS Open /skin1/skin1.css and /skin1/skin1_printable.css ADD to both files: Code:
OPTIONS You will likely want to change a few things about the customer_tn_options.tpl template and the CSS stylings. For example, you can find sample usage, including all the possible parameters to use with Dynamic Images in the comments at the top of this file: include/templater/plugins/function.thumb_imp.php. In this implementation, I've decided to size the thumbnails to 150px X 110px and crop and/or extrapolate if necessary. You can see this on line 11 of the customer_tn_options.tpl. Also, I have captured when the variant stock level is zero and used an overlay png image with the Dynamic Images overlay parameter to overlay the image with the words "Temporarily Out of Stock". You will need to either replace this image with one of your own, or remove this functionality. The way it is written, variant thumbnails will not show up if there is no thumbnail or the option set is inactive. I have also put a DialogTitle header above the group of images and hard-coded the title "Available Colors" (see line 5). That should probably be set as a language variable, but I haven't done that yet. Also, I have displayed the Option names and SKU numbers below the variant thumbnails. You may want to change that. I have only tested this mod with a single option set. I have no idea if it will work with multiple option sets. The way it loops through the variant array and variant options array may have to be tweaked - not sure. I hope this is helpful. I'm going to post a bit of code you can use to display all of the name/value pairs in the $variants array and the $variant.options array, but I don't have it ready yet. Good Luck!
__________________
Happy coding! Fritz x-cart 4.1.10 Copper Cup Images Print, Web & Multimedia Design www.coppercupimages.com |
|||||||||
#2
|
|||||||
|
|||||||
Re: Dynamic Variant Images Display Mod
Nice looking mod
I have too many projects on my plate at the moment, sorry I couldn't help out on your posts when you were getting this figured out, but I'm glad you got the variants bit all straightened out. Cheers! |
|||||||
#3
|
|||||||
|
|||||||
Re: Dynamic Variant Images Display Mod
Fritz,
Nice code... I don't have time to try it today, but i will, soon. And Jon, wow! Nice mod as well... I like your choice of using Lytebox. One thing that you may want to think about for your product page Fritz, is a minor css tweak so the user has an idea that clicking on a thumbnail might do something. You might want to try a border/rollover, something like: Code:
Then, two css classes: Code:
...or something like that. I embedded this into a TD, but I see no reason why you couldn't use this in a DIV as well. This will give your customer a sense that something will happen if they click. You could also use some javascript to do a transparency effect... whatever you choose, I would choose something, to indicate that if you click on a variant, something will happen. Just my UI geekness coming out. Looking forward to playing with your code. Thanks! Jeremy
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4 |
|||||||
#4
|
|||||||||
|
|||||||||
Re: Dynamic Variant Images Display Mod
Hey Jeremy,
That is a very good idea. I will try to get that implemented as soon as possible. Thanks for the suggestion. Fritz
__________________
Happy coding! Fritz x-cart 4.1.10 Copper Cup Images Print, Web & Multimedia Design www.coppercupimages.com |
|||||||||
#5
|
|||||||
|
|||||||
Re: Dynamic Variant Images Display Mod
Hi,
I have implemented this mod on one of my websites, but it is conflicting with the product variants changing the price. Where a variant is suppose to increase the price, the price stays the same. It works when lytebox is commented out. Looking in my error console, it tells me that in skin1/modules/product_options/func.js, at line 21, variants[xx][1] is undefined. Has anyone come across this before? Is there a fix? Cheers
__________________
Autobulbs Direct Ltd X-Cart Version: 4.2.2 eWay Designs - Custom X-Cart Templates / CMS Websites / Bespoke web applications |
|||||||
#6
|
|||||||
|
|||||||
Re: Dynamic Variant Images Display Mod
@autobulbs, you'll find the patch in following thread will fix it...
http://forum.x-cart.com/showthread.php?t=34052&page=2
__________________
xcartmods.co.uk |
|||||||
#7
|
|||||||
|
|||||||
Re: Dynamic Variant Images Display Mod
Thanks PhilJ, that sorted it out
__________________
Autobulbs Direct Ltd X-Cart Version: 4.2.2 eWay Designs - Custom X-Cart Templates / CMS Websites / Bespoke web applications |
|||||||
#8
|
|||||||
|
|||||||
Re: Dynamic Variant Images Display Mod
There appears to be another problem with this, in that the page fails to load in Internet Explorer.
It comes up with a message box with a red cross saying: "Internet Explorer cannot open the Internet site. -Then my pages URL- Operation Aborted" It seems to work the first time I look at a page with with variants, but when i look at another page with variants, the error comes up. Is there a fix for this error?
__________________
Autobulbs Direct Ltd X-Cart Version: 4.2.2 eWay Designs - Custom X-Cart Templates / CMS Websites / Bespoke web applications |
|||||||
|
|||
X-Cart forums © 2001-2020
|