ModularMerchant
Knowledge Base
Shopping Cart Software Online Manual
Adding a product quantity field to the store's home page
Adding additional pages to the checkout process
Location Home > Shopping Cart Software Components

Adding a product quantity field to the store's home page

quote
I would like to edit my template package to include a field for the product's quantity on the home page. Is this possible?

In this tutorial, we will be editing the template for the store's index page to include a quantity field alongside the featured products. This will take a couple of different adjustments to the template:
  1. The FEATURED-PRODUCT-BLOCK will need to be wrapped in an HTML form.
  2. The {FIELD-PRODUCT-QUANTITY} tag will need to be placed within the FEATURED-PRODUCT-BLOCK.
  3. The "Add to Cart" button will need to be replaced with an input submit field.
The change will need to be made in the index.tpl template twice; once for Grid View and once for List View. In this tutorial, we will be applying the change to the Grid View section of the code. However, the same general concept can be applied to the section controlling List View.

prerequisites
This tutorial assumes that the reader has experience with the following:

Template Package Sandbox
• Editing HTML code in templates

disclaimer
Assistance with HTML or CSS edits to template packages is outside the scope of free shopping cart technical support. If there is a template customization you need help with that is not available in our Knowledge Base, please start a Support Ticket with your request, and we will be happy to look into it for you as a custom web design project.

warning
Template examples in this tutorial were taken from the kerry template package. The concept will remain the same for every template package, but the exact code may differ.

 
Starting code (grid view)

The index.tpl template for the kerry package should have the following section of code:

featured-product-block: grid view
{FEATURED-PRODUCT-BLOCK-BEGIN}
        {IF-RESULT-BEGIN}
            <div class="{BOOTSTRAP-GRID-SPAN-CLASS} CONTAINER-PRODUCT-GRID-VIEW">
                
                <div class="PRODUCT-IMAGE-GRID-VIEW">
                    <a href="{PRODUCT-URL}" title="{PRODUCT-NAME}"><img src="{PRODUCT-IMAGE-URL:1:s}" alt="" border="0" /></a>
                </div>

                <div class="PRODUCT-NAME-GRID-VIEW">
                    <a href="{PRODUCT-URL}" title="View this product's details page." class="LINK PRODUCT-URL">{PRODUCT-NAME}</a>
                </div>
                
                <div class="PRODUCT-PRICE-GRID-VIEW">
                    {IF-PRODUCT-GROUP-PARENT-BEGIN}
                        <span class="PRODUCT-GROUP-PRICE">Price varies</span>
                    {ELSE}                    
                        {IF-PRODUCT-PRICE-REDUCED-BEGIN}
                            <span class="PRODUCT-PRICE-ORIGINAL">{PRODUCT-PRICE-ORIGINAL}</span> <span class="PRODUCT-PRICE-REDUCED">{PRODUCT-PRICE}</span>
                        {ELSE}
                            <span class="PRODUCT-PRICE">{PRODUCT-PRICE}</span>
                        {IF-PRODUCT-PRICE-REDUCED-END}
                        <span class="PRODUCT-PRICE-SUFFIX">{PRODUCT-PRICE-SUFFIX}</span>
                    {IF-PRODUCT-GROUP-PARENT-END}                        
                </div>
                
                {IF-IN-STOCK-BEGIN}
                    {IF-PRODUCT-GROUP-PARENT-BEGIN}
                        <button type="button" name="" value="" class="CLICKABLE SELECT-VERSION-BUTTON" onclick="location.href='{PRODUCT-URL}'">SELECT VERSION</button>
                    {ELSE}                
                        {IF-PRODUCT-FIELDS-BEGIN}
                            <div class="PRODUCT-FIELDS-GRID-VIEW">
                                <button type="button" name="" value="" class="CLICKABLE SELECT-VERSION-BUTTON" onclick="location.href='{PRODUCT-URL}'">SELECT VERSION</button>
                            </div>
                        {ELSE}
                            <div class="PRODUCT-INFO-BUTTON-GRID-VIEW"><button type="button" name="" value="" class="CLICKABLE MORE-INFO-BUTTON" onclick="location.href='{PRODUCT-URL}'">MORE INFO</button></div>
                            <div class="PRODUCT-ADD-TO-CART-BUTTON-GRID-VIEW"><button type="button" name="" value="" class="CLICKABLE ADD-TO-CART-BUTTON" onclick="location.href='quick_return.php?id={PRODUCT-SID}&qty=1'">ADD TO CART</button></div>
                        {IF-PRODUCT-FIELDS-END}
                    {IF-PRODUCT-GROUP-PARENT-END}                        
                {ELSE}
                    <div class="OUT-OF-STOCK-GRID-VIEW">
                        Unavailable.
                    </div>
                {IF-IN-STOCK-END}
                
                {IF-PRODUCT-IN-BASKET-BEGIN}
                <div style="padding-top: 10px;"></div><span class="PRODUCT-IN-BASKET-SUMMARY">{PRODUCT-IN-BASKET-SUMMARY}</span>
                {IF-PRODUCT-IN-BASKET-END}    
                {IF-PRODUCT-IN-ORDER-HISTORY-BEGIN}
                <div style="padding-top: 10px;"></div><span class="PRODUCT-IN-ORDER-HISTORY-SUMMARY">{PRODUCT-IN-ORDER-HISTORY-SUMMARY}</span>
                {IF-PRODUCT-IN-ORDER-HISTORY-END}                                                            
                {IF-PRODUCT-IN-SUBSCRIPTION-BEGIN}
                <div style="padding-top: 10px;"></div><span class="PRODUCT-IN-SUBSCRIPTION-SUMMARY">{PRODUCT-IN-SUBSCRIPTION-SUMMARY}</span>
                {IF-PRODUCT-IN-SUBSCRIPTION-END}
                
            </div>
            {BOOTSTRAP-IF-END-OF-GRID-ROW-BEGIN}
                </div><div class="GRID-ROW-END"></div><div class="GRID-ROW-BEGIN"></div><div class="row-fluid">
            {BOOTSTRAP-IF-END-OF-GRID-ROW-END}
        {IF-RESULT-END}
{FEATURED-PRODUCT-BLOCK-END}

During the course of this tutorial, we will be editing different sections of the code shown above.
 
Adding the HTML form tags

The form tags will need to be wrapped around the FEATURED-PRODUCT-BLOCK.

example
<form>
   {FEATURED-PRODUCT-BLOCK-BEGIN}

......

   {FEATURED-PRODUCT-BLOCK-END}
</form>

 
Adding the {FIELD-PRODUCT-QUANTITY} QuickCode Tag

The {FIELD-PRODUCT-QUANTITY} QuickCode Tag is what will render the field to input the quantity on the page. For the purposes of this tutorial, this QuickCode Tag will be placed right after the price.

example
<form>
   {FEATURED-PRODUCT-BLOCK-BEGIN}

   ......

                <div class="PRODUCT-PRICE-GRID-VIEW">
                    {IF-PRODUCT-GROUP-PARENT-BEGIN}
                        <span class="PRODUCT-GROUP-PRICE">Price varies</span>
                    {ELSE}                    
                        {IF-PRODUCT-PRICE-REDUCED-BEGIN}
                            <span class="PRODUCT-PRICE-ORIGINAL">{PRODUCT-PRICE-ORIGINAL}</span> <span class="PRODUCT-PRICE-REDUCED">{PRODUCT-PRICE}</span>
                        {ELSE}
                            <span class="PRODUCT-PRICE">{PRODUCT-PRICE}</span>
                        {IF-PRODUCT-PRICE-REDUCED-END}
                        <span class="PRODUCT-PRICE-SUFFIX">{PRODUCT-PRICE-SUFFIX}</span>
                    {IF-PRODUCT-GROUP-PARENT-END}
                {FIELD-PRODUCT-QUANTITY}                       
                </div>

  
   ......


   {FEATURED-PRODUCT-BLOCK-END}
</form>

 
Replacing the Add to Cart button

The default Add to Cart button that you see in the code is simply a hyperlink with a hardcoded quantity value. This button doesn't submit any sort form data to the page.

In order to submit the value we enter for the quantity field, this button will need to be replaced with an input submit field.

example
<form>
    {FEATURED-PRODUCT-BLOCK-BEGIN}

    ......
                
                <div class="PRODUCT-PRICE-GRID-VIEW">
                    {IF-PRODUCT-GROUP-PARENT-BEGIN}
                        <span class="PRODUCT-GROUP-PRICE">Price varies</span>
                    {ELSE}                    
                        {IF-PRODUCT-PRICE-REDUCED-BEGIN}
                            <span class="PRODUCT-PRICE-ORIGINAL">{PRODUCT-PRICE-ORIGINAL}</span> <span class="PRODUCT-PRICE-REDUCED">{PRODUCT-PRICE}</span>
                        {ELSE}
                            <span class="PRODUCT-PRICE">{PRODUCT-PRICE}</span>
                        {IF-PRODUCT-PRICE-REDUCED-END}
                        <span class="PRODUCT-PRICE-SUFFIX">{PRODUCT-PRICE-SUFFIX}</span>
                    {IF-PRODUCT-GROUP-PARENT-END}
                {FIELD-PRODUCT-QUANTITY}                       
                </div>

    ......
                
                {IF-IN-STOCK-BEGIN}
                    {IF-PRODUCT-GROUP-PARENT-BEGIN}
                        <button type="button" name="" value="" class="CLICKABLE SELECT-VERSION-BUTTON" onclick="location.href='{PRODUCT-URL}'">SELECT VERSION</button>
                    {ELSE}                
                        {IF-PRODUCT-FIELDS-BEGIN}
                            <div class="PRODUCT-FIELDS-GRID-VIEW">
                                <button type="button" name="" value="" class="CLICKABLE SELECT-VERSION-BUTTON" onclick="location.href='{PRODUCT-URL}'">SELECT VERSION</button>
                            </div>
                        {ELSE}
                            <div class="PRODUCT-INFO-BUTTON-GRID-VIEW"><button type="button" name="" value="" class="CLICKABLE MORE-INFO-BUTTON" onclick="location.href='{PRODUCT-URL}'">MORE INFO</button></div>
                            <div class="PRODUCT-ADD-TO-CART-BUTTON-GRID-VIEW"><button type="button" name="" value="" class="CLICKABLE ADD-TO-CART-BUTTON" onclick="location.href='quick_return.php?id={PRODUCT-SID}&qty=1'">ADD TO CART</button></div>
                        {IF-PRODUCT-FIELDS-END}
                    {IF-PRODUCT-GROUP-PARENT-END}                        
                {ELSE}
                    <div class="OUT-OF-STOCK-GRID-VIEW">
                        Unavailable.
                    </div>
                {IF-IN-STOCK-END}

    ......

    {FEATURED-PRODUCT-BLOCK-END}

</form>

Replace the button code in red text with an input submit field.

<input type="submit" value="Add to Cart" class="CLICKABLE ADD-TO-CART-BUTTON">

example
<form>
    {FEATURED-PRODUCT-BLOCK-BEGIN}

    ......
                
                <div class="PRODUCT-PRICE-GRID-VIEW">
                    {IF-PRODUCT-GROUP-PARENT-BEGIN}
                        <span class="PRODUCT-GROUP-PRICE">Price varies</span>
                    {ELSE}                    
                        {IF-PRODUCT-PRICE-REDUCED-BEGIN}
                            <span class="PRODUCT-PRICE-ORIGINAL">{PRODUCT-PRICE-ORIGINAL}</span> <span class="PRODUCT-PRICE-REDUCED">{PRODUCT-PRICE}</span>
                        {ELSE}
                            <span class="PRODUCT-PRICE">{PRODUCT-PRICE}</span>
                        {IF-PRODUCT-PRICE-REDUCED-END}
                        <span class="PRODUCT-PRICE-SUFFIX">{PRODUCT-PRICE-SUFFIX}</span>
                    {IF-PRODUCT-GROUP-PARENT-END}
                {FIELD-PRODUCT-QUANTITY}                       
                </div>

    ......
                
                {IF-IN-STOCK-BEGIN}
                    {IF-PRODUCT-GROUP-PARENT-BEGIN}
                        <button type="button" name="" value="" class="CLICKABLE SELECT-VERSION-BUTTON" onclick="location.href='{PRODUCT-URL}'">SELECT VERSION</button>
                    {ELSE}                
                        {IF-PRODUCT-FIELDS-BEGIN}
                            <div class="PRODUCT-FIELDS-GRID-VIEW">
                                <button type="button" name="" value="" class="CLICKABLE SELECT-VERSION-BUTTON" onclick="location.href='{PRODUCT-URL}'">SELECT VERSION</button>
                            </div>
                        {ELSE}
                            <div class="PRODUCT-INFO-BUTTON-GRID-VIEW"><button type="button" name="" value="" class="CLICKABLE MORE-INFO-BUTTON" onclick="location.href='{PRODUCT-URL}'">MORE INFO</button></div>
                            <div class="PRODUCT-ADD-TO-CART-BUTTON-GRID-VIEW"><input type="submit" value="Add to Cart" class="CLICKABLE ADD-TO-CART-BUTTON"></div>
                        {IF-PRODUCT-FIELDS-END}
                    {IF-PRODUCT-GROUP-PARENT-END}                        
                {ELSE}
                    <div class="OUT-OF-STOCK-GRID-VIEW">
                        Unavailable.
                    </div>
                {IF-IN-STOCK-END}

    ......

    {FEATURED-PRODUCT-BLOCK-END}

</form>

 
End result (grid view)

Putting it all together, your code should now appear similar to the following:

result
......
<form>
   {FEATURED-PRODUCT-BLOCK-BEGIN}
        {IF-RESULT-BEGIN}
            <div class="{BOOTSTRAP-GRID-SPAN-CLASS} CONTAINER-PRODUCT-GRID-VIEW">
                
                <div class="PRODUCT-IMAGE-GRID-VIEW">
                    <a href="{PRODUCT-URL}" title="{PRODUCT-NAME}"><img src="{PRODUCT-IMAGE-URL:1:s}" alt="" border="0" /></a>
                </div>

                <div class="PRODUCT-NAME-GRID-VIEW">
                    <a href="{PRODUCT-URL}" title="View this product's details page." class="LINK PRODUCT-URL">{PRODUCT-NAME}</a>
                </div>
                
                <div class="PRODUCT-PRICE-GRID-VIEW">
                    {IF-PRODUCT-GROUP-PARENT-BEGIN}
                        <span class="PRODUCT-GROUP-PRICE">Price varies</span>
                    {ELSE}                    
                        {IF-PRODUCT-PRICE-REDUCED-BEGIN}
                            <span class="PRODUCT-PRICE-ORIGINAL">{PRODUCT-PRICE-ORIGINAL}</span> <span class="PRODUCT-PRICE-REDUCED">{PRODUCT-PRICE}</span>
                        {ELSE}
                            <span class="PRODUCT-PRICE">{PRODUCT-PRICE}</span>
                        {IF-PRODUCT-PRICE-REDUCED-END}
                        <span class="PRODUCT-PRICE-SUFFIX">{PRODUCT-PRICE-SUFFIX}</span>
                    {IF-PRODUCT-GROUP-PARENT-END}
                {FIELD-PRODUCT-QUANTITY}                       
                </div>
                
                {IF-IN-STOCK-BEGIN}
                    {IF-PRODUCT-GROUP-PARENT-BEGIN}
                        <button type="button" name="" value="" class="CLICKABLE SELECT-VERSION-BUTTON" onclick="location.href='{PRODUCT-URL}'">SELECT VERSION</button>
                    {ELSE}                
                        {IF-PRODUCT-FIELDS-BEGIN}
                            <div class="PRODUCT-FIELDS-GRID-VIEW">
                                <button type="button" name="" value="" class="CLICKABLE SELECT-VERSION-BUTTON" onclick="location.href='{PRODUCT-URL}'">SELECT VERSION</button>
                            </div>
                        {ELSE}
                            <div class="PRODUCT-INFO-BUTTON-GRID-VIEW"><button type="button" name="" value="" class="CLICKABLE MORE-INFO-BUTTON" onclick="location.href='{PRODUCT-URL}'">MORE INFO</button></div>
                            <div class="PRODUCT-ADD-TO-CART-BUTTON-GRID-VIEW"><input type="submit" value="Add to Cart" class="CLICKABLE ADD-TO-CART-BUTTON"></div>
                        {IF-PRODUCT-FIELDS-END}
                    {IF-PRODUCT-GROUP-PARENT-END}                        
                {ELSE}
                    <div class="OUT-OF-STOCK-GRID-VIEW">
                        Unavailable.
                    </div>
                {IF-IN-STOCK-END}
                
                {IF-PRODUCT-IN-BASKET-BEGIN}
                <div style="padding-top: 10px;"></div><span class="PRODUCT-IN-BASKET-SUMMARY">{PRODUCT-IN-BASKET-SUMMARY}</span>
                {IF-PRODUCT-IN-BASKET-END}    
                {IF-PRODUCT-IN-ORDER-HISTORY-BEGIN}
                <div style="padding-top: 10px;"></div><span class="PRODUCT-IN-ORDER-HISTORY-SUMMARY">{PRODUCT-IN-ORDER-HISTORY-SUMMARY}</span>
                {IF-PRODUCT-IN-ORDER-HISTORY-END}                                                            
                {IF-PRODUCT-IN-SUBSCRIPTION-BEGIN}
                <div style="padding-top: 10px;"></div><span class="PRODUCT-IN-SUBSCRIPTION-SUMMARY">{PRODUCT-IN-SUBSCRIPTION-SUMMARY}</span>
                {IF-PRODUCT-IN-SUBSCRIPTION-END}
                
            </div>
            {BOOTSTRAP-IF-END-OF-GRID-ROW-BEGIN}
                </div><div class="GRID-ROW-END"></div><div class="GRID-ROW-BEGIN"></div><div class="row-fluid">
            {BOOTSTRAP-IF-END-OF-GRID-ROW-END}
        {IF-RESULT-END}
    {FEATURED-PRODUCT-BLOCK-END}

</form>
......

A quantity field will now appear alongside the price of your products. When a customer enters a value into the quantity field(s), and clicks the submit button, that many of those products will be placed into their basket.

— Last Edited - 11/8/2013 2:20pm PST
Rank and add a comment to this article
Only logged in users may leave comments and rank articles. Log in to have your say!
  Knowledge Base Home

  QuickCode™ Tag Glossary

  Modular Merchant.com Homepage

Not Logged in.
Either Log in or create a User Account.

Other articles in this category...

Adding a product quantity field to the store's home page

Adding additional pages to the checkout process

Apple Mail - Suggested Mail Account Settings

Can I put my store in an iframe on another website?

Changing a Modular Merchant account name

Checks & Money Orders

Create a CNAME record for your subdomain

Demo Mode

eCheck (Authorize.net)

Gift Wrap

Grace Period

How to download your SSL Certificate from Plesk

How to Report Server Slowness or Connectivity Problems

How vendor royalties are calculated

How zero dollar transactions are handled

Manage Modular Merchant Account

Microsoft Outlook - Suggested Mail Account Settings

Missing countries & states/provinces at checkout

Mozilla Thunderbird

Password-protect directories using Plesk

Prevent Specific Customers from Editing Their Subscriptions

Prorating subscription products

QR Codes

Search Email Series

Setup a redirect in a store template using PHP

Troubleshooting stuck outgoing emails

Upgrading your Modular Merchant Account Plan

Upload a company logo

What server am I on?