Article | Date posted : 28 March, 2014 | Updated on : 28 March, 2014

Optimizing your shopping basket for all desktop and mobile devices Part 1

Sponsored Links

In my previous articles I had written (found at the bottom of this page) how to build a mobile checkout, but did not cover how to create an effective shopping basket. With the rise of mobile browsing we need to make sure that our shopping baskets are adaptable to all different devices, from desktop, tablets to smartphones and maybe even TV.

In this two-part article I will show you how to build a shopping basket with all the HTML, CSS, jQuery and PHP coding. The first part of this article I will show you how to build a basket notifier in the top right corner.

Elements to focus on.

  • A desktop version that is adaptable to all screens.
  • A mobile version that is full screen.
  • Use jQuery to handle all controls and cool features.

Step 1 : Intro, Creating the small visual basket

shopping basket location

shopping basket location

When building a basket I recommend having the small version in the top right corner, this because most other eCommerce websites have it in the same corner. When following eCommerce standards you will notice that the flow for your visitors feels more natural because the methodology is the same.

Step 2 : Creating our box

shopping basket

shopping basket

To create our box we use a couple of div elements inside our HTML code which I will explain in sections below with the CSS styling and jQuery functions.

<div class=”basket clearfix”>
<div class=”basket-col1 _2014-view-basket”>
<img src=”http://example.com/_images/styling/2014-basket.png” alt=”roofracks.co.uk basket” width=”25″ height=”20″ >
</div>
<div class=”basket-col2 view-basket”>
<ul>
<li id=”basket-header-qty”></li>
<li id=”basket-header-price”></li>
</ul>
</div>
<div class=”basket-col3 mouse”>
<a href=”http://www.example.com/secure-shopping/” rel=”nofollow”>Checkout</a>
</div>
</div>

We have 3 elements our main container using the class basket, than another class view-basket which is used to trigger to view the full version of the basket. There is no styling attached to the view-basket class.

CSS


.basket{
position:relative;
float:right;
height:45px;
background:#FFF;
border:solid 1px #CCC;
margin:20px 0 0 0;
}

Inside our basket class we have 3 columns, the first one shows a basket icon, the second showing the total quantity and price and the last one is a link to go the checkout.

The styling is not complicated, I will explain one styling that creates a line between two elements.

When you want to create a horizontal line between two elements, the easiest way is to select your element and then tell the browser to place a line if it finds two of the same child elements side by side.

For example


<div class=”example”>
<ul>
<li>list option 1</li>
<li>list option 2</li>
</ul>
</div>

The css to place a line between list option 1 and 2 would be


.example ul li + li{
border-left:solid 1px #CCC;
}

Now that I have explained the above styling, we will now include the full CSS styling for the small shopping basket.


.basket-col1{
position:relative;
float:left;
width:35px;
height:45px;
cursor:pointer;
}
.basket-col1 img{
position:absolute;
top:10px;
left:5px;
}
.basket-col2{
float:left;
height:45px;
cursor:pointer;
}
.basket-col2 ul{
margin-top:10px;
}
.basket-col2 ul li{
display:inline;
color:#3B4C51;
font-size:.8em;
padding:15px 10px;
}
.basket-col2 ul li + li{
border-left:solid 1px #CCC;
}
.basket-col3{
cursor:pointer;
float:left;
background:#F8F8F8 url(‘../../_images/homepage/arrow-right-blue.png’)no-repeat 80px 14px;
padding:10px 30px 10px 10px;
border-left:solid 1px #ccc;
height:25px;
}
.basket-col3 a{
text-decoration:none;
color:#3B4C51;
}

Step 3 : Changing the styling for mobile devices based on media queries

mobile basket

mobile basket

All we need to do when a mobile device views the small shopping basket is to set the width to 100% and disable other conditions, these stylings might need to be changed depending on your current website design.


@media all and (max-width: 767px)  {
._2014-basket{
float:none;
position:absolute;
bottom: 0;
width:100%;
}
._2014-basket-col3 {
float:right;
}
}

Step 4 : Setting up the jQuery call settings

jQuery logo

jQuery

I save all data using MySQL and not PHP sessions, done for analytic reason. In the background of the shopping eCommerce sites I build I always include a custom analytic system to show the merchant what is going on, on their site.

So I’m assuming that you’re doing the same.

To retrieve data using jQuery and PHP, we first need to call the action in jQuery using the following code. There are several things in the code that I have not mentioned before, which I will explain under the example.


// on refresh and get data basket details
$.ajax({
type: “POST”,
url: siteurl+”secure-shopping/load-basket-contents.php”,
data: {trigger : “go”},
dataType: “json”,
success: function(data){
$(“#basket-header-price”).html(data.price);
$(“#basket-header-qty”).html(data.qty);
}
});

Explaining the code

We have used the variable siteurl, we have this set-up because we work with several websites and beta sub domains. All we do is have a simple div element and at the top of the site allocated with the url to a data field.


<div site-url” data-url=”http://example.com/”>

We can get the data-url info using a jQuery function


// get site url from id
var siteurl = $(“#site-url”).data(“url”);

When the ajax function is triggered the URL will be url: siteurl+”secure-shopping/load-basket-contents.php” but in reality the url will be url: “http://example.com/secure-shopping/load-basket-contents.php”

The data: {trigger : “go”}, has no meaning other then being a trigger for the PHP file.

Step 5 : Getting the data from your database using PHP

php mysql logo

php mysql

I will first show you the full code and then explain each line. The code below will in our next part of this article add all the data for the full shopping basket


<?php
if ( !empty($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’ ){
include($_SERVER[‘DOCUMENT_ROOT’] .”_2014/include/settings.php”);
include ‘./config.php’;
$session = session_id();

// load basket contents
if (isset($_POST[‘trigger’])){
$q = mysqli_query($conn,”SELECT * FROM checkout WHERE id=’$session'”);
while ($r = mysqli_fetch_array($q)){
$total_quantity += $r[‘productQuantity’];
$total_price += $r[‘productPrice’]*$r[‘productQuantity’];
}
$total_price = number_format($total_price, 2, ‘.’, ”);
if ($total_quantity==1){
$qty_text=’item’;
}else{
$qty_text=’items’;
}
mysqli_close($conn);
echo json_encode(array(
‘price’=>’&pound;’.$total_price.”,
‘qty’=>'(‘.$total_quantity.’) ‘.$qty_text,
‘basket’=>”.$echo.”,
‘id’=>”.$id.”
));
}
}

We first want to ensure that the PHP file can not output data by itself and that it can only provide info via an ajax call.


if ( !empty($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’ ){

Now we need to get all the settings, such as connecting to the database and other pre-configured information and start our session


include($_SERVER[‘DOCUMENT_ROOT’] .”_2014/include/settings.php”);
include ‘./config.php’;
$session = session_id();

We check if the ajax has the trigger enabled


// load basket contents
if (isset($_POST[‘trigger’])){

Time to get all the info stored inside the database, we will loop through the database where the session id is the equal to the session id inside the database and get all the info, and place them inside a variable.


$q = mysqli_query($conn,”SELECT * FROM checkout WHERE id=’$session'”);
while ($r = mysqli_fetch_array($q)){
$total_quantity += $r[‘productQuantity’];
$total_price += $r[‘productPrice’]*$r[‘productQuantity’];
}

Now that we have the total price, we want to round-up the price two decimals after the dot.


$total_price = number_format($total_price, 2, ‘.’, ”);

We want to grammatically be correct when we say, 0 items, 1 item, 2 items etc. To do this we simply check if its equal to 1 else do something else.


if ($total_quantity==1){
$qty_text=’item’;
}else{
$qty_text=’items’;
}

We close the mysql connection


mysqli_close($conn);

Now that we have done all the calculations we return all the values in a json_encode


echo json_encode(array(
‘price’=>’&pound;’.$total_price.”,
‘qty’=>'(‘.$total_quantity.’) ‘.$qty_text
));

Step 6 : Explaining the last part of the basket

In Step 4 I have explained part of the jQuery function, continuing where we left of. The success handler is the section where we will get all the info sent back from the PHP file, which we will parse through to the div element using a function below.


success: function(data){
$(“#basket-header-price”).html(data.price);
$(“#basket-header-qty”).html(data.qty);
}

And this is how we create our simple shopping basket, in the next part I will explain how to create the full version of the shopping basket.

Need more info, contact me directly or place a comment at the bottom of this page.

[contact-form][contact-field label=’Name’ type=’name’ required=’1’/][contact-field label=’Email’ type=’email’ required=’1’/][contact-field label=’Website’ type=’url’/][contact-field label=’Comment’ type=’textarea’ required=’1’/][/contact-form]

Sponsored Links

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me