The Single Responsibility (SRP), Open/Closed (OCP), Liskov Substitution, Interface Segregation, and Dependency Inversion. Five agile principles that should guide you every time you write code.

It would be unjust to tell you that any one of the SOLID principles is more important than another. However, probably none of the others have such an immediate and profound effect on your code than the Dependency Inversion Principle, or DIP in short. If you find the other principles hard to grasp or apply, start with this one and apply the rest on code that already respects DIP.

Definition

A. High-level modules should not depend on low-level modules. Both should depend on abstractions.
B. Abstractions should not depend upon details. Details should depend upon abstractions.

This principle was defined by Robert C. Martin in his book Agile Software Development, Principles, Patterns, and Practices and later republished in the C# version of the book Agile Principles, Patterns, and Practices in C#, and it is the last of the five SOLID agile principles.

DIP in the Real World

Before we start coding, I would like to tell you a story. At Syneto, we weren't always so careful with our code. A few years ago we knew less and even though we tried to do our best, not all of our projects were so nice. We went through hell and back again and we learned many things by trial and error.

The SOLID principles and the clean architecture principles of Uncle Bob (Robert C. Martin) became a game changer for us and transformed our way of coding in ways that are hard to describe. I will try to exemplify, in a nutshell, a few key architectural decisions imposed by DIP that had a great impact on our projects.

Most web projects contain three main technologies: HTML, PHP, and SQL. The particular version of these applications we are talking about or what type of SQL implementations you use is irrelevant. The thing is, that information from an HTML form must end up, in one way or another, in the database. The glue between the two can be provided with PHP.

What is essential to take away from this, is that how nicely the three technologies represent three different architectural layers: user interface, business logic, and persistence. We will talk about the implications of these layers in a minute. For now, let's focus on some odd but frequently encountered solutions to make the technologies work together.

Many times I've seen projects that used SQL code in a PHP tag inside an HTML file, or PHP code echoing pages and pages of HTML and interpreting directly the $_GET or $_POST global variables. But why is this bad?

The images above represent a raw version of what we described in the previous paragraph. The arrows represent various dependencies, and as we can conclude, basically everything depends on everything. If we need to change a database table, we may end up editing an HTML file. Or if we change a field in HTML, we may end up changing the name of a column in an SQL statement. Or if we look at the second schema, we may very well need to modify our PHP if the HTML changes, or in very bad cases, when we generate all HTML content from inside a PHP file we will surely need to change a PHP file to modify HTML content. So, there is no doubt, the dependencies are zigzagging between the classes and modules. But it doesn't end here. You can store procedures; PHP code in SQL tables.

In the schema above, queries to the SQL database return PHP code generated with data from the tables. These PHP functions or classes are doing other SQL queries which are returning different PHP code, and the cycle continues until finally all the information is obtained and returned... probably to the UI.

I know this may sound outrageous to many of you, but if you have not yet worked with a project invented and implemented in this manner, you surely will in your future career. Most existing projects, regardless of the programming languages used, were written with old principles in mind, by programmers who did not care or know enough to do better. If you are reading these tutorials, you are most likely a level higher than that. You are ready, or getting ready to respect your profession, to embrace your craft, and to do better.

The other option is to repeat the mistakes your predecessors made and live with the consequences. At Syneto, after one of our projects reached an almost unmaintainable state because of its old and cross-dependent architecture and we had to basically abandon it forever, we decided to never go back down that road again. Since then, we have striven to have a clean architecture which correctly respects the SOLID principles, and most importantly the Dependency Inversion Principle.

What's so amazing about this architecture is how the dependencies are pointing:

• The user interface (in most cases a web MVC framework) or whatever other delivery mechanism there is for your project will depend on the business logic. Business logic is quite abstract. A user interface is very concrete. The UI is just a detail for the project, and it is also very volatile. Nothing should depend on the UI, nothing should depend on your MVC framework.
• The other interesting observation we can make is that the persistence, the database, your MySQL or PostgreSQL, depends on the business logic. Your business logic is database agnostic. This allows exchanging persistence as you wish. If tomorrow you want to change MySQL with PostgreSQL or just plain text files, you can do that. You will, of course, need to implement a specific persistence layer for the new persistence method, but you will not need to modify a single line of code in your business logic. There is a more detailed explanation on the persistence topic in the Evolving Toward a Persistence Layer tutorial.
• Finally, on the right of the business logic, outside of it, we have all the classes that are creating business logic classes. These are factories and classes created by the entry point to our application. Many people tend to think these belong to the business logic, but while they are creating business objects, their sole reason is to do this. They are classes just to help us create other classes. The business objects and the logic they provide are independent of these factories. We could use different patterns, like Simple Factory, Abstract Factory, Builder or plain object creation to provide the business logic. It doesn't matter. Once the business objects are created they can do their job.

Show Me the Code

Applying the Dependency Inversion Principle (DIP) at an architectural level is quite easy if you respect the classic agile design patterns. Exercising and exemplifying it inside the business logic is quite easy also and can even be fun. We will imagine an e-book reader application.

class Test extends PHPUnit_Framework_TestCase {
    
    	function testItCanReadAPDFBook() {
    		$b = new PDFBook();
    		$r = new PDFReader($b);
    
    		$this->assertRegExp('/pdf book/', $r->read());
    	}
    
    }
    
    class PDFReader {
    
    	private $book;
    
    	function __construct(PDFBook $book) {
    		$this->book = $book;
    	}
    
    	function read() {
    		return $this->book->read();
    	}
    
    }
    
    class PDFBook {
    
    	function read() {
    		return "reading a pdf book.";
    	}
    }

We start developing our e-reader as a PDF reader. So far so good. We have a PDFReader class using a PDFBook. The read() function on the reader delegates to the book's read() method. We just verify this by doing a regex check after a key part of the string returned by PDFBook's reader() method.

Please bear in mind that this is just an example. We will not implement the reading logic of PDF files or other file formats. That's why our tests will just simply check for some basic strings. If we were to write the real application, the only difference would be how we test the different file formats. The dependency structure would be very similar to our example.

Having a PDF reader using a PDF book may be a sound solution for a limited application. If our scope was to write a PDF reader and nothing more, it would actually be an acceptable solution. But we want to write a generic e-book reader, supporting several formats, amongst which our first implemented version PDF. Let's rename our reader class.

class Test extends PHPUnit_Framework_TestCase {
    
    	function testItCanReadAPDFBook() {
    		$b = new PDFBook();
    		$r = new EBookReader($b);
    
    		$this->assertRegExp('/pdf book/', $r->read());
    	}
    
    }
    
    class EBookReader {
    
    	private $book;
    
    	function __construct(PDFBook $book) {
    		$this->book = $book;
    	}
    
    	function read() {
    		return $this->book->read();
    	}
    
    }
    
    class PDFBook {
    
    	function read() {
    		return "reading a pdf book.";
    	}
    }

Renaming had no functional counter effects. The tests are still passing.

Testing started at 1:04 PM ...
PHPUnit 3.7.28 by Sebastian Bergmann.
Time: 13 ms, Memory: 2.50Mb
OK (1 test, 1 assertion)
Process finished with exit code 0

But it has a serious design effect.

Our reader became much more abstract. Much more general. We have a generic EBookReader that uses a very specific book type, PDFBook. An abstraction depends on a detail. The fact that our book is of type PDF should only be a detail, and no one should depend on it.

class Test extends PHPUnit_Framework_TestCase {
    
    	function testItCanReadAPDFBook() {
    		$b = new PDFBook();
    		$r = new EBookReader($b);
    
    		$this->assertRegExp('/pdf book/', $r->read());
    	}
    
    }
    
    interface EBook {
    	function read();
    }
    
    class EBookReader {
    
    	private $book;
    
    	function __construct(EBook $book) {
    		$this->book = $book;
    	}
    
    	function read() {
    		return $this->book->read();
    	}
    
    }
    
    class PDFBook implements EBook{
    
    	function read() {
    		return "reading a pdf book.";
    	}
    }

The most common, and most frequently used solution to invert the dependency is to introduce a more abstract module in our design. "The most abstract element in OOP is an Interface. Thus, any other class can depend on an Interface and still respect DIP".

We created an interface for our reader. The interface is called EBook and represents the needs of the EBookReader. This is a direct result of respecting the Interface Segregation Principle (ISP) which promotes the idea that interfaces should reflect the needs of the clients. Interfaces belong to the clients, and thus they are named to reflect the types and objects the clients need and they will contain methods the clients wants to use. It is only natural for an EBookReader to use EBooks and have a read() method.

Instead of a single dependency, we have two dependencies now.

• The first dependency points from EBookReader toward the EBook interface and it is of type usage. EBookReader uses EBooks.
• The second dependency is different. It points from PDFBook toward the same EBook interface but it is of type implementation. A PDFBook is just a particular form of EBook, and thus implements that interface to satisfy the client's needs.

Unsurprisingly, this solution also allows us to plug in different types of ebooks into our reader. The single condition for all these books is to satisfy the EBook interface and implement it.

class Test extends PHPUnit_Framework_TestCase {
    
    	function testItCanReadAPDFBook() {
    		$b = new PDFBook();
    		$r = new EBookReader($b);
    
    		$this->assertRegExp('/pdf book/', $r->read());
    	}
    
    	function testItCanReadAMobiBook() {
    		$b = new MobiBook();
    		$r = new EBookReader($b);
    
    		$this->assertRegExp('/mobi book/', $r->read());
    	}
    
    }
    
    interface EBook {
    	function read();
    }
    
    class EBookReader {
    
    	private $book;
    
    	function __construct(EBook $book) {
    		$this->book = $book;
    	}
    
    	function read() {
    		return $this->book->read();
    	}
    
    }
    
    class PDFBook implements EBook {
    
    	function read() {
    		return "reading a pdf book.";
    	}
    }
    
    class MobiBook implements EBook {
    
    	function read() {
    		return "reading a mobi book.";
    	}
    }

Which in turn leads us to The Open/Closed Principle, and the circle is closed.

The Dependency Inversion Principle is one that leads or helps us respect all the other principles. Respecting DIP will:

• Almost force you into respecting OCP.
• Allow you to separate responsibilities.
• Make you correctly use subtyping.
• Offer you the opportunity to segregate your interfaces.

Final Thoughts

That's it. We are done. All tutorials about the SOLID principles are complete. For me, personally, discovering these principles and implementing projects with them in mind was a huge change. I completely changed the way I think about design and architecture and I can say since then all the projects I work on are exponentially easier to manage and understand.

I consider the SOLID principles one of the most essential concepts of object-oriented design. These concepts that must guide us in making our code better and our life as programmers much much easier. Well-designed code is easier for programmers to understand. Computers are smart, they can understand code regardless of its complexity. Human beings on the other hand have a limited number of things they can keep in their active, focused mind. More specifically, the number of such things is The Magical Number Seven, Plus or Minus Two.

We should strive to have our code structured around these numbers and there are several techniques that help us do so. Functions with a maximum of four lines in length (five with the definition line included) so that they can all fit at once within our mind. Indentations not passing five levels deep. Classes with no more than nine methods. Design patterns that usually use a number of five to nine classes. Our high level design in the schemas above uses four to five concepts. There are five SOLID principles, each requiring five to nine sub-concepts/modules/classes to be exemplified. The ideal size of a programming team is between five and nine. The ideal number of teams in a company is between five and nine.

As you can see, the magical number seven, plus or minus two is all around us, so why should your code be different?

Much of the editing work on Wikipedia is too mind-numbingly repetitive for humans, so automated bots do it instead. But keeping track of automated editing has always been hard … until now.

In a little over a decade, Wikipedia has evolved from an Internet experiment into a global crowdsourcing phenomenon. Today, this online encyclopedia provides free access to more than 30 million articles in 287 languages.

Session storage is a new feature introduced by the W3C’s “Web Storage” specification. It’s supported in Internet Explorer 8+, Firefox, Chrome, Safari and Opera Desktop (for a complete list, please consult “Can I Use”). In this series of articles, we’ll cover in depth a practical implementation of session storage by creating a complete e-commerce shopping cart with the sessionStorage object and jQuery.

Bear in mind that, in these articles, I’m not going to propose a new technique to replace existing server-side techniques, but rather just a proof of concept of session storage.

Session Storage: A Quick Reminder

We use sessions to store data and share such data across several pages. Usually, a user would pick a product, and we’d save the product’s name along with the chosen quantity and price.

Then, the user would fill out a form with their personal information, and we’d save it in the current session before the end of the process, which is typically the checkout page and the subsequent redirection to the payment gateway (for example, PayPal).

How are shopping carts built? PHP, for instance, makes frequent use of associative arrays to create the basic structure of a shopping cart. Associative arrays enable PHP Web developers to keep session data structured and organized.

JavaScript sessions work differently. Generally, a session expires when the user closes their browser (but bear in mind that the concept of “closing a browser” is not clear on mobile devices). When a session expires, all data stored in the session storage of a Web browser is removed. There’s no need to explicitly initialize a session because in JavaScript a session takes the form of the global sessionStorage object and is always present. It’s up to us to write data into the current session.

Session data comes in the form of key-value pairs, and the value of each key may contain only strings. To write data, we can use the sessionStorage.setItem( name, value ) method:

    sessionStorage.setItem( "total", 120 );
    

In this case, the key named total now contains the value 120 as a string, although we’ve used an integer in our call to the .setItem() method. This value will be available until the session expires, unless we use sessionStorage.removeItem( "total" ) to remove the named key or we call sessionStorage.clear() to entirely remove all keys and values from the session storage.

Note that when a key doesn’t exist in session storage, its value is always null. Then, when we remove a key from session storage and try again to get its value, we’d simply get null.

As you may have guessed, our key now is always available, even as the user navigates the pages of our website. To get its value, we simply write the following:

    var total = sessionStorage.getItem( "total" );
    console.log( total ); // '120', a string
    

We can also update its value by using sessionStorage.setItem() again with a new value:

    var total = parseInt( sessionStorage.getItem( "total" ) );
    var quantity = 2;
    var updatedTotal = total * quantity;
    sessionStorage.setItem( "total", updatedTotal ); // '240', a string
    

Now, the key named total has a value of 240 with our last update. Why did we call parseInt()? This is a simple technique to convert a numerical string into a true number, ensuring that our calculation will be consistent. Remember that all values in session storage are strings, and our calculations must be between only numbers.

But wait! What about objects? Objects may be stored in session storage by first turning them into JSON strings (with JSON.stringify()) and then back into JavaScript objects (with JSON.parse()):

    var cart = {
    	item: "Product 1",
    	price: 35.50,
    	qty: 2
    };
    var jsonStr = JSON.stringify( cart );
    sessionStorage.setItem( "cart", jsonStr );
    // now the cart is {"item":"Product 1","price":35.50,"qty":2}
    var cartValue = sessionStorage.getItem( "cart" );
    var cartObj = JSON.parse( cartValue );
    // original object
    

To update our object, we simply extend it and then repeat the procedure above.

Security Considerations

Security is important. If we read the security notes of the W3C’s specification, then we’d be aware of the security risks of even a client-side technology such as Web storage.

The US Computer Emergency Readiness Team’s technical paper on website security (PDF) clearly states:

“Every community organization, corporation, business, or government agency relies on an outward-facing website to provide information about themselves, announce an event, or sell a product or service. Consequently, public-facing websites are often the most targeted attack vectors for malicious activity.”

Even if a browser session ends when the browser itself is closed, malicious attacks can still take place, especially if the browser has been compromised by certain exploits. Moreover, compromised websites can often be used to spread malware that targets particular browsers.

For this reason, make sure your website is safe before relying on any technique to store data in the browser. Keeping a website safe is beyond the scope of this article, but by simply following security best practices, you should be able to benefit from Web storage without worrying too much about its security implications.

Our Sample Project: Winery

Our sample project is an online store that sells wine. It’s a simple e-commerce website whose only complication is in how its shipping charges are calculated.

In short, wines are sold in packages of six bottles. This means that the total quantity of bottles sold must always be in multiples of six. Shipping charges are calculated, then, according to the total quantity of bottles sold.

Our store will rely on PayPal, so we’ll have to create a Business account in PayPal Sandbox to test our code.

The user may add and remove products from their shopping cart, update the cart, change the quantity of each product, and empty the cart. They have to fill a form with their contact information, specifying whether their billing address is the same as their shipping address.

Before being redirected to PayPal, the user will see a summary page with their personal data, their cart, and the cart’s total price plus shipping charges.

After completing their purchase, the user should be redirected back to our website. This is the only step of the process that we can’t handle only with JavaScript. PayPal will send back various data over an HTTP request that has to be processed with a server-side language (such as PHP). If you need more information to get started with this kind of processing, please consult PayPal’s tutorial.

HTML Structure

Our project is made up of the following sections:

• index.html
  This contains the list from which users may add products to their shopping cart, specifying the quantity for each product.
• cart.html
  This is the shopping cart page where users may update or empty their cart. Alternatively, they can go back to the main page to continue shopping or proceed to the checkout page.
• checkout.html
  On this page, users fill out a form with their personal information — specifically, their billing and shipping addresses.
• order.html
  This page contains a brief summary of the user’s order plus the PayPal form. Once a user submits the form, they will be redirected to PayPal’s landing page.

We’ll go over the markup for this project in the following sections.

index.html

The main components of this page are the forms that enable the user to add products to their shopping cart.

    <div class="product-description" data-name="Wine #1" data-price="5">
    	<h3 class="product-name">Wine #1</h3>
    		<p class="product-price">&euro; 5</p>
    		<form class="add-to-cart" action="cart.html" method="post">
    			<div>
    				<label for="qty-1">Quantity</label>
    				<input type="text" name="qty-1" id="qty-1" class="qty" value="1" />
    			</div>
    			<p><input type="submit" value="Add to cart" class="btn" /></p>
    		</form>
    </div>
    

The data attributes used here for storing product names and prices can be accessed via jQuery using the .data() and $.data() methods.

cart.html

Our shopping cart page is made up of three components: a table with the product’s information, an element that displays the subtotal, and a list
of cart actions.

    <form id="shopping-cart" action="cart.html" method="post">
    	<table class="shopping-cart">
    		<thead>
    			<tr>
    				<th scope="col">Item</th>
    				<th scope="col">Qty</th>
    				<th scope="col">Price</th>
    			</tr>
    		</thead>
    		<tbody></tbody>
    	</table>
    	<p id="sub-total">
    		<strong>Sub Total</strong>: <span id="stotal"></span>
    	</p>
    	<ul id="shopping-cart-actions">
    		<li>
    			<input type="submit" name="update" id="update-cart" class="btn" value="Update Cart" />
    		</li>
    		<li>
    			<input type="submit" name="delete" id="empty-cart" class="btn" value="Empty Cart" />
    		</li>
    		<li>
    			<a href="index.html" class="btn">Continue Shopping</a>
    		</li>
    		<li>
    			<a href="checkout.html" class="btn">Go To Checkout</a>
    		</li>
    	</ul>
    </form>
    

The table contained in this page is empty, and we’ll fill it with data via JavaScript. The element that displays the subtotal works just as a placeholder for JavaScript. The first two actions, “Update Cart” and “Empty Cart,” will be handled by JavaScript, while the latter two actions are just plain links to the product’s list page and the checkout page, respectively.

checkout.html

This page has four components:

• a table that shows the ordered items (the same table shown earlier in the shopping cart section), plus the final price and shipping charges;
• a form in which the user must fill in their billing details;
• a form with shipping information;
• a checkbox to enable the user to specify that their billing details are the same as their shipping details.

    <table id="checkout-cart" class="shopping-cart">
    	<thead>
    		<tr>
    			<th scope="col">Item</th>
    			<th scope="col">Qty</th>
    			<th scope="col">Price</th>
    		</tr>
    	</thead>
    	<tbody>
    
    	</tbody>
    </table>
    
    <div id="pricing">
    	<p id="shipping">
    		<strong>Shipping</strong>: <span id="sshipping"></span>
    	</p>
    			
    	<p id="sub-total">
    		<strong>Total</strong>: <span id="stotal"></span>
    	</p>
    </div>
    		 
    <form action="order.html" method="post" id="checkout-order-form">
    	<h2>Your Details</h2>
    		<fieldset id="fieldset-billing">
    			<legend>Billing</legend>
    				<!-- Name, Email, City, Address, ZIP Code, Country (select box) -->
    
    <div>
    	<label for="name">Name</label>
    	<input type="text" name="name" id="name" data-type="string" data-message="This field may not be empty" />
    </div>
    
    <div>
    	<label for="email">Email</label>
    	<input type="text" name="email" id="email" data-type="expression" data-message="Not a valid email address" />
    </div>
    
    <div>
    	<label for="city">City</label>
    	<input type="text" name="city" id="city" data-type="string" data-message="This field may not be empty" />
    </div>
    
    <div>
    	<label for="address">Address</label>
    		<input type="text" name="address" id="address" data-type="string" data-message="This field may not be empty" />
    </div>
    
    <div>
    	<label for="zip">ZIP Code</label>
    	<input type="text" name="zip" id="zip" data-type="string" data-message="This field may not be empty" />
    </div>
    
    <div>
    	<label for="country">Country</label>
    		<select name="country" id="country" data-type="string" data-message="This field may not be empty">
    			<option value="">Select</option>
    			<option value="US">USA</option>
    			<option value="IT">Italy</option>
    		</select>
    </div>
    </fieldset>
    
    <div id="shipping-same">Same as Billing <input type="checkbox" id="same-as-billing" value=""/></div>
    
    <fieldset id="fieldset-shipping">
    <legend>Shipping</legend>
    	<!-- Same fields as billing -->
    </fieldset>
    
    <p><input type="submit" id="submit-order" value="Submit" class="btn" /></p>
    
    </form>
    

Data attributes are used here for validation. The data-type attribute specifies the type of data we’re validating, and data-message contains the error message to be shown in case of failure.

I didn’t use the email validation built into Web browsers just for the sake of simplicity, but you could use it if you want.

order.html

This final page contains a brief recap of the user’s order, their details and the PayPal form.

    <h1>Your Order</h1>
    
    <table id="checkout-cart" class="shopping-cart">
    	<thead>
    		<tr>
    			<th scope="col">Item</th>
    			<th scope="col">Qty</th>
    			<th scope="col">Price</th>
    		</tr>
    	</thead>
    	<tbody>
    	</tbody>
    </table>
    
    <div id="pricing">
    	<p id="shipping">
    		<strong>Shipping</strong>: <span id="sshipping"></span>
    	</p>
    
    	<p id="sub-total">
    		<strong>Total</strong>: <span id="stotal"></span>
    	</p>
    </div>
    
    <div id="user-details">
    	<h2>Your Data</h2>
    		<div id="user-details-content"></div>
    </div>
    
    		 
    <form id="paypal-form" action="" method="post">
    	<input type="hidden" name="cmd" value="_cart" />
    	<input type="hidden" name="upload" value="1" />
    	<input type="hidden" name="business" value="" />
    
    	<input type="hidden" name="currency_code" value="" />
    	<input type="submit" id="paypal-btn" class="btn" value="Pay with PayPal" />
    </form>
    

The PayPal form and other elements of this page are initially empty, except for those fields that don’t need to be generated dynamically.

JavaScript Code

The CSS layout of this project will have no actual influence on the goal we want to achieve. Even if we disabled CSS entirely, the project would continue to function, thanks to the strong relationship between the HTML’s structure and the JavaScript’s behavior.

We’ll use an object-oriented approach because of the complexity of our goals. Our object will be based on a simple constructional pattern and will use both private and public methods.

Object Structure

Our object has a very simple structure. The constructor function both initializes the top-level element that wraps our DOM’s entire structure and invokes the initialization method.

    (function( $ ) {
    	$.Shop = function( element ) {
    		this.$element = $( element ); // top-level element
    		this.init();
    	};
    
    	$.Shop.prototype = {
    		init: function() {
    			// initializes properties and methods
    		}
    	};
    
    	$(function() {
    		var shop = new $.Shop( "#site" ); // object's instance
    	});
    
    })( jQuery );
    

The object’s instance is created when the DOM is ready. We can test that everything has worked fine as follows:

    $(function() {
    	var shop = new $.Shop( "#site" );
    	console.log( shop.$element );
    });
    

This outputs the following:

    x.fn.x.init[1]
    	0: div#site
    	context: document
    	length: 1
    	selector: "#site"
    

Now that we know our object has been instantiated correctly, we can define its properties.

Object Properties

The properties of our object break down into two categories: first, the properties for handling calculations, forms and validation, and secondly, the references to HTML elements.

    $.Shop.prototype = {
    	init: function() {
    		// Properties
    
    			this.cartPrefix = "winery-"; // prefix string to be prepended to the cart's name in session storage
    			this.cartName = this.cartPrefix + "cart"; // cart's name in session storage
    			this.shippingRates = this.cartPrefix + "shipping-rates"; // shipping rates key in session storage
    			this.total = this.cartPrefix + "total"; // total key in the session storage
    			this.storage = sessionStorage; // shortcut to sessionStorage object
    
    
    			this.$formAddToCart = this.$element.find( "form.add-to-cart" ); // forms for adding items to the cart
    			this.$formCart = this.$element.find( "#shopping-cart" ); // Shopping cart form
    			this.$checkoutCart = this.$element.find( "#checkout-cart" ); // checkout form cart
    			this.$checkoutOrderForm = this.$element.find( "#checkout-order-form" ); // checkout user details form
    			this.$shipping = this.$element.find( "#sshipping" ); // element that displays the shipping rates
    			this.$subTotal = this.$element.find( "#stotal" ); // element that displays the subtotal charges
    			this.$shoppingCartActions = this.$element.find( "#shopping-cart-actions" ); // cart actions links
    			this.$updateCartBtn = this.$shoppingCartActions.find( "#update-cart" ); // update cart button
    			this.$emptyCartBtn = this.$shoppingCartActions.find( "#empty-cart" ); // empty cart button
    			this.$userDetails = this.$element.find( "#user-details-content" ); // element that displays the user's information
    			this.$paypalForm = this.$element.find( "#paypal-form" ); // PayPal form
    
    
    			this.currency = "€"; // HTML entity of the currency to be displayed in layout
    			this.currencyString = "€"; // currency symbol as text string
    			this.paypalCurrency = "EUR"; // PayPal's currency code
    			this.paypalBusinessEmail = "yourbusiness@email.com"; // your PayPal Business account email address
    			this.paypalURL = "https://www.sandbox.paypal.com/cgi-bin/webscr"; // URL of the PayPal form
    
    			// object containing patterns for form validation
    			this.requiredFields = {
    				expression: {
    					value: /^([\w-\.]+)@((?:[\w]+\.)+)([a-z]){2,4}$/
    				},
    
    				str: {
    					value: ""
    				}
    
    			};
    
    			// public methods invocation
    	}
    };
    

Let’s go over these properties one by one.

Storage and other properties:

• cartPrefix
  A prefix to be prepended to the cart’s name key in session storage
• cartName
  The cart’s name key in session storage (combines the cartPrefix string with the cart string)
• shippingRates
  The shipping rate key in session storage
• total
  The total’s key in session storage
• storage
  Shortcut to the sessionStorage object.
• currency
  An HTML entity used to display the current currency in the layout
• currencyString
  The current currency symbol used in the element’s text
• paypalCurrency
  PayPal’s currency text code
• paypalBusinessEmail
  The email address of your PayPal Business account
• paypalURL
  The URL of PayPal’s form (defaults to the URL of PayPal Sandbox)
• requiredFields
  An object containing the patterns and rules for form validation

References to elements:

• $formAddToCart
  The forms for adding products to the shopping cart
• $formCart
  The shopping cart form
• $checkoutCart
  The checkout’s shopping cart form
• $checkoutOrderForm
  The checkout’s form where users input their personal information
• $shipping
  The element that contains and displays shipping rates
• $subTotal
  The element that contains and displays the total charges
• $shoppingCartActions
  The elements that contain the actions related to the shopping cart
• $updateCartBtn
  The button to update the shopping cart
• $emptyCartBtn
  The button for emptying the cart
• $userDetails
  The element that contains and displays the information entered by the user
• $paypalForm
  PayPal’s form

All of the elements are prefixed with the $ sign, meaning that they’re jQuery objects. But not all of these elements are available on all pages. To check whether a jQuery element exists, simply test its length property:

    if( $element.length ) {
    	// the element exists
    }
    

Another approach, not used in our project, is to add a particular ID or class to the body element and perform actions conditionally:

    var $body = $( "body" ),
    	page = $body.attr( "id" );
    
    	switch( page ) {
    		case "product-list":
    			// actions for handling products
    			break;
    		case "shopping-cart":
    			// actions for handling the shopping cart
    			break;
    		case "checkout":
    			// actions for handling the checkout's page
    			break;
    		default:
    			break;
    	}
    

Object Methods

The actions of our code take place in our object’s methods, which, in turn, can be divided into public and private methods. Private methods operate in the background, so to speak, and help the public methods perform their tasks. These methods are prefixed with an underscore and are never used directly.

Public methods, meanwhile, operate directly on page elements and data, and they’re unprefixed. We’ve already seen the init() method, which simply initializes properties and other public methods in the object’s constructor function. The other methods will be explained below.

Private Methods (Helpers)

The first private method, _emptyCart(), simply empties the current session storage in the browser:

    $.Shop.prototype = {
    	// empties session storage
    
    	_emptyCart: function() {
    		this.storage.clear();
    	}
    };
    

To format a number by a set number of decimal places, we implement the _formatNumber() method:

    /* Format a number by decimal places
     * @param num Number the number to be formatted
     * @param places Number the decimal places
     * @returns n Number the formatted number
    */
    
    
    _formatNumber: function( num, places ) {
    	var n = num.toFixed( places );
    	return n;
    }
    

This method makes use of JavaScript’s toFixed() method of the Number object. Its role in our project is to properly format prices.

Because not all of the prices in our pages are contained in data attributes, we need a specialized method to extract the numeric portion of a string from text nodes. This method is named _extractPrice():

    /* Extract the numeric portion from a string
     * @param element Object the jQuery element that contains the relevant string
     * @returns price String the numeric string
     */
    
    
    _extractPrice: function( element ) {
    	var self = this;
    	var text = element.text();
    	var price = text.replace( self.currencyString, "" ).replace( " ", "" );
    	return price;
    }
    

Above, self is a reference to the $.Shop object, and we’ll need it every time we want to access a property or a method of our object without worrying much about scope.

You can bulletproof this method by adding a further routine that strips out all trailing white space:

    var text = $.trim( element.text() );
    

Bear in mind that jQuery’s $.trim() method removes all new lines, spaces (including non-breaking spaces) and tabs from the beginning and end of a string. If these white space characters occur in the middle of a string, they are preserved.

Then, we need two methods to convert strings into numbers and numbers into strings. This is necessary to perform calculations and to display the results on our pages.

    /* Converts a numeric string into a number
     * @param numStr String the numeric string to be converted
     * @returns num Number the number, or false if the string cannot be converted
     */
    
    _convertString: function( numStr ) {
    	var num;
    	if( /^[-+]?[0-9]+\.[0-9]+$/.test( numStr ) ) {
    		num = parseFloat( numStr );
    	} else if( /^\d+$/.test( numStr ) ) {
    		num = parseInt( numStr );
    	} else {
    		num = Number( numStr );
    	}
    
    	if( !isNaN( num ) ) {
    		return num;
    	} else {
    		console.warn( numStr + " cannot be converted into a number" );
    		return false;
    	}
    },
    
    /* Converts a number to a string
     * @param n Number the number to be converted
     * @returns str String the string returned
     */
    
    _convertNumber: function( n ) {
    	var str = n.toString();
    	return str;
    }
    

Above, _convertString() runs the following tests:

1. Does the string have a decimal format? If so, it uses the parseFloat() function.
2. Does the string have an integer format? If so, it uses the parseInt() function.
3. If the format of the string cannot be detected, it uses the Number() constructor.
4. If the result is a number (tested with the isNaN() function), it returns the number. Otherwise, it outputs a warning to the JavaScript console and returns false.

By contrast, _convertNumber() simply invokes the toString() method to convert a number into a string.

The next step is to define two methods to convert a JavaScript object into a JSON string and a JSON string back into a JavaScript object:

    /* Converts a JSON string to a JavaScript object
     * @param str String the JSON string
     * @returns obj Object the JavaScript object
     */
    
    _toJSONObject: function( str ) {
    	var obj = JSON.parse( str );
    	return obj;
    },
    
    /* Converts a JavaScript object to a JSON string
     * @param obj Object the JavaScript object
     * @returns str String the JSON string
     */
    
    
    _toJSONString: function( obj ) {
    	var str = JSON.stringify( obj );
    	return str;
    }
    

The first method makes use of the JSON.parse() method, while the latter invokes the JSON.stringify() method (see Mozilla Developer Network’s article on “Using Native JSON”).

Why do we need these methods? Because our cart will also store the information related to each product using the following data format (spaces added for legibility):

The winery-cart key contains a JSON string that represents an array of objects (i.e. items) in which each object shows the relevant information about a product added by the user — namely, the product’s name, the quantity and the price.

It’s pretty obvious that we also now need a specialized method to add items to this particular key in session storage:

    /* Add an object to the cart as a JSON string
     * @param values Object the object to be added to the cart
     * @returns void
     */
    
    
    _addToCart: function( values ) {
    	var cart = this.storage.getItem( this.cartName );
    	var cartObject = this._toJSONObject( cart );
    	var cartCopy = cartObject;
    	var items = cartCopy.items;
    	items.push( values );
    
    	this.storage.setItem( this.cartName, this._toJSONString( cartCopy ) );
    }
    

This method gets the cart’s key from session storage, converts it to a JavaScript object and adds a new object as a JSON string to the cart’s array. The newly added object has the following format:

    this._addToCart({
    	product: "Test",
    	qty: 1,
    	price: 2
    });
    

Now, our cart key will look like this:

Shipping is calculated according to the overall number of products added to the cart, not the quantity of each individual product:

    /* Custom shipping rates calculated based on total quantity of items in cart
     * @param qty Number the total quantity of items
     * @returns shipping Number the shipping rates
     */
    
    _calculateShipping: function( qty ) {
    	var shipping = 0;
    	if( qty >= 6 ) {
    		shipping = 10;
    	}
    	if( qty >= 12 && qty <= 30 ) {
    		shipping = 20;	
    	}
    
    	if( qty >= 30 && qty <= 60 ) {
    		shipping = 30;	
    	}
    
    	if( qty > 60 ) {
    		shipping = 0;
    	}
    
    	return shipping;
    
    }
    

You can replace this method’s routines with your own. In this case, shipping charges are calculated based on specific amounts.

We also need to validate the checkout form where users insert their personal information. The following method takes into account the special visibility toggle by which the user may specify that their billing information is the same as their shipping information.

    /* Validates the checkout form
     * @param form Object the jQuery element of the checkout form
     * @returns valid Boolean true for success, false for failure
     */
    
    
    _validateForm: function( form ) {
    		var self = this;
    		var fields = self.requiredFields;
    		var $visibleSet = form.find( "fieldset:visible" );
    		var valid = true;
    
    		form.find( ".message" ).remove();
    			
    	$visibleSet.each(function() {
    
    		$( this ).find( ":input" ).each(function() {
    		var $input = $( this );
    		var type = $input.data( "type" );
    		var msg = $input.data( "message" );
    				
    		if( type == "string" ) {
    			if( $input.val() == fields.str.value ) {
    				$( "<span class='message'/>" ).text( msg ).
    				insertBefore( $input );
    
    				valid = false;
    			}
    		} else {
    			if( !fields.expression.value.test( $input.val() ) ) {
    				$( "<span class='message'/>" ).text( msg ).
    				insertBefore( $input );
    
    				valid = false;
    			}
    		}
    
    	});
    	});
    
    	return valid;
    }
    

When validation messages are added upon the form being submitted, we need to clear these messages before going any further. In this case, we take into account only the fields contained in a fieldset element that is still visible after the user has checked the visibility toggle.

Validation takes place by checking whether the current field requires a simple string comparison (data-type="string") or a regular expression test (data-type="expression"). Our tests are based on the requiredFields property. If there’s an error, we’ll show a message by using the data-message attribute of each field.

Note that the validation routines used above have been inserted just for demonstration purposes, and they have several flaws. For better validation, I recommend a dedicated jQuery plugin, such as jQuery Validation.

Last but not least is registering the information that the user has entered in the checkout form:

    /* Save the data entered by the user in the checkout form
     * @param form Object the jQuery element of the checkout form
     * @returns void
     */
    
    
    _saveFormData: function( form ) {
    	var self = this;
    	var $visibleSet = form.find( "fieldset:visible" );
    			
    	$visibleSet.each(function() {
    		var $set = $( this );
    		if( $set.is( "#fieldset-billing" ) ) {
    			var name = $( "#name", $set ).val();
    			var email = $( "#email", $set ).val();
    			var city = $( "#city", $set ).val();
    			var address = $( "#address", $set ).val();
    			var zip = $( "#zip", $set ).val();
    			var country = $( "#country", $set ).val();
    
    			self.storage.setItem( "billing-name", name );
    			self.storage.setItem( "billing-email", email );
    			self.storage.setItem( "billing-city", city );
    			self.storage.setItem( "billing-address", address );
    			self.storage.setItem( "billing-zip", zip );
    			self.storage.setItem( "billing-country", country );
    		} else {
    			var sName = $( "#sname", $set ).val();
    			var sEmail = $( "#semail", $set ).val();
    			var sCity = $( "#scity", $set ).val();
    			var sAddress = $( "#saddress", $set ).val();
    			var sZip = $( "#szip", $set ).val();
    			var sCountry = $( "#scountry", $set ).val();
    
    			self.storage.setItem( "shipping-name", sName );
    			self.storage.setItem( "shipping-email", sEmail );
    			self.storage.setItem( "shipping-city", sCity );
    			self.storage.setItem( "shipping-address", sAddress );
    			self.storage.setItem( "shipping-zip", sZip );
    			self.storage.setItem( "shipping-country", sCountry );
    
    		}
    	});
    }
    

Again, this method takes into account the visibility of the fields based on the user’s choice. Once the form has been submitted, our session storage may have the following details added to it:

Public Methods

Our public methods are invoked in the initialization method (init()). The first thing to do is create the initial keys and values in session storage.

    // Creates the cart keys in session storage
    
    createCart: function() {
    	if( this.storage.getItem( this.cartName ) == null ) {
    
    		var cart = {};
    		cart.items = [];
    			
    		this.storage.setItem( this.cartName, this._toJSONString( cart ) );
    		this.storage.setItem( this.shippingRates, "0" );
    		this.storage.setItem( this.total, "0" );
    	}
    }
    

The first check tests whether our values have already been added to session storage. We need this test because we could actually overwrite our values if we run this method every time a document has finished loading.

Now, our session storage looks like this:

Now, we need to handle the forms where the user may add products to their shopping cart:

    // Adds items to shopping cart
    
    handleAddToCartForm: function() {
    	var self = this;
    	self.$formAddToCart.each(function() {
    		var $form = $( this );
    		var $product = $form.parent();
    		var price = self._convertString( $product.data( "price" ) );
    		var name =  $product.data( "name" );
    
    		$form.on( "submit", function() {
    			var qty = self._convertString( $form.find( ".qty" ).val() );
    			var subTotal = qty * price;
    			var total = self._convertString( self.storage.getItem( self.total ) );
    			var sTotal = total + subTotal;
    			self.storage.setItem( self.total, sTotal );
    			self._addToCart({
    				product: name,
    				price: price,
    				qty: qty
    			});
    			var shipping = self._convertString( self.storage.getItem( self.shippingRates ) );
    			var shippingRates = self._calculateShipping( qty );
    			var totalShipping = shipping + shippingRates;
    
    			self.storage.setItem( self.shippingRates, totalShipping );
    		});
    	});
    }
    

Every time a user submits one of these forms, we have to read the product quantity specified by the user and multiply it by the unit price. Then, we need to read the total’s key contained in session storage and update its value accordingly. Having done this, we call the _addToCart() method to store the product’s details in storage. The quantity specified will also be used to calculate the shipping rate by comparing its value to the value already stored.

Suppose that a user chooses the first product, Wine #1, whose price is €5.00, and specifies a quantity of 5. The session storage would look like this once the form has been submitted:

Suppose the same user goes back to the product list and chooses Wine #2, whose price is €8.00, and specifies a quantity of 2:

Finally, our eager user returns again to the product list, chooses Wine #3, whose price is €11.00, and specifies a quantity of 6:

At this point, we need to accurately display the cart when the user goes to the shopping cart page or checkout page:

    // Displays the shopping cart
    
    displayCart: function() {
    	if( this.$formCart.length ) {
    		var cart = this._toJSONObject( this.storage.getItem( this.cartName ) );
    		var items = cart.items;
    		var $tableCart = this.$formCart.find( ".shopping-cart" );
    		var $tableCartBody = $tableCart.find( "tbody" );
    
    
    		for( var i = 0; i < items.length; ++i ) {
    			var item = items[i];
    			var product = item.product;
    			var price = this.currency + " " + item.price;
    			var qty = item.qty;
    			var html = "<tr><td class='pname'>" + product + "</td>" + "<td class='pqty'><input type='text' value='" + qty + "' class='qty'/></td>" + "<td class='pprice'>" + price + "</td></tr>";
    
    			$tableCartBody.html( $tableCartBody.html() + html );
    		}
    
    		var total = this.storage.getItem( this.total );
    		this.$subTotal[0].innerHTML = this.currency + " " + total;
    	} else if( this.$checkoutCart.length ) {
    		var checkoutCart = this._toJSONObject( this.storage.getItem( this.cartName ) );
    		var cartItems = checkoutCart.items;
    		var $cartBody = this.$checkoutCart.find( "tbody" );
    
    		for( var j = 0; j < cartItems.length; ++j ) {
    			var cartItem = cartItems[j];
    			var cartProduct = cartItem.product;
    			var cartPrice = this.currency + " " + cartItem.price;
    			var cartQty = cartItem.qty;
    			var cartHTML = "<tr><td class='pname'>" + cartProduct + "</td>" + "<td class='pqty'>" + cartQty + "</td>" + "<td class='pprice'>" + cartPrice + "</td></tr>";
    
    			$cartBody.html( $cartBody.html() + cartHTML );
    		}
    
    		var cartTotal = this.storage.getItem( this.total );
    		var cartShipping = this.storage.getItem( this.shippingRates );
    		var subTot = this._convertString( cartTotal ) + this._convertString( cartShipping );
    
    		this.$subTotal[0].innerHTML = this.currency + " " + this._convertNumber( subTot );
    		this.$shipping[0].innerHTML = this.currency + " " + cartShipping;
    			
    	}
    }
    

If the cart’s table is on the shopping cart page, then this method iterates over the array of objects contained in the winery-cart key and populates the table by adding a text field to allow users to modify the quantity of each product. For the sake of simplicity, I didn’t include an action to remove an item from the cart, but that procedure is pretty simple:

1. Get the items array, contained in session storage.
2. Get the product’s name, contained in the td element with the pname class.
3. Create a new array by filtering out the item with the product’s name, obtained in step 2 (you can use $.grep()).
4. Save the new array in the winery-cart key.
5. Update the total and shipping charge values.

    var items = [
    	{
    		product: "Test",
    		qty: 1,
    		price: 5
    	},
    	{
    		product: "Foo",
    		qty: 5,
    		price: 10
    	},
    	{
    		product: "Bar",
    		qty: 2,
    		price: 8
    	}
    ];
    
    
    items = $.grep( items, function( item ) {
    	return item.product !== "Test";
    
    });
    
    console.log( items ); 
    
    /*
    	Array[2]
    		0: Object
    			price: 10
    			product: "Foo"
    			qty: 5
    		1: Object
    			price: 8
    			product: "Bar"
    			qty: 2
    */
    

Then, we need a method that updates the cart with a new quantity value for each product:

    // Updates the cart
    
    updateCart: function() {
    		var self = this;
    	if( self.$updateCartBtn.length ) {
    		self.$updateCartBtn.on( "click", function() {
    			var $rows = self.$formCart.find( "tbody tr" );
    			var cart = self.storage.getItem( self.cartName );
    			var shippingRates = self.storage.getItem( self.shippingRates );
    			var total = self.storage.getItem( self.total );
    
    			var updatedTotal = 0;
    			var totalQty = 0;
    			var updatedCart = {};
    			updatedCart.items = [];
    
    			$rows.each(function() {
    				var $row = $( this );
    				var pname = $.trim( $row.find( ".pname" ).text() );
    				var pqty = self._convertString( $row.find( ".pqty > .qty" ).val() );
    				var pprice = self._convertString( self._extractPrice( $row.find( ".pprice" ) ) );
    
    				var cartObj = {
    					product: pname,
    					price: pprice,
    					qty: pqty
    				};
    
    				updatedCart.items.push( cartObj );
    
    				var subTotal = pqty * pprice;
    				updatedTotal += subTotal;
    				totalQty += pqty;
    			});
    				
    			self.storage.setItem( self.total, self._convertNumber( updatedTotal ) );
    			self.storage.setItem( self.shippingRates, self._convertNumber( self._calculateShipping( totalQty ) ) );
    			self.storage.setItem( self.cartName, self._toJSONString( updatedCart ) );
    
    		});
    	}
    }
    

Our method loops through all of the relevant table cells of the cart and builds a new object to be inserted in the winery-cart key. It also recalculates the total price and shipping charge by taking into account the newly inserted values of the quantity fields.

Suppose that a user changes the quantity of Wine #2 from 2 to 6:

If the user wants to empty their cart and start over, we simply have to add the following action:

    // Empties the cart by calling the _emptyCart() method
    // @see $.Shop._emptyCart()
    
    emptyCart: function() {
    	var self = this;
    	if( self.$emptyCartBtn.length ) {
    		self.$emptyCartBtn.on( "click", function() {
    			self._emptyCart();
    		});
    	}
    }
    

Now, session storage has been emptied entirely, and the user may start making purchases again. However, if they decide to finalize their order instead, then we need to handle the checkout form when they insert their personal information.

    // Handles the checkout form by adding a validation routine and saving user’s info in session storage
    
    handleCheckoutOrderForm: function() {
    	var self = this;
    	if( self.$checkoutOrderForm.length ) {
    		var $sameAsBilling = $( "#same-as-billing" );
    		$sameAsBilling.on( "change", function() {
    			var $check = $( this );
    			if( $check.prop( "checked" ) ) {
    				$( "#fieldset-shipping" ).slideUp( "normal" );
    			} else {
    				$( "#fieldset-shipping" ).slideDown( "normal" );
    			}
    		});
    
    		self.$checkoutOrderForm.on( "submit", function() {
    			var $form = $( this );
    			var valid = self._validateForm( $form );
    	
    			if( !valid ) {
    				return valid;
    			} else {
    				self._saveFormData( $form );
    			}
    		});
    	}
    }
    

The first thing we need to do is hide the shipping fields if the user checks the toggle that specifies that their billing information is the same as their shipping information. We use the change event, combined with jQuery’s .prop() method. (If you’re curious about the difference between .prop() and .attr(), StackOverflow has a good discussion of it.)

Then, we validate the form by returning a false value in case of errors, thus preventing the form from being submitted. If validation succeeds, we save the user’s data in storage. For example:

The final step is the page with the PayPal form. First, we need to display the user’s information gathered on the checkout page:

    // Displays the user's information
    
    displayUserDetails: function() {
    	if( this.$userDetails.length ) {
    		if( this.storage.getItem( "shipping-name" ) == null ) {
    			var name = this.storage.getItem( "billing-name" );
    			var email = this.storage.getItem( "billing-email" );
    			var city = this.storage.getItem( "billing-city" );
    			var address = this.storage.getItem( "billing-address" );
    			var zip = this.storage.getItem( "billing-zip" );
    			var country = this.storage.getItem( "billing-country" );
    
    			var html = "<div class='detail'>";
    				html += "<h2>Billing and Shipping</h2>";
    				html += "<ul>";
    				html += "<li>" + name + "</li>";
    				html += "<li>" + email + "</li>";
    				html += "<li>" + city + "</li>";
    				html += "<li>" + address + "</li>";
    				html += "<li>" + zip + "</li>";
    				html += "<li>" + country + "</li>";
    				html += "</ul></div>";
    
    			this.$userDetails[0].innerHTML = html;
    		} else {
    			var name = this.storage.getItem( "billing-name" );
    			var email = this.storage.getItem( "billing-email" );
    			var city = this.storage.getItem( "billing-city" );
    			var address = this.storage.getItem( "billing-address" );
    			var zip = this.storage.getItem( "billing-zip" );
    			var country = this.storage.getItem( "billing-country" );
    
    			var sName = this.storage.getItem( "shipping-name" );
    			var sEmail = this.storage.getItem( "shipping-email" );
    			var sCity = this.storage.getItem( "shipping-city" );
    			var sAddress = this.storage.getItem( "shipping-address" );
    			var sZip = this.storage.getItem( "shipping-zip" );
    			var sCountry = this.storage.getItem( "shipping-country" );
    
    			var html = "<div class='detail'>";
    				html += "<h2>Billing</h2>";
    				html += "<ul>";
    				html += "<li>" + name + "</li>";
    				html += "<li>" + email + "</li>";
    				html += "<li>" + city + "</li>";
    				html += "<li>" + address + "</li>";
    				html += "<li>" + zip + "</li>";
    				html += "<li>" + country + "</li>";
    				html += "</ul></div>";
    
    				html += "<div class='detail right'>";
    				html += "<h2>Shipping</h2>";
    				html += "<ul>";
    				html += "<li>" + sName + "</li>";
    				html += "<li>" + sEmail + "</li>";
    				html += "<li>" + sCity + "</li>";
    				html += "<li>" + sAddress + "</li>";
    				html += "<li>" + sZip + "</li>";
    				html += "<li>" + sCountry + "</li>";
    				html += "</ul></div>";
    
    			this.$userDetails[0].innerHTML = html;	
    
    		}
    	}
    }
    

Our method first checks whether the user has inputted either billing or shipping information or both. Then, it simply builds an HTML fragment by getting the user’s data from session storage.

Finally, the user may buy the products by submitting the PayPal form. The form redirects them to PayPal, but the fields need to be filled in properly before the form can be submitted.

    // Appends the required hidden values to PayPal's form before submitting
    
    populatePayPalForm: function() {
    	var self = this;
    	if( self.$paypalForm.length ) {
    		var $form = self.$paypalForm;
    		var cart = self._toJSONObject( self.storage.getItem( self.cartName ) );
    		var shipping = self.storage.getItem( self.shippingRates );
    		var numShipping = self._convertString( shipping );
    		var cartItems = cart.items; 
    		var singShipping = Math.floor( numShipping / cartItems.length );
    
    		$form.attr( "action", self.paypalURL );
    		$form.find( "input[name='business']" ).val( self.paypalBusinessEmail );
    		$form.find( "input[name='currency_code']" ).val( self.paypalCurrency );
    
    		for( var i = 0; i < cartItems.length; ++i ) {
    			var cartItem = cartItems[i];
    			var n = i + 1;
    			var name = cartItem.product;
    			var price = cartItem.price;
    			var qty = cartItem.qty;
    
    			$( "<div/>" ).html( "<input type='hidden' name='quantity_" + n + "' value='" + qty + "'/>" ).
    			insertBefore( "#paypal-btn" );
    			$( "<div/>" ).html( "<input type='hidden' name='item_name_" + n + "' value='" + name + "'/>" ).
    			insertBefore( "#paypal-btn" );
    			$( "<div/>" ).html( "<input type='hidden' name='item_number_" + n + "' value='SKU " + name + "'/>" ).
    			insertBefore( "#paypal-btn" );
    			$( "<div/>" ).html( "<input type='hidden' name='amount_" + n + "' value='" + self._formatNumber( price, 2 ) + "'/>" ).
    			insertBefore( "#paypal-btn" );
    			$( "<div/>" ).html( "<input type='hidden' name='shipping_" + n + "' value='" + self._formatNumber( singShipping, 2 ) + "'/>" ).
    			insertBefore( "#paypal-btn" );
    
    		}
    
    
    
    	}
    }
    

First, we get some important information from session storage — namely, the shipping rate and the total number of items in the cart. We divide the total shipping amount by the number of items to get the shipping rate for each item.

Then, we set the URL for the action attribute of the form, together with our business email and currency code (taken from the paypalBusinessEmail and paypalCurrency properties, respectively).

Finally, we loop through the items of our cart, and we append to the form several hidden input elements containing the quantities, the names of the products, the number of items for each product, the prices (amounts), and the unit shipping rates.

The monetary values are formatted as 00,00. Explaining all of the possible values of a PayPal form and the various types of PayPal forms goes well beyond the scope of this article, If you want to go deeper, I recommend the following reading:

• “HTML Form Basics for PayPal Payments Standard,” PayPal Developer
• “HTML Variables for PayPal Payments Standard,” PayPal Developer

Preview And Source Code

The following video shows the result. I’ve omitted PayPal’s landing page to protect my account’s data, but you can see it as a screenshot.

Get the code from the GitHub repository. Just change the paypalBusinessEmail property of the $.Shop object to your PayPal Sandbox email account.

Other Resources

• “DOM Storage Guide,” Mozilla Developer Network
• “Introduction to Session Storage,” Nicholas C. Zakas
• “Using data-* Attributes,” Mozilla Developer Network

(al, ea)

© Gabriele Romanato for Smashing Magazine, 2014.

When it’s going well, design is a pleasure. But we all know what it’s like to experience a bad day: nothing works the way it should, colors clash, type mumbles, the message is lost altogether.

It’s worth remembering that everyone has their bad days. Here are some of the most inspirational quotes we’ve found online to help you through the rough patch and come out smiling on the other side.

Each and every one of these pearls of wisdom came from bitter experience, when work was hard-going, and things didn’t click the way the person wanted them to. So take a look at the world from a different perspective, you might be surprised at what you find.

Which of these quotes inspires you the most? Have we missed a quote you like to refer to? Let us know in the comments.

Create Picture-Perfect Portraits With Beautune – only $14!