SoftXMLEcart(js) - JavaScript Shopping Cart With PayPal Integration

SoftXMLEcart(js) - easy, xml based ecommerce shopping cart written in JavaScript with built-in PayPal integration.

Advantages of using a SoftXMLEcart(js):

# It is designed to be small, fast, powerful, yet easy to install for even the most novice web designer. Within minutes of installing the cart, you can be selling your products online. All you need to get started is an active PayPal account, the rest applications will do for you.

# The application requires no third party software, all you need is a web browser.

# You do not need to have advanced web hosting that supports server-side programming languages, all that is necessary for the application to work is a client-side language JavaScript and HTML. You just copy the original application files to your server and access the home page in following manner: http://www.yoursite.com/ecartjs/shopcart.htm

Browsers supported:

FireFox [2.0,3.0] Opera [9.63, 9.64] Google Chrome 1.0.154.65 Internet Explorer [6,7] Safari 3.2.1 Netscape Navigator 9.0.0.6 K-Meleon 1.5.3 Maxthon 2.5.1.4751 UNICODE

SoftXMLEcart(js) configuration:

SoftXMLEcart(js) uses the XML file as a data source. "Data.xml" file located in root folder and can be configured to fit your needs:

1) To display the categories and products offered for sale.
2) To design look and feel of the shopping cart.

File structure - Data.xml

This file consist of categories and products, each category can have multiple products.

Setting up categories and products

<category id="1" name="XML Products">
category tag has two must have attributes and multiple product elements:
"id": Unique Identifier, value of this attribute should be unique and not be repeated within category tags
"name": value of this attribute will be displayed as category name on your shopping cart

<product id="1" price="15.55" shippingcost="10.05">
product tag has three must have attributes and three must have child elements:
"id": Unique Identifier, value of this attribute should be unique and not be repeated within product tags
"price": value of this attribute must be a decimal and will be used to calculate cost of this product
"shippingcost": value of this attribute must be a decimal and will be used to calculate shipping cost of this product

<product> tag must have following child elements:
<title>SoftXpath library</title> tag is used to display product name on your shopping cart
<description>some text about javascript library</description> tag is used to display product description on your shopping cart
<image link="http://www.softxml.com" width="181" height="181">images/1369401655_dotpeak_products1.gif</image> tag has three must have attributes
"link": URL to online resource used when user clicks product's image
"width": image width in pixels
"height": image height in pixels

Product's image should be placed in images folder of shopping cart

Designing look and feel of the shopping cart

<cart logo="images/softxmlogo.gif" category-font-family="arial" category-font-size="19px" category-color="#ff0000" product-title-font-family="arial" product-title-font-size="13px" product-title-color="#000000" product-price-font-family="arial" product-price-font-size="13px" product-price-color="#ff0000" product-description-font-family="arial" product-description-font-size="12px" product-description-color="#000000"> tag defines shopping cart logo,colors,fonts and etc..

Data.xml file

<?xml version="1.0" encoding="UTF-8"?>
<cart logo="images/softxmlogo.gif" category-font-family="arial" category-font-size="19px" category-color="#ff0000" product-title-font-family="arial" product-title-font-size="13px" product-title-color="#000000"   product-price-font-family="arial" product-price-font-size="13px" product-price-color="#ff0000"  product-description-font-family="arial"
      product-description-font-size="12px" product-description-color="#000000">
	<category id="1" name="Online Software Programs">
		<product id="1" price="30.00" shippingcost="0.00">
			<title>SoftXpath library</title>
			<description>some text about javascript library</description>
			<image link="" width="181" height="181">images/1369401655_dotpeak_products1.gif</image>
		</product>
		<product id="2" price="29.33" shippingcost="7.56">
			<title>SoftXML library</title>
			<description>some text about javascript library</description>
			<image link="" width="181" height="181">images/secrets.jpg</image>
		</product>
		<product id="3" price="21.33" shippingcost="4.44">
			<title>Bitor excel</title>
			<description>some text about bitor library</description>
			<image link="" width="181" height="181">images/Galaxias.png</image>
		</product>
		<product id="4" price="27.73" shippingcost="6.37">
			<title>FileZilla</title>
			<description>some text about bitor library</description>
			<image link="" width="181" height="181">images/email-product-box.jpg</image>
		</product>
	</category>
	<category id="2" name="Web Tutorials">
		<product id="5" price="41.23" shippingcost="10.00">
			<title>Python tutorials</title>
			<description>some text about javascript library</description>
			<image link="http://www.softxml.com" width="181" height="181">images/psa_wheel.jpg</image>
		</product>
		<product id="6" price="22.39" shippingcost="10.00">
			<title>JScript Tutorials</title>
			<description>some text about javascript library</description>
			<image link="" width="181" height="181">images/xsitepro2.jpg</image>
		</product>
		<product id="7" price="20.19" shippingcost="10.00">
			<title>ASP Tutorials</title>
			<description>some text about ASP library</description>
			<image link="" width="181" height="181">images/quicken-deluxe.jpg</image>
		</product>
		<product id="8" price="26.49" shippingcost="9.90">
			<title>JSP Tutorials</title>
			<description>some text about JSP library</description>
			<image link="" width="181" height="181">images/seo-website-builder-box.jpg</image>
		</product>
		<product id="9" price="26.49" shippingcost="9.90">
			<title>Python Tutorials</title>
			<description>some text about Python library</description>
			<image link="" width="181" height="181">images/instant-software-products.jpg</image>
		</product>
	</category>
	<category id="3" name="XML products">
		<product id="10" price="41.23" shippingcost="7.00">
			<title>XML databases</title>
			<description>some text about javascript library</description>
			<image link="" width="181" height="181">images/35029product-oscommerce-advanced-seo.jpg</image>
		</product>
		<product id="11" price="22.39" shippingcost="5.50">
			<title>XML DStructure</title>
			<description>some text about javascript library</description>
			<image link="" width="181" height="181">images/99100-TrafficBoosterPro-Marketing-SEO-Tool.jpg</image>
		</product>
		<product id="12" price="20.19" shippingcost="10.00">
			<title>XML querytoo</title>
			<description>some text about ASP library</description>
			<image link="" width="181" height="181">images/Frontware_SEO_tools_product.gif</image>
		</product>
		<product id="13" price="24.09" shippingcost="3.99">
			<title>XPATH queryedit</title>
			<description>some text about ASP library</description>
			<image link="" width="181" height="181">images/blocks_image_4_1.png</image>
		</product>
	</category>
</cart>

JavaScript Configuration


                                                        myCart = new SoftXMLCart();   //CREATE instance of shopping cart

                                                        myCart.currency="EUR"   //set currency of your shopping cart, see list of paypal currency codes

                                                        myCart.productsPerRow="4";   //number of products displayed on each row

                                                        myCart.productBGColor="#CCCCCC";   //set background color of product box

                                                        myCart.setDefaultCategoryID("2");   //set default category ID to be displayed

                                                        myCart.setPayPalEmail("info@softxml.com"); //set your paypal email for order process

Useful cart functions


                                                    myCart.js2xml();  //get content of the shopping cart in xml format

                                                    myCart.xml2json();  //get content of the shopping cart in json format

SoftXMLEcart(js) Demo Page

Use this form to send your feedback, bug alerts or questions related to using SoftXMLEcart(js).
If you have implemented SoftXMLEcart(js) in real world web applications, please let us know resource URL so we can include it on SoftXML.

*Name: *Email: *Your Message:

</label>
					      							</fieldset>
					      						</form><br>
					      				
					      					</td>
					      				</tr>
					      			</table>
												</td>
											</tr>
										</TABLE>
									</TD>
								</TR>
							</TBODY>
						</TABLE>
						
					</TD>
				</TR>
			</TBODY>
		</TABLE>
		
		</td>
			</TR>
		</TABLE>
		
		<script>!function(e,t,d,s,a,n,c){e[a]={},e[a].date=(new Date).getTime(),n=t.createElement(d),c=t.getElementsByTagName(d)[0],n.type="text/javascript",n.async=!0,n.src=s,c.parentNode.insertBefore(n,c)}(window,document,"script","https://softxmlcom.push.world/embed.js","pw"),pw.websiteId="ce7c8a034e85bdf1bea45435a096093e551c5a77e7b9380a12ab2d77c73037e3";</script>

<table cellpadding="0" align="center" cellspacing="0" border="0" width="770" class="bottoma">
			<tr>
				<td>	
<table align="center" cellspacing="0" border="0" cellpadding="0" width="770">
	<tbody>
		<tr>
			<td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px;background-color:#7a8ba3;color:white;">™SoftXML.   <a href='http://www.softxml.com/privacystatement.asp' class='white'>Privacy Statement</a>  |  <a href="http://www.softxml.com/articles"  class="white">Article Archive</a>  |  <a href='http://www.softxml.com/developerstore' class='white'>Popular Web Development Books</a>

</td>
			<td style="background-color:#7a8ba3;">
				<div style="position:relative;left:-11px">
					
				</div>
			</td>
			<td width="50px" style="background-color:#7a8ba3;">
				<a href="javascript:window.scrollTo(0,0);" style="color:white;font-size:12px;text-decoration:underline">^Top</a>
			</td>
			<td style="background-color:#7a8ba3;">
				
			</td>
		</tr>
	</tbody>
</table><br/><br/>
</td>
</tr>
</table>
	<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/carlsednaoui/ouibounce/master/test/ouibounce.min.css">
    
    <script type="text/javascript" src="http://www.softxml.com/js/SoftXMLLibasic.js"></script>
    <script language="javascript">
        
				var XMLLib = new SoftXMLLib();
        ajaxObj = XMLLib.createAjaxObject();

}

setTimeout(currys(showhides, messages), 2500);
            }
        }

function currys(func, arg) {
            return function () { func(arg) };
        }

function showhides(msg) {
            document.getElementById("cForm_signup").reset();
            document.getElementById("loading_signup").style.display = "none";
            document.getElementById("sent_signup").getElementsByTagName("td")[0].innerHTML = msg;
            document.getElementById("sent_signup").style.display = "block";
        }
			
    </script>
    <style type="text/css">
        .form-style-6 {
            font: 95% Arial, Helvetica, sans-serif;
            max-width: 300px;
            float: right;
            /* margin: 10px auto; */
            /* padding: 16px; */
            background: #F7F7F7;
        }

.form-style-6 h1 {
            background: #43D1AF;
            padding: 20px 0;
            font-size: 140%;
            font-weight: 300;
            text-align: center;
            color: #fff;
            margin: -16px -16px 16px -16px;
        }

.form-style-6 input[type="text"],
        .form-style-6 input[type="date"],
        .form-style-6 input[type="datetime"],
        .form-style-6 input[type="email"],
        .form-style-6 input[type="number"],
        .form-style-6 input[type="search"],
        .form-style-6 input[type="time"],
        .form-style-6 input[type="url"],
        .form-style-6 textarea,
        .form-style-6 select {
            -webkit-transition: all 0.30s ease-in-out;
            -moz-transition: all 0.30s ease-in-out;
            -ms-transition: all 0.30s ease-in-out;
            -o-transition: all 0.30s ease-in-out;
            outline: none;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            width: 100%;
            background: #fff;
            margin-bottom: 4%;
            border: 1px solid #ccc;
            padding: 3%;
            color: #555;
            font: 95% Arial, Helvetica, sans-serif;
        }

.form-style-6 input[type="text"]:focus,
        .form-style-6 input[type="date"]:focus,
        .form-style-6 input[type="datetime"]:focus,
        .form-style-6 input[type="email"]:focus,
        .form-style-6 input[type="number"]:focus,
        .form-style-6 input[type="search"]:focus,
        .form-style-6 input[type="time"]:focus,
        .form-style-6 input[type="url"]:focus,
        .form-style-6 textarea:focus,
        .form-style-6 select:focus {
            box-shadow: 0 0 5px #43D1AF;
            padding: 3%;
            border: 1px solid #43D1AF;
        }

.form-style-6 input[type="submit"],
        .form-style-6 input[type="button"] {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            width: 100%;
            padding: 3%;
            background: #43D1AF;
            border-bottom: 2px solid #30C29E;
            border-top-style: none;
            border-right-style: none;
            border-left-style: none;
            color: #fff;
        }

.form-style-6 input[type="submit"]:hover,
        .form-style-6 input[type="button"]:hover {
            background: #2EBC99;
        }

#ouibounce-modal form input[type=button] {
            text-transform: uppercase;
            font-weight: 700;
            padding: 12px;
            font-size: 1.1em;
            border-radius: 4px;
            color: #fff;
            background-color: #eb0000;
            border: none;
            cursor: pointer;
            -webkit-font-smoothing: antialiased;
        }

#ouibounce-modal .modal-footer {
            
            bottom: 10px;
            
        }
		#ouibounce-modal p {
			color: #344a5f !important;
		}
		#ouibounce-modal .modal-body {
			padding: 0px !important;
			font-size: 1.4em !important;
		}
		#ouibounce-modal {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
        #ouibounce-modal .modal-title{
            background-color: #7a8ba3 !important;
        }
    </style>

<div style="position:absolute;top:0px;left:0px;visibility:hidden;filter: alpha(opacity=0);-moz-opacity:25;opacity:.00;" id="mypopup">
		<table background="images/boxtitle_bg.gif" style="font-size:12px;color:#597080"
			width="502px" height="20px" border="0" cellpadding="2" cellspacing="2" ID="Table4">
			<tr>
				<td>
					<font style="font-size:11px;color:white;padding-left:5px;color:#01F9EA;font-weight:bold"><span style="color:#ffffff">"SoftXMLEcartJS" - Easy, e-commerce JavaScript shopping cart.</a></span> <span style="position:relative;left:20px"></font></span>
				</td>
				
				<td align=right><span onclick="document.getElementById('mypopup').style.visibility='hidden';isopened=false;"><font style="font-size:11px;color:red;text-decoration:underline;cursor:pointer;font-weight:bold;">Close</font></span></td>
			</tr>
		</table>
		<table style="font-size:11px;color:#597080;line-height:14pt;border-color:#DFDFDF"
			width="320px" style="z-index:125" border="0" bgcolor="#687990" cellpadding="0"
			cellspacing="1" ID="Table7">
			
						
			<tr bgcolor="white">
				<td valign="top" rowspan="2">
					 
					<table width="500" height=250px border="0" cellpadding="4" bgcolor="white" cellspacing="4">
						
						<tr height="10" id="loadings" style="display:none;"><td style='font-size:12px;color:blue;position:relative;top:-6px'>sending... <img  src="images/loading.gif"></td></tr>
						<tr id="sents" style="display:none"><td></td></tr>
						<tr bgcolor="white">
							<td valign="top">
								<form method="post" name="cForm" id="cForm">
								<font style="font-size:12px;color:black;line-height:14pt">
									<span style="color:red;font-weight:bold;">Grab</span> our exclusive and highly requested product - <strong>SoftXMLEcart(js)</strong>!<br/>
									<strong>Attention!</strong> We give away this software absolutely <strong>FREE</strong>.<br/><span style="background-color:yellow;font-weight:bold;color:red;">Remember!</span> We sell this product for <strong>$39.90</strong>.<br/>
									<span style="background-color:yellow;font-weight:bold;color:red;">This offer is valid for a limited period only.</span><br/>
									Just enter your first name and valid email address below, then click the
									"Yes! Give me my SoftXMLEcart(js)" button to get the software for free.<br/><br/>
									
									<table border="0" cellspacing="2" cellpadding="2">
									<tr>
											<td width="27%" height="25" class="arial11" style="color:black;"><strong>Name:</strong></td>
											<td width="73%"><input name="posName" type="text" size="18" ID="posName"/></td>
										</tr>
										<tr>
											<td height="25" class="arial11" style="color:black;"><strong>Email:</strong></td>
											<td><input name="posEmail" type="text" size="18" ID="posEmail"/></td>
										</tr>
										<tr>
											<td height="25" class="arial11" style="color:black;"><strong>Unti Spam Filter:</strong><br/><nobr><i><span style="color:gray;">What year is it? (4 digits)</span></i></nobr></td>
											<td><input name="yearnow" type="text" size="18" ID="yearnow" maxlength="4"/></td>
										</tr>
										<tr>
											<td height="25" class="arial11"> </td>
											<td>
												<input type="button" value="Yes! Give me my SoftXMLEcartJS" onclick="checkFieldss(this.form)"/>
											</td>
										</tr>
										</table> 
										
								</font>
								</form>
							 </td>
						</tr>
					</table>
					<table border="0" width="100%" height="100%" background="images/boxtitle2_bg.gif">
						<tr>
							<td colspan="6" align="center" id="stat" style="font-size:12px;color:red">
							</td>
						</tr>
					</table>
					<table border="0" width="100%" height="100%" background="images/boxtitle2_bg.gif" ID="Table10">
						<tr>
							<td colspan="6" align="center" id="stat" style="font-size:12px;color:red">
							</td>
						</tr>
					</table>
					</div>

</BODY>
</HTML>

JavaScript Shopping Cart ecommerce PayPal