close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Checkbox method for add to cart

Tutorial created by Christopher West, Freelancer Looking for Work

Categories: Data Bridge, eCart

rating

This tutorial will guide you through the process of manually creating an add to cart page for your ecommerce website which will allow you to select multiple products using checkboxes then submitting this selection to the shopping cart.

arrow downSoftware Requirements

Dreamweaver
eCart
Databridge

arrow downPreperation

This tutorial assumes you have an understanding of the the basic features of ecart and databridge and that you have already created/using an apppropriate database for your shopping cart as well as created a cart page. As this tutorial is more for customising the actual product page where the add to cart button would be located on.

Once at the end of this tutorial the basic framework of the server behaviours will look like this:

1. ecart(WebCart)
2. DataAssist Search (rsATC)
3. Recordset (rsItems)
4. Recordset (rsATC)
5. eCart Get From Recordset (WebCart, rsATC)
6. Your HTML code and PHP bindings

WebCart is just the name of the eCart I created as well as rsItems and rsATC are just names I chose for the 2 recordsets I created for this tutorial.


Also make sure that when applying the server behaviours that the below comes before anything else in the page:

php:
<?php require_once('Connections/websitedb.php'); ?>
<?php 
require_once("WA_eCart/WebCart_PHP.php"); ?>
<?php $WebCart
->GetContent(); ?>
<?php 
require_once("webassist/database_management/wada_search.php"); ?>

Step 1: The form

The layout table and form structure I will be using for this tutorial is as follows:

html:
<form method="POST" action="<?php echo $_SERVER["PHP_SELF"]; ?><?php echo (isset($_SERVER["QUERY_STRING"]) && $_SERVER["QUERY_STRING"] != "")?"?".$_SERVER["QUERY_STRING"]:""; ?>">

<table width="600" border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="200"><input name="itemchecked[]" type="checkbox" value=""> </td>
<td width="200" align="right">Quantity:<input name="qty_" type="text" value="1" size="3" ></td>
<td width="200" align="right"></td>
</tr>

</table>

<br>
<input name="WebCartATC" type="submit" value="Add to Cart">

</form>


A few points I would like to make at this point...

1. For the form action, it will be posting to itself.
2. You will notice the checkbox input name contains [] this signifies that the checkbox named 'itemchecked' will act as an array since we will be passing multiple instances of checked items to the shopping cart at once.
3. The last point to mention is the input for Quantity, Since this tutorial will also feature the ability to add multiple quantities of the same item to the shopping cart then we will need to pass in the individual item ID value to this input.

Step 2: The recordsets

We will require 2 recordsets for this tutorial.

The first being the main recordset that will contain any filters you require (such as filtering for categories if its a last catelogue of items in your store)

The second recordset will contain an un-filtered version of the above (this will be required for the search filter that will be explained futher on)

Step 3: The bindings

Next we need to add the bindings to the layout and form.

Since we have two recordsets it needs to be made clear which recordset does what.


rsItems - this recordset is used for display output, so it is this we will be creating the bindings of the table and form in the code provided previously.

rsATC - (ATC just stands for Add to Cart so its just a reference for this tutorial) This recordset will be used to filter the checkboxes using the DataAssist Search server behaviour.

So using the bindings panel and making sure you only use the bindings for the rsItems recordset set up your display, making sure specifically you bind the following form elements as well...

1. Bind the ID of the rsItems recordset for the value of the input checkbox

2. Bind the ID of the rsItems recordset to 'qty_' which forms the name of the quantity input box.

Since you will have have multiple items you will need to add a repeat region inside the <table> and </table> tags

Your final code should look like this:

<form method="POST" action="<?php echo $_SERVER["PHP_SELF"]; ?><?php echo (isset($_SERVER["QUERY_STRING"]) && $_SERVER["QUERY_STRING"] != "")?"?".$_SERVER["QUERY_STRING"]:""; ?>"><table width="600" border="0" cellspacing="0" cellpadding="0">
<?php do { ?>
<tr>
<td width="200"><input name="itemchecked[]" type="checkbox" value="<?php echo $row_rsItems['ItemID']; ?>"> <?php echo $row_rsItems['ItemName']; ?></td>
<td width="200" align="right">Quantity:<input name="qty_<?php echo $row_rsItems['ItemID']; ?>" type="text" value="1" size="3" ></td>
<td width="200" align="right"><?php echo WA_eCart_DisplayMoney($WebCart, $row_rsItems['ItemPrice']); ?></td>
</tr>
<?php } while ($row_rsItems = mysql_fetch_assoc($rsItems)); ?>
</table>
<br>
<input name="WebCartATC" type="submit" value="Add to Cart">
</form>

arrow downFiltering the Checkbox

Before the items are added to the shopping cart, we need someway of filtering the checkboxes on the form..,this can be done by using the DataAssist Search server behaviour.

Step 1: Adding the DataAssist Search Behaviour

From the Dreamweaver Server Behaviours Panel, locate and select the DataAssist Search server behaviour.

WebAssist -> DataAssist -> DataAssist Search

Step 2: Configure the DataAssist Search

1. Set the Trigger to the Button (However its not really necessary since you can just simple select any form post (However I always make it good practice to be specific with form submits buttons)
2. For the recordset select the rsATC recordset.
3. For the Default WHERE clause - make sure you enter 0=1
4. Now click on the + icon


5. Seperate - Leave on default
6. Column - Select ItemID
7. Column Type - Leave on default (Number/Boolean)
8. Comparison - Leave on default (=)
9. Filter Type - Make sure you have selected List

Even though we are using a checkbox - List is important here since you can regard a series of checkboxes on the page as a list!


10. List field name - The name of the input checkbox on the HTML form, in this case the name being, 'itemchecked'.

Make sure you dont type in the leading [] (as was used on the HTML form) as its not applicable here!


11. Click Finish

arrow downAdding To Cart

Now the custom part which replaces the initial 'Add To Cart ' server behaviour that you would have normally used.

Step 1: Locating the Get Contents From Recordset Server Behaviour

From the Server Behaviours panel click on the + to add a new server behaviour and navigate to:

eCart -> Add to Cart -> Get Contents From Recordset

Step 2: Configure the Get Contents From Recordset Server Behaviour

As before as a code of practice I would select the button as the Trigger and again making sure you use the rsATC recordset for this server behaviour's recordset.

Then using the lightening bolt and making sure you use the bindings from the rsATC recordset fill in each of the Values for the corrisponding Cart Columns.

When you get to Quantity you will need to enter the form input binding, however as this has no named value you will need to manually enter it in rather then selecting it..so copy and paste this for the Value of the Quantity Cart column:

php:
<?php echo ((isset($_POST["qty_".$row_rsATC['ItemID']]))?$_POST["qty_".$row_rsATC['ItemID']]:""); ?>


For the 'After operating' Redirect - Enter the page that will display the shopping cart (Usually cart.php)


Now click on OK and your done!

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
rating

CraigR: 3 Years, 9 Months, 3 Weeks, 5 Days, 7 Hours, 53 Minutes ago

Hi Christopher,

Have you ever tried achieving the same result, but instead of using checkboxes, check that the value of the quantity field is > 0 ?

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.