Rodney Vg

Rodney Vg

1596622860

Shopping Cart Example In Codeigniter Using VueJs

Shopping cart is an important part of an e-commerce website where user can choose item from product list for searching. Here user can add item, review it, change it or further add more items if required and buy the items.

In this shopping cart I have retrieve product list from database using AXIOS (Form validation in Vue Js) using vuejs. After retrieving data from api , display it on home page as product gallery. It has an option to add item into cart, update quantity into cart, remove item from cart, display cart items on checkout page and place an order.

For add , update , remove item from shopping cart I have used codeigniter inbuilt cart library. To consume the api developed in codeigniter I am using AXIOS library.

AXIOS is a library for http communication , making ajax request.

Why shopping cart are important.

1: Shopping cart bridge the gap between shopping and buying.
2 : It offers convenience.
3 : It stores product information.
4 : It renders product data, categories and site information for user display.

Options available in shopping cart:

1 Retrieve product from api using AXIOS http library.
2 : Create producut gallery page.
3. Add product into cart.
4 . Update quantity at the time of checkout
5 . Remove product from cart.6 . Place an order.

Steps to implement shopping cart.
  1. Create controller named as product_controller.php within controllers folder.

2 Create model named as product_model.php within models folder.

3.Create view named as product_vue.php within views folder.

Create Controller.

<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Product_controller  extends CI_Controller{
    public function index(){

           $this->load->model('product_model');       
           $data['products'] = $this->product_model->findAll();        
           $this->load->view('product_vue', $data); 
    }     

   public function productDetails(){

           $this->load->model('product_model');
       $data = $this->product_model->findAll();
           echo json_encode($data);
    }

    public function addToCart(){

           $data = json_decode(file_get_contents("php://input"));
           $id = $data->id;
           $this->load->model('product_model');    
          $product = $this->product_model->find($id);            
      $this->load->library('cart');
      $data = array(
              'id' => $id, 
              'name' => $product->product_name, 
              'price' => $product->product_price, 
              'qty' => 1, 
              'image'=>$product->product_image
        );

        $this->cart->insert($data);
        $this->cartCount();
    }

    public function cartCount(){
        $no=0;
        foreach ($this->cart->contents() as $item) {         
            $no+=$item['qty'];
    }        
    echo $no;
    }

    public function showCartItems(){

        $data = $this->cart->contents();
        echo json_encode($data);
    }

    public function removeCart(){

        $data = json_decode(file_get_contents("php://input"));
        $rowid = $data->rowid;
            $data = array(
                          'rowid'  => $rowid,
                          'qty'  => 0
           );

        $this->cart->update($data);    
        echo true;    
    }
    public function updateCart(){

        $data = json_decode(file_get_contents("php://input"));
        $item = array(
                        'rowid'=>$data->rowid,
                        'qty'=> $data->qty
        );

        if ($this->cart->update($item)) {
                echo true;         
           }else{
                echo  false;
           }
    }
}

2 : Create Model.

<?php
if (! defined('BASEPATH'))
    exit('No direct script access allowed');

class product_model extends CI_Model{

    function findAll()   {
        return $this->db->get('product')->result();
    }
    function find($id)    {
        return $this->db->where('id', $id)->get('product')->row();
    }
}

#vuejs #vue #javascript #vue-js

What is GEEK

Buddha Community

Shopping Cart Example In Codeigniter Using VueJs

I am Developer

1611112146

Codeigniter 4 Autocomplete Textbox From Database using Typeahead JS - Tuts Make

Autocomplete textbox search from database in codeigniter 4 using jQuery Typeahead js. In this tutorial, you will learn how to implement an autocomplete search or textbox search with database using jquery typehead js example.

This tutorial will show you step by step how to implement autocomplete search from database in codeigniter 4 app using typeahead js.

Autocomplete Textbox Search using jQuery typeahead Js From Database in Codeigniter

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Table in Database
  • Setup Database Credentials
  • Create Controller
  • Create View
  • Create Route
  • Start Development Server

https://www.tutsmake.com/codeigniter-4-autocomplete-textbox-from-database-using-typeahead-js/

#codeigniter 4 ajax autocomplete search #codeigniter 4 ajax autocomplete search from database #autocomplete textbox in jquery example using database in codeigniter #search data from database in codeigniter 4 using ajax #how to search and display data from database in codeigniter 4 using ajax #autocomplete in codeigniter 4 using typeahead js

wp codevo

wp codevo

1608042336

JavaScript Shopping Cart - Javascript Project for Beginners

https://youtu.be/5B5Hn9VvrVs

#shopping cart javascript #hopping cart with javascript #javascript shopping cart tutorial for beginners #javascript cart project #javascript tutorial #shopping cart

Hire CodeIgniter Developer

Want to create unique, scalable web and app solutions?

At HourlyDeveloper.io, Expert CodeIgniter developer works particularly for you and your project.

You can Hire CodeIgniter Developer with an extensive variety of skill sets together with PHP, MySQL, PHP frameworks such as Laravel, CakePHP, and Zend, CMS, and e-commerce platforms such as WordPress, Drupal, Magento, WooCommerce, Shopify.

Consult with our experts: https://bit.ly/3hUdppScodeIgniter development services

#hire codeigniter developer #codeigniter developer #codeigniter development #codeigniter development company #codeigniter development services #codeigniter

Hire Codeigniter Developer - Hire CodeIgniter Developers or Programmers

One of the fastest, lightest, reliable, and completely capable frameworks for a business web app development is the Codeigniter framework from PHP. CodeIgniter provides out-of-the-box libraries to perform operations like Sending Emails, Uploading Files, Managing Sessions, etc.

Want to build an excellent web application for your business?

Then WebClues Infotech is the right place where you could find highly skilled and expert CodeIgniter developers for hire. Share us your requirement, Conduct desired candidate interviews, and finally choose the one best suitably, it is that easy with WebClues Infotech.

So what are you waiting for? Get going on the path to business growth with WebClues Infotech

For more inquiry click here: https://www.webcluesinfotech.com/contact-us/

Hire CodeIgniter Developer: https://www.webcluesinfotech.com/hire-codeigniter-developer/

Email: sales@webcluesinfotech.com

#hire codeigniter developers #hire codeigniter development expert #hire codeigniter developers #hire codeigniter developers or programmers #hire an offshore codeigniter development team #codeigniter programmer

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer