| MMv4 KB |
 |
|
|
Adding a product quantity field to the store's home page |
| Last Edited - 11/8/2013 2:20pm PST | |
| Category Path - Shopping Cart Software Components | |
|
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:
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. |