Larger Images Displayed on Product Page

[Guest]

Hi osC'ers. I'm a huge noob and I'm trying to figure out how to set up my osC t-shirt shop. The main goal I am trying to get to right now is a main "catalogue" page with all of my designs listed on the front page. Easy enough, but what I want to do is when they click on a particular design I want another page to open up with Large images displaying the shirts automatically. Then I want the user to be able to choose the size they want from that page and buy it if they want.

As you probably know the default is you have one little thumbnail picture of your item and then you can type in a big description etc. For a t-shirt obviously the description doesn't matter much, what I want to have on there are large images. Is there some way to make this happen? I would prefer to automate it as opposed to going in and editing the code on every page (which would be very time consuming and I would probably mess something up). If anyone has any info on how to do this, or better yet if anyone has a to a tutorial on how to set up osC as a clothing store or something I would appreciate it.

[e_covert]

Hi osC'ers. I'm a huge noob and I'm trying to figure out how to set up my osC t-shirt shop. The main goal I am trying to get to right now is a main "catalogue" page with all of my designs listed on the front page. Easy enough, but what I want to do is when they click on a particular design I want another page to open up with Large images displaying the shirts automatically. Then I want the user to be able to choose the size they want from that page and buy it if they want.

As you probably know the default is you have one little thumbnail picture of your item and then you can type in a big description etc. For a t-shirt obviously the description doesn't matter much, what I want to have on there are large images. Is there some way to make this happen? I would prefer to automate it as opposed to going in and editing the code on every page (which would be very time consuming and I would probably mess something up). If anyone has any info on how to do this, or better yet if anyone has  a to a tutorial on how to set up osC as a clothing store or something I would appreciate it.

<{POST_SNAPBACK}>

 

Okay... not sure if I completely understand your requirements, but here goes...

 

I am assuming you know how to add products to your site. It sounds like you only want a single category. When you are adding your products, use the full sized image for upload.

Go to the 'Images' option under 'Configuration' in your administration section. Set the 'Small Image Width' and 'Small Image Height' to the size you want your thumbnails. HINT 1: If you leave one of these options blank, all your images will be resized with the value of the option you filled in, while maintaining aspect ratio (images may end up bigger or smaller than your original image, but they will not be stretched or squished)

HINT 2: I have created a modification which allows you to set both the image height and width without having your images stretch. It basically uses the defined height and width as maximum values... your images won't be wider than your defined width, and they won't be taller than your defined height, but they will keep their aspect ratio. If you are comfortable with PHP at all, and if you have any experience appliying modifications you should have no trouble installing this one (pretty simple). To download, go here: http://www.oscommerce.com/community/contri...ons,3279/page,6

 

Next step.... you will need to do some minor code customization to make your products show up without a description, and with a large image. Open the file 'product_info.php' with your favorite editor (preferably one with line numbers). At around lines 106-117 (on a clean install of MS2.2), you will find the code which outputs the product image. It will look something like this:

 

          <table border="0" cellspacing="0" cellpadding="2" align="right">
           <tr>
             <td align="center" class="smallText">
<script language="javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>
</noscript>
             </td>
           </tr>
         </table>

 

Change the following (first line of above):

<table border="0" cellspacing="0" cellpadding="2" align="right">

to:

<table border="0" cellspacing="0" cellpadding="2" align="left">

 

That just changes the horizontal positioning of the image on the page.... since you want the focus on the image, this change will put the image on the left side of the page rather than the right. If you would like it to be centered on the page, change the

align="left"

to

align="center"

 

Remove or comment out everything between

<td align="center" class="smallText">

and

</td>

 

In place of what you just removed, put the following:

<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name']); ?>

 

Then, after the line that says:

</table>

put

<br>

 

Okay... if you have used the full sized image when adding your products, then the image should appear at full size when viewing the product. If you choose to use descriptions, I believe that last change will make the description appear under the image. When viewing the category all the products are under, the thumbnails should appear sized according to your settings as described above.

 

So... on to tshirt sizes....

Go into your administration, under the 'Catalog' section and click on 'Products Attributes'. On this page, under 'Product Options', insert a new option called 'Size'.

After you have inserted this option, you need to add option values. These will for instance be 'Small', 'Medium' and 'Large', or whatever sizes your sell your shirts at. To add an option value, on this same page under 'Option Values' select your 'Size' option from the drop down box, and type 'Small' in the text box next to it and click insert. Do this for each of the possible sizes you will need.

That was the easy part... depending on how many products you have, this next part could get tedious. For each tshirt, you need to tell oscommerce what sizes are available for that specific shirt, and if there is a different price for those sizes.. This is done on the same page, in the 'Products Attributes' section at the bottom of the page. You will see a row which contains a drop down box of all your products, a drop down box with your available options (ie: 'Size'), a drop down box with the available option values (ie: 'Small', 'Medium', 'Large'), a text box for you to make a price adjustment, a text box for you to put a price prefix, and and insert button. For each of your tshirts, select the product from the drop down, select the 'Size' option from it's dropdown, select one of the sizes from that drop down, enter the price adjustment (leave at 0 if no adjustment), then enter a plus sign or minus sign to indicate if your price adjustment is added to the base price or subtracted from the base price. Click 'insert'. You will have to do this for each size, for each tshirt. I don't know how many tshirts you have, or how many sizes they come in, but it doesn't take too many for this to become a lengthy process. I haven't looked, but I would guess that there may be contributions out there which make this process easier.

Now your size options should show up on the product pages for your customers to choose from.

 

And finally.... to make your main page display all your products with links... I recommend just doing this all manually (if at all). There are contributions out there which provide you with a wysiwyg interface for editing your main page.... I would just do it manually. The text that gets displayed on this page is located in:

includes/languages/english/index.php

Of course if your site is non-english or multilingual, you will do this for each language you support.

After the comments at the top of the file, you should find a line like this:

define('TEXT_MAIN', 'some kind of text will be in here');

Replace the text in the second set of quotes with the content of what you would like to appear on your home page. This can be as long as you want, and can contain HTML. So basically, build yourself a home page with whatever you want on it (such as a display of all your tshirts). If you want to link to products, just copy the products url from your browser to use in your href.

 

My recommendation.... use the home page just to provide an introduction and welcome to your site. Include a link to the main category which all your tshirts are under. If you put all your shirts under one category, then viewing that category will show them all your shirts. The way I see it, if osCommerce is already doing all the work for me, why should I replicate it? If you are desperate to have your products all show up on the main page, then I would create an index.html which redirects to the main category. This will have a significant negative effect on your search engine placement though.

 

Well... hope it helps.... post a link to your site if you want and I can take a look.

-Eric