Add to Cart from Category Page - v3

[Jamie]

This tutorial is for Squirrelcart version 3x.

By default, when you click on a category, product thumbnails are shown. You need to click on those thumbnails in order to open the product's detail page where you can then add the item to the cart.

This tutorial explains how to configure Squirrelcart so that it displays an add to cart button for each product on the category's page. There are two ways to do this. Method 1 significantly changes the way products appear on the category page. Method 2 does not.


Method 1 - Change Thumbnails to "Product Detail"

You can change the way products are displayed on a per category basis. By default, when you view a category products are shown as thumbnails:
example3.png
You can change this so that products appear in "detail" mode, just as they do when you click on a thumbnail link:
example4.png

1. Login as store admin
2. Open the category record you wish to alter in the control panel
3. Locate the Category Viewing fieldset
4. Inside this fieldset, locate the Category Page fieldset, which controls how this category and its products appear when a link for this category is clicked
5. Change the Show Products As field to Detail
   example1.png
6. This will cause each product to appear in full detail, with a description, options, and everything you would normally see if you clicked on a product link. This takes up much more room than a product does in thumbnail view. Because of this, I'd recommend changing the Products per Row field to 1, so each product appears on its own row. Setting this to anything larger will not look good.
   example2.png
7. Click Save Changes

The category should now look something like this:
example4.png

You may want to alter your CSS to make each product name stand out more.

[Jamie]

Method 2 - Alter Thumbnail View to Have an Add to Cart Button

This method will turn your category page from something like this:
example3.png

to this:
example2.png

1. In order to do this, you'll need to modify a template. If you haven't already created a custom theme, read this first which will explain how to properly modify template files:
   http://squirrelcart.com/help/3.1.0/?Modifying%20Templates.html
   
   
2. You need a copy of the product_thumbnail.tpl.php template file inside your custom theme folder squirrelcart/themes/YOUR_CUSTOM_THEME/. If you do not have that file in your custom theme, put a copy of that template file there. You can find it in the master theme folder squirrelcart/themes/squirrelcart/
   
   
3. Open squirrelcart/themes/YOUR_CUSTOM_THEME/product_thumbnail.tpl.php in an editor
4. First we need to add an ID attribute to the <form /> tag. Find your <form /> tag in this template:
   

   <form accept-charset="utf-8" action="<?php print $Form_Action ?>" method="<?php print $Form_Method ?>" <?php print $Form_Enctype ?> >

5. If you do not see an id attribute in the opening <form /> tag, add one. Your opening <form /> tag should look like this:
   

   <form id="add_to_cart_form_<?php print $Form_ID?>" accept-charset="utf-8" action="<?php print $Form_Action ?>" method="<?php print $Form_Method ?>" <?php print $Form_Enctype ?> >

   
   
   Note: We have plans to add this by default in newer versions, so steps 4 and 5 above may become unnecessary.
   
   
6. Locate this code towards the bottom of the template:
   

           <?php print $Reviews?>
       </form>
   </div>

7. Before that code add this, which will add the add to cart button, and a hidden quantity field set to 1:
   

           <div class="valign_middle qty_box">
               <input class="qty" type="hidden" id="quantity" name="quantity" value="1" />
               <a href="#" id="add_to_cart_link<?php print $Form_ID ?>" class="<?php print $Add_to_Cart_Class ?> btn co_btn_disabled" onclick="document.getElementById('add_to_cart_form_<?php print $Form_ID?>').submit(); return false"></a>
               <noscript>
                   <input class="co_btn" type="submit" name="no_script[add_to_cart_btn]" value="<?php print $Add_to_Cart_Text ?>" />
               </noscript>
               <script type="text/javascript">
                   var addToCartLink = document.getElementById('add_to_cart_link<?php print $Form_ID ?>');
                   if (addToCartLink) addToCartLink.className = addToCartLink.className.replace('co_btn_disabled','');
               </script>
           </div>

8. Save the file

Considerations:

• To make this as easy for the customer as possible, this approach adds a hidden quantity field set to 1. The customer can change quantities after clicking Add to Cart
• If a product has options, they will not appear. If the options are not required, the item will be added to the cart as it normally would. If the item has at least one required option, the customer will see an error indicating they must choose an option in order to add the item to the cart.

[wendylady]

I am using 3.0.1 and I tried method 1 and it doesn't work for me.

I modified my category.tpl.php file but I don't see anything that would make this not work.

This is all I changed in the file:

I changed this:
<div class="cat_name">
<?php if ($Image_of_Name): ?>
<a href="<?php print $URL ?>">
<img src="<?php print $Image_of_Name['dyn'] ?>" width="<?php print $Image_of_Name['width'] ?>" height="<?php print $Image_of_Name['height'] ?>" alt="<?php print $Image_of_Name['alt'] ?>" />
</a>
<?php print $Admin_Link ?>
<?php else: ?>
<h2>
<a href="<?php print $URL?>"><?php print $Content_Name ?></a> <?php print $Admin_Link ?>
</h2>
<?php endif; ?>
</div>

to this:
<div class="cat_name">
<?php if ($Image_of_Name): ?>
<a href="<?php print $URL ?>">
<img src="<?php print $Image_of_Name['dyn'] ?>" width="<?php print $Image_of_Name['width'] ?>" height="<?php print $Image_of_Name['height'] ?>" alt="<?php print $Image_of_Name['alt'] ?>" />
</a>
<?php print $Admin_Link ?>
<?php else: ?>
<h2>
<?php print $Content_Name ?><a href="<?php print $URL?>"><?php print $Admin_Link ?></a>
</h2>
<?php endif; ?>
</div>

Any other reason why I can't show the product detail on the category page?

[wendylady]

I found the fix for it at:
http://www.ldev.com/forums/showthrea...product+detail

Sorry I didn't look first.

[barback]

Jamie,

Is it possible to use this revised template for certain categories of products, but use the normal click to see product details, choose options, etc. display for other categories?

If the add to cart button is there, does the rest of the item display still function as a link to the product detail page?

I can imagine that I might be able to write css rules to hide the Add to Cart button from products that need options, but wondered if there was another way.

Thanks!