Magento: Show Quantity Box in Category View

In developing a template for a Wholesale Site, I want to be able to have a Quantity Box in each category view. Typically, a wholesale customer is placing an order for large numbers of items. Forcing him to drill down into an individual product is exactly perfectly not what we want.

Rather, we want our customer to be able to specify quanities and click the Add to Cart button, and keep moving right down the page.

The gang over at the Magento board had this solved for me in no time!

In my theme’s /template/catalog/product/list.phtml file, I changed the <button> line near line 108 from this:

107 108

<?php if($_product->isSaleable()): ?> <button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button>

to this:

108 109 110 111 112 113 114 115 116 117 118 119

<form action="<?php echo $this->getAddToCartUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId(); ?>"> 109 <input name="qty" type="text" class="input-text qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" /> <button class=form-button" onclick="productAddToCartForm_<?php echo $_product->getId(); ?>.submit()"><span><?php echo $this->__('Add to Cart') ?></span></button> </form> <script type="text/javascript"> var productAddToCartForm_<?php echo $_product->getId(); ?> = new VarienForm('product_addtocart_form_<?php echo $_product->getId(); ?>'); productAddToCartForm_<?php echo $_product->getId(); ?>.submit = function(){ if (this.validator.validate()) { this.form.submit(); } }.bind(productAddToCartForm_<?php echo $_product->getId(); ?>); </script>

NOTE!!! This is in TWO places! You’ll have to make a similar change around line 62 as well. A search on isSaleable() should do the trick.

The only real change from the code found in the Magento thread is that I made the button class “form-button” it was just plain “button” in the original.

Sample valid credit card numbers for testing

Here is a list of sample/dummy/test credit card numbers, which are safe to use when you test credit card functionality on a website or application that involves credit card transactions. These credit card numbers validate properly but they are not actually in use.

NOTE:

Expiry or Expiration date can be any valid date of the future in mmyy format.

The CVV (Card Verification Value) is the 3 digit number on the back of your credit/debit card. Any valid 3 digits number can be kept as sample values.

American Express:

378282246310005
3111111111111117
343434343434343
370000000000002
340000000000009
371449635398431
378734493671000

Visa:

4111111111111111
4007000000027
4222222222222
4012888888881881

MasterCard:

5105105105105100
5111111111111118
5454545454545454
5500000000000004
5555555555551111
5555555555554444

Discover:

6011111111111117
6011000000000004
6011000990139424
6011601160116611
6111111111111116

Hope this helps. Thanks.

Using local.xml for overriding or updating xml structure

Over the past 3 years working with Magento and complying with the “Magento way” of managing code, usage of the “local.xml” file presented itself as one of the best ways to update xml layout.

This article is aimed at those who are not aware of the “local.xml” method. If you’re already using it, kudos to you. If not, you definitely should use it.

The idea is simple: Use only one file, the local.xml, placed inside your theme’s layout folder to override or update all xml references for that theme.

Benefits:

1. Only one file to manage overrides and updates
2. No need to have any other .xml file for your theme since it’s dependent on the xml files inside the base folder
3. Every change to the local.xml file is evident so there is no need to search for changes inside xml files

Drawbacks:

1. None that I could think of, unless transparency and evident code changes aren’t your thing.

How to use the local.xml file. All you have to do is to create one inside your theme’s folder and write your xml. Since magento reads through the xml files it will first search for the changes inside your newly created local.xml and apply overrides and updates and then fall through the .xml files inside the base folder if that is the default xml folder set via the magento administration.

How to set it up:

1. Create the local.xml inside your theme’s layout folder (app/frontend/default/your-theme/layout)
2. Add basic xml markup structure

1 2	< ?xml version="1.0"?> <layout version="0.1.0"></layout>

3. Place xml overrides minding the structure. See the examples:

Examples:

1. Removing/Adding javascript from the section:

1 2 3 4 5 6

<!-- Let’s remove sleight js for IE7--> <reference name="head"> <action method="removeItem"><type>js</type><name>lib/ds-sleight.js</name><params /><if>lt IE 7</if></action> </reference> <!-- Instead, add belated.js from your theme’s /js folder --> <action method="addItem"><type>skin_js</type><name>js/belated.js</name><params /><if>lt IE 7</if></action>

2. Add a layout change for the category page only. Setting a template and adding some javascript

1 2 3 4 5 6 7 8 9 10 11 12 13

<catalog_product_view translate="label"> <reference name="root"> <action method="setTemplate"> <template>page/1column.phtml</template> </action> </reference> <reference name="head"> <action method="addItem"><type>skin_js</type> <name>js/stereotabs.js</name></action> <action method="addItem"><type>skin_js</type> <name>js/shadowbox/shadowbox.js</name></action> </reference> </catalog_product_view>

3. Remove specified blocks from the layout (products compare, products viewed and related products) using “remove”

1 2 3 4 5 6 7

<default> <reference name="right"> <remove name="catalog.compare.sidebar" /> <remove name="left.reports.product.viewed" /> <remove name="catalog.product.related" /> </reference> </default>

4. Remove specified blocks from the layout (products compare, products viewed and related products) using method=”unsetChild”

1 2 3 4 5 6 7

<default> <reference name="left"> <!-- Removed the Newsletter from the left sidebar --> <action method="unsetChild"><name>left.newsletter</name></action> <action method="unsetChild"><name>tags_popular</name></action> </reference> </default>

There are many other uses of course but I merely wanted to point out ways of adding, removing and updating to better illustrate the point of having local.xml in your development workflow.

Hope this makes a good starting point in your next project for the first time users and very welcome topic to discuss about for those
with a working experience.

Thanks for reading