Shopping Cart Software - Home
Shopping Cart Software CRM Sales Office Affiliate Referral Tracking Digital Product Delivery
 
Client Resources >>>
Software Updates Tech Tips
 
 

Select Product Attributes For Order link Buy Buttons

Product attributes are optionally set for each product by the administrator. Order links may be used to provide drop-down selection boxes for customers to choose from preset product attributes such as color, size, style, format, etc. The attribute(s) selected for each product are saved in the order record and included in receipts, order notices, and purchase orders (eMerchant). Attributes may also be used in conjunction with automated fulfilment options to activate or complete pre-programmed tasks. (Automated fulfilment will be explained more in another tech tip:-)

Set Up Attribute and Alternatives For Product

In addition to descriptions, product attribute alternatives may be used to specify ordering and delivery options such as which product file(s) are included with the product, and to override shipping and sales tax. This article only briefly discusses attribute alternatives for the purpose of using Order-Link. For more information about how to create product attributes and configure alternatives see the attributes help topic.

The music product in this example has three alternatives: download a wma file, download an mp3 file, or receive shipment on a CD. The product is configured with; two product files, sales taxable, and flat rate shipping.

Music Product

Product Files

Product files are assigned to each alternative and shipping and sales tax are overridden for each alternative as needed so that a specific product file is delivered with each downloadable alternative and so that shipping and sales tax are only applied to the CD alternative.

Attributes

Get Order-Link Code

Navigate to the product listing in Edit Catalog. Click on the link icon in the upper right corner of the product listing to open the Order-Link code window. Copy the form code from the pop-up window.

Link Code Generator

Insert Order-Link Form Code Into Web Page

Open the web page in an HTML editor. Paste the Order-Link form code into the source code of the body of the page. In Dreamweaver this can be done from the WYSIWYG view by clicking in page where the form goes and then Ctrl + Shift + V (paste code) or from the code view using Ctrl + V (paste text).

Add Link Code

Here is HTML code as it was copied from an Order-Link code generator.

<form action="http://www.ashopsoftware.com/deluxe-demo/shipping.php" method="post">
<input type="hidden" name="product" value="12">
Quantity:
<input type="text" name="quantity" size="5" value="1">
<br>
<br>
Song Format:
<select name="attribute6">
<option value="12">MP3 download
<option value="13">WMA download
<option value="14">Shippable CD Single
</select>
<br>
<br>
<input type="submit" value="Buy now">
</form>

Change the form action URL as needed depending on where the page is to be located relative to the shopping cart installation. If the page is on a different site, the form action URL must be absolute. For instance http://www.yoursite.com/shipping.php

Here is the resulting form.

Quantity:

Song Format:

Insert Parameter For Add To Cart (for multiple product orders)

The form from from the Order-Link code generator is a Buy Now button, which is for single item orders. It clears the basket contents and adds that one product. To keep each product that is added to the cart and add more than one product, a hidden "add" field must be included in the form.

<input type="hidden" name="add" value="1">

Modify Form To Fit Page Layout

Hide Quantity Field
To set the quantity to 1 and hide the quantity box, change the quantity form field type to "hidden" and remove the size parameter.

Before: <input type="text" name="quantity" size="5" value="1">

After: <input type="hidden" name="quantity" value="1">

Use An Image Instead Of Generic Form Button
To use an image instead of a generic form button, change the submit button input type from "submit" to "image" and insert an image URL.

Before: <input type="submit" value="Buy now">

After: <input type="image" border="0" name="imageField" src="../images/buysp-en.gif">

Align Buy Button And Input Field
Remove the break tags to align the input field and the buy button.

<form action="http://www.ashopsoftware.com/deluxe-demo/shipping.php" method="post">
<input type="hidden" name="product" value="12">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="add" value="1">
Song Format:
<select name="attribute6">
<option value="12">MP3 download
<option value="13">WMA download
<option value="14">Shippable CD Single
</select>
<input type="image" border="0" name="imageField" src="../images/buysp-en.gif">
</form>

Song Format:

Insert Form Objects Into Table
For more precise alignment of the text field and button image, create a table with at least two columns and put the form objects in separate table cells. Also, forms can sometimes prevent tight adjustment of table row height. If this is an issue, hide the form tags between the <table> and <tr> tags.

<table width="400" cellspacing="0" cellpadding="2">
<form action="http://www.ashopsoftware.com/deluxe-demo/shipping.php" method="post">
<input type="hidden" name="product" value="12">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="add" value="1">
<tr><td align="right">
<p>Song Format:
<select name="attribute6">
<option value="12">MP3 download
<option value="13">WMA download
<option value="14">Shippable CD Single
</select></p>
</td><td>
<input type="image" border="0" name="imageField" src="../images/buysp-en.gif">
</td></tr></form></table>

Song Format:

Form validation may be added using Dreamweaver behavior tools or whatever other form tools may be included with the HTML editor program that you use.

See also: Order-Link Basics | Order-Link Help Topic

Basic Buy and Add To Cart Links Using Order-Link

Add Buy buttons, View Cart and Check Out links into an existing web page using Order-Link.

Order-Link Buy Button With Customer Input Field

Select From Attribute Alternatives Using Order-Link

 
 
frame top
AShop
Automated Online Order and Payment Processing System.
Select topic.Shopping Cart Tour
Select topic.Frequently Asked Questions
Select topic.AShop Forum

Sales Office
Multi-user Sales System
Automated Shopping Cart
PLUS Backend Sales Office
with: Order Entry - Invoicing Vendors - Purchase Orders
Order Tracking - Vendor Bills
Select topic.Sales Office Tour

Shopping Mall
Members join and contribute products, then earn commissions from sales. Options for individual shops or one main shop where customers select and order member products.
Select topic.Shopping Mall Tour

Clients & Partners
Select topic.Clients
Select topic.Affiliates
Select topic.Resellers

Downloads and Services
Select topic.File Downloads & Trials
Select topic.Installation Service
Select topic.Request Tech Support
Select topic.Buy Products & Services

Company
Select topic.About Us
Select topic.Contact Us
Select topic.Privacy & Security Policies

Resources
Select topic.Web Hosting Services
Select topic.Payment Services
Select topic.eCommerce Tools
frame bottom
AShop Software © copyright 2002 - 2011  
AShop Software Swedish