Implementing nopcart in your RW project

Generally spoken you nopcart can be used with any theme. But as I further enhanced the script (e.g. including mediabox, form validation, AJAX, …) the snippets I distribute only work with themes that uses the mootools framework out of the box. At the moment, the following themes by Rapid Ideas do have mootools included: Diamond, POP, Sphere, Konzern

If you like to use nopcart with other themes you have to add my free mediabox snippet to your project. All snippets can be downloaded from my main business site here:

http://www.richardet-design.com/material/kostenlos.html

Here is an overview of the included Snippets:

nopcartcartcss.rwsnippet
Simple CSS Code which layouts the nopcart shopping cart table. Add this code to the CSS field in the Page Inspector

nopcartcartpagehtml.rwsnippet
This is the HTML sample code for the shopping cart page and needs to be added to the main content of your shopping cart page. Note that as this is HTML code you need to mark the code afterward and disable the formatting (Menu Format -> Ignore Formatting)

nopcartcheckoutcss.rwsnippet
CSS Code for the checkout page

nopcartcheckouthtml.rwsnippet
Example HTML Code for the products page. Needs to be added to the main content.

nopcartcheckoutjavascript.rwsnippet
This Code has to be placed in the Javascript field in the Page Inspector on the checkout page. The code is need for the form validation and the mediabox notification window.

nopcartheaderjsinclude.rwsnippet
To be added to every "shop" page in the Header field in the Page Inspector.

nopcartproductform.rwsnippet
Each product needs to have its own HTML form. This snippet gives you an example form you can add and adjust.

Some scripts needs to be adjusted to your needs:

checkout.php:

$youremail=
Add your mail address (or the address where the order should be sent to)

nopcart.js
Adjust the "Options for everyone" section (Currency, Shipping, …)

You need to have the following 3 pages:

1. Product Page
On the products page you will add your products to be ordered. Note that you can have as many product pages as you like. Just make sure you include the needed javascript files on each products page (as described in the section below).

2. Shopping Cart Page
This page will show the shopping cart contents to the user

3. Checkout Page
On this page the order is placed. The customer is filling out the form here.

For the further descriptions I assume you wont rename the file/folder name in RW (Page Inspector).

You need to add the following scripts to each shop page:

nopcart.js
The main script file

language_xx.js
The localization file.

Please note that not everything is translated yet. If you find some text in a wrong language when testing the shop, you should correct the text in the script files themeself (nopcart.js, checkout.php). The scripts have been translated to german in this package so you probably need to adjust it if you are using any other language.

[1] Add both script files (nopcart.js and language_xx.js) and the "Add to Cart" icon (cart_24x20.jpg) to the page resources in the Page Inspector.

Add the following two lines of code to the "Header" field in the Page Inspector to include the script files in your page:

<script src="assets/language-ge.js"></script>
<script src="assets/nopcart.js"></script>

Each product has its own HTML form which needs to be placed in the main content. You will find a code Template as a snippet. The form will look as in the following example:

<form name=order action="cart.html" onSubmit="AddToCart(this);">
    Product Description<br />
    Amount: <input type=text size=2 maxlength=3 name=QUANTITY onChange=’this.value=CKquantity(this.value)’ value="1" />
    Size: <select name="ADDITIONALINFO">
            <option value="s">S</option>
            <option value="m">M</option>
            <option value="l">L</option>
            <option value="xl">XL</option>
        </select>
<input type="image" src="assets/cart_24x20.jpg" border=0 value="Add to Cart" align=top />
<input type=hidden name="PRICE" value="12.50" />
<input type=hidden name="NAME" value="ProductName" />
<input type=hidden name="ID_NUM" value="ProductID" />
</form>

It is vital that you don’t change the name attributes but the value:

QUANTITY: the product quantity
ADDITIONALINFO: Additional Product Information (e.g. colour, size, …)
PRICE: The price
NAME: the name of the product
ID_NUM: the product ID (needs to be unique)

You can adjust the visual representation of the shopping cart table with CSS. Here is the example code I have added to the snippet:

.nopheader {
    background-color: #dfdfdf;
    padding: 2px 6px;
    color: #333;
}

table {
    background-color: transparent;
    border: none;
    width: 100%;
}

table tr {
    background-color: #f0f0f0;
}

td.nopentry {
    color: #333;
}

td.noptotal * {
    font-weight: bold;
    padding: 2px 6px;
    color: #111;
}

td.noptotal {
    border-top: 2px solid transparent;
}

[1] Add this code to the CSS field in the Page Inspector.

[2] Add the main HTML form code to the main content section. Here’s the example:

<!–Shopping Cart ManageCart Begin–>
<h2 style="margin-top: 20px;">You have the following products in your shopping cart:</h2>
<p>
<FORM ACTION="checkout.html" METHOD="GET" onsubmit="return ValidateCart(this)">    
<SCRIPT>
ManageCart();
</SCRIPT>
<p><em>Shipping costs not included</em></p>
<INPUT type=SUBMIT value=" Checkout " style="margin-top: 20px;">
</FORM>    
<!–Shopping Cart ManageCart End –>
<p><a href="index.html" title="Continue Shopping">Continue Shopping</a></p>

Auch hierfür besteht ein Schnippsel.

To finish you have to adjust the checkout page:

[1] Add the following code to the javascript field in the Page Inspector:

function delCookie (name) {
    var expireNow = new Date();
    document.cookie = name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT" + "; path=/";
}

window.addEvent(‘domready’, function(){
    $(‘mb_response’).setStyle(‘display’,'none’);
    $(‘order’).addEvent(‘submit’, function(e) {
     new Event(e).stop();
     var resp = $(‘mb_response’).empty();
    
     this.send({
     update: resp,
     onComplete: function() {
Mediabox.open(‘#mb_response’, ”, ”);
            if (!($(‘success’))) {
            delCookie(‘NumberOrdered’);
            
}

         }
     });
    });
});

[2] Add (and adjust) the following css code to the CSS field in the Page Inspector:

.nopheader {
    background-color: #dfdfdf;
    padding: 2px 6px;
    color: #333;
}

table {
    background-color: transparent;
    border: none;
    width: 100%;
}

table tr {
    background-color: #f0f0f0;
}

td.nopentry {
    color: #333;
}

td.noptotal * {
    font-weight: bold;
    padding: 2px 6px;
    color: #111;
}

td.noptotal {
    border-top: 2px solid transparent;
}
tr.needed {
    color: #000;
    font-weight: bold;
}

#mb_response {
    color: #ccc;
}

[3] Add the example HTML Code to the main content. The code is also available as a snippet (nopcartcheckouthtml.rwsnippet)

You also need to add the script for the checkout handling. This code is in the "checkout.php" file and needs to be added to the Page Resources. The form targets to that file via the "action" attribute:

<form id="order" action="assets/checkout.php" method="POST" onSubmit="return CheckForm(this)" style="padding-bottom: 20px; padding-top: 20px;">

It is possible to use the script without PHP in case your hosting provider doesn’t support it. There are several possibilities:

1. Using the CGI Perl script (checkout.pl)
If your provider does support CGI scripts you can use this script instead of the PHP script. You just need to add this script instead of "checkout.php" to the Page Resources. You also need to adjust the action value of the HTML form (e.g. action="http://www.mydomain.com/cgi-bin/checkout.pl")

2. Using a form mailer script
Many providers have a script to send forms via e-mail. As this differs a lot between the providers I can’t tell you exactly how to do so. Please contact your provider and ask him. In most cases you only need to adjust the action value of the form (e.g. "/cgi-bin/formmail") and probably add some hidden form fields.

3. Using the client’s mail application
If you are absolutely sure you have no mail script available, you can use the FORM line <form action="mailto:spam@yourdomain.com" enctype="text/plain"> where the email address is your own. This syntax will not work with some browsers/aol