Stock Shopsite template with MoreInfoImageRow & option imgs?

[elsparkodiablo]

I'm trying to incorporate some of the features that come with Shopsite into the older custom templates that we purchased that were created around version 9-10, specifically two things:

MoreInfoImageRow

and

Option Menu images

My end goal would be to have a lightbox popup that would open when the MoreInfoImageRow images are clicked, and the standard rollover images when options are selected, however since I don't have a dev installation to mess with and the example SS carts I've tried don't seem to work correctly (at least with the 3 column template that I tried earlier tonight) could someone please point me to a template that will work with both of these options enabled? I'd like to test drive it before I make permanent changes to our site templates.

[Jim]

None of the products in your demo store have Advance Order Option images or extra Product More Info Images. Try assigning some of each of them and then publish and see if you can see them changing. To see the features work it won't really matter what images you have assigned, just that some are assigned. Of course when you have your live store you will want images that relate to your product but in the demo store it won't make any difference which images you choose.

The code that is built in for the extra moreinfo images changes the moreinfo image to the extra moreinfo image that you have the mouse over. Then if you click on the image a larger view of it is displayed. The size of the area where the image will be displayed is configured on Preferences > More Information Pages near the bottom of the screen.

[Jim]

I logged into your demo store and added two product. For one I assigned extra moreinfo images and for the other one I created order options and assigned images to the options. I just used images that were already in the store directories so thing might look a little odd but you can see how it functions.

Go to http://ademostore.com/ssdemos/ver112/alsdemo7/jim.html to see the products. The one on the left is the one with multiple moreinfo images. The one on the right is the one that has images for the order options. Note that in both cases you need to be on the moreinfo page to see the functionality. So click on each product image, Large drill in the left product and small sander in the right product to get to the morinfo page. For the extra moreinfo image product just move the mouse over the thumbnails below the main image and you can see them change. For the order option images you need to select from each of the order options and then the image will change. Once you have the first option selected you have 2 options in the second box to choose from and you will get a different image for each.

This is all using the same templates that the other pages in the store are using I didn't customize any template.

[elsparkodiablo]

You misunderstand my question: What are some of the templates in the default shopsite r11 sp2 install that use MoreInfoImageRow and can also change the moreinfographic when an option is selected?

I'm trying to troubleshoot modifying templates on my site and want to copy / paste the code from a template that I know works to one of my test templates that has our existing store code so I can see it in action before I make site wide changes.

Ex: http://www.onestopknifeshop.com/store/1sks-no-product-2.html

This page will not allow cascading menu functionality even though it's using a copy of one of the default SS product templates.

I'll be happy to email the templates we're using to try to narrow down the issues we're having.

[Jim]

You can put your templates in your alsdemo7 demo store and I can view them from there. Make sure you put the page, product and any include files that they might use.

For the multiple moreinfo images I found a tutorial at http://www.shopsite.com/templates/cookbook/product-multi-imgs.shtml

Basically you replace the [-- PRODUCT.MoreInformationGraphic --] tag in the moreinfo section of the product template with [-- MoreInfoImageRow --] It doesn't say if there is javascript that needs to be added to the page but give that a try and see if it works. If not let me know and I'll check the templates to see if something special is being added.

The advanced options on a moreinfo page show the first option box with available options. Once a selection is made from that box available options for the second box will be displayed. So are there options available for Color? Do you have inventory tracking turned on and if so is the inventory quantity of the options set to 0?

[elsparkodiablo]

We don't have inventory tracking turned on. For some reason the 2nd menu of the cascade remains grayed out. I'll upload templates when I have a few free.

Is there a way to utilize lightbox with moreinfoimagerow?

[elsparkodiablo]

Followup, is the moreinfoimagerow function hard coded into the shopsite cgi or can we modify it through includes? It'd be nice to be able to switch this over from a popup window into a lightbox style display.

[Jim]

The output from the [-- MoreInfoImageRow --] tag is generated in code so it can't be modified. Here is a sample of the output for the moreinfo image and 4 extra moreinfo images.

Code: Select all

<table class="more-information-page" itemscope itemtype="http://schema.org/Product"><tr>
<td class="product-graphic"><div class="prod_img" style="overflow: auto; width: 450px; height: 200px;"><img src="http://mydomain.com/media/barberry-bookmatch.jpg" alt="barberry-bookmatch.jpg" name="prod_img" >
</div>
<div class="row_img"><table class="small_img"><tr><td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://mydomain.com/media/barberry-bookmatch.jpg';"  onClick="window.open('http://mydomain.com/media/barberry-bookmatch.jpg', 'image_window',  'width=600px,height=600px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://mydomain.com/media/ss_size2/barberry-bookmatch.jpg" alt="barberry-bookmatch.jpg" border=0> </a>
</td>
<td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://mydomain.com/media/apricot.jpg';"  onClick="window.open('http://mydomain.com/media/apricot.jpg', 'image_window',  'width=600px,height=600px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://mydomain.com/media/ss_size2/apricot.jpg" alt="apricot.jpg" border=0> </a>
</td>
<td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://mydomain.com/media/barberry-bookmatch.jpg';"  onClick="window.open('http://mydomain.com/media/barberry-bookmatch.jpg', 'image_window',  'width=600px,height=600px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://mydomain.com/media/ss_size2/barberry-bookmatch.jpg" alt="barberry-bookmatch.jpg" border=0> </a>
</td>
<td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://mydomain.com/media/3buttons.png';"  onClick="window.open('http://mydomain.com/media/3buttons.png', 'image_window',  'width=600px,height=600px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://mydomain.com/media/ss_size2/3buttons.png" alt="3buttons.png" border=0> </a>
</td></tr></table>

So the display is done by the onmouseover and onclick functions. I'm not a script guru so I don't know if you could somehow over ride those functions so that it would do what you want or not.

The other option would be to create your own code to do the display and use the [-- Product.MoreInfoImageN --] - where N is 1 to 20 tag and create the code for a set number of images (1 to 20) that your products will have. It would take a fair amount of coding to handle all 20 possible images but if you know you will only have a few it shouldn't be too complicated.

[elsparkodiablo]

I found code from LexiConn that appears to override the stock code for popups:

http://support.lexiconn.com/news/viewtopic.php?p=463

and it would appear that our existing 3rd party code also has similar behavior in it. I'm going to mess around a bit more with it before I go nuts. What's really irking me is this inability to get a 2nd menu working when they are set to cascade. If the menus aren't set to cascade, the image change works fine, but when they are separate the 2nd menu remains grayed out.

[Jim]

The advance option cascading menus use jquery to load the options. Looking at the code for your page with the problem I see the ShopSite version of the jquery.js file is being include. I also see that you have other jquery being loaded jquery.lightbox-0.5.css and jquery.lightbos-0.5.js. It may be that the same functions are defined in both versions of the jquery and the one we are expecting isn't being found.

[elsparkodiablo]

Yeah, I am seeing multiple iterations of jQuery being called, one of which appears to be from 2008 (around the time we switched templates IIRC). This will require more digging.

[elsparkodiablo]

Ok, I'm at a loss now.

I've commented out all of the relevant lightbox js from the template in an effort to get the cascading menus to work and nothing seems to be solving this. The only jquery.js that is showing up in the template now is the one that's specifically called by shopsite and the cascading menus are still non-functional WITH the stock ShopSite MoreInfoImageRow code.

http://www.onestopknifeshop.com/store/1sks-test-4.html

AFAIK this is pretty much stock code using SS processes

[Jim]

Do you have Order Option images assigned to the options? It may be that there is a conflict with the code for the Moreinfoimagerow code and the code for displaying the option images. The engineer for the feature mentioned that they cannot be used together.

Can you upload your pages and products to your alsdemo7 ShopSite demo store and try it there? (I extended the demo for 2 weeks) That way I could take a look and see if I can figure out what is happening.

[elsparkodiablo]

Yes, I have images assigned for both the drop down menu options and the moreinfoimagerow as well. If they cannot be used together, why does the video tutorial show both being used?

http://www.youtube.com/watch?feature=player_embedded&v=Pf8rvhk5SKM

Specifically 1:15 on?

[Jim]

Yes that video seems to indicate that it work. The developer may have been mistaken.

Have you put the data in the test store yet so I can take a look at it?