PDA

View Full Version : Add to Cart from the Category Detail Page


Jamie
August 16th, 2004, 01:06 PM
Many people have asked us if you can setup Squirrelcart so that a product can be added to the cart right from the category detail page. The category detail page is seen when you click on a category in the left "Product Catalog" nav. By default, the add to cart button only appears after you click "more detail" or the thumbnail image for the product. Here is how to accomplish this:

In v1.4.0, the show_product.php template file looks like this:
<td width="<?=$TD_Width?>" height="190">
<form action="<?=$Form_Action?>" method="get">
<a href="<?=$Detail_Link?>"><img border="0" src="<?=$Thumbnail_Image?>"></a>
<span style="position:relative; right: 20; top: 10; vertical-align:top"><?=$New?></span>
<br>
<div style="font-size: 8pt">
<?=$Name?>
<?=$Admin_Link?>
</div>
<a style="font-size: 7pt" href="<?=$Detail_Link?>">more detail...</a>
<div class="product_price" style="width: 100%">
<?=$Base_Price?>
</div>
</form>
</td>
You will need to add the code for adding to the cart into the show_product.php template. The code can be found in the show_product_detail.php template file. Make sure you are familiar with how to properly modify template files. Do not modify the files in "squirrelcart/themes/squirrelcart". Copy the show_product.php file to your custom theme folder, and modify it there.

1. You will need to add this hidden form field directly below the form tag in show_product.php:

<input type="hidden" name="microtime" value="<?=$Microtime?>">
2. You will also need to add the actual "add to cart" button. The code for that is:

<?=$Add_to_Cart?> You will need to decide where you would like to put the button, and then place that code accordingly.

3. Now, you will need to add a quantity field. There are 2 options here. You can add it exactly as it normally would appear, so customers can enter a quantity and click "add to cart", OR, you can hide the field, and have it default to 1. The customer can then change the quantity in the checkout if they need to. To allow customers to enter a quantity, add this code to the template:

<b>Quantity: </b><input type="text" name="quantity" size="3" value="1"> Again, you will need to decide where you want this to be placed.

If you want it to be hidden, and default to 1, then add this instead:
<input type="hidden" name="quantity" value="1">
Here is an example show_product.php, after the above changes have been made:

<td width="<?=$TD_Width?>" height="190">
<form action="<?=$Form_Action?>" method="get">
<input type="hidden" name="microtime" value="<?=$Microtime?>">
<input type="hidden" name="quantity" value="1">
<a href="<?=$Detail_Link?>"><img border="0" src="<?=$Thumbnail_Image?>"></a>
<span style="position:relative; right: 20; top: 10; vertical-align:top"><?=$New?></span>
<br>
<div style="font-size: 8pt">
<?=$Name?>
<?=$Admin_Link?>
</div>
<?=$Add_to_Cart?><br>
<a style="font-size: 7pt" href="<?=$Detail_Link?>">more detail...</a>
<div class="product_price" style="width: 100%">
<?=$Base_Price?>
</div>
</form>
</td>
Thanks,
Jamie

acnownzu
October 7th, 2005, 12:30 AM
<Delete> Found the problem

christopherO
November 20th, 2005, 02:32 PM
Jamie

I can't find the file: show_product.php in v2
Should I be ammending a different one in this version?

Regards

Chris

Jamie
November 20th, 2005, 03:03 PM
The equivalent file for "show_product.php" in v2 is "product_thumbnail.tpl.php". For "show_product_detail.php" it's "product_detail.tpl.php".

What you basically need to do is take the code that handles adding to the cart from product_detail.tpl.php and place it in product_thumbnail.tpl.php.

jackkyll
November 20th, 2005, 10:25 PM
Hi Jamie!

I'm finally getting the version 1 upgrade done today. So far I've only found one block in my customization. (which goes along the same lines as this thread).

I had
<span class="product_price" style="width: 100%">
<?=$Base_Price?><br>
<?=$Options?><br>
<b>Quantity Available:</b> <?=$Number_in_Stock?> <br>
<b>Quantity: </b><input type="text" name="quantity" size="3" value="0"><br>
<span class="product_add_to_cart"><?=$Add_to_Cart?>
previously and the <?=$Number_in_Stock?> portion doesn't seem to be valid anymore. Was that changed?

I also don't see how many I have in stock in my product list in the admin section. Did I do something wrong?

Thanks!

Jamie
November 20th, 2005, 10:39 PM
Hi Melissa,

What version of Squirrelcart are you using?

jackkyll
November 20th, 2005, 10:48 PM
So sorry, 1.6.3 now.

Jamie
November 20th, 2005, 11:23 PM
Hi Melissa,

The same variable name is supposed to work. I just tried it in v1.6.3, and it looks like a bug is preventing it from working correctly. This no longer happens in the latest release.

You can get the same info using this instead:
<?=$product['Number_in_Stock']?>

billjoeu81
March 20th, 2006, 04:06 PM
Hi Jamie,

Is there a way to show the option choices with the category detail page thumbnails?

I know you gave the example for selecting a (number) quantity to indicate how many the customer would like to ‘Buy Now’…

But, is there a way to have all selectable options show up with the category detail page thumbnail – like (size) small, medium, large or extra large, and (flavor) orange, grape, vanilla, or chocolate...

So, if customers are familiar with the product they can just select the options within the category detail page product's thumbnail (if the product has options) then click the ‘Buy Now’ button.

IE; the customer wants:
The product: Cola
enters quantity: 4
selects size option: medium
selects flavor option: grape
Then click 'Buy Now'.

I’m using SC-v2.1.4

Thanks!
Best Regards!



Bill Olson
Webmaster Search Engine XXX


In support of our fellow Squirrel Cart users, you may submit your Web site’s URL for free to our Search Engine Here: http://www.searchenginexxx.com (Not an Adult site). All Squirrel Cart users will get FREE expedited inclusion into our Search Engines Database, which is indexed by other Search Engines – helping to raze your Website’s relevance levels in search returns. We are receiving an average of 110,000 Searches a day and hope we can help send you some extra Web site traffic!

Jamie
March 20th, 2006, 05:49 PM
Hi Bill,

Anything that is shown on the product detail page can also be added to the thumbnail view. To add options, you need to add this:
<?=$Options?>

billjoeu81
March 20th, 2006, 06:17 PM
Thanks Jamie!!!!!

It worked! I can’t believe it was so simple!

Your support and SC v2.1.4 works so great... I just bought another SC for a new client that needed this option added to the thumbs!

You are the best - Keep up the good work!


Bill Olson
Webmaster Search Engine XXX


In support of our fellow Squirrel Cart users, you may submit your Web site’s URL for free to our Search Engine Here: http://www.searchenginexxx.com (Not an Adult site). All Squirrel Cart users will get FREE expedited inclusion into our Search Engines Database, which is indexed by other Search Engines – helping to raze your Website’s relevance levels in search returns. We are receiving an average of 110,000 Searches a day and hope we can help send you some extra Web site traffic!

billjoeu81
March 22nd, 2006, 12:24 AM
Hi Jamie,

The <?=$Options?> worked great as stated above....

But, can you tell me what tpl.php file I can modify to get rid of the gap that follows after the radio button choices????

There is like an inch gap between the last radio button choice and the "indicates a required field" statement on the page...

It is like there is a double <br><br> or extra <div></div> space..

It shoves the buy now button to far down the page from the thumbnail.

Can you help once again?





Bill Olson
Webmaster Search Engine XXX


In support of our fellow Squirrel Cart users, you may submit your Web site’s URL for free to our Search Engine Here: http://www.searchenginexxx.com (Not an Adult site). All Squirrel Cart users will get FREE expedited inclusion into our Search Engines Database, which is indexed by other Search Engines – helping to raze your Website’s relevance levels in search returns. We are receiving an average of 110,000 Searches a day and hope we can help send you some extra Web site traffic!

baronmunchowsen
July 18th, 2007, 04:21 PM
Hello,

I'm busy theming a v2.4.3 Installation at present and have tried to apply the code above to my product_thumbnail.tpl.php file.

I'm having some issues. The 'add to cart' graphic appears, but when clicked leads to an empty store.php page (the 'content' area of the site is empty).

Here is the code I am using:


<td width="<?=$TD_Width?>" class="prod_thumb">

<form action="<?=$Form_Action?>" method="post">
<input type="hidden" name="microtime" value="<?=$Microtime?>">
<input type="hidden" name="quantity" value="1">

<?=SID_FLD?>

<div class="prod_thumb_img">
<div class="new_overlay"><?=$New?></div>
<a href="<?=$Detail_Link?>" title="<?=$Name?>">
<img border="0" src="<?=$Thumbnail_Image?>" width="<?=$Thumbnail_Image_Width?>" height="<?=$Thumbnail_Image_Height?>" alt="<?=$Name?>" />
</a>
</div>

<div class="prod_thumb_text">
<h3>
<?=$Name?> ~ <?#$Price_Label?>
<?=$Currency_Symbol?><
?=$Base_Price?>
<span><?=$Admin_Link?></span>
</h3>

<p>
<?=$Brief_Description?>
<a href="<?=$Detail_Link?>">more detail...</a>
</p>

<?=$Add_to_Cart?>

</div>
<div class="clear"></div>
</form>
</td>


any suggestions very much appreciated. Thanks!

Jamie
July 18th, 2007, 04:48 PM
The form method has changed to GET. Try changing your form method and see if it fixes the problem.

baronmunchowsen
July 18th, 2007, 05:00 PM
It certainly does - thanks very much for the speedy response.