How can I get the first product from loop on Product Page

[denverrusty]

I am creating a product page that will show a large image of the first product and thumbnails for all of the other products. In the product template, how can I retrieve the first product image file name to allow displaying the first product image that will come from the LOOP PRODUCTS command?

[Jim]

In the page template just before you do the code for Loop products set a VAR that you initialize to some value that says you are starting with the first product. Something like [-- VAR.first yes --]. Then in your product template check the VAR.first to see if it is yes and if it is, use your large image and then set the VAR.first to no. Next time you enter the product template from the loop VAR.first will be no so use the smaller image.
On the page template after you finish the Loop Products section set VAR.first to yes again so that it will be initialized again just in case you go to a different template for a page that doesn't initialize it and you are using the same product template.

[denverrusty]

See my test page at:

http://69.94.124.197/shop/index.php

The large image is on the product page template just before the LOOP PRODUCTS command. The LOOP PRODUCTS generates the 5 thumbnail images to the right of the larger image. When you roll over the thumbnail, the large image changes.

It sounds like your suggestion would allow the first image in the loop to be larger. I need to know what the first product image is before the loop command. Am I misunderstanding your suggestion?

[Jim]

There is no way to know what a product's image is until you are in the product template which only happens in the loop product section. You can do multiple loop products on a page so perhaps you could loop through the products once and set some javascript variable with just the image names building an array that is used when the page loads. Then you could do another loop products to actually display the table of products with the small images.

[denverrusty]

The initial product loop to get the first product graphic and link causes all of the products to be displayed. Can the display be suppressed?

Is there a way to get the graphic name only? I get an error if I use the following:

[-- VAR.medium_image_graphic IMAGE PRODUCT.graphic --]

If I remove the word IMAGE, I get the complete tag.

Also, for some reason, when trying to save the PRODUCT.MoreInfoURL, I get an invalid value comment instead of the field value.


My product template has the following code:

#<!-- ------------------------------------------------ -->#
#<!-- ------------------- Product -------------------- -->#
#<!-- ------------------------------------------------ -->#
[-- DEFINE PRODUCT --]

[-- IF VAR.get_first_product "true" --]
[-- VAR.medium_image_link PRODUCT.MoreInfoURL --]
[-- VAR.medium_image_file PRODUCT.Graphic --]
[-- VAR.get_first_product "false" --]
[-- ELSE --]
[-- VAR.define "product" --]
[-- INCLUDE elite_001_pr_vars.sst PROCESS --]

[-- INCLUDE gray_product_info_template.php PROCESS --]
[-- END_IF --]

[-- END_DEFINE PRODUCT --]



My page template has the following:

[-- VAR.get_first_product "true" --]
[-- VAR.medium_image_link "" --]
[-- VAR.medium_image_file "" --]

[-- LOOP PRODUCTS --]
[-- PRODUCT --]
[-- END_LOOP PRODUCTS --]

[-- VAR.get_first_product "false" --]

<!-- Products Row -->
<tr>
<td>
<div align="center">
<a id="mediumImageLink"
href="[-- VAR.medium_image_link --]">
<img id="mediumimage"
src="[-- VAR.medium_image_file --]"
alt="Large Product Image" />
</a>
</div>
</td>