Superdit.com » cart

Drag and Drop Shopping Cart Using ExtJS and CodeIgniter Cart

aditia rahman — Sat, 21 Aug 2010 09:55:23 +0000

This is my other post about simple usage of ExtJS with CodeIgniter, this time I want to create a simple drag and drop shopping cart, I have learn about how to use the cart class in CodeIgniter that I have posted in the previous post, i’m using MySQL for the storing the product data. I prepared the mockup it something like this

Let just get started to the code:

1. Prepare The Database

Create table named “ci_extjs_cart” or with other name that you desired, next create the table and here the sql code

CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(64) DEFAULT NULL,
  `price` varchar(32) DEFAULT NULL,
  `image` varchar(128) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

And this are the sample data (I already included the sample image on the code that you can download)

INSERT INTO `products` (`id`, `name`, `price`, `image`) VALUES
(1, 'HP - 20 Inch Widescreen Flat-Panel LCD Monitor', '169', 'hp.jpg'),
(2, 'Gateway - 20 Inch Widescreen Flat-Panel LCD Monitor', '159', 'gateway.jpg'),
(3, 'Apple - 30 Flat-Panel TFT-LCD Monitor', '1799', 'apple.jpg'),
(4, 'Acer - 24 Inch Flat-Panel LED-LCD Monitor', '299', 'acer.jpg'),
(5, 'Asus - 24 Inch Widescreen Flat-Panel LCD Monitor', '249', 'asus.jpg');

2. Setting Up CodeIgniter

First time to get hand dirty with a framework is to set all the config file (in folder: “application/config/”). The four files that we have to configure are:

config.php

$config['base_url']	= "http://localhost/ci_extjs_cart/";

database.php

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "admin";
$db['default']['database'] = "ci_extjs_cart";
$db['default']['dbdriver'] = "mysql";

routes.php

$route['default_controller'] = "product";

The default controller is set to product controller, in this step we have not create the controller yet, but it will be.

autoload.php

$autoload['libraries'] = array('database', 'session');
$autoload['helper'] = array('url');

4. Setting Up ExtJS on CodeIgniter

Like always I always included ExtJS file on separate folder from Codeigniter

5. Create a Controller and a View

The Controller, create file product.php inside the controllers folder, the very usual method on the controller is the contrustion and the index method, in the construction method the codeigniter cart class loaded.

load->library('cart');
    }

    public function index()
    {
        $this->load->view('product/index');
    }
}

The View, create the view file inside views folder “index.php”, the first step to preparing the view is to preparing the HTML layout, include the ExtJS file, and create a basic layout style in CSS.



  
    
    
    
    
    

    
    Extjs Image Gallery Using DataView

The Ext.ready function is still empty, inside this function all the ExtJS component will be placed, and I always using BASE_URL value that have value of site_url(); function, to make it easier when accessing a url.

6. Get Product List

The Controller, this is the method the get all the product data, and sending the data as json format.

public function ext_get_all()
{
    $query = $this->db->get('products');
    $product_arr = array();
    foreach($query->result() as $key => $data)
    {
        $product_arr[] = array(
            'id'    => $data->id,
            'name'  => $data->name,
            'price' => $data->price,
            'image' => $data->image
        );
    }
    echo json_encode(array('products' => $product_arr));
}

The View, this is the code for creating the product list in dataview, and a function to make the dataview draggable.

var proxyProduct = new Ext.data.HttpProxy({
    url: BASE_URL + 'product/ext_get_all', method: 'POST'
});

var strProduct = new Ext.data.JsonStore({
    proxy: proxyProduct,
    root: 'products',
    fields: [
        'id', 'name', 'price', 'image'
    ]
});

strProduct.load();

var tplProduct = new Ext.XTemplate(
    '',
        '',
        '',
        '{name}',
        '$ {price}',
    '',
    ''
);

var dvProduct = new Ext.DataView({
    autoScroll: true, store: strProduct, tpl: tplProduct,
    autoHeight: false, height: 200, multiSelect: false,
    overClass: 'x-view-over', itemSelector: 'div.thumb-wrap',
    emptyText: 'No product to display',
    style: 'border:1px solid #99BBE8;',
    listeners: {
        render: initializeItemDragZone
    }
});

function initializeItemDragZone(v) {
    v.dragZone = new Ext.dd.DragZone(v.getEl(), {
        getDragData: function(e) {
            var sourceEl = e.getTarget(v.itemSelector, 10);
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    itemData: v.getRecord(sourceEl).data
                }
            }
        },

        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });
}

var panelProduct = new Ext.Panel({
    id: 'images-view',
    frame: true,
    width: 620,
    autoHeight: true,
    title: 'Product DataView',
    style: 'margin:0 auto;',
    items: [dvProduct]
});

panelProduct.render('top');

7. Create The Cart (Using EditorGridPanel)

The Controller, we will create some basic function to manipulating the cart I try to explain them in the separate way, but still in the same controller

7.1 Get All Cart

public function ext_get_cart()
{
    if ($this->cart->total_items() != 0)
    {
        foreach($this->cart->contents() as $product)
        {
            $cart_arr[] = array(
                'rowid' => $product['rowid'],
                'id'    => $product['id'],
                'qty'   => $product['qty'],
                'name'  => $product['name'],
                'price' => $product['price'],
                'subtotal' => $product['subtotal']
            );
        }
        $cart_arr[] = array(
            'rowid' => '',
            'id'    => '',
            'qty'   => '',
            'name'  => '',
            'price' => 'Total:',
            'subtotal' => ''.$this->cart->total().''
        );
        echo json_encode(array('cart' => $cart_arr));
    }
    else
    {
        $cart_arr[] = array();
        echo json_encode(array('cart' => $cart_arr));
    }
}

This function is to getting all the available product in the cart in the session, if the cart is not empty then just loop through the cart function “$this->cart->contents()” and put this to array. I add another array to showing the total value from the cart, this will be treated different in the ExtJS grid, and send it as json format

7.2 Add a Product to Cart

public function ext_add_cart()
{
    if ($_POST['rowid'] == '')
    {
        $data = array(
            'id'    => $_POST['id'],
            'qty'   => 1,
            'price' => $_POST['price'],
            'name'  => $_POST['name']
        );
        $this->cart->insert($data);
    }
    else
    {
        $data = array(
          'rowid'   => $_POST['rowid'],
          'qty'     => intval($_POST['qty']) + 1
        );
        $this->cart->update($data);
    }
    echo '{success:true, total: "'.$this->cart->total().'"}';
}

You must be can see in the add cart function there are conditional statement that updating the cart instead insert a new data to cart, well this is to handle if a user adding the product that already available on the cart, so the cart must be updating only the quantity.

7.3 Update a Product Quantity

public function ext_update_cart()
{
    $data = array(
      'rowid'   => $_POST['rowid'],
      'qty'     => $_POST['qty']
    );
    $this->cart->update($data);
    echo '{success:true}';
}

This function is to updating a product quantity on the cart, I make the quantity editable on the grid so the user can easy put the number of a product that he desired, and to deleting a product from cart the user have to put zero value on the quantity editable grid.

7.4 Clear Cart

public function ext_clear_cart()
{
    $this->cart->destroy();
    echo '{success:true}';
}

Well nothing really hard in this function, using “$this->cart->destroy()” all the cart clear.

7.5 The Cart

var strCart = new Ext.data.JsonStore({
    root: 'cart',
    fields: [
        'rowid', 'id', 'qty', 'name', 'price', 'subtotal'
    ],
    proxy: new Ext.data.HttpProxy({
        url: BASE_URL + 'product/ext_get_cart', method: 'POST'
    })
});
strCart.load();

var cb_select = new Ext.grid.CheckboxSelectionModel();

function showDollar(val) {
    if (val == '' || val == 'Total:') {
        return val;
    }
    else {
        return '$ ' + val;
    }
}

var panelCart = new Ext.grid.EditorGridPanel({
    frame: true, border: true, stripeRows: true,
    store: strCart, loadMask: true, title: 'Your Cart (Drag Here)',
    style: 'margin:0 auto;font-size:13px;',
    height: 220, width: 500, sm: cb_select,
    columns: [{
        header: 'rowid',
        dataIndex: 'rowid',
        hidden: true,
        hideable: false
    }, {
        header: 'id',
        dataIndex: 'id',
        hidden: true,
        hideable: false
    }, {
        header: "Product Name",
        dataIndex: 'name',
        sortable: true,
        width: 280
    }, {
        header: "Qty",
        align: 'center',
        width: 40,
        dataIndex: 'qty',
        menuDisabled: true,
        editor: new Ext.form.TextField({
            allowBlank: false,
            vtype: 'alphanum',
            id: 'qtyField'
        })
    }, {
        header: "Price",
        dataIndex: 'price',
        sortable: true,
        align: 'right',
        renderer: showDollar,
        width: 80
    }, {
        header: "Subtotal",
        sortable: true,
        align: 'right',
        width: 80,
        renderer: showDollar
    }],
    listeners: {
        'afteredit': function() {
            var sm = panelCart.getSelectionModel().getSelections();
            panelCart.getSelectionModel().clearSelections();
            Ext.Ajax.request({
                method: 'POST',
                url: BASE_URL + 'product/ext_update_cart',
                params: {
                    rowid: sm[0].get('rowid'),
                    qty: Ext.getCmp('qtyField').getValue()
                },
                success: function() {
                    strCart.load();
                }
            });
        }
    },
    buttons: [{
        text: 'Clear Cart',
        handler: function() {
            Ext.Ajax.request({
                url: BASE_URL + 'product/ext_clear_cart',
                method: 'POST',
                success: function() {
                    strCart.load();
                }
            });
        }
    }, {
        text: 'Check Out',
        handler: function() {

        }
    }]
});

panelCart.render('bottom');

var formPanelDropTargetEl =  panelCart.getView().scroller.dom;

var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
    notifyDrop  : function(ddSource, e, data){
        panelCart.getSelectionModel().selectAll();
        var sm = panelCart.getSelectionModel().getSelections();
        panelCart.getSelectionModel().clearSelections();

        data.itemData.rowid = '';
        for (i=0; i<=sm.length-1; i++) {
            if (sm[i].get('id') == data.itemData.id) {
                data.itemData.rowid = sm[i].get('rowid');
                data.itemData.qty = sm[i].get('qty');
                // so can out from loop
                i = sm.length;
            }
        }

        Ext.Ajax.request({
            url: BASE_URL + 'product/ext_add_cart',
            method: 'POST',
            params: {
                'id': data.itemData.id,
                'price': data.itemData.price,
                'name': data.itemData.name,
                'rowid': data.itemData.rowid,
                'qty': data.itemData.qty
            },
            success: function() {
                strCart.load();
            }
        });
        return(true);
    }
});

That’s all for the Cart features, there is CheckboxSelectionModel component, this component is to check whether the product is already on the cart, you can see it used on notifyDrop inside the dropTarget you have to add, the expected result is something like this.

Download Source

Understanding CodeIgniter Cart Class

aditia rahman — Wed, 04 Aug 2010 06:21:20 +0000

Cart is one of the most important feature when creating an online store. In this post I want to have more understanding about Cart Class in CodeIgniter, cause maybe come in handy in the future, you can see how many new online store out there open in business, and in this internet age, online store seems the must have for many people who have retail business, in this post I’m not writing about how to use it in some example, the code I posted in here just copying from the original cart class documentation, but i’m included the link to the example usage of this class on the section 4 below.

1. What is Cart Class in CodeIgniter?

First from the official documentation

- The Cart class utilizes CodeIgniter’s Session Class to save the cart information to a database, so before using the Cart class you must set up a database table as indicated in the Session Documentation , and set the session preferences in your appliction/config/config.php file to utilize a database. -

which mean this class save the cart from the users and save it to database, you have to create this table

CREATE TABLE IF NOT EXISTS  `ci_sessions` (
	session_id varchar(40) DEFAULT '0' NOT NULL,
	ip_address varchar(16) DEFAULT '0' NOT NULL,
	user_agent varchar(50) NOT NULL,
	last_activity int(10) unsigned DEFAULT 0 NOT NULL,
	user_data text NOT NULL,
	PRIMARY KEY (session_id)
);

You can change the table name, but it have to be adapted to the config.php

$config['sess_cookie_name']		= 'ci_session';
$config['sess_expiration']		= 7200;
$config['sess_encrypt_cookie']	= FALSE;
$config['sess_use_database']	= FALSE;
$config['sess_table_name']		= 'ci_sessions';
$config['sess_match_ip']		= FALSE;
$config['sess_match_useragent']	= TRUE;
$config['sess_time_to_update'] 	= 300;

When you add an array data to the cart class, the data would be inserted to ci_sessions table in user_data field. Saving data to cart class is have to be in array format, it can be single or multidimensional array, this code I take from the original documentation

// the single array
$data = array(
   'id'      => 'sku_123ABC',
   'qty'     => 1,
   'price'   => 39.95,
   'name'    => 'T-Shirt',
   'options' => array('Size' => 'L', 'Color' => 'Red')
);

// the multidimensional array
$data = array(
   array(
           'id'      => 'sku_123ABC',
           'qty'     => 1,
           'price'   => 39.95,
           'name'    => 'T-Shirt',
           'options' => array('Size' => 'L', 'Color' => 'Red')
        ),
   array(
           'id'      => 'sku_567ZYX',
           'qty'     => 1,
           'price'   => 9.95,
           'name'    => 'Coffee Mug'
        ),
   array(
           'id'      => 'sku_965QRS',
           'qty'     => 1,
           'price'   => 29.95,
           'name'    => 'Shot Glass'
        )
);

// insert the data
$this->cart->insert($data);

The required index in the array are id, qty, price, name you can add the additional index but you can’t use that four index and the options index is optional, in case you want to save another information of the product for example, T-Shirt with the same product id but different size. The last thing from the array is you can’t use another words that reserved, they are rowid and subtotal.

2. Displaying The Items



cart->contents() as $items): ?>

	


  QTY
  Item Description
  Item Price
  Sub-Total






	
	   $i.'[qty]', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5')); ?>
	  
		

			cart->has_options($items['rowid']) == TRUE): ?>

				
					cart->product_options($items['rowid']) as $option_name => $option_value): ?>

						: 


					
				

			

	  
	  cart->format_number($items['price']); ?>
	  $cart->format_number($items['subtotal']); ?>
	






   
  Total
  $cart->format_number($this->cart->total()); ?>

QTY	Item Description	Item Price	Sub-Total
$i.'[qty]', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5')); ?>	cart->has_options($items['rowid']) == TRUE): ?> cart->product_options($items['rowid']) as $option_name => $option_value): ?> :	cart->format_number($items['price']); ?>	$cart->format_number($items['subtotal']); ?>
	Total	$cart->format_number($this->cart->total()); ?>

The code above is to displaying the current cart on the web pages, and theres a hidden field on the form this is used when we want to updating the cart, the difference between insert and update is, insert function is to adding new items to the cart, yet the update function is to updating items on the cart whether the quantity the options or something else, so when you updating the cart you need the rowid to pass it through. Here is the code

$data = array(
   'rowid' => 'b99ccdf16028f015540f341130b6d8ec',
   'qty'   => 3
);

$this->cart->update($data);

// or a multi-dimensional array

$data = array(
   array(
           'rowid'   => 'b99ccdf16028f015540f341130b6d8ec',
           'qty'     => 3
        ),
   array(
           'rowid'   => 'xw82g9q3r495893iajdh473990rikw23',
           'qty'     => 4
        ),
   array(
           'rowid'   => 'fh4kdkkkaoe30njgoe92rkdkkobec333',
           'qty'     => 2
        )
);

$this->cart->update($data);

3. The Available Function

$this->cart->insert();
- Permits you to add items to the shopping cart, as outlined above. -

$this->cart->update();
- Permits you to update items in the shopping cart, as outlined above. -

$this->cart->total();
- Displays the total amount in the cart. -

$this->cart->total_items();
- Displays the total number of items in the cart. -

$this->cart->contents();
- Returns an array containing everything in the cart. -

$this->cart->has_options(rowid);
- Returns TRUE (boolean) if a particular row in the cart contains options. This function is designed to be used in a loop with $this->cart->contents(), since you must pass the rowid to this function, as shown in the Displaying the Cart example above. -

$this->cart->options(rowid);
- Returns an array of options for a particular product. This function is designed to be used in a loop with $this->cart->contents(), since you must pass the rowid to this function, as shown in the Displaying the Cart example above. -

$this->cart->destroy();
- Permits you to destroy the cart. This function will likely be called when you are finished processing the customer’s order. -

$this->cart->product_options(rowid);
- This function not described in the documentation but used in the example, this is to get the available options on the product. -

4. The Examples

I’m not providing any code from this post, these tutorial below can provide you to get started with this cart class. Maybe I’ll post the different tutorial from these. Just enjoy it.

CodeIgniter From Scratch: Shopping Cart ( link )

How to Build a Shopping Cart using CodeIgniter and jQuery ( link )

Great smartphone comparison cart from Billshrink: Iphone, Palm, Droid, Nexus

aditia rahman — Wed, 06 Jan 2010 00:43:51 +0000

I just like the way their make the comparison table for each common feature on the phone, and it taken from http://www.billshrink.com/blog/