From 26de50bc46ca28f3841a5a4e06f368aa47cf74a0 Mon Sep 17 00:00:00 2001
From: prashant-webkul <prashant.singh852@webkul.com>
Date: Tue, 25 Sep 2018 14:07:34 +0530
Subject: [PATCH 01/11] Fixed bugs and made way for exisiting features of cart
 to be implemented in new future

---
 .../views/settings/channels/edit.blade.php    | 12 ++--
 packages/Webkul/Cart/src/Cart.php             |  3 -
 .../2018_09_05_150444_create_cart_table.php   |  5 ++
 .../src/Http/Controllers/CartController.php   | 65 +++++++++++++++----
 .../src/Http/ViewComposers/CartComposer.php   |  4 --
 .../Cart/src/Repositories/CartRepository.php  | 63 +++---------------
 packages/Webkul/Core/src/Core.php             |  2 +-
 .../Http/Controllers/ChannelController.php    |  5 +-
 .../Http/Controllers/SessionController.php    |  3 -
 packages/Webkul/Shop/src/Http/routes.php      |  4 +-
 .../views/store/cart/index.blade.php          | 35 ----------
 11 files changed, 75 insertions(+), 126 deletions(-)

diff --git a/packages/Webkul/Admin/src/Resources/views/settings/channels/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/settings/channels/edit.blade.php
index dd6b2da91..085b83936 100644
--- a/packages/Webkul/Admin/src/Resources/views/settings/channels/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/settings/channels/edit.blade.php
@@ -65,17 +65,17 @@
                                 <span class="control-error" v-if="errors.has('locales[]')">@{{ errors.first('locales[]') }}</span>
                             </div>
 
-                            <div class="control-group" :class="[errors.has('default_locale') ? 'has-error' : '']">
+                            <div class="control-group" :class="[errors.has('default_locale_id') ? 'has-error' : '']">
                                 <label for="default_locale" class="required">{{ __('admin::app.settings.channels.default-locale') }}</label>
                                 <?php $selectedOption = old('default_locale') ?: $channel->default_locale_id ?>
-                                <select v-validate="'required'" class="control" id="default_locale" name="default_locale">
+                                <select v-validate="'required'" class="control" id="default_locale" name="default_locale_id">
                                     @foreach(core()->getAllLocales() as $locale)
                                         <option value="{{ $locale->id }}" {{ $selectedOption == $locale->id ? 'selected' : '' }}>
                                             {{ $locale->name }}
                                         </option>
                                     @endforeach
                                 </select>
-                                <span class="control-error" v-if="errors.has('default_locale')">@{{ errors.first('default_locale') }}</span>
+                                <span class="control-error" v-if="errors.has('default_locale_id')">@{{ errors.first('default_locale_id') }}</span>
                             </div>
 
                             <div class="control-group" :class="[errors.has('currencies[]') ? 'has-error' : '']">
@@ -91,17 +91,17 @@
                                 <span class="control-error" v-if="errors.has('currencies[]')">@{{ errors.first('currencies[]') }}</span>
                             </div>
 
-                            <div class="control-group" :class="[errors.has('base_currency') ? 'has-error' : '']">
+                            <div class="control-group" :class="[errors.has('base_currency_id') ? 'has-error' : '']">
                                 <label for="base_currency" class="required">{{ __('admin::app.settings.channels.base-currency') }}</label>
                                 <?php $selectedOption = old('base_currency') ?: $channel->base_currency_id ?>
-                                <select v-validate="'required'" class="control" id="base_currency" name="base_currency">
+                                <select v-validate="'required'" class="control" id="base_currency" name="base_currency_id">
                                     @foreach(core()->getAllCurrencies() as $currency)
                                         <option value="{{ $currency->id }}" {{ $selectedOption == $currency->id ? 'selected' : '' }}>
                                             {{ $currency->name }}
                                         </option>
                                     @endforeach
                                 </select>
-                                <span class="control-error" v-if="errors.has('base_currency')">@{{ errors.first('base_currency') }}</span>
+                                <span class="control-error" v-if="errors.has('base_currency_id')">@{{ errors.first('base_currency_id') }}</span>
                             </div>
 
                         </div>
diff --git a/packages/Webkul/Cart/src/Cart.php b/packages/Webkul/Cart/src/Cart.php
index 21ef0a103..246254906 100644
--- a/packages/Webkul/Cart/src/Cart.php
+++ b/packages/Webkul/Cart/src/Cart.php
@@ -102,9 +102,6 @@ class Cart {
      */
     public function add($id, $data) {
 
-        // session()->forget('cart');
-        // return redirect()->back();
-
         if(session()->has('cart')) {
             $cart = session()->get('cart');
 
diff --git a/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150444_create_cart_table.php b/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150444_create_cart_table.php
index 9809f692d..f5027b241 100644
--- a/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150444_create_cart_table.php
+++ b/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150444_create_cart_table.php
@@ -20,6 +20,11 @@ class CreateCartTable extends Migration
             $table->string('session_id')->nullable();
             $table->integer('channel_id')->unsigned();
             $table->foreign('channel_id')->references('id')->on('channels');
+            $table->string('sku')->nullable();
+            $table->string('type')->nullable();
+            $table->string('name')->nullable();
+            $table->integer('parent_id')->nullable();
+            $table->foreign('parent_id')->references('id')->on('cart');
             $table->string('coupon_code')->nullable();
             $table->boolean('is_gift')->nullable();
             $table->integer('items_count')->nullable();
diff --git a/packages/Webkul/Cart/src/Http/Controllers/CartController.php b/packages/Webkul/Cart/src/Http/Controllers/CartController.php
index a27596180..59af6df1b 100644
--- a/packages/Webkul/Cart/src/Http/Controllers/CartController.php
+++ b/packages/Webkul/Cart/src/Http/Controllers/CartController.php
@@ -4,19 +4,15 @@ namespace Webkul\Cart\Http\Controllers;
 
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
-
 use Webkul\Cart\Repositories\CartRepository;
 use Webkul\Cart\Repositories\CartItemRepository;
-
 use Webkul\Product\Repositories\ProductRepository;
-
 use Webkul\Customer\Repositories\CustomerRepository;
-
 use Webkul\Product\Product\ProductImage;
 use Webkul\Product\Product\View as ProductView;
+use Webkul\Attribute\Repositories\AttributeOptionRepository;
 
 use Cart;
-use Cookie;
 
 /**
  * Cart controller for the customer
@@ -31,9 +27,17 @@ class CartController extends Controller
 {
 
     /**
-     * Display a listing of the resource.
+     * Protected Variables that
+     * holds instances of the
+     * repository classes.
      *
-     * @return \Illuminate\Http\Response
+     * @param Array $_config
+     * @param $cart
+     * @param $cartItem
+     * @param $customer
+     * @param $product
+     * @param $productImage
+     * @param $productView
      */
     protected $_config;
 
@@ -47,7 +51,26 @@ class CartController extends Controller
 
     protected $productView;
 
-    public function __construct(CartRepository $cart, CartItemRepository $cartItem, CustomerRepository $customer, ProductRepository $product, ProductImage $productImage, ProductView $productView) {
+    /**
+     * Initializing various
+     * required repositories
+     * and classes.
+     *
+     * @param Mixed $cart
+     * @param Mixed $cartItem
+     * @param Mixed $customer
+     * @param Mixed $product
+     * @param Mixed $productImage
+     * @param Mixed $productView
+     */
+    public function __construct(
+        CartRepository $cart,
+        CartItemRepository $cartItem,
+        CustomerRepository $customer,
+        ProductRepository $product,
+        ProductImage $productImage,
+        ProductView $productView)
+        {
 
         $this->middleware('customer')->except(['add', 'remove', 'test']);
 
@@ -75,20 +98,34 @@ class CartController extends Controller
      */
 
     public function add($id) {
+
+        session()->forget('cart');
+        return redirect()->back();
+
         $data = request()->input();
 
         if(!isset($data['is_configurable']) || !isset($data['product']) ||!isset($data['quantity'])) {
-            session()->flash('error', 'Cannot Product Due to User\'s miscreancy in system\'s integrity');
+            session()->flash('error', 'Cart System Integrity Violation');
 
             return redirect()->back();
+        } else {
+            //handle the accidental case
+            //when some one deleted
+            //form fields from the DOM
+            if($data['is_configurable']) {
+                if(!isset($data['super_attributes'])) {
+                    session()->flash('error', 'Cart System Integrity Violation');
+
+                    return redirect()->back();
+                }
+            }
         }
 
-        if($data['is_configurable'] == "false") {
-            $data['price'] = $this->product->findOneByField('id', $data['product'])->price;
-        } else {
-            $id = $data['selected_configurable_option'];
-
+        if(isset($data['is_configurable']) && $data['is_configurable']) {
             $data['price'] = $this->product->findOneByField('id', $data['selected_configurable_option'])->price;
+
+        } else {
+            $data['price'] = $this->product->findOneByField('id', $data['product'])->price;
         }
 
         Cart::add($id, $data);
diff --git a/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php b/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php
index d1e88dfbe..6432d6f7e 100644
--- a/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php
+++ b/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php
@@ -48,8 +48,6 @@ class CartComposer
             $cart = $this->cart->findOneByField('customer_id', auth()->guard('customer')->user()->id);
 
             if(isset($cart)) {
-                $cart = $this->cart->findOneByField('id', 144);
-
                 $cartItems = $this->cart->items($cart['id']);
 
                 $products = array();
@@ -74,8 +72,6 @@ class CartComposer
                 $cart = session()->get('cart');
 
                 if(isset($cart)) {
-                    $cart = $this->cart->findOneByField('id', 144);
-
                     $cartItems = $this->cart->items($cart['id']);
 
                     $products = array();
diff --git a/packages/Webkul/Cart/src/Repositories/CartRepository.php b/packages/Webkul/Cart/src/Repositories/CartRepository.php
index 362bad43c..5702461fc 100644
--- a/packages/Webkul/Cart/src/Repositories/CartRepository.php
+++ b/packages/Webkul/Cart/src/Repositories/CartRepository.php
@@ -42,7 +42,6 @@ class CartRepository extends Repository
      * @param string $attribute
      * @return Mixed
      */
-
     public function update(array $data, $id, $attribute = "id")
     {
         $cart = $this->find($id);
@@ -52,60 +51,6 @@ class CartRepository extends Repository
         return $cart;
     }
 
-    public function getProducts($id) {
-
-        return $this->model->find($id)->with_products;
-    }
-
-    /**
-     * Method to attach
-     * associations
-     *
-     * @return Mixed
-    */
-    public function attach($cart_id, $product_id, $quantity, $price) {
-        return $this->model->findOrFail($cart_id)->with_products()->attach($cart_id, ['product_id' => $product_id, 'cart_id' => $cart_id, 'quantity' => $quantity, 'price' => $price]);
-    }
-
-    /**
-     * Create Cart Item
-     * Through Cart.
-     *
-     * @return Collection
-     */
-    public function createItem($cartId, $data) {
-        $cart = $this->model->findOrFail($cartId);
-
-        return $cart->items()->create($data);
-    }
-
-    /**
-     * This will update the
-     * quantity of product
-     * for the customer,
-     * in case of merge.
-     *
-     * @return Mixed
-     */
-    public function updateRelatedForMerge($cart_id, $product_id, $column, $value) {
-        $cart_product = $this->model->findOrFail($cart_id);
-
-        return $cart_product->with_products()->updateExistingPivot($product_id, array($column => $value));
-    }
-
-    /**
-     * Update the quantity of
-     * previously added item
-     * in the cart.
-     *
-     * @return Mixed
-     */
-
-    // public function updateRelatedInItems($cartId, $cartItemId, $column, $value) {
-
-    //     return $this->updateItem($cartId)->syncWithoutDetaching($cartItemId, [$column => $value]);
-    // }
-
     /**
      * Method to detach
      * associations.
@@ -121,6 +66,14 @@ class CartRepository extends Repository
         return $this->model->destroy($cart_id);
     }
 
+    /**
+     * Used to get items
+     * for cart explicitly,
+     * use cart instance
+     * instead.
+     *
+     * @return Mixed
+     */
     public function items($cartId) {
         return $this->model->find($cartId)->items;
     }
diff --git a/packages/Webkul/Core/src/Core.php b/packages/Webkul/Core/src/Core.php
index 4457259e3..5c2d895c0 100644
--- a/packages/Webkul/Core/src/Core.php
+++ b/packages/Webkul/Core/src/Core.php
@@ -140,7 +140,7 @@ class Core
 
         $channel = $this->getCurrentChannel();
 
-        $currencyCode = $channel->base_currency;
+        $currencyCode = $channel->base_currency->code;
 
         return currency($price, $currencyCode);
     }
diff --git a/packages/Webkul/Core/src/Http/Controllers/ChannelController.php b/packages/Webkul/Core/src/Http/Controllers/ChannelController.php
index 858b69202..5328fc3e9 100644
--- a/packages/Webkul/Core/src/Http/Controllers/ChannelController.php
+++ b/packages/Webkul/Core/src/Http/Controllers/ChannelController.php
@@ -80,7 +80,6 @@ class ChannelController extends Controller
             'base_currency' => 'required'
         ]);
 
-
         $this->channel->create(request()->all());
 
         session()->flash('success', 'Channel created successfully.');
@@ -114,9 +113,9 @@ class ChannelController extends Controller
             'code' => ['required', 'unique:channels,code,' . $id, new \Webkul\Core\Contracts\Validations\Code],
             'name' => 'required',
             'locales' => 'required|array|min:1',
-            'default_locale' => 'required',
+            'default_locale_id' => 'required',
             'currencies' => 'required|array|min:1',
-            'base_currency' => 'required'
+            'base_currency_id' => 'required'
         ]);
 
         $this->channel->update(request()->all(), $id);
diff --git a/packages/Webkul/Customer/src/Http/Controllers/SessionController.php b/packages/Webkul/Customer/src/Http/Controllers/SessionController.php
index afa24027a..564777325 100644
--- a/packages/Webkul/Customer/src/Http/Controllers/SessionController.php
+++ b/packages/Webkul/Customer/src/Http/Controllers/SessionController.php
@@ -5,11 +5,8 @@ namespace Webkul\Customer\Http\Controllers;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 use Illuminate\Support\Facades\Event;
-
 use Webkul\Customer\Models\Customer;
 use Webkul\Customer\Http\Listeners\CustomerEventsHandler;
-
-use Cookie;
 use Cart;
 /**
  * Session controller for the user customer
diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php
index 6fb7371e1..68743d727 100644
--- a/packages/Webkul/Shop/src/Http/routes.php
+++ b/packages/Webkul/Shop/src/Http/routes.php
@@ -35,9 +35,9 @@ Route::group(['middleware' => ['web']], function () {
 
     // //Routes for product cart
 
-    Route::post('products/add/{id}', 'Webkul\Cart\Http\Controllers\CartController@add')->name('cart.add');
+    Route::post('checkout/cart/add/{id}', 'Webkul\Cart\Http\Controllers\CartController@add')->name('cart.add');
 
-    Route::post('product/remove/{id}', 'Webkul\Cart\Http\Controllers\CartController@remove')->name('cart.remove');
+    Route::post('checkout/cart/remove/{id}', 'Webkul\Cart\Http\Controllers\CartController@remove')->name('cart.remove');
 
     //Routes for product cart ends
 
diff --git a/packages/Webkul/Shop/src/Resources/views/store/cart/index.blade.php b/packages/Webkul/Shop/src/Resources/views/store/cart/index.blade.php
index 4230a8dac..172dc910d 100644
--- a/packages/Webkul/Shop/src/Resources/views/store/cart/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/store/cart/index.blade.php
@@ -6,45 +6,10 @@
         </div>
 
         <div class="cart-content">
-
             {{-- {{ dd($products) }} --}}
 
             <div class="left-side">
 
-                {{-- <div class="item">
-                    <img class="item-image" src="{{ bagisto_asset('images/jeans_big.jpg') }}" />
-
-                    <div class="item-details">
-
-                        <div class="item-title">
-                            Rainbow Creation Embroided
-                        </div>
-
-                        <div class="price">
-                            <span class="main-price">
-                                $24.00
-                            </span>
-                            <span class="real-price">
-                                $25.00
-                            </span>
-                            <span class="discount">
-                                10% Off
-                            </span>
-                        </div>
-
-                        <div class="summary">
-                            Color : Gray, Size : S, Sleeve type : Puffed Sleeves, Occasion : Birthday,  Marriage Anniversary
-                        </div>
-
-                        <div class="misc">
-                            <div class="qty-text">Quantity</div>
-                            <div class="box">1</div>
-                            <span class="remove">Remove</span>
-                            <span class="towishlist">Move to Wishlist</span>
-                        </div>
-                    </div>
-
-                </div> --}}
                 @foreach($products as $product)
                     <div class="item">
                         <div style="margin-right: 15px;">

From e2bac8a34ea78bf5bd836a2ed53ddd2dba170cb8 Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Wed, 26 Sep 2018 09:51:14 +0530
Subject: [PATCH 02/11] Cart fixes

---
 config/carriers.php                           |   8 +
 packages/Webkul/Cart/src/Cart.php             | 182 ++++++++++++++----
 .../2018_09_19_092845_create_cart_address.php |   3 +
 ...3508_create_cart_shipping_rates_table.php} |   8 +-
 .../src/Http/Controllers/CartController.php   |  90 +++------
 .../Http/Controllers/CheckoutController.php   |  12 +-
 .../src/Http/ViewComposers/CartComposer.php   |   8 +-
 packages/Webkul/Cart/src/Models/Cart.php      |  42 +++-
 .../Webkul/Cart/src/Models/CartAddress.php    |  15 +-
 .../Webkul/Cart/src/Models/CartShipping.php   |  10 -
 .../Cart/src/Models/CartShippingRate.php      |  17 ++
 .../Repositories/CartAddressRepository.php    |  25 +++
 packages/Webkul/Core/src/Core.php             |   3 +-
 .../Webkul/Shipping/src/Carriers/FlatRate.php |   9 +-
 .../Webkul/Shipping/src/Carriers/Free.php     |  43 +++++
 packages/Webkul/Shipping/src/Shipping.php     |  57 ++++++
 packages/Webkul/Shop/src/Http/routes.php      |  12 +-
 .../Webkul/Shop/src/Resources/lang/en/app.php |   3 +-
 .../views/checkout/cart/index.blade.php       | 141 ++++++++++++++
 .../checkout/onepage/customer-info.blade.php  |   4 +-
 .../views/checkout/onepage/shipping.blade.php |   2 +-
 public/themes/default/assets/js/shop.js       |   6 +-
 22 files changed, 546 insertions(+), 154 deletions(-)
 rename packages/Webkul/Cart/src/Database/Migrations/{2018_09_19_093508_create_cart_shipping.php => 2018_09_19_093508_create_cart_shipping_rates_table.php} (74%)
 delete mode 100644 packages/Webkul/Cart/src/Models/CartShipping.php
 create mode 100644 packages/Webkul/Cart/src/Models/CartShippingRate.php
 create mode 100644 packages/Webkul/Cart/src/Repositories/CartAddressRepository.php
 create mode 100644 packages/Webkul/Shipping/src/Carriers/Free.php

diff --git a/config/carriers.php b/config/carriers.php
index ca9253b71..030b22f1c 100644
--- a/config/carriers.php
+++ b/config/carriers.php
@@ -9,6 +9,14 @@ return [
         'default_rate' => '10',
         'type' => 'per_unit',
         'class' => 'Webkul\Shipping\Carriers\FlatRate',
+    ],
+
+    'free' => [
+        'code' => 'free',
+        'title' => 'Free Shipping',
+        'description' => 'This is a free shipping',
+        'active' => true,
+        'class' => 'Webkul\Shipping\Carriers\Free',
     ]
 ];
 
diff --git a/packages/Webkul/Cart/src/Cart.php b/packages/Webkul/Cart/src/Cart.php
index 21ef0a103..aef382642 100644
--- a/packages/Webkul/Cart/src/Cart.php
+++ b/packages/Webkul/Cart/src/Cart.php
@@ -3,59 +3,94 @@
 namespace Webkul\Cart;
 
 use Carbon\Carbon;
-
 use Webkul\Cart\Repositories\CartRepository;
 use Webkul\Cart\Repositories\CartItemRepository;
-
+use Webkul\Cart\Repositories\CartAddressRepository;
 use Webkul\Customer\Repositories\CustomerRepository;
-
 use Webkul\Product\Repositories\ProductRepository;
-
 use Cookie;
 
 /**
- * Facade for all
- * the methods to be
- * implemented in Cart.
+ * Facade for all the methods to be implemented in Cart.
  *
  * @author    Prashant Singh <prashant.singh852@webkul.com>
  * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
  */
 class Cart {
 
-    protected $cart;    //cart repository instance
+    /**
+     * CartRepository model
+     *
+     * @var mixed
+     */
+    protected $cart;
 
-    protected $cartItem;    //cart_item repository instance
+    /**
+     * CartItemRepository model
+     *
+     * @var mixed
+     */
+    protected $cartItem;
 
-    protected $customer;    //customer repository instance
+    /**
+     * CustomerRepository model
+     *
+     * @var mixed
+     */
+    protected $customer;
 
-    protected $product;     //product repository instance
+    /**
+     * CartAddressRepository model
+     *
+     * @var mixed
+     */
+    protected $cartAddress;
 
-    public function __construct(CartRepository $cart,
-    CartItemRepository $cartItem,
-    CustomerRepository $customer,
-    ProductRepository $product) {
+    /**
+     * ProductRepository model
+     *
+     * @var mixed
+     */
+    protected $product;
 
+    /**
+     * Create a new controller instance.
+     *
+     * @param  Webkul\Cart\Repositories\CartRepository $cart
+     * @param  Webkul\Cart\Repositories\CartItemRepository $cartItem
+     * @param  Webkul\Cart\Repositories\CartAddressRepository $cartAddress
+     * @param  Webkul\Customer\Repositories\CustomerRepository $customer
+     * @param  Webkul\Product\Repositories\ProductRepository $product
+     * @return void
+     */
+    public function __construct(
+        CartRepository $cart,
+        CartItemRepository $cartItem,
+        CartAddressRepository $cartAddress,
+        CustomerRepository $customer,
+        ProductRepository $product) 
+    {
         $this->customer = $customer;
 
         $this->cart = $cart;
 
         $this->cartItem = $cartItem;
 
+        $this->cartAddress = $cartAddress;
+
         $this->product = $product;
     }
 
     /**
-     * Create new cart
-     * instance with the
-     * current item added.
+     * Create new cart instance with the current item added.
      *
-     * @param Integer $id
-     * @param Mixed $data
+     * @param integer $id
+     * @param array $data
      *
-     * @return Mixed
+     * @return Response
      */
-    public function createNewCart($id, $data) {
+    public function createNewCart($id, $data)
+    {
         $cartData['channel_id'] = core()->getCurrentChannel()->id;
 
         if(auth()->guard('customer')->check()) {
@@ -84,23 +119,22 @@ class Cart {
                 return redirect()->back();
             }
         }
+
         session()->flash('error', 'Some error occured');
 
         return redirect()->back();
     }
 
     /**
-     * Add Items in a
-     * cart with some
-     * cart and item
-     * details.
+     * Add Items in a cart with some cart and item details.
      *
      * @param @id
      * @param $data
      *
-     * @return Mixed
+     * @return void
      */
-    public function add($id, $data) {
+    public function add($id, $data)
+    {
 
         // session()->forget('cart');
         // return redirect()->back();
@@ -153,26 +187,24 @@ class Cart {
     }
 
     /**
-     * use detach to remove the
-     * current product from cart tables
+     * Use detach to remove the current product from cart tables
      *
      * @param Integer $id
      * @return Mixed
      */
-    public function remove($id) {
+    public function remove($id)
+    {
 
         dd("Removing Item from Cart");
     }
 
     /**
-     * This function handles
-     * when guest has some of
-     * cart products and then
-     * logs in.
+     * This function handles when guest has some of cart products and then logs in.
      *
-     * @return Redirect
+     * @return Response
      */
-    public function mergeCart() {
+    public function mergeCart()
+    {
         if(session()->has('cart')) {
             $cart = session()->get('cart');
 
@@ -222,4 +254,80 @@ class Cart {
             return redirect()->back();
         }
     }
+
+    /**
+     * Returns cart
+     *
+     * @return Mixed
+     */
+    public function getCart()
+    {
+        if(!$cart = session()->get('cart'))
+            return false;
+        
+        return $cart;
+    }
+
+    /**
+     * Save customer address
+     *
+     * @return Mixed
+     */
+    public function saveCustomerAddress($data)
+    {
+        if(!$cart = $this->getCart())
+            return false;
+
+        $billingAddress = $data['billing'];
+        $shippingAddress = $data['shipping'];
+        $billingAddress['cart_id'] = $shippingAddress['cart_id'] = $cart->id;
+
+        if($billingAddressModel = $cart->biling_address) {
+            $this->cartAddress->update($billingAddress, $billingAddressModel->id);
+
+            if($shippingAddress = $cart->shipping_address) {
+                if(isset($billingAddress['use_for_shipping']) && $billingAddress['use_for_shipping']) {
+                    $this->cartAddress->update($billingAddress, $shippingAddress->id);
+                } else {
+                    $this->cartAddress->update($shippingAddress, $shippingAddress->id);
+                }
+            } else {
+                if(isset($billingAddress['use_for_shipping']) && $billingAddress['use_for_shipping']) {
+                    $this->cartAddress->create(array_merge($billingAddress, ['address_type' => 'shipping']));
+                } else {
+                    $this->cartAddress->create(array_merge($shippingAddress, ['address_type' => 'shipping']));
+                }
+            }
+        } else {
+            $this->cartAddress->create(array_merge($billingAddress, ['address_type' => 'billing']));
+
+            if(isset($billingAddress['use_for_shipping']) && $billingAddress['use_for_shipping']) {
+                $this->cartAddress->create(array_merge($billingAddress, ['address_type' => 'shipping']));
+            } else {
+                $this->cartAddress->create(array_merge($shippingAddress, ['address_type' => 'shipping']));
+            }
+        }
+        
+        return true;
+    }
+
+    /**
+     * Save shipping method for cart
+     *
+     * @param string $shippingMethodCode
+     * @return Mixed
+     */
+    public function saveShippingMethod($shippingMethodCode)
+    {
+        if(!$cart = $this->getCart())
+            return false;
+
+        foreach($cart->shipping_rates as $rate) {
+            if($rate->method != $shippingMethodCode) {
+                $rate->delete();
+            }
+        }
+
+        return true;
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_092845_create_cart_address.php b/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_092845_create_cart_address.php
index 070ea4609..2148ccf8f 100644
--- a/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_092845_create_cart_address.php
+++ b/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_092845_create_cart_address.php
@@ -15,6 +15,9 @@ class CreateCartAddress extends Migration
     {
         Schema::create('cart_address', function (Blueprint $table) {
             $table->increments('id');
+            $table->string('first_name');
+            $table->string('last_name');
+            $table->string('email');
             $table->string('address1');
             $table->string('address2')->nullable();
             $table->string('country');
diff --git a/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping.php b/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping_rates_table.php
similarity index 74%
rename from packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping.php
rename to packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping_rates_table.php
index 9413012ae..3b286d510 100644
--- a/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping.php
+++ b/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping_rates_table.php
@@ -4,7 +4,7 @@ use Illuminate\Support\Facades\Schema;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Database\Migrations\Migration;
 
-class CreateCartShipping extends Migration
+class CreateCartShippingRatesTable extends Migration
 {
     /**
      * Run the migrations.
@@ -13,7 +13,7 @@ class CreateCartShipping extends Migration
      */
     public function up()
     {
-        Schema::create('cart_shipping', function (Blueprint $table) {
+        Schema::create('cart_shipping_rates', function (Blueprint $table) {
             $table->increments('id');
             $table->string('carrier');
             $table->string('carrier_title');
@@ -21,8 +21,6 @@ class CreateCartShipping extends Migration
             $table->string('method_title');
             $table->string('method_description')->nullable();
             $table->double('price')->nullable();
-            $table->integer('cart_id')->nullable()->unsigned();
-            $table->foreign('cart_id')->references('id')->on('cart');
             $table->integer('cart_address_id')->nullable()->unsigned();
             $table->foreign('cart_address_id')->references('id')->on('cart_address');
             $table->timestamps();
@@ -36,6 +34,6 @@ class CreateCartShipping extends Migration
      */
     public function down()
     {
-        Schema::dropIfExists('cart_shipping');
+        Schema::dropIfExists('cart_shipping_rates');
     }
 }
diff --git a/packages/Webkul/Cart/src/Http/Controllers/CartController.php b/packages/Webkul/Cart/src/Http/Controllers/CartController.php
index a27596180..9c07cafd6 100644
--- a/packages/Webkul/Cart/src/Http/Controllers/CartController.php
+++ b/packages/Webkul/Cart/src/Http/Controllers/CartController.php
@@ -4,17 +4,12 @@ namespace Webkul\Cart\Http\Controllers;
 
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
-
 use Webkul\Cart\Repositories\CartRepository;
 use Webkul\Cart\Repositories\CartItemRepository;
-
 use Webkul\Product\Repositories\ProductRepository;
-
 use Webkul\Customer\Repositories\CustomerRepository;
-
 use Webkul\Product\Product\ProductImage;
 use Webkul\Product\Product\View as ProductView;
-
 use Cart;
 use Cookie;
 
@@ -47,9 +42,16 @@ class CartController extends Controller
 
     protected $productView;
 
-    public function __construct(CartRepository $cart, CartItemRepository $cartItem, CustomerRepository $customer, ProductRepository $product, ProductImage $productImage, ProductView $productView) {
+    public function __construct(
+        CartRepository $cart,
+        CartItemRepository $cartItem,
+        CustomerRepository $customer,
+        ProductRepository $product,
+        ProductImage $productImage,
+        ProductView $productView
+    ) {
 
-        $this->middleware('customer')->except(['add', 'remove', 'test']);
+        // $this->middleware('customer')->except(['add', 'remove', 'test']);
 
         $this->customer = $customer;
 
@@ -66,6 +68,19 @@ class CartController extends Controller
         $this->_config = request('_config');
     }
 
+    /**
+     * Method to populate
+     * the cart page which
+     * will be populated
+     * before the checkout
+     * process.
+     *
+     * @return Mixed
+     */
+    public function index() {
+        return view($this->_config['view'])->with('cart', Cart::getCart());
+    }
+
     /**
      * Function for guests
      * user to add the product
@@ -107,67 +122,6 @@ class CartController extends Controller
         return redirect()->back();
     }
 
-    /**
-     * Method to populate
-     * the cart page which
-     * will be populated
-     * before the checkout
-     * process.
-     *
-     * @return Mixed
-     */
-    public function beforeCheckout() {
-        if(auth()->guard('customer')->check()) {
-            $cart = $this->cart->findOneByField('customer_id', auth()->guard('customer')->user()->id);
-
-            if(isset($cart)) {
-                $cart = $this->cart->findOneByField('id', 144);
-
-                $cartItems = $this->cart->items($cart['id']);
-
-                $products = array();
-
-                foreach($cartItems as $cartItem) {
-                    $image = $this->productImage->getGalleryImages($cartItem->product);
-
-                    if(isset($image[0]['small_image_url'])) {
-                        $products[$cartItem->product->id] = [$cartItem->product->name, $cartItem->price, $image[0]['small_image_url'], $cartItem->quantity];
-                    }
-                    else {
-                        $products[$cartItem->product->id] = [$cartItem->product->name, $cartItem->price, 'null', $cartItem->quantity];
-                    }
-
-                }
-            }
-        } else {
-            if(session()->has('cart')) {
-                $cart = session()->get('cart');
-
-                if(isset($cart)) {
-                    $cart = $this->cart->findOneByField('id', 144);
-
-                    $cartItems = $this->cart->items($cart['id']);
-
-                    $products = array();
-
-                    foreach($cartItems as $cartItem) {
-                        $image = $this->productImage->getGalleryImages($cartItem->product);
-
-                        if(isset($image[0]['small_image_url'])) {
-                            $products[$cartItem->product->id] = [$cartItem->product->name, $cartItem->price, $image[0]['small_image_url'], $cartItem->quantity];
-                        }
-                        else {
-                            $products[$cartItem->product->id] = [$cartItem->product->name, $cartItem->price, 'null', $cartItem->quantity];
-                        }
-
-                    }
-                }
-            }
-        }
-
-        return view($this->_config['view'])->with('products', $products);
-    }
-
     /**
      * This method will return
      * the quantities from
diff --git a/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php b/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php
index 8f8022a0d..486067e2d 100644
--- a/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php
+++ b/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php
@@ -43,7 +43,10 @@ class CheckoutController extends Controller
     */
     public function index()
     {
-        return view($this->_config['view']);
+        if(!$cart = Cart::getCart())
+            return redirect()->route('shop.checkout.cart.index');
+
+        return view($this->_config['view'])->with('cart', $cart);
     }
 
     /**
@@ -54,11 +57,10 @@ class CheckoutController extends Controller
     */
     public function saveAddress(CustomerAddressForm $request)
     {
-        if(!Cart::saveCustomerAddress(request()->all())) {
-            // return response()->json(['redirect_url' => route('store.home')], 403)
-        }
+        if(!Cart::saveCustomerAddress(request()->all()) || !$rates = Shipping::collectRates())
+            return response()->json(['redirect_url' => route('shop.checkout.cart.index')], 403);
 
-        return response()->json(Shipping::collectRates());
+        return response()->json($rates);
     }
 
     /**
diff --git a/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php b/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php
index d1e88dfbe..c6979913e 100644
--- a/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php
+++ b/packages/Webkul/Cart/src/Http/ViewComposers/CartComposer.php
@@ -70,13 +70,9 @@ class CartComposer
                 $view->with('cart', $products);
             }
         } else {
-            if(session()->has('cart')) {
-                $cart = session()->get('cart');
-
+            if($cart = session()->get('cart')) {
                 if(isset($cart)) {
-                    $cart = $this->cart->findOneByField('id', 144);
-
-                    $cartItems = $this->cart->items($cart['id']);
+                    $cartItems = $cart->items($cart['id']);
 
                     $products = array();
 
diff --git a/packages/Webkul/Cart/src/Models/Cart.php b/packages/Webkul/Cart/src/Models/Cart.php
index 734897522..48b7e62e9 100644
--- a/packages/Webkul/Cart/src/Models/Cart.php
+++ b/packages/Webkul/Cart/src/Models/Cart.php
@@ -5,7 +5,7 @@ namespace Webkul\Cart\Models;
 use Illuminate\Database\Eloquent\Model;
 use Webkul\Product\Models\Product;
 use Webkul\Cart\Models\CartAddress;
-use Webkul\Cart\Models\CartShipping;
+use Webkul\Cart\Models\CartShippingRate;
 
 class Cart extends Model
 {
@@ -28,10 +28,42 @@ class Cart extends Model
     }
 
     /**
-     * Get the shipping for the cart.
+     * Get the biling address for the cart.
      */
-    public function shipping()
+    public function biling_address()
     {
-        return $this->hasMany(CartShipping::class);
+        return $this->addresses()->where('address_type', 'billing');
     }
-}
+
+    /**
+     * Get all of the attributes for the attribute groups.
+     */
+    public function getBilingAddressAttribute()
+    {
+        return $this->biling_address()->first();
+    }
+
+    /**
+     * Get the shipping address for the cart.
+     */
+    public function shipping_address()
+    {
+        return $this->addresses()->where('address_type', 'shipping');
+    }
+
+    /**
+     * Get all of the attributes for the attribute groups.
+     */
+    public function getShippingAddressAttribute()
+    {
+        return $this->shipping_address()->first();
+    }
+
+    /**
+     * Get the shipping rates for the cart.
+     */
+    public function shipping_rates()
+    {
+        return $this->hasManyThrough(CartShippingRate::class, CartAddress::class, 'cart_id', 'cart_address_id');
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Models/CartAddress.php b/packages/Webkul/Cart/src/Models/CartAddress.php
index 5ecad6830..889328d39 100644
--- a/packages/Webkul/Cart/src/Models/CartAddress.php
+++ b/packages/Webkul/Cart/src/Models/CartAddress.php
@@ -3,8 +3,19 @@
 namespace Webkul\Cart\Models;
 
 use Illuminate\Database\Eloquent\Model;
+use Webkul\Cart\Models\CartShippingRate;
 
 class CartAddress extends Model
 {
-    
-}
+    protected $table = 'cart_address';
+
+    protected $fillable = ['first_name', 'last_name', 'email', 'address1', 'address2', 'city', 'state', 'postcode',  'country',  'email', 'phone', 'address_type', 'cart_id'];
+
+    /**
+     * Get the shipping rates for the cart address.
+     */
+    public function shipping_rates()
+    {
+        return $this->hasMany(CartShippingRate::class);
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Models/CartShipping.php b/packages/Webkul/Cart/src/Models/CartShipping.php
deleted file mode 100644
index fd1cc7f76..000000000
--- a/packages/Webkul/Cart/src/Models/CartShipping.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<?php
-
-namespace Webkul\Cart\Models;
-
-use Illuminate\Database\Eloquent\Model;
-
-class CartShipping extends Model
-{
-    
-}
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Models/CartShippingRate.php b/packages/Webkul/Cart/src/Models/CartShippingRate.php
new file mode 100644
index 000000000..edd477695
--- /dev/null
+++ b/packages/Webkul/Cart/src/Models/CartShippingRate.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace Webkul\Cart\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Webkul\Cart\Models\CartAddress;
+
+class CartShippingRate extends Model
+{
+    /**
+     * Get the post that owns the comment.
+     */
+    public function shipping_address()
+    {
+        return $this->belongsTo(CartAddress::class);
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Repositories/CartAddressRepository.php b/packages/Webkul/Cart/src/Repositories/CartAddressRepository.php
new file mode 100644
index 000000000..9491aeefa
--- /dev/null
+++ b/packages/Webkul/Cart/src/Repositories/CartAddressRepository.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Webkul\Cart\Repositories;
+
+use Webkul\Core\Eloquent\Repository;
+
+/**
+ * Cart Address Reposotory
+ *
+ * @author    Prashant Singh <prashant.singh852@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+
+class CartAddressRepository extends Repository
+{
+    /**
+     * Specify Model class name
+     *
+     * @return Mixed
+     */
+    function model()
+    {
+        return 'Webkul\Cart\Models\CartAddress';
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Core.php b/packages/Webkul/Core/src/Core.php
index 4457259e3..0b5d36e49 100644
--- a/packages/Webkul/Core/src/Core.php
+++ b/packages/Webkul/Core/src/Core.php
@@ -140,7 +140,8 @@ class Core
 
         $channel = $this->getCurrentChannel();
 
-        $currencyCode = $channel->base_currency;
+        $currencyCode = $channel->base_currency->code;
+        // $currencyCode = $channel->base_currency;
 
         return currency($price, $currencyCode);
     }
diff --git a/packages/Webkul/Shipping/src/Carriers/FlatRate.php b/packages/Webkul/Shipping/src/Carriers/FlatRate.php
index 0d93f4cdc..449b32e0d 100644
--- a/packages/Webkul/Shipping/src/Carriers/FlatRate.php
+++ b/packages/Webkul/Shipping/src/Carriers/FlatRate.php
@@ -3,7 +3,7 @@
 namespace Webkul\Shipping\Carriers;
 
 use Config;
-use Webkul\Cart\Models\CartShipping;
+use Webkul\Cart\Models\CartShippingRate;
 use Webkul\Shipping\Facades\Shipping;
 
 /**
@@ -19,12 +19,17 @@ class FlatRate extends AbstractShipping
      */
     protected $code  = 'flatrate';
 
+    /**
+     * Returns rate for flatrate
+     *
+     * @return array
+     */
     public function calculate()
     {
         if(!$this->isAvailable())
             return false;
 
-        $object = new CartShipping;
+        $object = new CartShippingRate;
 
         $object->carrier = 'flatrate';
         $object->carrier_title = $this->getConfigData('title');
diff --git a/packages/Webkul/Shipping/src/Carriers/Free.php b/packages/Webkul/Shipping/src/Carriers/Free.php
new file mode 100644
index 000000000..e51a1ec53
--- /dev/null
+++ b/packages/Webkul/Shipping/src/Carriers/Free.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace Webkul\Shipping\Carriers;
+
+use Config;
+use Webkul\Cart\Models\CartShippingRate;
+use Webkul\Shipping\Facades\Shipping;
+
+/**
+ * Class Rate.
+ *
+ */
+class Free extends AbstractShipping
+{
+    /**
+     * Payment method code
+     *
+     * @var string
+     */
+    protected $code  = 'free';
+
+    /**
+     * Returns rate for flatrate
+     *
+     * @return array
+     */
+    public function calculate()
+    {
+        if(!$this->isAvailable())
+            return false;
+
+        $object = new CartShippingRate;
+
+        $object->carrier = 'free';
+        $object->carrier_title = $this->getConfigData('title');
+        $object->method = 'free_free';
+        $object->method_title = $this->getConfigData('title');
+        $object->method_description = $this->getConfigData('description');
+        $object->price = 0;
+
+        return $object;
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Shipping/src/Shipping.php b/packages/Webkul/Shipping/src/Shipping.php
index 201b7af19..fb8d06406 100644
--- a/packages/Webkul/Shipping/src/Shipping.php
+++ b/packages/Webkul/Shipping/src/Shipping.php
@@ -3,6 +3,7 @@
 namespace Webkul\Shipping;
 
 use Illuminate\Support\Facades\Config;
+use Webkul\Cart\Facades\Cart;
 
 /**
  * Class Shipping.
@@ -10,10 +11,25 @@ use Illuminate\Support\Facades\Config;
  */
 class Shipping
 {
+    /**
+     * Rates
+     *
+     * @var array
+     */
     protected $rates = [];
 
+    /**
+     * Collects rate from available shipping methods
+     *
+     * @return array
+     */
     public function collectRates()
     {
+        if(!$cart = Cart::getCart())
+            return false;
+
+        $this->removeAllShippingRates();
+
         foreach(Config::get('carriers') as $shippingMethod) {
             $object = new $shippingMethod['class'];
 
@@ -26,12 +42,53 @@ class Shipping
             }
         }
 
+        $this->saveAllShippingRates();
+
         return [
                 'jump_to_section' => 'shipping',
                 'html' => view('shop::checkout.onepage.shipping', ['shippingRateGroups' => $this->getGroupedAllShippingRates()])->render()
             ];
     }
+    
+    /**
+     * Persist shipping rate to database
+     *
+     * @return void
+     */
+    public function removeAllShippingRates()
+    {
+        if(!$cart = Cart::getCart())
+            return;
 
+        foreach($cart->shipping_rates()->get() as $rate) {
+            $rate->delete();
+        }
+    }
+    
+    /**
+     * Persist shipping rate to database
+     *
+     * @return void
+     */
+    public function saveAllShippingRates()
+    {
+        if(!$cart = Cart::getCart())
+            return;
+
+        $shippingAddress = $cart->shipping_address;
+
+        foreach($this->rates as $rate) {
+            $rate->cart_address_id = $shippingAddress->id;
+
+            $rate->save();
+        }
+    }
+
+    /**
+     * Returns shipping rates, grouped by shipping method
+     *
+     * @return void
+     */
     public function getGroupedAllShippingRates()
     {
         $rates = [];
diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php
index 6fb7371e1..0be527229 100644
--- a/packages/Webkul/Shop/src/Http/routes.php
+++ b/packages/Webkul/Shop/src/Http/routes.php
@@ -10,16 +10,16 @@ Route::group(['middleware' => ['web']], function () {
         'view' => 'shop::products.index'
     ]);
 
-    Route::get('/checkout', 'Webkul\Cart\Http\Controllers\CheckoutController@index')->defaults('_config', [
+    Route::get('/checkout/cart', 'Webkul\Cart\Http\Controllers\CartController@index')->defaults('_config', [
+        'view' => 'shop::checkout.cart.index'
+    ])->name('shop.checkout.cart.index');
+
+    Route::get('/checkout/onepage', 'Webkul\Cart\Http\Controllers\CheckoutController@index')->defaults('_config', [
         'view' => 'shop::checkout.onepage'
-    ])->name('shop.checkout');
+    ])->name('shop.checkout.onepage.index');
 
     Route::get('test', 'Webkul\Cart\Http\Controllers\CartController@test');
 
-    Route::get('cart', 'Webkul\Cart\Http\Controllers\CartController@beforeCheckout')->defaults('_config', [
-        'view' => 'shop::store.cart.index'
-    ]);
-
     Route::post('/checkout/save-address', 'Webkul\Cart\Http\Controllers\CheckoutController@saveAddress')->name('shop.checkout.save-address');
 
     Route::post('/checkout/save-shipping', 'Webkul\Cart\Http\Controllers\CheckoutController@saveShipping')->name('shop.checkout.save-shipping');
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index f183767ed..1ad002407 100644
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -60,7 +60,8 @@ return [
 
     'checkout' => [
         'cart' => [
-
+            'title' => 'Shopping Cart',
+            'empty' => 'Shopping Cart Is Empty',
         ],
 
         'onepage' => [
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
index e69de29bb..361731c3b 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
@@ -0,0 +1,141 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.checkout.cart.title') }}
+@stop
+
+@section('content-wrapper')
+
+    @inject ('productImageHelper', 'Webkul\Product\Product\ProductImage')
+
+    <section class="cart">
+
+        @if ($cart)
+
+            <div class="title">
+                {{ __('shop::app.checkout.cart.title') }}
+            </div>
+
+            <div class="cart-content">
+
+                <div class="left-side">
+
+                    @foreach($cart->items as $item)
+
+                        <?php 
+                            $product = $item->product; 
+
+                            $productBaseImage = $productImageHelper->getProductBaseImage($product);
+                        ?>
+
+                        <div class="item">
+                            <div style="margin-right: 15px;">
+                                <img class="item-image" src="{{ $productBaseImage['medium_image_url'] }}" />
+                            </div>
+
+                            <div class="item-details">
+
+                                <div class="item-title">
+                                    {{ $product->name }}
+                                </div>
+
+                                <div class="price">
+                                    <span class="main-price">
+                                        {{ $item->price }}
+                                    </span>
+                                    <span class="real-price">
+                                        $25.00
+                                    </span>
+                                    <span class="discount">
+                                        10% Off
+                                    </span>
+                                </div>
+
+                                <div class="summary" >
+                                    Color : Gray, Size : S
+                                </div>
+
+                                <div class="misc">
+                                    <div class="qty-text">Quantity</div>
+                                    <div class="box">{{ $item->quantity }}</div>
+                                    <span class="remove">Remove</span>
+                                    <span class="towishlist">Move to Wishlist</span>
+                                </div>
+                            </div>
+
+                        </div>
+                    @endforeach
+
+                    <div class="misc-controls">
+                        <span>Continue Shopping</span>
+                        <button class="btn btn-lg btn-primary">PROCEED TO CHECKOUT</button>
+                    </div>
+                </div>
+
+                <div class="right-side">
+                    <div class="price-section">
+                        <div class="title">
+                            Price Detail
+                        </div>
+                        <div class="all-item-details">
+                            @foreach($cart->items as $item)
+                                <div class="item-details">
+                                    <span class="name">{{ $item->product->name }}</span>
+                                    <span class="price">$ {{ $item->price }}</span>
+                                </div>
+                            @endforeach
+                        </div>
+
+                        <div class="horizontal-rule"></div>
+
+                        <div class="total-details">
+                            <span class="name">Amount Payable</span>
+                            <span class="amount">$75.00</span>
+                        </div>
+
+                    </div>
+                    <div class="coupon-section">
+
+                        <span class="title">Apply Coupon</span>
+
+                        <div class="control-group">
+                            <input type="text" class="control coupon-input" placeholder="Coupon Code" />
+                        </div>
+
+                        <button class="btn btn-md btn-primary">Apply</button>
+
+                        <div class="coupon-details">
+                            <div class="title">Coupon Used</div>
+                            <div class="coupon">
+                                <span class="name">Coupon 1</span>
+                                <span class="discount">$15</span>
+                            </div>
+                            <div class="coupon">
+                                <span class="name">Coupon 2</span>
+                                <span class="discount">$5</span>
+                            </div>
+                        </div>
+
+                        <div class="horizontal-rule"></div>
+
+                        <div class="after-coupon-amount">
+                            <span class="name">Amount Payable</span>
+                            <span class="amount">$75.00</span>
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+        
+        @else
+
+            <div class="title">
+                {{ __('shop::app.checkout.cart.empty') }}
+            </div>
+
+        @endif
+    </section>
+    
+@endsection
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php
index 96642d85b..28e088e00 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/customer-info.blade.php
@@ -124,7 +124,7 @@
 
                 @foreach (country()->all() as $code => $country)
 
-                    <option value="{{ $country}}">{{ $country }}</option>
+                    <option value="{{ $code }}">{{ $country }}</option>
 
                 @endforeach
             </select>
@@ -264,7 +264,7 @@
 
                 @foreach (country()->all() as $code => $country)
 
-                    <option value="{{ $country}}">{{ $country }}</option>
+                    <option value="{{ $code }}">{{ $country }}</option>
 
                 @endforeach
             </select>
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php
index 04e2ffe77..6bfb724f0 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php
@@ -16,7 +16,7 @@
                             <input v-validate="'required'" type="radio" id="{{ $rate->method }}" name="shipping_method" value="{{ $rate->method }}" v-model="selected_shipping_method">
                             <label class="radio-view" for="{{ $rate->method }}"></label>
                             {{ $rate->method_title }}
-                            <b>{{ $rate->price }}</b>
+                            <b>{{ core()->currency($rate->price) }}</b>
                         </span>
                     @endforeach
                         
diff --git a/public/themes/default/assets/js/shop.js b/public/themes/default/assets/js/shop.js
index dbc0ab9c7..eac787839 100644
--- a/public/themes/default/assets/js/shop.js
+++ b/public/themes/default/assets/js/shop.js
@@ -11846,7 +11846,7 @@ return jQuery;
 
 "use strict";
 /* WEBPACK VAR INJECTION */(function(global, setImmediate) {/*!
- * Vue.js v2.5.16
+ * Vue.js v2.5.17
  * (c) 2014-2018 Evan You
  * Released under the MIT License.
  */
@@ -16935,7 +16935,7 @@ Object.defineProperty(Vue, 'FunctionalRenderContext', {
   value: FunctionalRenderContext
 });
 
-Vue.version = '2.5.16';
+Vue.version = '2.5.17';
 
 /*  */
 
@@ -31497,7 +31497,7 @@ if (false) {
 /* 50 */
 /***/ (function(module, exports, __webpack_require__) {
 
-!function(t,e){ true?module.exports=e():"function"==typeof define&&define.amd?define("vue-slider-component",[],e):"object"==typeof exports?exports["vue-slider-component"]=e():t["vue-slider-component"]=e()}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var r=i[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(t,e,i){i(7);var s=i(5)(i(1),i(6),null,null);t.exports=s.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=function(){var t="undefined"!=typeof window?window.devicePixelRatio||1:1;return function(e){return Math.round(e*t)/t}}();e.default={name:"VueSliderComponent",props:{width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:6},data:{type:Array,default:null},dotSize:{type:Number,default:16},dotWidth:{type:Number,required:!1},dotHeight:{type:Number,required:!1},min:{type:Number,default:0},max:{type:Number,default:100},interval:{type:Number,default:1},show:{type:Boolean,default:!0},disabled:{type:[Boolean,Array],default:!1},piecewise:{type:Boolean,default:!1},tooltip:{type:[String,Boolean],default:"always"},eventType:{type:String,default:"auto"},direction:{type:String,default:"horizontal"},reverse:{type:Boolean,default:!1},lazy:{type:Boolean,default:!1},clickable:{type:Boolean,default:!0},speed:{type:Number,default:.5},realTime:{type:Boolean,default:!1},stopPropagation:{type:Boolean,default:!1},value:{type:[String,Number,Array,Object],default:0},piecewiseLabel:{type:Boolean,default:!1},debug:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},processDragable:{type:Boolean,default:!1},useKeyboard:{type:Boolean,default:!1},actionsKeyboard:{type:Array,default:function(){return[function(t){return t-1},function(t){return t+1}]}},tooltipMerge:{type:Boolean,default:!0},startAnimation:{type:Boolean,default:!1},sliderStyle:[Array,Object,Function],focusStyle:[Array,Object,Function],tooltipDir:[Array,String],formatter:[String,Function],mergeFormatter:[String,Function],piecewiseStyle:Object,disabledStyle:Object,piecewiseActiveStyle:Object,processStyle:Object,bgStyle:Object,tooltipStyle:[Array,Object,Function],disabledDotStyle:[Array,Object,Function],labelStyle:Object,labelActiveStyle:Object},data:function(){return{flag:!1,keydownFlag:null,focusFlag:!1,processFlag:!1,processSign:null,size:0,fixedValue:0,focusSlider:0,currentValue:0,currentSlider:0,isComponentExists:!0,isMounted:!1}},computed:{dotWidthVal:function(){return"number"==typeof this.dotWidth?this.dotWidth:this.dotSize},dotHeightVal:function(){return"number"==typeof this.dotHeight?this.dotHeight:this.dotSize},flowDirection:function(){return"vue-slider-"+this.direction+(this.reverse?"-reverse":"")},tooltipMergedPosition:function(){if(!this.isMounted)return{};var t=this.tooltipDirection[0];if(this.$refs.dot0){if("vertical"===this.direction){var e={};return e[t]="-"+(this.dotHeightVal/2-this.width/2+9)+"px",e}var i={};return i[t]="-"+(this.dotWidthVal/2-this.height/2+9)+"px",i.left="50%",i}},tooltipDirection:function(){var t=this.tooltipDir||("vertical"===this.direction?"left":"top");return Array.isArray(t)?this.isRange?t:t[1]:this.isRange?[t,t]:t},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"vue-slider-always":this.tooltip?"vue-slider-"+this.tooltip:""},tooltipClass:function(){return["vue-slider-tooltip-"+this.tooltipDirection,"vue-slider-tooltip"]},disabledArray:function(){return Array.isArray(this.disabled)?this.disabled:[this.disabled,this.disabled]},boolDisabled:function(){return this.disabledArray.every(function(t){return!0===t})},isDisabled:function(){return"none"===this.eventType||this.boolDisabled},disabledClass:function(){return this.boolDisabled?"vue-slider-disabled":""},stateClass:function(){return{"vue-slider-state-process-drag":this.processFlag,"vue-slider-state-drag":this.flag&&!this.processFlag&&!this.keydownFlag,"vue-slider-state-focus":this.focusFlag}},isRange:function(){return Array.isArray(this.value)},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot},minimum:function(){return this.data?0:this.min},val:{get:function(){return this.data?this.isRange?[this.data[this.currentValue[0]],this.data[this.currentValue[1]]]:this.data[this.currentValue]:this.currentValue},set:function(t){if(this.data)if(this.isRange){var e=this.data.indexOf(t[0]),i=this.data.indexOf(t[1]);e>-1&&i>-1&&(this.currentValue=[e,i])}else{var s=this.data.indexOf(t);s>-1&&(this.currentValue=s)}else this.currentValue=t}},currentIndex:function(){return this.isRange?this.data?this.currentValue:[this.getIndexByValue(this.currentValue[0]),this.getIndexByValue(this.currentValue[1])]:this.getIndexByValue(this.currentValue)},indexRange:function(){return this.isRange?this.currentIndex:[0,this.currentIndex]},maximum:function(){return this.data?this.data.length-1:this.max},multiple:function(){var t=(""+this.interval).split(".")[1];return t?Math.pow(10,t.length):1},spacing:function(){return this.data?1:this.interval},total:function(){return this.data?this.data.length-1:(Math.floor((this.maximum-this.minimum)*this.multiple)%(this.interval*this.multiple)!=0&&this.printError("Prop[interval] is illegal, Please make sure that the interval can be divisible"),(this.maximum-this.minimum)/this.interval)},gap:function(){return this.size/this.total},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?this.fixed?[[0,(this.total-this.fixedValue)*this.gap],[this.fixedValue*this.gap,this.size]]:[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?this.fixed?[[this.minimum,this.maximum-this.fixedValue*(this.spacing*this.multiple)/this.multiple],[this.minimum+this.fixedValue*(this.spacing*this.multiple)/this.multiple,this.maximum]]:[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},idleSlider:function(){return 0===this.currentSlider?1:0},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?this.height+"px":this.height,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}:{width:"number"==typeof this.width?this.width+"px":this.width,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}},sliderStyles:function(){return Array.isArray(this.sliderStyle)?this.isRange?this.sliderStyle:this.sliderStyle[1]:"function"==typeof this.sliderStyle?this.sliderStyle(this.val,this.currentIndex):this.isRange?[this.sliderStyle,this.sliderStyle]:this.sliderStyle},focusStyles:function(){return Array.isArray(this.focusStyle)?this.isRange?this.focusStyle:this.focusStyle[1]:"function"==typeof this.focusStyle?this.focusStyle(this.val,this.currentIndex):this.isRange?[this.focusStyle,this.focusStyle]:this.focusStyle},disabledDotStyles:function(){var t=this.disabledDotStyle;if(Array.isArray(t))return t;if("function"==typeof t){var e=t(this.val,this.currentIndex);return Array.isArray(e)?e:[e,e]}return t?[t,t]:[{backgroundColor:"#ccc"},{backgroundColor:"#ccc"}]},tooltipStyles:function(){return Array.isArray(this.tooltipStyle)?this.isRange?this.tooltipStyle:this.tooltipStyle[1]:"function"==typeof this.tooltipStyle?this.tooltipStyle(this.val,this.currentIndex):this.isRange?[this.tooltipStyle,this.tooltipStyle]:this.tooltipStyle},elemStyles:function(){return"vertical"===this.direction?{width:this.width+"px",height:"100%"}:{height:this.height+"px"}},dotStyles:function(){return"vertical"===this.direction?{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",left:-(this.dotWidthVal-this.width)/2+"px"}:{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",top:-(this.dotHeightVal-this.height)/2+"px"}},piecewiseDotStyle:function(){return"vertical"===this.direction?{width:this.width+"px",height:this.width+"px"}:{width:this.height+"px",height:this.height+"px"}},piecewiseDotWrap:function(){if(!this.piecewise&&!this.piecewiseLabel)return!1;for(var t=[],e=0;e<=this.total;e++){var i="vertical"===this.direction?{bottom:this.gap*e-this.width/2+"px",left:0}:{left:this.gap*e-this.height/2+"px",top:0},s=this.reverse?this.total-e:e,r=this.data?this.data[s]:this.spacing*s+this.min;t.push({style:i,label:this.formatter?this.formatting(r):r,inRange:s>=this.indexRange[0]&&s<=this.indexRange[1]})}return t}},watch:{value:function(t){this.flag||this.setValue(t,!0)},max:function(t){if(t<this.min)return this.printError("The maximum value can not be less than the minimum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},min:function(t){if(t>this.max)return this.printError("The minimum value can not be greater than the maximum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},show:function(t){var e=this;t&&!this.size&&this.$nextTick(function(){e.refresh()})},fixed:function(){this.computedFixedValue()}},methods:{bindEvents:function(){document.addEventListener("touchmove",this.moving,{passive:!1}),document.addEventListener("touchend",this.moveEnd,{passive:!1}),document.addEventListener("mousedown",this.blurSlider),document.addEventListener("mousemove",this.moving),document.addEventListener("mouseup",this.moveEnd),document.addEventListener("mouseleave",this.moveEnd),document.addEventListener("keydown",this.handleKeydown),document.addEventListener("keyup",this.handleKeyup),window.addEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.addEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.addEventListener("transitionend",this.handleOverlapTooltip))},unbindEvents:function(){document.removeEventListener("touchmove",this.moving),document.removeEventListener("touchend",this.moveEnd),document.removeEventListener("mousedown",this.blurSlider),document.removeEventListener("mousemove",this.moving),document.removeEventListener("mouseup",this.moveEnd),document.removeEventListener("mouseleave",this.moveEnd),document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("keyup",this.handleKeyup),window.removeEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.removeEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.removeEventListener("transitionend",this.handleOverlapTooltip))},handleKeydown:function(t){if(!this.useKeyboard||!this.focusFlag)return!1;switch(t.keyCode){case 37:case 40:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[0]);break;case 38:case 39:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[1])}},handleKeyup:function(){this.keydownFlag&&(this.keydownFlag=!1,this.flag=!1)},changeFocusSlider:function(t){var e=this;if(this.isRange){var i=this.currentIndex.map(function(i,s){if(s===e.focusSlider||e.fixed){var r=t(i),o=e.fixed?e.valueLimit[s]:[0,e.total];if(r<=o[1]&&r>=o[0])return r}return i});i[0]>i[1]&&(this.focusSlider=0===this.focusSlider?1:0,i=i.reverse()),this.setIndex(i)}else this.setIndex(t(this.currentIndex))},blurSlider:function(t){var e=this.isRange?this.$refs["dot"+this.focusSlider]:this.$refs.dot;if(!e||e===t.target)return!1;this.focusFlag=!1},formatting:function(t){return"string"==typeof this.formatter?this.formatter.replace(/\{value\}/,t):this.formatter(t)},mergeFormatting:function(t,e){return"string"==typeof this.mergeFormatter?this.mergeFormatter.replace(/\{(value1|value2)\}/g,function(i,s){return"value1"===s?t:e}):this.mergeFormatter(t,e)},getPos:function(t){return this.realTime&&this.getStaticData(),"vertical"===this.direction?this.reverse?t.pageY-this.offset:this.size-(t.pageY-this.offset):this.reverse?this.size-(t.clientX-this.offset):t.clientX-this.offset},processClick:function(t){this.fixed&&t.stopPropagation()},wrapClick:function(t){var e=this;if(this.isDisabled||!this.clickable||this.processFlag)return!1;var i=this.getPos(t);if(this.isRange)if(this.disabledArray.every(function(t){return!1===t}))this.currentSlider=i>(this.position[1]-this.position[0])/2+this.position[0]?1:0;else if(this.disabledArray[0]){if(i<this.position[0])return!1;this.currentSlider=1}else if(this.disabledArray[1]){if(i>this.position[1])return!1;this.currentSlider=0}if(this.disabledArray[this.currentSlider])return!1;if(this.setValueOnPos(i),this.isRange&&this.tooltipMerge){var s=setInterval(function(){return e.handleOverlapTooltip()},16.7);setTimeout(function(){return window.clearInterval(s)},1e3*this.speed)}},moveStart:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments[2];if(this.disabledArray[e])return!1;if(this.stopPropagation&&t.stopPropagation(),this.isRange&&(this.currentSlider=e,i)){if(!this.processDragable)return!1;this.processFlag=!0,this.processSign={pos:this.position,start:this.getPos(t.targetTouches&&t.targetTouches[0]?t.targetTouches[0]:t)}}!i&&this.useKeyboard&&(this.focusFlag=!0,this.focusSlider=e),this.flag=!0,this.$emit("drag-start",this)},moving:function(t){if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;t.preventDefault(),t.targetTouches&&t.targetTouches[0]&&(t=t.targetTouches[0]),this.processFlag?(this.currentSlider=0,this.setValueOnPos(this.processSign.pos[0]+this.getPos(t)-this.processSign.start,!0),this.currentSlider=1,this.setValueOnPos(this.processSign.pos[1]+this.getPos(t)-this.processSign.start,!0)):this.setValueOnPos(this.getPos(t),!0),this.isRange&&this.tooltipMerge&&this.handleOverlapTooltip()},moveEnd:function(t){var e=this;if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;this.$emit("drag-end",this),this.lazy&&this.isDiff(this.val,this.value)&&this.syncValue(),this.flag=!1,window.setTimeout(function(){e.processFlag=!1},0),this.setPosition()},setValueOnPos:function(t,e){var i=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit;if(t>=i[0]&&t<=i[1]){this.setTransform(t);var r=this.getValueByIndex(Math.round(t/this.gap));this.setCurrentValue(r,e),this.isRange&&this.fixed&&(this.setTransform(t+this.fixedValue*this.gap*(0===this.currentSlider?1:-1),!0),this.setCurrentValue((r*this.multiple+this.fixedValue*this.spacing*this.multiple*(0===this.currentSlider?1:-1))/this.multiple,e,!0))}else t<i[0]?(this.setTransform(i[0]),this.setCurrentValue(s[0]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][0],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][0],e,!0)):this.fixed||this.disabledArray[0]||1!==this.currentSlider||(this.focusSlider=0,this.currentSlider=0)):(this.setTransform(i[1]),this.setCurrentValue(s[1]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][1],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][1],e,!0)):this.fixed||this.disabledArray[1]||0!==this.currentSlider||(this.focusSlider=1,this.currentSlider=1))},isDiff:function(t,e){return Object.prototype.toString.call(t)!==Object.prototype.toString.call(e)||(Array.isArray(t)&&t.length===e.length?t.some(function(t,i){return t!==e[i]}):t!==e)},setCurrentValue:function(t,e,i){var s=i?this.idleSlider:this.currentSlider;if(t<this.minimum||t>this.maximum)return!1;this.isRange?this.isDiff(this.currentValue[s],t)&&(this.currentValue.splice(s,1,t),this.lazy&&this.flag||this.syncValue()):this.isDiff(this.currentValue,t)&&(this.currentValue=t,this.lazy&&this.flag||this.syncValue()),e||this.setPosition()},getValueByIndex:function(t){return(this.spacing*this.multiple*t+this.minimum*this.multiple)/this.multiple},getIndexByValue:function(t){return Math.round((t-this.minimum)*this.multiple)/(this.spacing*this.multiple)},setIndex:function(t){if(Array.isArray(t)&&this.isRange){var e=void 0;e=this.data?[this.data[t[0]],this.data[t[1]]]:[this.getValueByIndex(t[0]),this.getValueByIndex(t[1])],this.setValue(e)}else t=this.getValueByIndex(t),this.isRange&&(this.currentSlider=t>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(t)},setValue:function(t,e,i){var s=this;if(this.isDiff(this.val,t)){var r=this.limitValue(t);this.val=this.isRange?r.concat():r,this.computedFixedValue(),this.syncValue(e)}this.$nextTick(function(){return s.setPosition(i)})},computedFixedValue:function(){if(!this.fixed)return this.fixedValue=0,!1;this.fixedValue=this.currentIndex[1]-this.currentIndex[0]},setPosition:function(t){this.flag||this.setTransitionTime(void 0===t?this.speed:t),this.isRange?(this.setTransform(this.position[0],1===this.currentSlider),this.setTransform(this.position[1],0===this.currentSlider)):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(t,e){var i=e?this.idleSlider:this.currentSlider,r=s(("vertical"===this.direction?this.dotHeightVal/2-t:t-this.dotWidthVal/2)*(this.reverse?-1:1)),o="vertical"===this.direction?"translateY("+r+"px)":"translateX("+r+"px)",n=this.fixed?this.fixedValue*this.gap+"px":(0===i?this.position[1]-t:t-this.position[0])+"px",l=this.fixed?(0===i?t:t-this.fixedValue*this.gap)+"px":(0===i?t:this.position[0])+"px";this.isRange?(this.slider[i].style.transform=o,this.slider[i].style.WebkitTransform=o,this.slider[i].style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=n,this.$refs.process.style[this.reverse?"top":"bottom"]=l):(this.$refs.process.style.width=n,this.$refs.process.style[this.reverse?"right":"left"]=l)):(this.slider.style.transform=o,this.slider.style.WebkitTransform=o,this.slider.style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=t+"px",this.$refs.process.style[this.reverse?"top":"bottom"]=0):(this.$refs.process.style.width=t+"px",this.$refs.process.style[this.reverse?"right":"left"]=0))},setTransitionTime:function(t){if(t||this.$refs.process.offsetWidth,this.isRange){for(var e=0;e<this.slider.length;e++)this.slider[e].style.transitionDuration=t+"s",this.slider[e].style.WebkitTransitionDuration=t+"s";this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"}else this.slider.style.transitionDuration=t+"s",this.slider.style.WebkitTransitionDuration=t+"s",this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"},limitValue:function(t){var e=this;if(this.data)return t;var i=function(i){return i<e.min?(e.printError("The value of the slider is "+t+", the minimum value is "+e.min+", the value of this slider can not be less than the minimum value"),e.min):i>e.max?(e.printError("The value of the slider is "+t+", the maximum value is "+e.max+", the value of this slider can not be greater than the maximum value"),e.max):i};return this.isRange?t.map(function(t){return i(t)}):i(t)},syncValue:function(t){var e=this.isRange?this.val.concat():this.val;this.$emit("input",e),t||this.$emit("callback",e)},getValue:function(){return this.val},getIndex:function(){return this.currentIndex},getStaticData:function(){this.$refs.elem&&(this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.offset="vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left)},refresh:function(){this.$refs.elem&&(this.getStaticData(),this.computedFixedValue(),this.setPosition())},printError:function(t){this.debug&&console.error("[VueSlider error]: "+t)},handleOverlapTooltip:function(){var t=this.tooltipDirection[0]===this.tooltipDirection[1];if(this.isRange&&t){var e=this.reverse?this.$refs.tooltip1:this.$refs.tooltip0,i=this.reverse?this.$refs.tooltip0:this.$refs.tooltip1,s=e.getBoundingClientRect().right,r=i.getBoundingClientRect().left,o=e.getBoundingClientRect().y,n=i.getBoundingClientRect().y+i.getBoundingClientRect().height,l="horizontal"===this.direction&&s>r,a="vertical"===this.direction&&n>o;l||a?this.handleDisplayMergedTooltip(!0):this.handleDisplayMergedTooltip(!1)}},handleDisplayMergedTooltip:function(t){var e=this.$refs.tooltip0,i=this.$refs.tooltip1,s=this.$refs.process.getElementsByClassName("vue-merged-tooltip")[0];t?(e.style.visibility="hidden",i.style.visibility="hidden",s.style.visibility="visible"):(e.style.visibility="visible",i.style.visibility="visible",s.style.visibility="hidden")}},mounted:function(){var t=this;if(this.isComponentExists=!0,"undefined"==typeof window||"undefined"==typeof document)return this.printError("window or document is undefined, can not be initialization.");this.$nextTick(function(){t.isComponentExists&&(t.getStaticData(),t.setValue(t.limitValue(t.value),!0,t.startAnimation?t.speed:0),t.bindEvents())}),this.isMounted=!0},beforeDestroy:function(){this.isComponentExists=!1,this.unbindEvents()}}},function(t,e,i){"use strict";var s=i(0);t.exports=s},function(t,e,i){e=t.exports=i(4)(),e.push([t.i,'.vue-slider-component{position:relative;box-sizing:border-box;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}.vue-slider-component.vue-slider-disabled{opacity:.5;cursor:not-allowed}.vue-slider-component.vue-slider-has-label{margin-bottom:15px}.vue-slider-component.vue-slider-disabled .vue-slider-dot{cursor:not-allowed}.vue-slider-component .vue-slider{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-slider-component .vue-slider:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2}.vue-slider-component .vue-slider-process{position:absolute;border-radius:15px;background-color:#3498db;transition:all 0s;z-index:1}.vue-slider-component .vue-slider-process.vue-slider-process-dragable{cursor:pointer;z-index:3}.vue-slider-component.vue-slider-horizontal .vue-slider-process{width:0;height:100%;top:0;left:0;will-change:width}.vue-slider-component.vue-slider-vertical .vue-slider-process{width:100%;height:0;bottom:0;left:0;will-change:height}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-process{width:0;height:100%;top:0;right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-process{width:100%;height:0;top:0;left:0}.vue-slider-component .vue-slider-dot{position:absolute;border-radius:50%;background-color:#fff;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);transition:all 0s;will-change:transform;cursor:pointer;z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-focus{box-shadow:0 0 2px 1px #3498db}.vue-slider-component .vue-slider-dot.vue-slider-dot-dragging{z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-disabled{z-index:4}.vue-slider-component.vue-slider-horizontal .vue-slider-dot{left:0}.vue-slider-component.vue-slider-vertical .vue-slider-dot{bottom:0}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-dot{right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-dot{top:0}.vue-slider-component .vue-slider-tooltip-wrap{display:none;position:absolute;z-index:9}.vue-slider-component .vue-slider-tooltip{display:block;font-size:14px;white-space:nowrap;padding:2px 5px;min-width:20px;text-align:center;color:#fff;border-radius:5px;border:1px solid #3498db;background-color:#3498db}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top{top:-9px;left:50%;transform:translate(-50%,-100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom{bottom:-9px;left:50%;transform:translate(-50%,100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left{top:50%;left:-9px;transform:translate(-100%,-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right{top:50%;right:-9px;transform:translate(100%,-50%)}.vue-slider-component .vue-slider-tooltip-top .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top .vue-slider-tooltip:before{content:"";position:absolute;bottom:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-top-color:inherit;transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-merged-tooltip{display:block;visibility:hidden}.vue-slider-component .vue-slider-tooltip-bottom .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom .vue-slider-tooltip:before{content:"";position:absolute;top:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-bottom-color:inherit;transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-left .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left .vue-slider-tooltip:before{content:"";position:absolute;top:50%;right:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-left-color:inherit;transform:translateY(-50%)}.vue-slider-component .vue-slider-tooltip-right .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right .vue-slider-tooltip:before{content:"";position:absolute;top:50%;left:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-right-color:inherit;transform:translateY(-50%)}.vue-slider-component .vue-slider-dot.vue-slider-hover:hover .vue-slider-tooltip-wrap{display:block}.vue-slider-component .vue-slider-dot.vue-slider-always .vue-slider-tooltip-wrap{display:block!important}.vue-slider-component .vue-slider-piecewise{position:absolute;width:100%;padding:0;margin:0;left:0;top:0;height:100%;list-style:none}.vue-slider-component .vue-slider-piecewise-item{position:absolute;width:8px;height:8px}.vue-slider-component .vue-slider-piecewise-dot{position:absolute;left:50%;top:50%;width:100%;height:100%;display:inline-block;background-color:rgba(0,0,0,.16);border-radius:50%;transform:translate(-50%,-50%);z-index:2;transition:all .3s}.vue-slider-component .vue-slider-piecewise-item:first-child .vue-slider-piecewise-dot,.vue-slider-component .vue-slider-piecewise-item:last-child .vue-slider-piecewise-dot{visibility:hidden}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-horizontal .vue-slider-piecewise-label{position:absolute;display:inline-block;top:100%;left:50%;white-space:nowrap;font-size:12px;color:#333;transform:translate(-50%,8px);visibility:visible}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-vertical .vue-slider-piecewise-label{position:absolute;display:inline-block;top:50%;left:100%;white-space:nowrap;font-size:12px;color:#333;transform:translate(8px,-50%);visibility:visible}.vue-slider-component .vue-slider-sr-only{clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute!important}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var s={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(s[o]=!0)}for(r=0;r<e.length;r++){var n=e[r];"number"==typeof n[0]&&s[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),t.push(n))}},t}},function(t,e){t.exports=function(t,e,i,s){var r,o=t=t||{},n=typeof t.default;"object"!==n&&"function"!==n||(r=t,o=t.default);var l="function"==typeof o?o.options:o;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns),i&&(l._scopeId=i),s){var a=Object.create(l.computed||null);Object.keys(s).forEach(function(t){var e=s[t];a[t]=function(){return e}}),l.computed=a}return{esModule:r,exports:o,options:l}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],ref:"wrap",class:["vue-slider-component",t.flowDirection,t.disabledClass,t.stateClass,{"vue-slider-has-label":t.piecewiseLabel}],style:[t.wrapStyles,t.boolDisabled?t.disabledStyle:null],on:{click:t.wrapClick}},[i("div",{ref:"elem",staticClass:"vue-slider",style:[t.elemStyles,t.bgStyle],attrs:{"aria-hidden":"true"}},[t.isRange?[i("div",{key:"dot0",ref:"dot0",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[0]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[0]?t.disabledDotStyles[0]:null,t.sliderStyles[0],t.focusFlag&&0===t.focusSlider?t.focusStyles[0]:null],on:{mousedown:function(e){t.moveStart(e,0)},touchstart:function(e){t.moveStart(e,0)}}},[i("div",{ref:"tooltip0",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[0]},[t._v(t._s(t.formatter?t.formatting(t.val[0]):t.val[0]))])],{value:t.val[0],index:0,disabled:!t.boolDisabled&&t.disabledArray[0]})],2)]),t._v(" "),i("div",{key:"dot1",ref:"dot1",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&1===t.focusSlider,"vue-slider-dot-dragging":t.flag&&1===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[1]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[1]?t.disabledDotStyles[1]:null,t.sliderStyles[1],t.focusFlag&&1===t.focusSlider?t.focusStyles[1]:null],on:{mousedown:function(e){t.moveStart(e,1)},touchstart:function(e){t.moveStart(e,1)}}},[i("div",{ref:"tooltip1",class:["vue-slider-tooltip-"+t.tooltipDirection[1],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[1]},[t._v(t._s(t.formatter?t.formatting(t.val[1]):t.val[1]))])],{value:t.val[1],index:1,disabled:!t.boolDisabled&&t.disabledArray[1]})],2)])]:[i("div",{key:"dot",ref:"dot",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider}],style:[t.dotStyles,t.sliderStyles,t.focusFlag&&0===t.focusSlider?t.focusStyles:null],on:{mousedown:t.moveStart,touchstart:t.moveStart}},[i("div",{class:["vue-slider-tooltip-"+t.tooltipDirection,"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v(t._s(t.formatter?t.formatting(t.val):t.val))])],{value:t.val})],2)])],t._v(" "),i("ul",{staticClass:"vue-slider-piecewise"},t._l(t.piecewiseDotWrap,function(e,s){return i("li",{key:s,staticClass:"vue-slider-piecewise-item",style:[t.piecewiseDotStyle,e.style]},[t._t("piecewise",[t.piecewise?i("span",{staticClass:"vue-slider-piecewise-dot",style:[t.piecewiseStyle,e.inRange?t.piecewiseActiveStyle:null]}):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange}),t._v(" "),t._t("label",[t.piecewiseLabel?i("span",{staticClass:"vue-slider-piecewise-label",style:[t.labelStyle,e.inRange?t.labelActiveStyle:null]},[t._v("\n            "+t._s(e.label)+"\n          ")]):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange})],2)})),t._v(" "),i("div",{ref:"process",class:["vue-slider-process",{"vue-slider-process-dragable":t.isRange&&t.processDragable}],style:t.processStyle,on:{click:t.processClick,mousedown:function(e){t.moveStart(e,0,!0)},touchstart:function(e){t.moveStart(e,0,!0)}}},[i("div",{ref:"mergedTooltip",staticClass:"vue-merged-tooltip",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"],style:t.tooltipMergedPosition},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v("\n            "+t._s(t.mergeFormatter?t.mergeFormatting(t.val[0],t.val[1]):t.formatter?t.val[0]===t.val[1]?t.formatting(t.val[0]):t.formatting(t.val[0])+" - "+t.formatting(t.val[1]):t.val[0]===t.val[1]?t.val[0]:t.val[0]+" - "+t.val[1])+"\n          ")])])],2)]),t._v(" "),t.isRange||t.data?t._e():i("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],staticClass:"vue-slider-sr-only",attrs:{type:"range",min:t.min,max:t.max},domProps:{value:t.val},on:{__r:function(e){t.val=e.target.value}}})],2)])},staticRenderFns:[]}},function(t,e,i){var s=i(3);"string"==typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);i(8)("743d98f5",s,!0)},function(t,e,i){function s(t){for(var e=0;e<t.length;e++){var i=t[e],s=d[i.id];if(s){s.refs++;for(var r=0;r<s.parts.length;r++)s.parts[r](i.parts[r]);for(;r<i.parts.length;r++)s.parts.push(o(i.parts[r]));s.parts.length>i.parts.length&&(s.parts.length=i.parts.length)}else{for(var n=[],r=0;r<i.parts.length;r++)n.push(o(i.parts[r]));d[i.id]={id:i.id,refs:1,parts:n}}}}function r(){var t=document.createElement("style");return t.type="text/css",h.appendChild(t),t}function o(t){var e,i,s=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(s){if(f)return v;s.parentNode.removeChild(s)}if(m){var o=p++;s=c||(c=r()),e=n.bind(null,s,o,!1),i=n.bind(null,s,o,!0)}else s=r(),e=l.bind(null,s),i=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else i()}}function n(t,e,i,s){var r=i?"":s.css;if(t.styleSheet)t.styleSheet.cssText=g(e,r);else{var o=document.createTextNode(r),n=t.childNodes;n[e]&&t.removeChild(n[e]),n.length?t.insertBefore(o,n[e]):t.appendChild(o)}}function l(t,e){var i=e.css,s=e.media,r=e.sourceMap;if(s&&t.setAttribute("media",s),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(9),d={},h=a&&(document.head||document.getElementsByTagName("head")[0]),c=null,p=0,f=!1,v=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,i){f=i;var r=u(t,e);return s(r),function(e){for(var i=[],o=0;o<r.length;o++){var n=r[o],l=d[n.id];l.refs--,i.push(l)}e?(r=u(t,e),s(r)):r=[];for(var o=0;o<i.length;o++){var l=i[o];if(0===l.refs){for(var a=0;a<l.parts.length;a++)l.parts[a]();delete d[l.id]}}}};var g=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var i=[],s={},r=0;r<e.length;r++){var o=e[r],n=o[0],l=o[1],a=o[2],u=o[3],d={id:t+":"+r,css:l,media:a,sourceMap:u};s[n]?s[n].parts.push(d):i.push(s[n]={id:n,parts:[d]})}return i}}])});
+!function(t,e){ true?module.exports=e():"function"==typeof define&&define.amd?define("vue-slider-component",[],e):"object"==typeof exports?exports["vue-slider-component"]=e():t["vue-slider-component"]=e()}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var r=i[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(t,e,i){i(7);var s=i(5)(i(1),i(6),null,null);t.exports=s.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=function(){var t="undefined"!=typeof window?window.devicePixelRatio||1:1;return function(e){return Math.round(e*t)/t}}();e.default={name:"VueSliderComponent",props:{width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:6},data:{type:Array,default:null},dotSize:{type:Number,default:16},dotWidth:{type:Number,required:!1},dotHeight:{type:Number,required:!1},min:{type:Number,default:0},max:{type:Number,default:100},interval:{type:Number,default:1},show:{type:Boolean,default:!0},disabled:{type:[Boolean,Array],default:!1},piecewise:{type:Boolean,default:!1},tooltip:{type:[String,Boolean],default:"always"},eventType:{type:String,default:"auto"},direction:{type:String,default:"horizontal"},reverse:{type:Boolean,default:!1},lazy:{type:Boolean,default:!1},clickable:{type:Boolean,default:!0},speed:{type:Number,default:.5},realTime:{type:Boolean,default:!1},stopPropagation:{type:Boolean,default:!1},value:{type:[String,Number,Array,Object],default:0},piecewiseLabel:{type:Boolean,default:!1},debug:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},processDragable:{type:Boolean,default:!1},useKeyboard:{type:Boolean,default:!1},actionsKeyboard:{type:Array,default:function(){return[function(t){return t-1},function(t){return t+1}]}},tooltipMerge:{type:Boolean,default:!0},sliderStyle:[Array,Object,Function],focusStyle:[Array,Object,Function],tooltipDir:[Array,String],formatter:[String,Function],mergeFormatter:[String,Function],piecewiseStyle:Object,disabledStyle:Object,piecewiseActiveStyle:Object,processStyle:Object,bgStyle:Object,tooltipStyle:[Array,Object,Function],disabledDotStyle:[Array,Object,Function],labelStyle:Object,labelActiveStyle:Object},data:function(){return{flag:!1,keydownFlag:null,focusFlag:!1,processFlag:!1,processSign:null,size:0,fixedValue:0,focusSlider:0,currentValue:0,currentSlider:0,isComponentExists:!0,isMounted:!1}},computed:{dotWidthVal:function(){return"number"==typeof this.dotWidth?this.dotWidth:this.dotSize},dotHeightVal:function(){return"number"==typeof this.dotHeight?this.dotHeight:this.dotSize},flowDirection:function(){return"vue-slider-"+this.direction+(this.reverse?"-reverse":"")},tooltipMergedPosition:function(){if(!this.isMounted)return{};var t=this.tooltipDirection[0];if(this.$refs.dot0){if("vertical"===this.direction){var e={};return e[t]="-"+(this.dotHeightVal/2-this.width/2+9)+"px",e}var i={};return i[t]="-"+(this.dotWidthVal/2-this.height/2+9)+"px",i.left="50%",i}},tooltipDirection:function(){var t=this.tooltipDir||("vertical"===this.direction?"left":"top");return Array.isArray(t)?this.isRange?t:t[1]:this.isRange?[t,t]:t},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"vue-slider-always":this.tooltip?"vue-slider-"+this.tooltip:""},tooltipClass:function(){return["vue-slider-tooltip-"+this.tooltipDirection,"vue-slider-tooltip"]},disabledArray:function(){return Array.isArray(this.disabled)?this.disabled:[this.disabled,this.disabled]},boolDisabled:function(){return this.disabledArray.every(function(t){return!0===t})},isDisabled:function(){return"none"===this.eventType||this.boolDisabled},disabledClass:function(){return this.boolDisabled?"vue-slider-disabled":""},stateClass:function(){return{"vue-slider-state-process-drag":this.processFlag,"vue-slider-state-drag":this.flag&&!this.processFlag&&!this.keydownFlag,"vue-slider-state-focus":this.focusFlag}},isRange:function(){return Array.isArray(this.value)},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot},minimum:function(){return this.data?0:this.min},val:{get:function(){return this.data?this.isRange?[this.data[this.currentValue[0]],this.data[this.currentValue[1]]]:this.data[this.currentValue]:this.currentValue},set:function(t){if(this.data)if(this.isRange){var e=this.data.indexOf(t[0]),i=this.data.indexOf(t[1]);e>-1&&i>-1&&(this.currentValue=[e,i])}else{var s=this.data.indexOf(t);s>-1&&(this.currentValue=s)}else this.currentValue=t}},currentIndex:function(){return this.isRange?this.data?this.currentValue:[this.getIndexByValue(this.currentValue[0]),this.getIndexByValue(this.currentValue[1])]:this.getIndexByValue(this.currentValue)},indexRange:function(){return this.isRange?this.currentIndex:[0,this.currentIndex]},maximum:function(){return this.data?this.data.length-1:this.max},multiple:function(){var t=(""+this.interval).split(".")[1];return t?Math.pow(10,t.length):1},spacing:function(){return this.data?1:this.interval},total:function(){return this.data?this.data.length-1:(Math.floor((this.maximum-this.minimum)*this.multiple)%(this.interval*this.multiple)!=0&&this.printError("Prop[interval] is illegal, Please make sure that the interval can be divisible"),(this.maximum-this.minimum)/this.interval)},gap:function(){return this.size/this.total},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?this.fixed?[[0,(this.total-this.fixedValue)*this.gap],[this.fixedValue*this.gap,this.size]]:[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?this.fixed?[[this.minimum,this.maximum-this.fixedValue*(this.spacing*this.multiple)/this.multiple],[this.minimum+this.fixedValue*(this.spacing*this.multiple)/this.multiple,this.maximum]]:[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},idleSlider:function(){return 0===this.currentSlider?1:0},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?this.height+"px":this.height,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}:{width:"number"==typeof this.width?this.width+"px":this.width,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}},sliderStyles:function(){return Array.isArray(this.sliderStyle)?this.isRange?this.sliderStyle:this.sliderStyle[1]:"function"==typeof this.sliderStyle?this.sliderStyle(this.val,this.currentIndex):this.isRange?[this.sliderStyle,this.sliderStyle]:this.sliderStyle},focusStyles:function(){return Array.isArray(this.focusStyle)?this.isRange?this.focusStyle:this.focusStyle[1]:"function"==typeof this.focusStyle?this.focusStyle(this.val,this.currentIndex):this.isRange?[this.focusStyle,this.focusStyle]:this.focusStyle},disabledDotStyles:function(){var t=this.disabledDotStyle;if(Array.isArray(t))return t;if("function"==typeof t){var e=t(this.val,this.currentIndex);return Array.isArray(e)?e:[e,e]}return t?[t,t]:[{backgroundColor:"#ccc"},{backgroundColor:"#ccc"}]},tooltipStyles:function(){return Array.isArray(this.tooltipStyle)?this.isRange?this.tooltipStyle:this.tooltipStyle[1]:"function"==typeof this.tooltipStyle?this.tooltipStyle(this.val,this.currentIndex):this.isRange?[this.tooltipStyle,this.tooltipStyle]:this.tooltipStyle},elemStyles:function(){return"vertical"===this.direction?{width:this.width+"px",height:"100%"}:{height:this.height+"px"}},dotStyles:function(){return"vertical"===this.direction?{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",left:-(this.dotWidthVal-this.width)/2+"px"}:{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",top:-(this.dotHeightVal-this.height)/2+"px"}},piecewiseDotStyle:function(){return"vertical"===this.direction?{width:this.width+"px",height:this.width+"px"}:{width:this.height+"px",height:this.height+"px"}},piecewiseDotWrap:function(){if(!this.piecewise&&!this.piecewiseLabel)return!1;for(var t=[],e=0;e<=this.total;e++){var i="vertical"===this.direction?{bottom:this.gap*e-this.width/2+"px",left:0}:{left:this.gap*e-this.height/2+"px",top:0},s=this.reverse?this.total-e:e,r=this.data?this.data[s]:this.spacing*s+this.min;t.push({style:i,label:this.formatter?this.formatting(r):r,inRange:s>=this.indexRange[0]&&s<=this.indexRange[1]})}return t}},watch:{value:function(t){this.flag||this.setValue(t,!0)},max:function(t){if(t<this.min)return this.printError("The maximum value can not be less than the minimum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},min:function(t){if(t>this.max)return this.printError("The minimum value can not be greater than the maximum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},show:function(t){var e=this;t&&!this.size&&this.$nextTick(function(){e.refresh()})},fixed:function(){this.computedFixedValue()}},methods:{bindEvents:function(){document.addEventListener("touchmove",this.moving,{passive:!1}),document.addEventListener("touchend",this.moveEnd,{passive:!1}),document.addEventListener("mousedown",this.blurSlider),document.addEventListener("mousemove",this.moving),document.addEventListener("mouseup",this.moveEnd),document.addEventListener("mouseleave",this.moveEnd),document.addEventListener("keydown",this.handleKeydown),document.addEventListener("keyup",this.handleKeyup),window.addEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.addEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.addEventListener("transitionend",this.handleOverlapTooltip))},unbindEvents:function(){document.removeEventListener("touchmove",this.moving),document.removeEventListener("touchend",this.moveEnd),document.removeEventListener("mousedown",this.blurSlider),document.removeEventListener("mousemove",this.moving),document.removeEventListener("mouseup",this.moveEnd),document.removeEventListener("mouseleave",this.moveEnd),document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("keyup",this.handleKeyup),window.removeEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.removeEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.removeEventListener("transitionend",this.handleOverlapTooltip))},handleKeydown:function(t){if(!this.useKeyboard||!this.focusFlag)return!1;switch(t.keyCode){case 37:case 40:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[0]);break;case 38:case 39:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[1])}},handleKeyup:function(){this.keydownFlag&&(this.keydownFlag=!1,this.flag=!1)},changeFocusSlider:function(t){var e=this;if(this.isRange){var i=this.currentIndex.map(function(i,s){if(s===e.focusSlider||e.fixed){var r=t(i),o=e.fixed?e.valueLimit[s]:[0,e.total];if(r<=o[1]&&r>=o[0])return r}return i});i[0]>i[1]&&(this.focusSlider=0===this.focusSlider?1:0,i=i.reverse()),this.setIndex(i)}else this.setIndex(t(this.currentIndex))},blurSlider:function(t){var e=this.isRange?this.$refs["dot"+this.focusSlider]:this.$refs.dot;if(!e||e===t.target)return!1;this.focusFlag=!1},formatting:function(t){return"string"==typeof this.formatter?this.formatter.replace(/\{value\}/,t):this.formatter(t)},mergeFormatting:function(t,e){return"string"==typeof this.mergeFormatter?this.mergeFormatter.replace(/\{(value1|value2)\}/g,function(i,s){return"value1"===s?t:e}):this.mergeFormatter(t,e)},getPos:function(t){return this.realTime&&this.getStaticData(),"vertical"===this.direction?this.reverse?t.pageY-this.offset:this.size-(t.pageY-this.offset):this.reverse?this.size-(t.clientX-this.offset):t.clientX-this.offset},processClick:function(t){this.fixed&&t.stopPropagation()},wrapClick:function(t){var e=this;if(this.isDisabled||!this.clickable||this.processFlag)return!1;var i=this.getPos(t);if(this.isRange)if(this.disabledArray.every(function(t){return!1===t}))this.currentSlider=i>(this.position[1]-this.position[0])/2+this.position[0]?1:0;else if(this.disabledArray[0]){if(i<this.position[0])return!1;this.currentSlider=1}else if(this.disabledArray[1]){if(i>this.position[1])return!1;this.currentSlider=0}if(this.disabledArray[this.currentSlider])return!1;if(this.setValueOnPos(i),this.isRange&&this.tooltipMerge){var s=setInterval(function(){return e.handleOverlapTooltip()},16.7);setTimeout(function(){return window.clearInterval(s)},1e3*this.speed)}},moveStart:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments[2];if(this.disabledArray[e])return!1;if(this.stopPropagation&&t.stopPropagation(),this.isRange&&(this.currentSlider=e,i)){if(!this.processDragable)return!1;this.processFlag=!0,this.processSign={pos:this.position,start:this.getPos(t.targetTouches&&t.targetTouches[0]?t.targetTouches[0]:t)}}!i&&this.useKeyboard&&(this.focusFlag=!0,this.focusSlider=e),this.flag=!0,this.$emit("drag-start",this)},moving:function(t){if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;t.preventDefault(),t.targetTouches&&t.targetTouches[0]&&(t=t.targetTouches[0]),this.processFlag?(this.currentSlider=0,this.setValueOnPos(this.processSign.pos[0]+this.getPos(t)-this.processSign.start,!0),this.currentSlider=1,this.setValueOnPos(this.processSign.pos[1]+this.getPos(t)-this.processSign.start,!0)):this.setValueOnPos(this.getPos(t),!0),this.isRange&&this.tooltipMerge&&this.handleOverlapTooltip()},moveEnd:function(t){var e=this;if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;this.$emit("drag-end",this),this.lazy&&this.isDiff(this.val,this.value)&&this.syncValue(),this.flag=!1,window.setTimeout(function(){e.processFlag=!1},0),this.setPosition()},setValueOnPos:function(t,e){var i=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit;if(t>=i[0]&&t<=i[1]){this.setTransform(t);var r=this.getValueByIndex(Math.round(t/this.gap));this.setCurrentValue(r,e),this.isRange&&this.fixed&&(this.setTransform(t+this.fixedValue*this.gap*(0===this.currentSlider?1:-1),!0),this.setCurrentValue((r*this.multiple+this.fixedValue*this.spacing*this.multiple*(0===this.currentSlider?1:-1))/this.multiple,e,!0))}else t<i[0]?(this.setTransform(i[0]),this.setCurrentValue(s[0]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][0],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][0],e,!0)):this.fixed||this.disabledArray[0]||1!==this.currentSlider||(this.focusSlider=0,this.currentSlider=0)):(this.setTransform(i[1]),this.setCurrentValue(s[1]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][1],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][1],e,!0)):this.fixed||this.disabledArray[1]||0!==this.currentSlider||(this.focusSlider=1,this.currentSlider=1))},isDiff:function(t,e){return Object.prototype.toString.call(t)!==Object.prototype.toString.call(e)||(Array.isArray(t)&&t.length===e.length?t.some(function(t,i){return t!==e[i]}):t!==e)},setCurrentValue:function(t,e,i){var s=i?this.idleSlider:this.currentSlider;if(t<this.minimum||t>this.maximum)return!1;this.isRange?this.isDiff(this.currentValue[s],t)&&(this.currentValue.splice(s,1,t),this.lazy&&this.flag||this.syncValue()):this.isDiff(this.currentValue,t)&&(this.currentValue=t,this.lazy&&this.flag||this.syncValue()),e||this.setPosition()},getValueByIndex:function(t){return(this.spacing*this.multiple*t+this.minimum*this.multiple)/this.multiple},getIndexByValue:function(t){return Math.round((t-this.minimum)*this.multiple)/(this.spacing*this.multiple)},setIndex:function(t){if(Array.isArray(t)&&this.isRange){var e=void 0;e=this.data?[this.data[t[0]],this.data[t[1]]]:[this.getValueByIndex(t[0]),this.getValueByIndex(t[1])],this.setValue(e)}else t=this.getValueByIndex(t),this.isRange&&(this.currentSlider=t>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(t)},setValue:function(t,e,i){var s=this;if(this.isDiff(this.val,t)){var r=this.limitValue(t);this.val=this.isRange?r.concat():r,this.computedFixedValue(),this.syncValue(e)}this.$nextTick(function(){return s.setPosition(i)})},computedFixedValue:function(){if(!this.fixed)return this.fixedValue=0,!1;this.fixedValue=this.currentIndex[1]-this.currentIndex[0]},setPosition:function(t){this.flag||this.setTransitionTime(void 0===t?this.speed:t),this.isRange?(this.setTransform(this.position[0],1===this.currentSlider),this.setTransform(this.position[1],0===this.currentSlider)):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(t,e){var i=e?this.idleSlider:this.currentSlider,r=s(("vertical"===this.direction?this.dotHeightVal/2-t:t-this.dotWidthVal/2)*(this.reverse?-1:1)),o="vertical"===this.direction?"translateY("+r+"px)":"translateX("+r+"px)",n=this.fixed?this.fixedValue*this.gap+"px":(0===i?this.position[1]-t:t-this.position[0])+"px",l=this.fixed?(0===i?t:t-this.fixedValue*this.gap)+"px":(0===i?t:this.position[0])+"px";this.isRange?(this.slider[i].style.transform=o,this.slider[i].style.WebkitTransform=o,this.slider[i].style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=n,this.$refs.process.style[this.reverse?"top":"bottom"]=l):(this.$refs.process.style.width=n,this.$refs.process.style[this.reverse?"right":"left"]=l)):(this.slider.style.transform=o,this.slider.style.WebkitTransform=o,this.slider.style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=t+"px",this.$refs.process.style[this.reverse?"top":"bottom"]=0):(this.$refs.process.style.width=t+"px",this.$refs.process.style[this.reverse?"right":"left"]=0))},setTransitionTime:function(t){if(t||this.$refs.process.offsetWidth,this.isRange){for(var e=0;e<this.slider.length;e++)this.slider[e].style.transitionDuration=t+"s",this.slider[e].style.WebkitTransitionDuration=t+"s";this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"}else this.slider.style.transitionDuration=t+"s",this.slider.style.WebkitTransitionDuration=t+"s",this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"},limitValue:function(t){var e=this;if(this.data)return t;var i=function(i){return i<e.min?(e.printError("The value of the slider is "+t+", the minimum value is "+e.min+", the value of this slider can not be less than the minimum value"),e.min):i>e.max?(e.printError("The value of the slider is "+t+", the maximum value is "+e.max+", the value of this slider can not be greater than the maximum value"),e.max):i};return this.isRange?t.map(function(t){return i(t)}):i(t)},syncValue:function(t){var e=this.isRange?this.val.concat():this.val;this.$emit("input",e),t||this.$emit("callback",e)},getValue:function(){return this.val},getIndex:function(){return this.currentIndex},getStaticData:function(){this.$refs.elem&&(this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.offset="vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left)},refresh:function(){this.$refs.elem&&(this.getStaticData(),this.computedFixedValue(),this.setPosition())},printError:function(t){this.debug&&console.error("[VueSlider error]: "+t)},handleOverlapTooltip:function(){var t=this.tooltipDirection[0]===this.tooltipDirection[1];if(this.isRange&&t){var e=this.reverse?this.$refs.tooltip1:this.$refs.tooltip0,i=this.reverse?this.$refs.tooltip0:this.$refs.tooltip1,s=e.getBoundingClientRect().right,r=i.getBoundingClientRect().left,o=e.getBoundingClientRect().y,n=i.getBoundingClientRect().y+i.getBoundingClientRect().height,l="horizontal"===this.direction&&s>r,a="vertical"===this.direction&&n>o;l||a?this.handleDisplayMergedTooltip(!0):this.handleDisplayMergedTooltip(!1)}},handleDisplayMergedTooltip:function(t){var e=this.$refs.tooltip0,i=this.$refs.tooltip1,s=this.$refs.process.getElementsByClassName("vue-merged-tooltip")[0];t?(e.style.visibility="hidden",i.style.visibility="hidden",s.style.visibility="visible"):(e.style.visibility="visible",i.style.visibility="visible",s.style.visibility="hidden")}},mounted:function(){var t=this;if(this.isComponentExists=!0,"undefined"==typeof window||"undefined"==typeof document)return this.printError("window or document is undefined, can not be initialization.");this.$nextTick(function(){t.isComponentExists&&(t.getStaticData(),t.setValue(t.limitValue(t.value),!0,0),t.bindEvents())}),this.isMounted=!0},beforeDestroy:function(){this.isComponentExists=!1,this.unbindEvents()}}},function(t,e,i){"use strict";var s=i(0);t.exports=s},function(t,e,i){e=t.exports=i(4)(),e.push([t.i,'.vue-slider-component{position:relative;box-sizing:border-box;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}.vue-slider-component.vue-slider-disabled{opacity:.5;cursor:not-allowed}.vue-slider-component.vue-slider-has-label{margin-bottom:15px}.vue-slider-component.vue-slider-disabled .vue-slider-dot{cursor:not-allowed}.vue-slider-component .vue-slider{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-slider-component .vue-slider:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2}.vue-slider-component .vue-slider-process{position:absolute;border-radius:15px;background-color:#3498db;transition:all 0s;z-index:1}.vue-slider-component .vue-slider-process.vue-slider-process-dragable{cursor:pointer;z-index:3}.vue-slider-component.vue-slider-horizontal .vue-slider-process{width:0;height:100%;top:0;left:0;will-change:width}.vue-slider-component.vue-slider-vertical .vue-slider-process{width:100%;height:0;bottom:0;left:0;will-change:height}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-process{width:0;height:100%;top:0;right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-process{width:100%;height:0;top:0;left:0}.vue-slider-component .vue-slider-dot{position:absolute;border-radius:50%;background-color:#fff;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);transition:all 0s;will-change:transform;cursor:pointer;z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-focus{box-shadow:0 0 2px 1px #3498db}.vue-slider-component .vue-slider-dot.vue-slider-dot-dragging{z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-disabled{z-index:4}.vue-slider-component.vue-slider-horizontal .vue-slider-dot{left:0}.vue-slider-component.vue-slider-vertical .vue-slider-dot{bottom:0}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-dot{right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-dot{top:0}.vue-slider-component .vue-slider-tooltip-wrap{display:none;position:absolute;z-index:9}.vue-slider-component .vue-slider-tooltip{display:block;font-size:14px;white-space:nowrap;padding:2px 5px;min-width:20px;text-align:center;color:#fff;border-radius:5px;border:1px solid #3498db;background-color:#3498db}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top{top:-9px;left:50%;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom{bottom:-9px;left:50%;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left{top:50%;left:-9px;-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right{top:50%;right:-9px;-webkit-transform:translate(100%,-50%);transform:translate(100%,-50%)}.vue-slider-component .vue-slider-tooltip-top .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top .vue-slider-tooltip:before{content:"";position:absolute;bottom:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-top-color:inherit;-webkit-transform:translate(-50%);transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-merged-tooltip{display:block;visibility:hidden}.vue-slider-component .vue-slider-tooltip-bottom .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom .vue-slider-tooltip:before{content:"";position:absolute;top:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-bottom-color:inherit;-webkit-transform:translate(-50%);transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-left .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left .vue-slider-tooltip:before{content:"";position:absolute;top:50%;right:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-left-color:inherit;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-slider-component .vue-slider-tooltip-right .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right .vue-slider-tooltip:before{content:"";position:absolute;top:50%;left:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-right-color:inherit;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-slider-component .vue-slider-dot.vue-slider-hover:hover .vue-slider-tooltip-wrap{display:block}.vue-slider-component .vue-slider-dot.vue-slider-always .vue-slider-tooltip-wrap{display:block!important}.vue-slider-component .vue-slider-piecewise{position:absolute;width:100%;padding:0;margin:0;left:0;top:0;height:100%;list-style:none}.vue-slider-component .vue-slider-piecewise-item{position:absolute;width:8px;height:8px}.vue-slider-component .vue-slider-piecewise-dot{position:absolute;left:50%;top:50%;width:100%;height:100%;display:inline-block;background-color:rgba(0,0,0,.16);border-radius:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2;transition:all .3s}.vue-slider-component .vue-slider-piecewise-item:first-child .vue-slider-piecewise-dot,.vue-slider-component .vue-slider-piecewise-item:last-child .vue-slider-piecewise-dot{visibility:hidden}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-horizontal .vue-slider-piecewise-label{position:absolute;display:inline-block;top:100%;left:50%;white-space:nowrap;font-size:12px;color:#333;-webkit-transform:translate(-50%,8px);transform:translate(-50%,8px);visibility:visible}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-vertical .vue-slider-piecewise-label{position:absolute;display:inline-block;top:50%;left:100%;white-space:nowrap;font-size:12px;color:#333;-webkit-transform:translate(8px,-50%);transform:translate(8px,-50%);visibility:visible}.vue-slider-component .vue-slider-sr-only{clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute!important}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var s={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(s[o]=!0)}for(r=0;r<e.length;r++){var n=e[r];"number"==typeof n[0]&&s[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),t.push(n))}},t}},function(t,e){t.exports=function(t,e,i,s){var r,o=t=t||{},n=typeof t.default;"object"!==n&&"function"!==n||(r=t,o=t.default);var l="function"==typeof o?o.options:o;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns),i&&(l._scopeId=i),s){var a=Object.create(l.computed||null);Object.keys(s).forEach(function(t){var e=s[t];a[t]=function(){return e}}),l.computed=a}return{esModule:r,exports:o,options:l}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],ref:"wrap",class:["vue-slider-component",t.flowDirection,t.disabledClass,t.stateClass,{"vue-slider-has-label":t.piecewiseLabel}],style:[t.wrapStyles,t.boolDisabled?t.disabledStyle:null],on:{click:t.wrapClick}},[i("div",{ref:"elem",staticClass:"vue-slider",style:[t.elemStyles,t.bgStyle],attrs:{"aria-hidden":"true"}},[t.isRange?[i("div",{key:"dot0",ref:"dot0",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[0]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[0]?t.disabledDotStyles[0]:null,t.sliderStyles[0],t.focusFlag&&0===t.focusSlider?t.focusStyles[0]:null],on:{mousedown:function(e){t.moveStart(e,0)},touchstart:function(e){t.moveStart(e,0)}}},[i("div",{ref:"tooltip0",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[0]},[t._v(t._s(t.formatter?t.formatting(t.val[0]):t.val[0]))])],{value:t.val[0],index:0,disabled:!t.boolDisabled&&t.disabledArray[0]})],2)]),t._v(" "),i("div",{key:"dot1",ref:"dot1",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&1===t.focusSlider,"vue-slider-dot-dragging":t.flag&&1===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[1]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[1]?t.disabledDotStyles[1]:null,t.sliderStyles[1],t.focusFlag&&1===t.focusSlider?t.focusStyles[1]:null],on:{mousedown:function(e){t.moveStart(e,1)},touchstart:function(e){t.moveStart(e,1)}}},[i("div",{ref:"tooltip1",class:["vue-slider-tooltip-"+t.tooltipDirection[1],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[1]},[t._v(t._s(t.formatter?t.formatting(t.val[1]):t.val[1]))])],{value:t.val[1],index:1,disabled:!t.boolDisabled&&t.disabledArray[1]})],2)])]:[i("div",{key:"dot",ref:"dot",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider}],style:[t.dotStyles,t.sliderStyles,t.focusFlag&&0===t.focusSlider?t.focusStyles:null],on:{mousedown:t.moveStart,touchstart:t.moveStart}},[i("div",{class:["vue-slider-tooltip-"+t.tooltipDirection,"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v(t._s(t.formatter?t.formatting(t.val):t.val))])],{value:t.val})],2)])],t._v(" "),i("ul",{staticClass:"vue-slider-piecewise"},t._l(t.piecewiseDotWrap,function(e,s){return i("li",{key:s,staticClass:"vue-slider-piecewise-item",style:[t.piecewiseDotStyle,e.style]},[t._t("piecewise",[t.piecewise?i("span",{staticClass:"vue-slider-piecewise-dot",style:[t.piecewiseStyle,e.inRange?t.piecewiseActiveStyle:null]}):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange}),t._v(" "),t._t("label",[t.piecewiseLabel?i("span",{staticClass:"vue-slider-piecewise-label",style:[t.labelStyle,e.inRange?t.labelActiveStyle:null]},[t._v("\n            "+t._s(e.label)+"\n          ")]):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange})],2)})),t._v(" "),i("div",{ref:"process",class:["vue-slider-process",{"vue-slider-process-dragable":t.isRange&&t.processDragable}],style:t.processStyle,on:{click:t.processClick,mousedown:function(e){t.moveStart(e,0,!0)},touchstart:function(e){t.moveStart(e,0,!0)}}},[i("div",{ref:"mergedTooltip",staticClass:"vue-merged-tooltip",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"],style:t.tooltipMergedPosition},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v("\n            "+t._s(t.mergeFormatter?t.mergeFormatting(t.val[0],t.val[1]):t.formatter?t.val[0]===t.val[1]?t.formatting(t.val[0]):t.formatting(t.val[0])+" - "+t.formatting(t.val[1]):t.val[0]===t.val[1]?t.val[0]:t.val[0]+" - "+t.val[1])+"\n          ")])])],2)]),t._v(" "),t.isRange||t.data?t._e():i("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],staticClass:"vue-slider-sr-only",attrs:{type:"range",min:t.min,max:t.max},domProps:{value:t.val},on:{__r:function(e){t.val=e.target.value}}})],2)])},staticRenderFns:[]}},function(t,e,i){var s=i(3);"string"==typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);i(8)("743d98f5",s,!0)},function(t,e,i){function s(t){for(var e=0;e<t.length;e++){var i=t[e],s=d[i.id];if(s){s.refs++;for(var r=0;r<s.parts.length;r++)s.parts[r](i.parts[r]);for(;r<i.parts.length;r++)s.parts.push(o(i.parts[r]));s.parts.length>i.parts.length&&(s.parts.length=i.parts.length)}else{for(var n=[],r=0;r<i.parts.length;r++)n.push(o(i.parts[r]));d[i.id]={id:i.id,refs:1,parts:n}}}}function r(){var t=document.createElement("style");return t.type="text/css",h.appendChild(t),t}function o(t){var e,i,s=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(s){if(f)return v;s.parentNode.removeChild(s)}if(m){var o=p++;s=c||(c=r()),e=n.bind(null,s,o,!1),i=n.bind(null,s,o,!0)}else s=r(),e=l.bind(null,s),i=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else i()}}function n(t,e,i,s){var r=i?"":s.css;if(t.styleSheet)t.styleSheet.cssText=g(e,r);else{var o=document.createTextNode(r),n=t.childNodes;n[e]&&t.removeChild(n[e]),n.length?t.insertBefore(o,n[e]):t.appendChild(o)}}function l(t,e){var i=e.css,s=e.media,r=e.sourceMap;if(s&&t.setAttribute("media",s),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(9),d={},h=a&&(document.head||document.getElementsByTagName("head")[0]),c=null,p=0,f=!1,v=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,i){f=i;var r=u(t,e);return s(r),function(e){for(var i=[],o=0;o<r.length;o++){var n=r[o],l=d[n.id];l.refs--,i.push(l)}e?(r=u(t,e),s(r)):r=[];for(var o=0;o<i.length;o++){var l=i[o];if(0===l.refs){for(var a=0;a<l.parts.length;a++)l.parts[a]();delete d[l.id]}}}};var g=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var i=[],s={},r=0;r<e.length;r++){var o=e[r],n=o[0],l=o[1],a=o[2],u=o[3],d={id:t+":"+r,css:l,media:a,sourceMap:u};s[n]?s[n].parts.push(d):i.push(s[n]={id:n,parts:[d]})}return i}}])});
 
 /***/ }),
 /* 51 */

From de842320f0d54d98ebd8380df1cfc163264554fc Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Wed, 26 Sep 2018 15:49:18 +0530
Subject: [PATCH 03/11] Checkout review page added

---
 packages/Webkul/Cart/src/Cart.php             |  74 ++-
 .../2018_09_05_150444_create_cart_table.php   |  13 +-
 ...8_09_05_150915_create_cart_items_table.php |   4 +-
 ...93508_create_cart_shipping_rates_table.php |   3 +-
 .../Http/Controllers/CheckoutController.php   |  18 +
 packages/Webkul/Cart/src/Models/Cart.php      |  17 +
 .../Webkul/Cart/src/Models/CartPayment.php    |  10 +
 packages/Webkul/Core/src/Core.php             |  22 +
 .../Webkul/Shipping/src/Carriers/FlatRate.php |   3 +-
 .../Webkul/Shipping/src/Carriers/Free.php     |   1 +
 .../Shop/src/Resources/assets/sass/app.scss   | 482 +-----------------
 .../Webkul/Shop/src/Resources/lang/en/app.php |   7 +
 .../views/checkout/onepage.blade.php          | 125 ++++-
 .../views/checkout/onepage/payment.blade.php  |   2 +-
 .../views/checkout/onepage/review.blade.php   | 193 +++++++
 .../views/checkout/onepage/shipping.blade.php |   4 +-
 .../views/checkout/onepage/summary.blade.php  |  37 --
 .../views/checkout/total/summary.blade.php    |  31 ++
 public/mix-manifest.json                      |   3 +-
 public/themes/default/assets/css/shop.css     | 426 +---------------
 public/themes/default/assets/js/shop.js       |   4 -
 .../themes/default/assets/mix-manifest.json   |   2 +-
 22 files changed, 520 insertions(+), 961 deletions(-)
 create mode 100644 packages/Webkul/Cart/src/Models/CartPayment.php
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/checkout/onepage/summary.blade.php
 create mode 100644 packages/Webkul/Shop/src/Resources/views/checkout/total/summary.blade.php

diff --git a/packages/Webkul/Cart/src/Cart.php b/packages/Webkul/Cart/src/Cart.php
index aef382642..934b5906b 100644
--- a/packages/Webkul/Cart/src/Cart.php
+++ b/packages/Webkul/Cart/src/Cart.php
@@ -8,6 +8,7 @@ use Webkul\Cart\Repositories\CartItemRepository;
 use Webkul\Cart\Repositories\CartAddressRepository;
 use Webkul\Customer\Repositories\CustomerRepository;
 use Webkul\Product\Repositories\ProductRepository;
+use Webkul\Cart\Models\CartPayment;
 use Cookie;
 
 /**
@@ -264,8 +265,8 @@ class Cart {
     {
         if(!$cart = session()->get('cart'))
             return false;
-        
-        return $cart;
+
+        return $this->cart->find($cart->id);
     }
 
     /**
@@ -322,12 +323,71 @@ class Cart {
         if(!$cart = $this->getCart())
             return false;
 
-        foreach($cart->shipping_rates as $rate) {
-            if($rate->method != $shippingMethodCode) {
-                $rate->delete();
-            }
-        }
+        $cart->shipping_method = $shippingMethodCode;
+        $cart->save();
+
+        // foreach($cart->shipping_rates as $rate) {
+        //     if($rate->method != $shippingMethodCode) {
+        //         $rate->delete();
+        //     }
+        // }
 
         return true;
     }
+
+    /**
+     * Save payment method for cart
+     *
+     * @param string $payment
+     * @return Mixed
+     */
+    public function savePaymentMethod($payment)
+    {
+        if(!$cart = $this->getCart())
+            return false;
+
+        if($cartPayment = $cart->payment)
+            $cartPayment->delete();
+
+        $cartPayment = new CartPayment;
+
+        $cartPayment->method = $payment['method'];
+        $cartPayment->cart_id = $cart->id;
+        $cartPayment->save();
+
+        return $cartPayment;
+    }
+
+    /**
+     * Updates cart totals
+     *
+     * @return void
+     */
+    public function collectTotals()
+    {
+        if(!$cart = $this->getCart())
+            return false;
+
+        $cart->grand_total = 0;
+        $cart->base_grand_total = 0;
+        $cart->sub_total = 0;
+        $cart->base_sub_total = 0;
+        $cart->sub_total_with_discount = 0;
+        $cart->base_sub_total_with_discount = 0;
+
+        foreach ($cart->items()->get() as $item) {
+            $cart->grand_total = (float) $cart->grand_total + $item->price;
+            $cart->base_grand_total = (float) $cart->base_grand_total + $item->base_price;
+
+            $cart->sub_total = (float) $cart->sub_total + $item->price;
+            $cart->base_sub_total = (float) $cart->base_sub_total + $item->base_price;
+        }
+
+        if($shipping = $cart->selected_shipping_rate) {
+            $cart->grand_total = (float) $cart->grand_total + $shipping->price;
+            $cart->base_grand_total = (float) $cart->base_grand_total + $shipping->base_price;
+        }
+
+        $cart->save();
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150444_create_cart_table.php b/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150444_create_cart_table.php
index 9809f692d..3944fc3df 100644
--- a/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150444_create_cart_table.php
+++ b/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150444_create_cart_table.php
@@ -20,6 +20,7 @@ class CreateCartTable extends Migration
             $table->string('session_id')->nullable();
             $table->integer('channel_id')->unsigned();
             $table->foreign('channel_id')->references('id')->on('channels');
+            $table->string('shipping_method')->nullable();
             $table->string('coupon_code')->nullable();
             $table->boolean('is_gift')->nullable();
             $table->integer('items_count')->nullable();
@@ -28,12 +29,12 @@ class CreateCartTable extends Migration
             $table->string('base_currency_code')->nullable();
             $table->string('store_currency_code')->nullable();
             $table->string('quote_currency_code')->nullable();
-            $table->decimal('grand_total', 12, 4)->nullable();
-            $table->decimal('base_grand_total', 12, 4)->nullable();
-            $table->decimal('sub_total', 12, 4)->nullable();
-            $table->decimal('base_sub_total', 12, 4)->nullable();
-            $table->decimal('sub_total_with_discount', 12, 4)->nullable();
-            $table->decimal('base_sub_total_with_discount', 12, 4)->nullable();
+            $table->decimal('grand_total', 12, 4)->default(0)->nullable();
+            $table->decimal('base_grand_total', 12, 4)->default(0)->nullable();
+            $table->decimal('sub_total', 12, 4)->default(0)->nullable();
+            $table->decimal('base_sub_total', 12, 4)->default(0)->nullable();
+            $table->decimal('sub_total_with_discount', 12, 4)->default(0)->nullable();
+            $table->decimal('base_sub_total_with_discount', 12, 4)->default(0)->nullable();
             $table->string('checkout_method')->nullable();
             $table->boolean('is_guest')->nullable();
             $table->string('customer_full_name')->nullable();
diff --git a/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150915_create_cart_items_table.php b/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150915_create_cart_items_table.php
index 5fe74cc90..a9d40a150 100644
--- a/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150915_create_cart_items_table.php
+++ b/packages/Webkul/Cart/src/Database/Migrations/2018_09_05_150915_create_cart_items_table.php
@@ -24,8 +24,8 @@ class CreateCartItemsTable extends Migration
             $table->foreign('tax_category_id')->references('id')->on('tax_categories');
             $table->string('coupon_code')->nullable();
             $table->decimal('weight', 12,4)->nullable();
-            $table->decimal('price', 12,4)->nullable();
-            $table->decimal('base_price', 12,4)->nullable();
+            $table->decimal('price', 12,4)->default(0)->nullable();
+            $table->decimal('base_price', 12,4)->default(0)->nullable();
             $table->decimal('custom_price', 12,4)->nullable();
             $table->decimal('discount_percent', 12,4)->nullable();
             $table->decimal('discount_amount', 12,4)->nullable();
diff --git a/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping_rates_table.php b/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping_rates_table.php
index 3b286d510..2565b846d 100644
--- a/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping_rates_table.php
+++ b/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093508_create_cart_shipping_rates_table.php
@@ -20,7 +20,8 @@ class CreateCartShippingRatesTable extends Migration
             $table->string('method');
             $table->string('method_title');
             $table->string('method_description')->nullable();
-            $table->double('price')->nullable();
+            $table->double('price')->default(0)->nullable();
+            $table->double('base_price')->default(0)->nullable();
             $table->integer('cart_address_id')->nullable()->unsigned();
             $table->foreign('cart_address_id')->references('id')->on('cart_address');
             $table->timestamps();
diff --git a/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php b/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php
index 486067e2d..d9271ad56 100644
--- a/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php
+++ b/packages/Webkul/Cart/src/Http/Controllers/CheckoutController.php
@@ -70,6 +70,13 @@ class CheckoutController extends Controller
     */
     public function saveShipping()
     {
+        $shippingMethod = request()->get('shipping_method');
+
+        if(!$shippingMethod || !Cart::saveShippingMethod($shippingMethod))
+            return response()->json(['redirect_url' => route('shop.checkout.cart.index')], 403);
+
+        Cart::collectTotals();
+
         return response()->json(Payment::getSupportedPaymentMethods());
     }
 
@@ -80,5 +87,16 @@ class CheckoutController extends Controller
     */
     public function savePayment()
     {
+        $payment = request()->get('payment');
+
+        if(!$payment || !Cart::savePaymentMethod($payment))
+            return response()->json(['redirect_url' => route('shop.checkout.cart.index')], 403);
+
+        $cart = Cart::getCart();
+
+        return response()->json([
+                'jump_to_section' => 'review',
+                'html' => view('shop::checkout.onepage.review', compact('cart'))->render()
+            ]);
     }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Models/Cart.php b/packages/Webkul/Cart/src/Models/Cart.php
index 48b7e62e9..310d16703 100644
--- a/packages/Webkul/Cart/src/Models/Cart.php
+++ b/packages/Webkul/Cart/src/Models/Cart.php
@@ -5,6 +5,7 @@ namespace Webkul\Cart\Models;
 use Illuminate\Database\Eloquent\Model;
 use Webkul\Product\Models\Product;
 use Webkul\Cart\Models\CartAddress;
+use Webkul\Cart\Models\CartPayment;
 use Webkul\Cart\Models\CartShippingRate;
 
 class Cart extends Model
@@ -66,4 +67,20 @@ class Cart extends Model
     {
         return $this->hasManyThrough(CartShippingRate::class, CartAddress::class, 'cart_id', 'cart_address_id');
     }
+
+    /**
+     * Get all of the attributes for the attribute groups.
+     */
+    public function getSelectedShippingRateAttribute()
+    {
+        return $this->shipping_rates()->where('method', $this->shipping_method)->first();
+    }
+
+    /**
+     * Get the payment associated with the cart.
+     */
+    public function payment()
+    {
+        return $this->hasOne(CartPayment::class);
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Models/CartPayment.php b/packages/Webkul/Cart/src/Models/CartPayment.php
new file mode 100644
index 000000000..1d0487e40
--- /dev/null
+++ b/packages/Webkul/Cart/src/Models/CartPayment.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace Webkul\Cart\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class CartPayment extends Model
+{
+    protected $table = 'cart_payment';
+}
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Core.php b/packages/Webkul/Core/src/Core.php
index 5c2d895c0..35aa98a5d 100644
--- a/packages/Webkul/Core/src/Core.php
+++ b/packages/Webkul/Core/src/Core.php
@@ -127,6 +127,17 @@ class Core
         return $currencySymbol = $this->getCurrentCurrency()->symbol;
     }
 
+    /**
+    * Convert price with currency symbol
+    *
+    * @param float $price
+    *  @return string
+    */
+    public function convertPrice($price, $currencyCode = null)
+    {
+        return $price;
+    }
+
     /**
     * Format and convert price with currency symbol
     *
@@ -145,6 +156,17 @@ class Core
         return currency($price, $currencyCode);
     }
 
+    /**
+    * Format and convert price with currency symbol
+    *
+    * @param float $price
+    *  @return string
+    */
+    public function formatPrice($price, $currencyCode)
+    {
+        return currency($price, $currencyCode);
+    }
+
     /**
      * Checks if current date of the given channel (in the channel timezone) is within the range
      *
diff --git a/packages/Webkul/Shipping/src/Carriers/FlatRate.php b/packages/Webkul/Shipping/src/Carriers/FlatRate.php
index 449b32e0d..715f11538 100644
--- a/packages/Webkul/Shipping/src/Carriers/FlatRate.php
+++ b/packages/Webkul/Shipping/src/Carriers/FlatRate.php
@@ -36,7 +36,8 @@ class FlatRate extends AbstractShipping
         $object->method = 'flatrate_flatrate';
         $object->method_title = $this->getConfigData('title');
         $object->method_description = $this->getConfigData('description');
-        $object->price = 10;
+        $object->price = core()->convertPrice($this->getConfigData('default_rate'));
+        $object->base_price = $this->getConfigData('default_rate');
 
         return $object;
     }
diff --git a/packages/Webkul/Shipping/src/Carriers/Free.php b/packages/Webkul/Shipping/src/Carriers/Free.php
index e51a1ec53..5ef07c928 100644
--- a/packages/Webkul/Shipping/src/Carriers/Free.php
+++ b/packages/Webkul/Shipping/src/Carriers/Free.php
@@ -37,6 +37,7 @@ class Free extends AbstractShipping
         $object->method_title = $this->getConfigData('title');
         $object->method_description = $this->getConfigData('description');
         $object->price = 0;
+        $object->base_price = 0;
 
         return $object;
     }
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index a59bf9439..8cc501715 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -19,6 +19,7 @@ body {
     font-family: "Montserrat", sans-serif;
 }
 
+// header page responsive starts here
 .header {
     margin-top: 16px;
     margin-bottom: 21px;
@@ -297,319 +298,6 @@ body {
         }
     }
 }
-
-
-// header page responsive css start here
-
-@media all and (max-width: 480px) {
-
-    .header {
-        // border: 1px solid black;
-        margin-top: 16px;
-        margin-bottom: 21px;
-
-        .header-top {
-            margin-bottom: 16px;
-            display: flex;
-            // max-width: 92%;
-            width: 100%;
-            margin-left: auto;
-            margin-right: auto;
-            // border: 1px solid indigo;
-            align-items: center;
-            justify-content: space-between;
-
-            div.left-content {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-start;
-                align-items: center;
-
-                ul.logo-container {
-                    margin-right: 12px;
-
-                    li {
-                        display: flex;
-                    }
-                }
-
-                ul.search-container {
-                    li.search-group {
-                        display: none;
-                    }
-                }
-            }
-
-            div.right-content {
-                display: none;
-            }
-
-            .right-responsive {
-                display: inherit;
-            }
-        }
-
-        .search-suggestion {
-            display: none;
-
-            .search-content {
-                border-top: 1px solid #e8e8e8;
-                border-bottom: 1px solid #e8e8e8;
-                height: 48px;
-
-                .icon.search-icon {
-                    margin-left: 15px;
-                    margin-top: 12px;
-                }
-
-                span {
-                    font-size: 16px;
-                    color: #242424;
-                    margin-bottom: -7px;
-                    margin-left: 5px;
-                }
-
-                .right {
-                    float: right;
-                    margin-right: 15px;
-                }
-            }
-
-            .suggestion {
-                margin-top: 14px;
-                height: 32px;
-                margin-bottom: 14px;
-                border-bottom: 1px solid #e8e8e8;
-
-                span {
-                    font-size: 16px;
-                    color: #242424;
-                    margin-left: 48px;
-                }
-            }
-        }
-
-        .header-bottom {
-            height: 200px;
-            margin-left: auto;
-            margin-right: auto;
-            border-top: none;
-            border-bottom: none;
-            display: none;
-
-            ul.nav {
-                width: 100%;
-                height: 100px;
-            }
-
-            .nav > li {
-                float: none;
-                border-bottom: 1px solid #e8e8e8;
-
-                a {
-                    margin-left: 10px;
-                }
-
-                .dropdown-right-icon{
-                   float: right;
-                   margin-top: 5px;
-                   margin-right: 5px;
-                }
-            }
-
-            .nav > li:first-child {
-                border-top: 1px solid #e8e8e8;
-            }
-
-            .nav > li:last-child {
-                float:none;
-
-                span {
-                    font-size: 16px;
-                    color: #FF6472;
-                    letter-spacing: -0.38px;
-                }
-
-                img {
-                    margin-left: 20px;
-                }
-            }
-
-            /* submenu positioning*/
-
-            .nav ul {
-                position: absolute;
-                white-space: nowrap;
-                border: 1px solid #B1B1B1;
-                background-color:white;
-                z-index: 1;
-                left: -99999em;
-            }
-
-            .nav > li:hover > ul {
-                left: auto;
-                min-width: 100%;
-            }
-
-            .nav > li li:hover > ul {
-                left: 100%;
-                margin-left: 1px;
-                top: -1px;
-            }
-
-            .nav > li:hover > a:first-child:nth-last-child(2):before {
-                margin-top:-5px
-            }
-
-            .nav li li > a:first-child:nth-last-child(2):before {
-                margin-top: -5px
-            }
-
-            .nav li li:hover > a:first-child:nth-last-child(2):before {
-                right: 10px;
-            }
-        }
-    }
-
-}
-
-@media all and (min-width: 481px) and (max-width: 920px) {
-
-    .header {
-        // border: 1px solid black;
-        margin-top: 16px;
-        margin-bottom: 21px;
-
-        .header-top {
-            margin-bottom: 16px;
-            display: flex;
-            // max-width: 92%;
-            width: 100%;
-            margin-left: auto;
-            margin-right: auto;
-            // border: 1px solid indigo;
-            align-items: center;
-            justify-content: space-between;
-
-            div.left-content {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-start;
-                align-items: center;
-
-                ul.logo-container {
-                    margin-right: 12px;
-
-                    li {
-                        display: flex;
-                    }
-                }
-
-                ul.search-container {
-                    li.search-group {
-                        display: none;
-                    }
-                }
-            }
-
-            div.right-content {
-                display: none;
-            }
-
-            .right-responsive {
-                display: inherit;
-            }
-        }
-
-        .search-suggestion {
-            display: none;
-        }
-
-        .header-bottom {
-            height: 200px;
-            margin-left: auto;
-            margin-right: auto;
-            border-top: none;
-            border-bottom: none;
-            display: none;
-
-            ul.nav {
-                width: 100%;
-                height: 100px;
-            }
-
-            .nav > li {
-                float: none;
-                border-bottom: 1px solid #e8e8e8;
-
-                a {
-                    margin-left: 10px;
-                }
-
-                .dropdown-right-icon{
-                   float: right;
-                   margin-top: 5px;
-                   margin-right: 5px;
-                }
-            }
-
-            .nav > li:first-child {
-                border-top: 1px solid #e8e8e8;
-            }
-
-            .nav > li:last-child {
-                float:none;
-
-                span {
-                    font-size: 16px;
-                    color: #FF6472;
-                    letter-spacing: -0.38px;
-                }
-
-                img {
-                    margin-left: 20px;
-                }
-            }
-
-            /* submenu positioning*/
-
-            .nav ul {
-                position: absolute;
-                white-space: nowrap;
-                border: 1px solid #B1B1B1;
-                background-color:white;
-                z-index: 1;
-                left: -99999em;
-            }
-
-            .nav > li:hover > ul {
-                left: auto;
-                min-width: 100%;
-            }
-
-            .nav > li li:hover > ul {
-                left: 100%;
-                margin-left: 1px;
-                top: -1px;
-            }
-
-            .nav > li:hover > a:first-child:nth-last-child(2):before {
-                margin-top:-5px
-            }
-
-            .nav li li > a:first-child:nth-last-child(2):before {
-                margin-top: -5px
-            }
-
-            .nav li li:hover > a:first-child:nth-last-child(2):before {
-                right: 10px;
-            }
-        }
-    }
-
-}
-
-
 // header page responsive ends here
 
 section.slider-block {
@@ -767,7 +455,6 @@ section.slider-block {
     }
 }
 
-
 .main-container-wrapper {
     max-width: 80%;
     width: auto;
@@ -3241,8 +2928,8 @@ section.cart {
                 &.completed {
                     cursor: pointer;
 
-                    img {
-                        margin: auto;
+                    .decorator {
+                        background-image: url('../images/complete.svg');
                     }
                 }
 
@@ -3370,171 +3057,8 @@ section.cart {
         }
     }
 }
-
 // checkout ends here
 
-// responsive checkout start here
-
-@media all and (max-width: 480px) {
-    .checkout-process{
-        width: 100%;
-        margin-top: 3%;
-
-        .left-side {
-            width: 100%;
-            margin-right: 0%;
-            height: 60px;
-
-            .checkout-menu {
-                width: 100%;
-
-                ul.checkout-detail {
-                    height: 60px;
-                    width: 100%;
-                    padding: 5px;
-
-                    li {
-                        height: 48px;
-
-                        .wrapper {
-                            display: flex;
-
-                            span {
-                               display: none;
-                            }
-                        }
-                    }
-
-                    .line {
-                        margin-top: 23px;
-                        width: 100%;
-                        margin-left: 5px;
-                        margin-right: 5px;
-                        border: 1px solid #E7E7E7;
-                        height: 1px;
-                    }
-                }
-
-                .horizontal-rule {
-                   display: none;
-                }
-            }
-        }
-
-        .right-side {
-            display: none;
-        }
-    }
-
-    .order-info{
-        width: 100%;
-        margin-right: 0%;
-        margin-top: 10px;
-        height:50px;
-
-        .control-group {
-
-            .control{
-                width:100%;
-            }
-        }
-
-        .different-billing-addr {
-            margin-top: 5%;
-        }
-
-        .horizontal-rule {
-            margin-top: 10%;
-        }
-
-        .countinue-button {
-            margin-top: 8%;
-        }
-    }
-}
-
-@media all and (min-width: 481px) and (max-width: 920px) {
-
-    .checkout-process{
-        width: 100%;
-        margin-top:3%;
-
-        .left-side {
-            width: 100%;
-            margin-right: 0%;
-            height: 60px;
-
-            .checkout-menu {
-                width: 100%;
-
-                ul.checkout-detail {
-                    height: 60px;
-                    width: 100%;
-                    padding: 5px;
-
-                    li {
-                        height: 48px;
-
-                        .wrapper {
-                            display:flex;
-
-                            span {
-                               display: none;
-                            }
-
-                        }
-                    }
-
-                    .line {
-                        margin-top: 23px;
-                        width: 100%;
-                        margin-left: 10px;
-                        margin-right: 10px;
-                        border: 1px solid #E7E7E7;
-                        height: 1px;
-                    }
-                }
-
-                .horizontal-rule {
-                   display: none;
-                }
-            }
-        }
-
-        .right-side {
-            display:none;
-        }
-    }
-
-    .order-info{
-        width: 100%;
-        margin-right: 0%;
-        margin-top: 10px;
-        height:50px;
-
-        .control-group {
-
-            .control{
-                width:100%;
-            }
-        }
-
-        .different-billing-addr {
-            margin-top: 3%;
-        }
-
-        .horizontal-rule {
-            margin-top: 10%;
-        }
-
-        .countinue-button {
-            margin-top: 5%;
-        }
-    }
-}
-// responsive checkout end here
-
-
 
 //shipment start here
 .ship-method {
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index 1ad002407..af33d2f71 100644
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -88,6 +88,13 @@ return [
             'continue' => 'Continue',
             'shipping-method' => 'Shipping Method',
             'payment-information' => 'Payment Information'
+        ],
+
+        'total' => [
+            'order-summary' => 'Order Summary',
+            'sub-total' => 'Sub Total',
+            'grand-total' => 'Grand Total',
+            'delivery-charges' => 'Delivery Charges'
         ]
     ]
 ];
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
index 9fb6fbbf0..17b2889c8 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
@@ -55,7 +55,7 @@
 
                 <div class="step-content shipping" v-show="currentStep == 2">
 
-                    <shipping-section v-if="currentStep == 2"></shipping-section>
+                    <shipping-section v-if="currentStep == 2" @onShippingMethodSelected="shippingMethodSelected($event)"></shipping-section>
 
                     <div class="button-group">
 
@@ -69,7 +69,7 @@
 
                 <div class="step-content payment" v-show="currentStep == 3">
 
-                    <payment-section v-if="currentStep == 3"></payment-section>
+                    <payment-section v-if="currentStep == 3" @onPaymentMethodSelected="paymentMethodSelected($event)"></payment-section>
 
                     <div class="button-group">
 
@@ -83,21 +83,34 @@
 
                 <div class="step-content review" v-show="currentStep == 4">
 
-                    @include('shop::checkout.onepage.review')
+                    <review-section v-if="currentStep == 4"></review-section>
+
+                    <div class="button-group">
+
+                        <button type="button" class="btn btn-lg btn-primary" @click="placeOrder()">
+                            {{ __('shop::app.checkout.onepage.continue') }}
+                        </button>
+
+                    </div>
 
                 </div>
 
             </div>
 
-            @include('shop::checkout.onepage.summary')
+            <div class="col-right" v-show="currentStep != 4">
+
+                <summary-section></summary-section>
+
+            </div>
 
         </div>
     </script>
 
     <script>
-
         var shippingHtml = '';
         var paymentHtml = '';
+        var reviewHtml = '';
+        var summaryHtml = Vue.compile(`<?php echo view('shop::checkout.total.summary', ['cart' => $cart])->render(); ?>`);
 
         Vue.component('checkout', {
 
@@ -120,9 +133,7 @@
 
                 selected_shipping_method: '',
 
-                selected_payment: {
-                    method: ''
-                },
+                selected_payment_method: '',
             }),
 
             methods: {
@@ -167,7 +178,7 @@
                     this.$http.post("{{ route('shop.checkout.save-shipping') }}", {'shipping_method': this.selected_shipping_method})
                         .then(function(response) {
                             if(response.data.jump_to_section == 'payment') {
-                                shippingHtml = Vue.compile(response.data.html)
+                                paymentHtml = Vue.compile(response.data.html)
                                 this_this.completedStep = 2;
                                 this_this.currentStep = 3;
                             }
@@ -179,10 +190,10 @@
 
                 savePayment () {
                     var this_this = this;
-                    this.$http.post("{{ route('shop.checkout.save-payment') }}", {'shipping_method': this.selected_payment_method})
+                    this.$http.post("{{ route('shop.checkout.save-payment') }}", {'payment': this.selected_payment_method})
                         .then(function(response) {
-                            if(response.data.jump_to_section == 'payment') {
-                                shippingHtml = Vue.compile(response.data.html)
+                            if(response.data.jump_to_section == 'review') {
+                                reviewHtml = Vue.compile(response.data.html)
                                 this_this.completedStep = 3;
                                 this_this.currentStep = 4;
                             }
@@ -192,6 +203,10 @@
                         })
                 },
 
+                placeOrder () {
+
+                },
+
                 handleErrorResponse (response, scope) {
                     if(response.status == 422) {
                         serverErrors = response.data.errors;
@@ -201,10 +216,46 @@
                             window.location.href = response.data.redirect_url;
                         }
                     }
+                },
+
+                shippingMethodSelected (shippingMethod) {
+                    this.selected_shipping_method = shippingMethod;
+                },
+
+                paymentMethodSelected (paymentMethod) {
+                    this.selected_payment_method = paymentMethod;
                 }
             }
         })
 
+        var summaryTemplateRenderFns = [];
+        Vue.component('summary-section', {
+
+            inject: ['$validator'],
+
+            data: () => ({
+                templateRender: null
+            }),
+
+            staticRenderFns: summaryTemplateRenderFns,
+
+            mounted() {
+                this.templateRender = summaryHtml.render;
+
+                for (var i in summaryHtml.staticRenderFns) {
+                    summaryTemplateRenderFns.push(summaryHtml.staticRenderFns[i]);
+                }
+            },
+
+            render(h) {
+                return h('div', [
+                    (this.templateRender ?
+                        this.templateRender() :
+                        '')
+                    ]);
+            }
+        })
+
         var shippingTemplateRenderFns = [];
         Vue.component('shipping-section', {
 
@@ -221,7 +272,7 @@
             mounted() {
                 this.templateRender = shippingHtml.render;
                 for (var i in shippingHtml.staticRenderFns) {
-                    shippingTemplateRenderFns.push(shippingHtml.staticRenderFns[i]);
+                    shippingTemplateRenderFns.unshift(shippingHtml.staticRenderFns[i]);
                 }
             },
 
@@ -231,6 +282,12 @@
                         this.templateRender() :
                         '')
                     ]);
+            },
+
+            methods: {
+                methodSelected () {
+                    this.$emit('onShippingMethodSelected', this.selected_shipping_method)
+                }
             }
         })
 
@@ -242,16 +299,50 @@
             data: () => ({
                 templateRender: null,
 
-                selected_payment_method: '',
+                payment: {
+                    method: ""
+                },
             }),
 
             staticRenderFns: paymentTemplateRenderFns,
 
             mounted() {
-                this.templateRender = shippingHtml.render;
+                this.templateRender = paymentHtml.render;
 
-                for (var i in shippingHtml.staticRenderFns) {
-                    paymentTemplateRenderFns.push(shippingHtml.staticRenderFns[i]);
+                for (var i in paymentHtml.staticRenderFns) {
+                    paymentTemplateRenderFns.unshift(paymentHtml.staticRenderFns[i]);
+                }
+            },
+
+            render(h) {
+                return h('div', [
+                    (this.templateRender ?
+                        this.templateRender() :
+                        '')
+                    ]);
+            },
+
+            methods: {
+                methodSelected () {
+                    this.$emit('onPaymentMethodSelected', this.payment)
+                }
+            }
+        })
+
+        var reviewTemplateRenderFns = [];
+        Vue.component('review-section', {
+
+            data: () => ({
+                templateRender: null
+            }),
+
+            staticRenderFns: reviewTemplateRenderFns,
+
+            mounted() {
+                this.templateRender = reviewHtml.render;
+
+                for (var i in reviewHtml.staticRenderFns) {
+                    reviewTemplateRenderFns.unshift(reviewHtml.staticRenderFns[i]);
                 }
             },
 
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php
index 7a714a8d9..d5dba6af8 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php
@@ -11,7 +11,7 @@
                 @foreach ($paymentMethods as $payment)
 
                     <span class="radio" >
-                        <input v-validate="'required'" type="radio" id="{{ $payment['method'] }}" name="payment[method]" value="{{ $payment['method'] }}" v-model="selected_payment_method">
+                        <input v-validate="'required'" type="radio" id="{{ $payment['method'] }}" name="payment[method]" value="{{ $payment['method'] }}" v-model="payment.method" @change="methodSelected()">
                         <label class="radio-view" for="{{ $payment['method'] }}"></label>
                         {{ $payment['title'] }}
                     </span>
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
index e69de29bb..40db17f16 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
@@ -0,0 +1,193 @@
+<div class="complete-page">
+    <div class="order-summary">
+        <span>Summary of Order</span>
+    </div>
+
+    <div class="address">
+
+        <div class="shipping-address">
+            <div class="shipping-title">
+                <span>Shipping address</span>
+            </div>
+
+            <div class="shipping-content">
+                <div class="name">
+                    <span>John Doe </span>
+                </div>
+                <div class="addr">
+                    <span>
+                        25 , Washington USA 5751434
+                    </span>
+                </div>
+                <div class="horizontal-rule">
+                </div>
+                <div class="contact">
+                    <span>Contact : 9876543210 </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="billing-address">
+            <div class="shipping-title">
+                <span>Billing address</span>
+            </div>
+
+            <div class="shipping-content">
+                <div class="name">
+                    <span>John Doe </span>
+                </div>
+                <div class="addr">
+                    <span>
+                        25 , Washington USA 5751434
+                    </span>
+                </div>
+                <div class="horizontal-rule">
+                </div>
+                <div class="contact">
+                    <span>Contact : 9876543210 </span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="product-detail">
+        <div class="product-image">
+            <img src="{{asset('themes/default/assets/images/1.png')}}" />
+        </div>
+
+        <div class="product-desc">
+            <div class="product-title">
+                <span>
+                    Rainbow creation Embroidered
+                </span>
+            </div>
+            <div class="price">
+                <span>
+                    <label>Price </label>
+                    <label class="bold"> $40.00 </label>
+                </span>
+            </div>
+            <div class="quantity">
+                <span>
+                    <label>Quantity</label>
+                    <label class="quat-bold"> 1 </label>
+                </span>
+            </div>
+            <div class="pro-attribute">
+                <span>
+                    Color : Grey, Size : S,Sleeve Type : Puffed Sleeves,Occasion : Birthday ,Marriage Anniversary
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="product-detail">
+        <div class="product-image">
+            <img src="{{asset('themes/default/assets/images/1.png')}}" />
+        </div>
+
+        <div class="product-desc">
+            <div class="product-title">
+                <span>
+                    Rainbow creation Embroidered
+                </span>
+            </div>
+            <div class="price">
+                <span>
+                    <label>Price </label>
+                    <label class="bold"> $40.00 </label>
+               </span>
+            </div>
+            <div class="quantity">
+                <span>
+                    <label>Quantity</label>
+                    <label class="quat-bold"> 1 </label>
+                </span>
+            </div>
+            <div class="pro-attribute">
+                <span>
+                    Color : Grey, Size : S,Sleeve Type : Puffed Sleeves,Occasion : Birthday ,Marriage Anniversary
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="order-description">
+
+        <div class="payment">
+            
+            <div class="shipping">
+                <div class="pay-icon">
+                    <img src="{{asset('themes/default/assets/images/shipping.svg')}}" />
+                </div>
+                <div class="shipping-text">
+                    <div class="price">
+                        <span>
+                            $ 25.00
+                        </span>
+                    </div>
+
+                    <div class="fedex-shipping">
+                        <span>
+                            FedEx Shipping
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="net-banking">
+                <div class="pay-icon">
+                    <img src="{{asset('themes/default/assets/images/payment.svg')}}" />
+                </div>
+                <span>Net banking </span>
+            </div>
+
+        </div>
+
+        <div class="product-bill">
+
+            <div class="sub-total">
+                <span>
+                    Subtotal
+                </span>
+                <span class="right">
+                    $ 2,506.00
+                </span>
+            </div>
+
+            <div class="charge-discount">
+                <span>
+                   Delivery Charges
+                </span>
+                <span class="right">
+                    $ 40.00
+                </span>
+            </div>
+
+            <div class="charge-discount">
+                <span>
+                   Coupan discount
+                </span>
+                <span class="right">
+                    $ 25.00
+                </span>
+            </div>
+
+            <div class="horizontal-rule">
+            </div>
+
+            <div class="amount-pay">
+                <span>
+                   Amount payable
+                </span>
+                <span class="right">
+                    $ 2,571.00
+                </span>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php
index 6bfb724f0..f7d9cf717 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/shipping.blade.php
@@ -13,10 +13,10 @@
 
                     @foreach ($rateGroup['rates'] as $rate)
                         <span class="radio" >
-                            <input v-validate="'required'" type="radio" id="{{ $rate->method }}" name="shipping_method" value="{{ $rate->method }}" v-model="selected_shipping_method">
+                            <input v-validate="'required'" type="radio" id="{{ $rate->method }}" name="shipping_method" value="{{ $rate->method }}" v-model="selected_shipping_method" @change="methodSelected()">
                             <label class="radio-view" for="{{ $rate->method }}"></label>
                             {{ $rate->method_title }}
-                            <b>{{ core()->currency($rate->price) }}</b>
+                            <b>{{ core()->currency($rate->base_price) }}</b>
                         </span>
                     @endforeach
                         
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/summary.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/summary.blade.php
deleted file mode 100644
index e5950fe05..000000000
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/summary.blade.php
+++ /dev/null
@@ -1,37 +0,0 @@
-<div class="col-right">
-    <div class="order-summary">
-        <div class="price">
-            <span>{{ __('shop::app.checkout.onepage.order-summary') }}</span>
-        </div>
-
-        <div class="item-detail">
-            <span>
-                <label>2 Items Price</label>
-                <label class="right">$ 2,506.00</label>
-            </span>
-        </div>
-
-        <div class="item-detail">
-            <span>
-                <label>Delivery Charges</label>
-                <label class="right">$ 40.00</label>
-            </span>
-        </div>
-        <div class="item-detail">
-            <span>
-                <label>Coupan Discount</label>
-                <label class="right">$ 25.00</label>
-            </span>
-        </div>
-
-        <div class="horizontal-rule">
-        </div>
-
-        <div class="payble-amount">
-            <span>
-                <label>Amount Payble</label>
-                <label class="right">$ 2571.00</label>
-            </span>
-        </div>
-    </div>
-</div>
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/total/summary.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/total/summary.blade.php
new file mode 100644
index 000000000..5f598bbd9
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/total/summary.blade.php
@@ -0,0 +1,31 @@
+<div class="order-summary">
+    <div class="price">
+        <span>{{ __('shop::app.checkout.total.order-summary') }}</span>
+    </div>
+
+    <div class="item-detail">
+        <span>
+            <label>{{ __('shop::app.checkout.total.sub-total') }}</label>
+            <label class="right">{{ core()->currency($cart->sub_total) }}</label>
+        </span>
+    </div>
+
+    @if ($cart->selected_shipping_rate)
+        <div class="item-detail">
+            <span>
+                <label>{{ __('shop::app.checkout.total.delivery-charges') }}</label>
+                <label class="right">{{ core()->currency($cart->selected_shipping_rate->price) }}</label>
+            </span>
+        </div>
+    @endif
+
+    <div class="horizontal-rule">
+    </div>
+
+    <div class="payble-amount">
+        <span>
+            <label>{{ __('shop::app.checkout.total.grand-total') }}</label>
+            <label class="right">{{ core()->currency($cart->grand_total) }}</label>
+        </span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index e2b79fac9..585e57f48 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,3 +1,4 @@
 {
-    "/js/app.js": "/js/app.js"
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
 }
\ No newline at end of file
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 0104a13f3..aa3f19af1 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -406,280 +406,6 @@ body {
   right: 10px;
 }
 
-@media all and (max-width: 480px) {
-  .header {
-    margin-top: 16px;
-    margin-bottom: 21px;
-  }
-  .header .header-top {
-    margin-bottom: 16px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-  }
-  .header .header-top div.left-content {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: row;
-            flex-direction: row;
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-  }
-  .header .header-top div.left-content ul.logo-container {
-    margin-right: 12px;
-  }
-  .header .header-top div.left-content ul.logo-container li {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-  .header .header-top div.left-content ul.search-container li.search-group {
-    display: none;
-  }
-  .header .header-top div.right-content {
-    display: none;
-  }
-  .header .header-top .right-responsive {
-    display: inherit;
-  }
-  .header .search-suggestion {
-    display: none;
-  }
-  .header .search-suggestion .search-content {
-    border-top: 1px solid #e8e8e8;
-    border-bottom: 1px solid #e8e8e8;
-    height: 48px;
-  }
-  .header .search-suggestion .search-content .icon.search-icon {
-    margin-left: 15px;
-    margin-top: 12px;
-  }
-  .header .search-suggestion .search-content span {
-    font-size: 16px;
-    color: #242424;
-    margin-bottom: -7px;
-    margin-left: 5px;
-  }
-  .header .search-suggestion .search-content .right {
-    float: right;
-    margin-right: 15px;
-  }
-  .header .search-suggestion .suggestion {
-    margin-top: 14px;
-    height: 32px;
-    margin-bottom: 14px;
-    border-bottom: 1px solid #e8e8e8;
-  }
-  .header .search-suggestion .suggestion span {
-    font-size: 16px;
-    color: #242424;
-    margin-left: 48px;
-  }
-  .header .header-bottom {
-    height: 200px;
-    margin-left: auto;
-    margin-right: auto;
-    border-top: none;
-    border-bottom: none;
-    display: none;
-    /* submenu positioning*/
-  }
-  .header .header-bottom ul.nav {
-    width: 100%;
-    height: 100px;
-  }
-  .header .header-bottom .nav > li {
-    float: none;
-    border-bottom: 1px solid #e8e8e8;
-  }
-  .header .header-bottom .nav > li a {
-    margin-left: 10px;
-  }
-  .header .header-bottom .nav > li .dropdown-right-icon {
-    float: right;
-    margin-top: 5px;
-    margin-right: 5px;
-  }
-  .header .header-bottom .nav > li:first-child {
-    border-top: 1px solid #e8e8e8;
-  }
-  .header .header-bottom .nav > li:last-child {
-    float: none;
-  }
-  .header .header-bottom .nav > li:last-child span {
-    font-size: 16px;
-    color: #FF6472;
-    letter-spacing: -0.38px;
-  }
-  .header .header-bottom .nav > li:last-child img {
-    margin-left: 20px;
-  }
-  .header .header-bottom .nav ul {
-    position: absolute;
-    white-space: nowrap;
-    border: 1px solid #B1B1B1;
-    background-color: white;
-    z-index: 1;
-    left: -99999em;
-  }
-  .header .header-bottom .nav > li:hover > ul {
-    left: auto;
-    min-width: 100%;
-  }
-  .header .header-bottom .nav > li li:hover > ul {
-    left: 100%;
-    margin-left: 1px;
-    top: -1px;
-  }
-  .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before {
-    margin-top: -5px;
-  }
-  .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before {
-    margin-top: -5px;
-  }
-  .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before {
-    right: 10px;
-  }
-}
-
-@media all and (min-width: 481px) and (max-width: 920px) {
-  .header {
-    margin-top: 16px;
-    margin-bottom: 21px;
-  }
-  .header .header-top {
-    margin-bottom: 16px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-  }
-  .header .header-top div.left-content {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: row;
-            flex-direction: row;
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-  }
-  .header .header-top div.left-content ul.logo-container {
-    margin-right: 12px;
-  }
-  .header .header-top div.left-content ul.logo-container li {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-  .header .header-top div.left-content ul.search-container li.search-group {
-    display: none;
-  }
-  .header .header-top div.right-content {
-    display: none;
-  }
-  .header .header-top .right-responsive {
-    display: inherit;
-  }
-  .header .search-suggestion {
-    display: none;
-  }
-  .header .header-bottom {
-    height: 200px;
-    margin-left: auto;
-    margin-right: auto;
-    border-top: none;
-    border-bottom: none;
-    display: none;
-    /* submenu positioning*/
-  }
-  .header .header-bottom ul.nav {
-    width: 100%;
-    height: 100px;
-  }
-  .header .header-bottom .nav > li {
-    float: none;
-    border-bottom: 1px solid #e8e8e8;
-  }
-  .header .header-bottom .nav > li a {
-    margin-left: 10px;
-  }
-  .header .header-bottom .nav > li .dropdown-right-icon {
-    float: right;
-    margin-top: 5px;
-    margin-right: 5px;
-  }
-  .header .header-bottom .nav > li:first-child {
-    border-top: 1px solid #e8e8e8;
-  }
-  .header .header-bottom .nav > li:last-child {
-    float: none;
-  }
-  .header .header-bottom .nav > li:last-child span {
-    font-size: 16px;
-    color: #FF6472;
-    letter-spacing: -0.38px;
-  }
-  .header .header-bottom .nav > li:last-child img {
-    margin-left: 20px;
-  }
-  .header .header-bottom .nav ul {
-    position: absolute;
-    white-space: nowrap;
-    border: 1px solid #B1B1B1;
-    background-color: white;
-    z-index: 1;
-    left: -99999em;
-  }
-  .header .header-bottom .nav > li:hover > ul {
-    left: auto;
-    min-width: 100%;
-  }
-  .header .header-bottom .nav > li li:hover > ul {
-    left: 100%;
-    margin-left: 1px;
-    top: -1px;
-  }
-  .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before {
-    margin-top: -5px;
-  }
-  .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before {
-    margin-top: -5px;
-  }
-  .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before {
-    right: 10px;
-  }
-}
-
 section.slider-block {
   display: block;
   margin-left: auto;
@@ -3044,10 +2770,32 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   display: -ms-inline-flexbox;
   display: inline-flex;
   border: 1px solid #E8E8E8;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
-.checkout-process .col-main ul.checkout-steps li .decorator img {
-  margin: auto;
+.checkout-process .col-main ul.checkout-steps li .decorator.address-info {
+  background-image: url("../images/address.svg");
+}
+
+.checkout-process .col-main ul.checkout-steps li .decorator.shipping {
+  background-image: url("../images/shipping.svg");
+}
+
+.checkout-process .col-main ul.checkout-steps li .decorator.payment {
+  background-image: url("../images/payment.svg");
+}
+
+.checkout-process .col-main ul.checkout-steps li .decorator.review {
+  background-image: url("../images/finish.svg");
+}
+
+.checkout-process .col-main ul.checkout-steps li.completed {
+  cursor: pointer;
+}
+
+.checkout-process .col-main ul.checkout-steps li.completed .decorator {
+  background-image: url("../images/complete.svg");
 }
 
 .checkout-process .col-main ul.checkout-steps li span {
@@ -3160,132 +2908,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   color: #242424;
 }
 
-@media all and (max-width: 480px) {
-  .checkout-process {
-    width: 100%;
-    margin-top: 3%;
-  }
-  .checkout-process .left-side {
-    width: 100%;
-    margin-right: 0%;
-    height: 60px;
-  }
-  .checkout-process .left-side .checkout-menu {
-    width: 100%;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail {
-    height: 60px;
-    width: 100%;
-    padding: 5px;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
-    height: 48px;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
-    display: none;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
-    margin-top: 23px;
-    width: 100%;
-    margin-left: 5px;
-    margin-right: 5px;
-    border: 1px solid #E7E7E7;
-    height: 1px;
-  }
-  .checkout-process .left-side .checkout-menu .horizontal-rule {
-    display: none;
-  }
-  .checkout-process .right-side {
-    display: none;
-  }
-  .order-info {
-    width: 100%;
-    margin-right: 0%;
-    margin-top: 10px;
-    height: 50px;
-  }
-  .order-info .control-group .control {
-    width: 100%;
-  }
-  .order-info .different-billing-addr {
-    margin-top: 5%;
-  }
-  .order-info .horizontal-rule {
-    margin-top: 10%;
-  }
-  .order-info .countinue-button {
-    margin-top: 8%;
-  }
-}
-
-@media all and (min-width: 481px) and (max-width: 920px) {
-  .checkout-process {
-    width: 100%;
-    margin-top: 3%;
-  }
-  .checkout-process .left-side {
-    width: 100%;
-    margin-right: 0%;
-    height: 60px;
-  }
-  .checkout-process .left-side .checkout-menu {
-    width: 100%;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail {
-    height: 60px;
-    width: 100%;
-    padding: 5px;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
-    height: 48px;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
-    display: none;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
-    margin-top: 23px;
-    width: 100%;
-    margin-left: 10px;
-    margin-right: 10px;
-    border: 1px solid #E7E7E7;
-    height: 1px;
-  }
-  .checkout-process .left-side .checkout-menu .horizontal-rule {
-    display: none;
-  }
-  .checkout-process .right-side {
-    display: none;
-  }
-  .order-info {
-    width: 100%;
-    margin-right: 0%;
-    margin-top: 10px;
-    height: 50px;
-  }
-  .order-info .control-group .control {
-    width: 100%;
-  }
-  .order-info .different-billing-addr {
-    margin-top: 3%;
-  }
-  .order-info .horizontal-rule {
-    margin-top: 10%;
-  }
-  .order-info .countinue-button {
-    margin-top: 5%;
-  }
-}
-
 .ship-method {
   width: 67%;
   margin-right: 6%;
diff --git a/public/themes/default/assets/js/shop.js b/public/themes/default/assets/js/shop.js
index 913a40ff5..eac787839 100644
--- a/public/themes/default/assets/js/shop.js
+++ b/public/themes/default/assets/js/shop.js
@@ -31497,11 +31497,7 @@ if (false) {
 /* 50 */
 /***/ (function(module, exports, __webpack_require__) {
 
-<<<<<<< HEAD
 !function(t,e){ true?module.exports=e():"function"==typeof define&&define.amd?define("vue-slider-component",[],e):"object"==typeof exports?exports["vue-slider-component"]=e():t["vue-slider-component"]=e()}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var r=i[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(t,e,i){i(7);var s=i(5)(i(1),i(6),null,null);t.exports=s.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=function(){var t="undefined"!=typeof window?window.devicePixelRatio||1:1;return function(e){return Math.round(e*t)/t}}();e.default={name:"VueSliderComponent",props:{width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:6},data:{type:Array,default:null},dotSize:{type:Number,default:16},dotWidth:{type:Number,required:!1},dotHeight:{type:Number,required:!1},min:{type:Number,default:0},max:{type:Number,default:100},interval:{type:Number,default:1},show:{type:Boolean,default:!0},disabled:{type:[Boolean,Array],default:!1},piecewise:{type:Boolean,default:!1},tooltip:{type:[String,Boolean],default:"always"},eventType:{type:String,default:"auto"},direction:{type:String,default:"horizontal"},reverse:{type:Boolean,default:!1},lazy:{type:Boolean,default:!1},clickable:{type:Boolean,default:!0},speed:{type:Number,default:.5},realTime:{type:Boolean,default:!1},stopPropagation:{type:Boolean,default:!1},value:{type:[String,Number,Array,Object],default:0},piecewiseLabel:{type:Boolean,default:!1},debug:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},processDragable:{type:Boolean,default:!1},useKeyboard:{type:Boolean,default:!1},actionsKeyboard:{type:Array,default:function(){return[function(t){return t-1},function(t){return t+1}]}},tooltipMerge:{type:Boolean,default:!0},sliderStyle:[Array,Object,Function],focusStyle:[Array,Object,Function],tooltipDir:[Array,String],formatter:[String,Function],mergeFormatter:[String,Function],piecewiseStyle:Object,disabledStyle:Object,piecewiseActiveStyle:Object,processStyle:Object,bgStyle:Object,tooltipStyle:[Array,Object,Function],disabledDotStyle:[Array,Object,Function],labelStyle:Object,labelActiveStyle:Object},data:function(){return{flag:!1,keydownFlag:null,focusFlag:!1,processFlag:!1,processSign:null,size:0,fixedValue:0,focusSlider:0,currentValue:0,currentSlider:0,isComponentExists:!0,isMounted:!1}},computed:{dotWidthVal:function(){return"number"==typeof this.dotWidth?this.dotWidth:this.dotSize},dotHeightVal:function(){return"number"==typeof this.dotHeight?this.dotHeight:this.dotSize},flowDirection:function(){return"vue-slider-"+this.direction+(this.reverse?"-reverse":"")},tooltipMergedPosition:function(){if(!this.isMounted)return{};var t=this.tooltipDirection[0];if(this.$refs.dot0){if("vertical"===this.direction){var e={};return e[t]="-"+(this.dotHeightVal/2-this.width/2+9)+"px",e}var i={};return i[t]="-"+(this.dotWidthVal/2-this.height/2+9)+"px",i.left="50%",i}},tooltipDirection:function(){var t=this.tooltipDir||("vertical"===this.direction?"left":"top");return Array.isArray(t)?this.isRange?t:t[1]:this.isRange?[t,t]:t},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"vue-slider-always":this.tooltip?"vue-slider-"+this.tooltip:""},tooltipClass:function(){return["vue-slider-tooltip-"+this.tooltipDirection,"vue-slider-tooltip"]},disabledArray:function(){return Array.isArray(this.disabled)?this.disabled:[this.disabled,this.disabled]},boolDisabled:function(){return this.disabledArray.every(function(t){return!0===t})},isDisabled:function(){return"none"===this.eventType||this.boolDisabled},disabledClass:function(){return this.boolDisabled?"vue-slider-disabled":""},stateClass:function(){return{"vue-slider-state-process-drag":this.processFlag,"vue-slider-state-drag":this.flag&&!this.processFlag&&!this.keydownFlag,"vue-slider-state-focus":this.focusFlag}},isRange:function(){return Array.isArray(this.value)},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot},minimum:function(){return this.data?0:this.min},val:{get:function(){return this.data?this.isRange?[this.data[this.currentValue[0]],this.data[this.currentValue[1]]]:this.data[this.currentValue]:this.currentValue},set:function(t){if(this.data)if(this.isRange){var e=this.data.indexOf(t[0]),i=this.data.indexOf(t[1]);e>-1&&i>-1&&(this.currentValue=[e,i])}else{var s=this.data.indexOf(t);s>-1&&(this.currentValue=s)}else this.currentValue=t}},currentIndex:function(){return this.isRange?this.data?this.currentValue:[this.getIndexByValue(this.currentValue[0]),this.getIndexByValue(this.currentValue[1])]:this.getIndexByValue(this.currentValue)},indexRange:function(){return this.isRange?this.currentIndex:[0,this.currentIndex]},maximum:function(){return this.data?this.data.length-1:this.max},multiple:function(){var t=(""+this.interval).split(".")[1];return t?Math.pow(10,t.length):1},spacing:function(){return this.data?1:this.interval},total:function(){return this.data?this.data.length-1:(Math.floor((this.maximum-this.minimum)*this.multiple)%(this.interval*this.multiple)!=0&&this.printError("Prop[interval] is illegal, Please make sure that the interval can be divisible"),(this.maximum-this.minimum)/this.interval)},gap:function(){return this.size/this.total},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?this.fixed?[[0,(this.total-this.fixedValue)*this.gap],[this.fixedValue*this.gap,this.size]]:[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?this.fixed?[[this.minimum,this.maximum-this.fixedValue*(this.spacing*this.multiple)/this.multiple],[this.minimum+this.fixedValue*(this.spacing*this.multiple)/this.multiple,this.maximum]]:[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},idleSlider:function(){return 0===this.currentSlider?1:0},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?this.height+"px":this.height,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}:{width:"number"==typeof this.width?this.width+"px":this.width,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}},sliderStyles:function(){return Array.isArray(this.sliderStyle)?this.isRange?this.sliderStyle:this.sliderStyle[1]:"function"==typeof this.sliderStyle?this.sliderStyle(this.val,this.currentIndex):this.isRange?[this.sliderStyle,this.sliderStyle]:this.sliderStyle},focusStyles:function(){return Array.isArray(this.focusStyle)?this.isRange?this.focusStyle:this.focusStyle[1]:"function"==typeof this.focusStyle?this.focusStyle(this.val,this.currentIndex):this.isRange?[this.focusStyle,this.focusStyle]:this.focusStyle},disabledDotStyles:function(){var t=this.disabledDotStyle;if(Array.isArray(t))return t;if("function"==typeof t){var e=t(this.val,this.currentIndex);return Array.isArray(e)?e:[e,e]}return t?[t,t]:[{backgroundColor:"#ccc"},{backgroundColor:"#ccc"}]},tooltipStyles:function(){return Array.isArray(this.tooltipStyle)?this.isRange?this.tooltipStyle:this.tooltipStyle[1]:"function"==typeof this.tooltipStyle?this.tooltipStyle(this.val,this.currentIndex):this.isRange?[this.tooltipStyle,this.tooltipStyle]:this.tooltipStyle},elemStyles:function(){return"vertical"===this.direction?{width:this.width+"px",height:"100%"}:{height:this.height+"px"}},dotStyles:function(){return"vertical"===this.direction?{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",left:-(this.dotWidthVal-this.width)/2+"px"}:{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",top:-(this.dotHeightVal-this.height)/2+"px"}},piecewiseDotStyle:function(){return"vertical"===this.direction?{width:this.width+"px",height:this.width+"px"}:{width:this.height+"px",height:this.height+"px"}},piecewiseDotWrap:function(){if(!this.piecewise&&!this.piecewiseLabel)return!1;for(var t=[],e=0;e<=this.total;e++){var i="vertical"===this.direction?{bottom:this.gap*e-this.width/2+"px",left:0}:{left:this.gap*e-this.height/2+"px",top:0},s=this.reverse?this.total-e:e,r=this.data?this.data[s]:this.spacing*s+this.min;t.push({style:i,label:this.formatter?this.formatting(r):r,inRange:s>=this.indexRange[0]&&s<=this.indexRange[1]})}return t}},watch:{value:function(t){this.flag||this.setValue(t,!0)},max:function(t){if(t<this.min)return this.printError("The maximum value can not be less than the minimum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},min:function(t){if(t>this.max)return this.printError("The minimum value can not be greater than the maximum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},show:function(t){var e=this;t&&!this.size&&this.$nextTick(function(){e.refresh()})},fixed:function(){this.computedFixedValue()}},methods:{bindEvents:function(){document.addEventListener("touchmove",this.moving,{passive:!1}),document.addEventListener("touchend",this.moveEnd,{passive:!1}),document.addEventListener("mousedown",this.blurSlider),document.addEventListener("mousemove",this.moving),document.addEventListener("mouseup",this.moveEnd),document.addEventListener("mouseleave",this.moveEnd),document.addEventListener("keydown",this.handleKeydown),document.addEventListener("keyup",this.handleKeyup),window.addEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.addEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.addEventListener("transitionend",this.handleOverlapTooltip))},unbindEvents:function(){document.removeEventListener("touchmove",this.moving),document.removeEventListener("touchend",this.moveEnd),document.removeEventListener("mousedown",this.blurSlider),document.removeEventListener("mousemove",this.moving),document.removeEventListener("mouseup",this.moveEnd),document.removeEventListener("mouseleave",this.moveEnd),document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("keyup",this.handleKeyup),window.removeEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.removeEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.removeEventListener("transitionend",this.handleOverlapTooltip))},handleKeydown:function(t){if(!this.useKeyboard||!this.focusFlag)return!1;switch(t.keyCode){case 37:case 40:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[0]);break;case 38:case 39:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[1])}},handleKeyup:function(){this.keydownFlag&&(this.keydownFlag=!1,this.flag=!1)},changeFocusSlider:function(t){var e=this;if(this.isRange){var i=this.currentIndex.map(function(i,s){if(s===e.focusSlider||e.fixed){var r=t(i),o=e.fixed?e.valueLimit[s]:[0,e.total];if(r<=o[1]&&r>=o[0])return r}return i});i[0]>i[1]&&(this.focusSlider=0===this.focusSlider?1:0,i=i.reverse()),this.setIndex(i)}else this.setIndex(t(this.currentIndex))},blurSlider:function(t){var e=this.isRange?this.$refs["dot"+this.focusSlider]:this.$refs.dot;if(!e||e===t.target)return!1;this.focusFlag=!1},formatting:function(t){return"string"==typeof this.formatter?this.formatter.replace(/\{value\}/,t):this.formatter(t)},mergeFormatting:function(t,e){return"string"==typeof this.mergeFormatter?this.mergeFormatter.replace(/\{(value1|value2)\}/g,function(i,s){return"value1"===s?t:e}):this.mergeFormatter(t,e)},getPos:function(t){return this.realTime&&this.getStaticData(),"vertical"===this.direction?this.reverse?t.pageY-this.offset:this.size-(t.pageY-this.offset):this.reverse?this.size-(t.clientX-this.offset):t.clientX-this.offset},processClick:function(t){this.fixed&&t.stopPropagation()},wrapClick:function(t){var e=this;if(this.isDisabled||!this.clickable||this.processFlag)return!1;var i=this.getPos(t);if(this.isRange)if(this.disabledArray.every(function(t){return!1===t}))this.currentSlider=i>(this.position[1]-this.position[0])/2+this.position[0]?1:0;else if(this.disabledArray[0]){if(i<this.position[0])return!1;this.currentSlider=1}else if(this.disabledArray[1]){if(i>this.position[1])return!1;this.currentSlider=0}if(this.disabledArray[this.currentSlider])return!1;if(this.setValueOnPos(i),this.isRange&&this.tooltipMerge){var s=setInterval(function(){return e.handleOverlapTooltip()},16.7);setTimeout(function(){return window.clearInterval(s)},1e3*this.speed)}},moveStart:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments[2];if(this.disabledArray[e])return!1;if(this.stopPropagation&&t.stopPropagation(),this.isRange&&(this.currentSlider=e,i)){if(!this.processDragable)return!1;this.processFlag=!0,this.processSign={pos:this.position,start:this.getPos(t.targetTouches&&t.targetTouches[0]?t.targetTouches[0]:t)}}!i&&this.useKeyboard&&(this.focusFlag=!0,this.focusSlider=e),this.flag=!0,this.$emit("drag-start",this)},moving:function(t){if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;t.preventDefault(),t.targetTouches&&t.targetTouches[0]&&(t=t.targetTouches[0]),this.processFlag?(this.currentSlider=0,this.setValueOnPos(this.processSign.pos[0]+this.getPos(t)-this.processSign.start,!0),this.currentSlider=1,this.setValueOnPos(this.processSign.pos[1]+this.getPos(t)-this.processSign.start,!0)):this.setValueOnPos(this.getPos(t),!0),this.isRange&&this.tooltipMerge&&this.handleOverlapTooltip()},moveEnd:function(t){var e=this;if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;this.$emit("drag-end",this),this.lazy&&this.isDiff(this.val,this.value)&&this.syncValue(),this.flag=!1,window.setTimeout(function(){e.processFlag=!1},0),this.setPosition()},setValueOnPos:function(t,e){var i=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit;if(t>=i[0]&&t<=i[1]){this.setTransform(t);var r=this.getValueByIndex(Math.round(t/this.gap));this.setCurrentValue(r,e),this.isRange&&this.fixed&&(this.setTransform(t+this.fixedValue*this.gap*(0===this.currentSlider?1:-1),!0),this.setCurrentValue((r*this.multiple+this.fixedValue*this.spacing*this.multiple*(0===this.currentSlider?1:-1))/this.multiple,e,!0))}else t<i[0]?(this.setTransform(i[0]),this.setCurrentValue(s[0]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][0],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][0],e,!0)):this.fixed||this.disabledArray[0]||1!==this.currentSlider||(this.focusSlider=0,this.currentSlider=0)):(this.setTransform(i[1]),this.setCurrentValue(s[1]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][1],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][1],e,!0)):this.fixed||this.disabledArray[1]||0!==this.currentSlider||(this.focusSlider=1,this.currentSlider=1))},isDiff:function(t,e){return Object.prototype.toString.call(t)!==Object.prototype.toString.call(e)||(Array.isArray(t)&&t.length===e.length?t.some(function(t,i){return t!==e[i]}):t!==e)},setCurrentValue:function(t,e,i){var s=i?this.idleSlider:this.currentSlider;if(t<this.minimum||t>this.maximum)return!1;this.isRange?this.isDiff(this.currentValue[s],t)&&(this.currentValue.splice(s,1,t),this.lazy&&this.flag||this.syncValue()):this.isDiff(this.currentValue,t)&&(this.currentValue=t,this.lazy&&this.flag||this.syncValue()),e||this.setPosition()},getValueByIndex:function(t){return(this.spacing*this.multiple*t+this.minimum*this.multiple)/this.multiple},getIndexByValue:function(t){return Math.round((t-this.minimum)*this.multiple)/(this.spacing*this.multiple)},setIndex:function(t){if(Array.isArray(t)&&this.isRange){var e=void 0;e=this.data?[this.data[t[0]],this.data[t[1]]]:[this.getValueByIndex(t[0]),this.getValueByIndex(t[1])],this.setValue(e)}else t=this.getValueByIndex(t),this.isRange&&(this.currentSlider=t>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(t)},setValue:function(t,e,i){var s=this;if(this.isDiff(this.val,t)){var r=this.limitValue(t);this.val=this.isRange?r.concat():r,this.computedFixedValue(),this.syncValue(e)}this.$nextTick(function(){return s.setPosition(i)})},computedFixedValue:function(){if(!this.fixed)return this.fixedValue=0,!1;this.fixedValue=this.currentIndex[1]-this.currentIndex[0]},setPosition:function(t){this.flag||this.setTransitionTime(void 0===t?this.speed:t),this.isRange?(this.setTransform(this.position[0],1===this.currentSlider),this.setTransform(this.position[1],0===this.currentSlider)):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(t,e){var i=e?this.idleSlider:this.currentSlider,r=s(("vertical"===this.direction?this.dotHeightVal/2-t:t-this.dotWidthVal/2)*(this.reverse?-1:1)),o="vertical"===this.direction?"translateY("+r+"px)":"translateX("+r+"px)",n=this.fixed?this.fixedValue*this.gap+"px":(0===i?this.position[1]-t:t-this.position[0])+"px",l=this.fixed?(0===i?t:t-this.fixedValue*this.gap)+"px":(0===i?t:this.position[0])+"px";this.isRange?(this.slider[i].style.transform=o,this.slider[i].style.WebkitTransform=o,this.slider[i].style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=n,this.$refs.process.style[this.reverse?"top":"bottom"]=l):(this.$refs.process.style.width=n,this.$refs.process.style[this.reverse?"right":"left"]=l)):(this.slider.style.transform=o,this.slider.style.WebkitTransform=o,this.slider.style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=t+"px",this.$refs.process.style[this.reverse?"top":"bottom"]=0):(this.$refs.process.style.width=t+"px",this.$refs.process.style[this.reverse?"right":"left"]=0))},setTransitionTime:function(t){if(t||this.$refs.process.offsetWidth,this.isRange){for(var e=0;e<this.slider.length;e++)this.slider[e].style.transitionDuration=t+"s",this.slider[e].style.WebkitTransitionDuration=t+"s";this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"}else this.slider.style.transitionDuration=t+"s",this.slider.style.WebkitTransitionDuration=t+"s",this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"},limitValue:function(t){var e=this;if(this.data)return t;var i=function(i){return i<e.min?(e.printError("The value of the slider is "+t+", the minimum value is "+e.min+", the value of this slider can not be less than the minimum value"),e.min):i>e.max?(e.printError("The value of the slider is "+t+", the maximum value is "+e.max+", the value of this slider can not be greater than the maximum value"),e.max):i};return this.isRange?t.map(function(t){return i(t)}):i(t)},syncValue:function(t){var e=this.isRange?this.val.concat():this.val;this.$emit("input",e),t||this.$emit("callback",e)},getValue:function(){return this.val},getIndex:function(){return this.currentIndex},getStaticData:function(){this.$refs.elem&&(this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.offset="vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left)},refresh:function(){this.$refs.elem&&(this.getStaticData(),this.computedFixedValue(),this.setPosition())},printError:function(t){this.debug&&console.error("[VueSlider error]: "+t)},handleOverlapTooltip:function(){var t=this.tooltipDirection[0]===this.tooltipDirection[1];if(this.isRange&&t){var e=this.reverse?this.$refs.tooltip1:this.$refs.tooltip0,i=this.reverse?this.$refs.tooltip0:this.$refs.tooltip1,s=e.getBoundingClientRect().right,r=i.getBoundingClientRect().left,o=e.getBoundingClientRect().y,n=i.getBoundingClientRect().y+i.getBoundingClientRect().height,l="horizontal"===this.direction&&s>r,a="vertical"===this.direction&&n>o;l||a?this.handleDisplayMergedTooltip(!0):this.handleDisplayMergedTooltip(!1)}},handleDisplayMergedTooltip:function(t){var e=this.$refs.tooltip0,i=this.$refs.tooltip1,s=this.$refs.process.getElementsByClassName("vue-merged-tooltip")[0];t?(e.style.visibility="hidden",i.style.visibility="hidden",s.style.visibility="visible"):(e.style.visibility="visible",i.style.visibility="visible",s.style.visibility="hidden")}},mounted:function(){var t=this;if(this.isComponentExists=!0,"undefined"==typeof window||"undefined"==typeof document)return this.printError("window or document is undefined, can not be initialization.");this.$nextTick(function(){t.isComponentExists&&(t.getStaticData(),t.setValue(t.limitValue(t.value),!0,0),t.bindEvents())}),this.isMounted=!0},beforeDestroy:function(){this.isComponentExists=!1,this.unbindEvents()}}},function(t,e,i){"use strict";var s=i(0);t.exports=s},function(t,e,i){e=t.exports=i(4)(),e.push([t.i,'.vue-slider-component{position:relative;box-sizing:border-box;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}.vue-slider-component.vue-slider-disabled{opacity:.5;cursor:not-allowed}.vue-slider-component.vue-slider-has-label{margin-bottom:15px}.vue-slider-component.vue-slider-disabled .vue-slider-dot{cursor:not-allowed}.vue-slider-component .vue-slider{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-slider-component .vue-slider:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2}.vue-slider-component .vue-slider-process{position:absolute;border-radius:15px;background-color:#3498db;transition:all 0s;z-index:1}.vue-slider-component .vue-slider-process.vue-slider-process-dragable{cursor:pointer;z-index:3}.vue-slider-component.vue-slider-horizontal .vue-slider-process{width:0;height:100%;top:0;left:0;will-change:width}.vue-slider-component.vue-slider-vertical .vue-slider-process{width:100%;height:0;bottom:0;left:0;will-change:height}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-process{width:0;height:100%;top:0;right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-process{width:100%;height:0;top:0;left:0}.vue-slider-component .vue-slider-dot{position:absolute;border-radius:50%;background-color:#fff;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);transition:all 0s;will-change:transform;cursor:pointer;z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-focus{box-shadow:0 0 2px 1px #3498db}.vue-slider-component .vue-slider-dot.vue-slider-dot-dragging{z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-disabled{z-index:4}.vue-slider-component.vue-slider-horizontal .vue-slider-dot{left:0}.vue-slider-component.vue-slider-vertical .vue-slider-dot{bottom:0}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-dot{right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-dot{top:0}.vue-slider-component .vue-slider-tooltip-wrap{display:none;position:absolute;z-index:9}.vue-slider-component .vue-slider-tooltip{display:block;font-size:14px;white-space:nowrap;padding:2px 5px;min-width:20px;text-align:center;color:#fff;border-radius:5px;border:1px solid #3498db;background-color:#3498db}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top{top:-9px;left:50%;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom{bottom:-9px;left:50%;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left{top:50%;left:-9px;-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right{top:50%;right:-9px;-webkit-transform:translate(100%,-50%);transform:translate(100%,-50%)}.vue-slider-component .vue-slider-tooltip-top .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top .vue-slider-tooltip:before{content:"";position:absolute;bottom:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-top-color:inherit;-webkit-transform:translate(-50%);transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-merged-tooltip{display:block;visibility:hidden}.vue-slider-component .vue-slider-tooltip-bottom .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom .vue-slider-tooltip:before{content:"";position:absolute;top:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-bottom-color:inherit;-webkit-transform:translate(-50%);transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-left .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left .vue-slider-tooltip:before{content:"";position:absolute;top:50%;right:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-left-color:inherit;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-slider-component .vue-slider-tooltip-right .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right .vue-slider-tooltip:before{content:"";position:absolute;top:50%;left:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-right-color:inherit;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-slider-component .vue-slider-dot.vue-slider-hover:hover .vue-slider-tooltip-wrap{display:block}.vue-slider-component .vue-slider-dot.vue-slider-always .vue-slider-tooltip-wrap{display:block!important}.vue-slider-component .vue-slider-piecewise{position:absolute;width:100%;padding:0;margin:0;left:0;top:0;height:100%;list-style:none}.vue-slider-component .vue-slider-piecewise-item{position:absolute;width:8px;height:8px}.vue-slider-component .vue-slider-piecewise-dot{position:absolute;left:50%;top:50%;width:100%;height:100%;display:inline-block;background-color:rgba(0,0,0,.16);border-radius:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2;transition:all .3s}.vue-slider-component .vue-slider-piecewise-item:first-child .vue-slider-piecewise-dot,.vue-slider-component .vue-slider-piecewise-item:last-child .vue-slider-piecewise-dot{visibility:hidden}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-horizontal .vue-slider-piecewise-label{position:absolute;display:inline-block;top:100%;left:50%;white-space:nowrap;font-size:12px;color:#333;-webkit-transform:translate(-50%,8px);transform:translate(-50%,8px);visibility:visible}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-vertical .vue-slider-piecewise-label{position:absolute;display:inline-block;top:50%;left:100%;white-space:nowrap;font-size:12px;color:#333;-webkit-transform:translate(8px,-50%);transform:translate(8px,-50%);visibility:visible}.vue-slider-component .vue-slider-sr-only{clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute!important}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var s={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(s[o]=!0)}for(r=0;r<e.length;r++){var n=e[r];"number"==typeof n[0]&&s[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),t.push(n))}},t}},function(t,e){t.exports=function(t,e,i,s){var r,o=t=t||{},n=typeof t.default;"object"!==n&&"function"!==n||(r=t,o=t.default);var l="function"==typeof o?o.options:o;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns),i&&(l._scopeId=i),s){var a=Object.create(l.computed||null);Object.keys(s).forEach(function(t){var e=s[t];a[t]=function(){return e}}),l.computed=a}return{esModule:r,exports:o,options:l}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],ref:"wrap",class:["vue-slider-component",t.flowDirection,t.disabledClass,t.stateClass,{"vue-slider-has-label":t.piecewiseLabel}],style:[t.wrapStyles,t.boolDisabled?t.disabledStyle:null],on:{click:t.wrapClick}},[i("div",{ref:"elem",staticClass:"vue-slider",style:[t.elemStyles,t.bgStyle],attrs:{"aria-hidden":"true"}},[t.isRange?[i("div",{key:"dot0",ref:"dot0",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[0]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[0]?t.disabledDotStyles[0]:null,t.sliderStyles[0],t.focusFlag&&0===t.focusSlider?t.focusStyles[0]:null],on:{mousedown:function(e){t.moveStart(e,0)},touchstart:function(e){t.moveStart(e,0)}}},[i("div",{ref:"tooltip0",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[0]},[t._v(t._s(t.formatter?t.formatting(t.val[0]):t.val[0]))])],{value:t.val[0],index:0,disabled:!t.boolDisabled&&t.disabledArray[0]})],2)]),t._v(" "),i("div",{key:"dot1",ref:"dot1",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&1===t.focusSlider,"vue-slider-dot-dragging":t.flag&&1===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[1]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[1]?t.disabledDotStyles[1]:null,t.sliderStyles[1],t.focusFlag&&1===t.focusSlider?t.focusStyles[1]:null],on:{mousedown:function(e){t.moveStart(e,1)},touchstart:function(e){t.moveStart(e,1)}}},[i("div",{ref:"tooltip1",class:["vue-slider-tooltip-"+t.tooltipDirection[1],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[1]},[t._v(t._s(t.formatter?t.formatting(t.val[1]):t.val[1]))])],{value:t.val[1],index:1,disabled:!t.boolDisabled&&t.disabledArray[1]})],2)])]:[i("div",{key:"dot",ref:"dot",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider}],style:[t.dotStyles,t.sliderStyles,t.focusFlag&&0===t.focusSlider?t.focusStyles:null],on:{mousedown:t.moveStart,touchstart:t.moveStart}},[i("div",{class:["vue-slider-tooltip-"+t.tooltipDirection,"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v(t._s(t.formatter?t.formatting(t.val):t.val))])],{value:t.val})],2)])],t._v(" "),i("ul",{staticClass:"vue-slider-piecewise"},t._l(t.piecewiseDotWrap,function(e,s){return i("li",{key:s,staticClass:"vue-slider-piecewise-item",style:[t.piecewiseDotStyle,e.style]},[t._t("piecewise",[t.piecewise?i("span",{staticClass:"vue-slider-piecewise-dot",style:[t.piecewiseStyle,e.inRange?t.piecewiseActiveStyle:null]}):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange}),t._v(" "),t._t("label",[t.piecewiseLabel?i("span",{staticClass:"vue-slider-piecewise-label",style:[t.labelStyle,e.inRange?t.labelActiveStyle:null]},[t._v("\n            "+t._s(e.label)+"\n          ")]):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange})],2)})),t._v(" "),i("div",{ref:"process",class:["vue-slider-process",{"vue-slider-process-dragable":t.isRange&&t.processDragable}],style:t.processStyle,on:{click:t.processClick,mousedown:function(e){t.moveStart(e,0,!0)},touchstart:function(e){t.moveStart(e,0,!0)}}},[i("div",{ref:"mergedTooltip",staticClass:"vue-merged-tooltip",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"],style:t.tooltipMergedPosition},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v("\n            "+t._s(t.mergeFormatter?t.mergeFormatting(t.val[0],t.val[1]):t.formatter?t.val[0]===t.val[1]?t.formatting(t.val[0]):t.formatting(t.val[0])+" - "+t.formatting(t.val[1]):t.val[0]===t.val[1]?t.val[0]:t.val[0]+" - "+t.val[1])+"\n          ")])])],2)]),t._v(" "),t.isRange||t.data?t._e():i("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],staticClass:"vue-slider-sr-only",attrs:{type:"range",min:t.min,max:t.max},domProps:{value:t.val},on:{__r:function(e){t.val=e.target.value}}})],2)])},staticRenderFns:[]}},function(t,e,i){var s=i(3);"string"==typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);i(8)("743d98f5",s,!0)},function(t,e,i){function s(t){for(var e=0;e<t.length;e++){var i=t[e],s=d[i.id];if(s){s.refs++;for(var r=0;r<s.parts.length;r++)s.parts[r](i.parts[r]);for(;r<i.parts.length;r++)s.parts.push(o(i.parts[r]));s.parts.length>i.parts.length&&(s.parts.length=i.parts.length)}else{for(var n=[],r=0;r<i.parts.length;r++)n.push(o(i.parts[r]));d[i.id]={id:i.id,refs:1,parts:n}}}}function r(){var t=document.createElement("style");return t.type="text/css",h.appendChild(t),t}function o(t){var e,i,s=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(s){if(f)return v;s.parentNode.removeChild(s)}if(m){var o=p++;s=c||(c=r()),e=n.bind(null,s,o,!1),i=n.bind(null,s,o,!0)}else s=r(),e=l.bind(null,s),i=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else i()}}function n(t,e,i,s){var r=i?"":s.css;if(t.styleSheet)t.styleSheet.cssText=g(e,r);else{var o=document.createTextNode(r),n=t.childNodes;n[e]&&t.removeChild(n[e]),n.length?t.insertBefore(o,n[e]):t.appendChild(o)}}function l(t,e){var i=e.css,s=e.media,r=e.sourceMap;if(s&&t.setAttribute("media",s),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(9),d={},h=a&&(document.head||document.getElementsByTagName("head")[0]),c=null,p=0,f=!1,v=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,i){f=i;var r=u(t,e);return s(r),function(e){for(var i=[],o=0;o<r.length;o++){var n=r[o],l=d[n.id];l.refs--,i.push(l)}e?(r=u(t,e),s(r)):r=[];for(var o=0;o<i.length;o++){var l=i[o];if(0===l.refs){for(var a=0;a<l.parts.length;a++)l.parts[a]();delete d[l.id]}}}};var g=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var i=[],s={},r=0;r<e.length;r++){var o=e[r],n=o[0],l=o[1],a=o[2],u=o[3],d={id:t+":"+r,css:l,media:a,sourceMap:u};s[n]?s[n].parts.push(d):i.push(s[n]={id:n,parts:[d]})}return i}}])});
-=======
-!function(t,e){ true?module.exports=e():"function"==typeof define&&define.amd?define("vue-slider-component",[],e):"object"==typeof exports?exports["vue-slider-component"]=e():t["vue-slider-component"]=e()}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var r=i[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(t,e,i){i(7);var s=i(5)(i(1),i(6),null,null);t.exports=s.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=function(){var t="undefined"!=typeof window?window.devicePixelRatio||1:1;return function(e){return Math.round(e*t)/t}}();e.default={name:"VueSliderComponent",props:{width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:6},data:{type:Array,default:null},dotSize:{type:Number,default:16},dotWidth:{type:Number,required:!1},dotHeight:{type:Number,required:!1},min:{type:Number,default:0},max:{type:Number,default:100},interval:{type:Number,default:1},show:{type:Boolean,default:!0},disabled:{type:[Boolean,Array],default:!1},piecewise:{type:Boolean,default:!1},tooltip:{type:[String,Boolean],default:"always"},eventType:{type:String,default:"auto"},direction:{type:String,default:"horizontal"},reverse:{type:Boolean,default:!1},lazy:{type:Boolean,default:!1},clickable:{type:Boolean,default:!0},speed:{type:Number,default:.5},realTime:{type:Boolean,default:!1},stopPropagation:{type:Boolean,default:!1},value:{type:[String,Number,Array,Object],default:0},piecewiseLabel:{type:Boolean,default:!1},debug:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},processDragable:{type:Boolean,default:!1},useKeyboard:{type:Boolean,default:!1},actionsKeyboard:{type:Array,default:function(){return[function(t){return t-1},function(t){return t+1}]}},tooltipMerge:{type:Boolean,default:!0},startAnimation:{type:Boolean,default:!1},sliderStyle:[Array,Object,Function],focusStyle:[Array,Object,Function],tooltipDir:[Array,String],formatter:[String,Function],mergeFormatter:[String,Function],piecewiseStyle:Object,disabledStyle:Object,piecewiseActiveStyle:Object,processStyle:Object,bgStyle:Object,tooltipStyle:[Array,Object,Function],disabledDotStyle:[Array,Object,Function],labelStyle:Object,labelActiveStyle:Object},data:function(){return{flag:!1,keydownFlag:null,focusFlag:!1,processFlag:!1,processSign:null,size:0,fixedValue:0,focusSlider:0,currentValue:0,currentSlider:0,isComponentExists:!0,isMounted:!1}},computed:{dotWidthVal:function(){return"number"==typeof this.dotWidth?this.dotWidth:this.dotSize},dotHeightVal:function(){return"number"==typeof this.dotHeight?this.dotHeight:this.dotSize},flowDirection:function(){return"vue-slider-"+this.direction+(this.reverse?"-reverse":"")},tooltipMergedPosition:function(){if(!this.isMounted)return{};var t=this.tooltipDirection[0];if(this.$refs.dot0){if("vertical"===this.direction){var e={};return e[t]="-"+(this.dotHeightVal/2-this.width/2+9)+"px",e}var i={};return i[t]="-"+(this.dotWidthVal/2-this.height/2+9)+"px",i.left="50%",i}},tooltipDirection:function(){var t=this.tooltipDir||("vertical"===this.direction?"left":"top");return Array.isArray(t)?this.isRange?t:t[1]:this.isRange?[t,t]:t},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"vue-slider-always":this.tooltip?"vue-slider-"+this.tooltip:""},tooltipClass:function(){return["vue-slider-tooltip-"+this.tooltipDirection,"vue-slider-tooltip"]},disabledArray:function(){return Array.isArray(this.disabled)?this.disabled:[this.disabled,this.disabled]},boolDisabled:function(){return this.disabledArray.every(function(t){return!0===t})},isDisabled:function(){return"none"===this.eventType||this.boolDisabled},disabledClass:function(){return this.boolDisabled?"vue-slider-disabled":""},stateClass:function(){return{"vue-slider-state-process-drag":this.processFlag,"vue-slider-state-drag":this.flag&&!this.processFlag&&!this.keydownFlag,"vue-slider-state-focus":this.focusFlag}},isRange:function(){return Array.isArray(this.value)},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot},minimum:function(){return this.data?0:this.min},val:{get:function(){return this.data?this.isRange?[this.data[this.currentValue[0]],this.data[this.currentValue[1]]]:this.data[this.currentValue]:this.currentValue},set:function(t){if(this.data)if(this.isRange){var e=this.data.indexOf(t[0]),i=this.data.indexOf(t[1]);e>-1&&i>-1&&(this.currentValue=[e,i])}else{var s=this.data.indexOf(t);s>-1&&(this.currentValue=s)}else this.currentValue=t}},currentIndex:function(){return this.isRange?this.data?this.currentValue:[this.getIndexByValue(this.currentValue[0]),this.getIndexByValue(this.currentValue[1])]:this.getIndexByValue(this.currentValue)},indexRange:function(){return this.isRange?this.currentIndex:[0,this.currentIndex]},maximum:function(){return this.data?this.data.length-1:this.max},multiple:function(){var t=(""+this.interval).split(".")[1];return t?Math.pow(10,t.length):1},spacing:function(){return this.data?1:this.interval},total:function(){return this.data?this.data.length-1:(Math.floor((this.maximum-this.minimum)*this.multiple)%(this.interval*this.multiple)!=0&&this.printError("Prop[interval] is illegal, Please make sure that the interval can be divisible"),(this.maximum-this.minimum)/this.interval)},gap:function(){return this.size/this.total},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?this.fixed?[[0,(this.total-this.fixedValue)*this.gap],[this.fixedValue*this.gap,this.size]]:[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?this.fixed?[[this.minimum,this.maximum-this.fixedValue*(this.spacing*this.multiple)/this.multiple],[this.minimum+this.fixedValue*(this.spacing*this.multiple)/this.multiple,this.maximum]]:[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},idleSlider:function(){return 0===this.currentSlider?1:0},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?this.height+"px":this.height,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}:{width:"number"==typeof this.width?this.width+"px":this.width,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}},sliderStyles:function(){return Array.isArray(this.sliderStyle)?this.isRange?this.sliderStyle:this.sliderStyle[1]:"function"==typeof this.sliderStyle?this.sliderStyle(this.val,this.currentIndex):this.isRange?[this.sliderStyle,this.sliderStyle]:this.sliderStyle},focusStyles:function(){return Array.isArray(this.focusStyle)?this.isRange?this.focusStyle:this.focusStyle[1]:"function"==typeof this.focusStyle?this.focusStyle(this.val,this.currentIndex):this.isRange?[this.focusStyle,this.focusStyle]:this.focusStyle},disabledDotStyles:function(){var t=this.disabledDotStyle;if(Array.isArray(t))return t;if("function"==typeof t){var e=t(this.val,this.currentIndex);return Array.isArray(e)?e:[e,e]}return t?[t,t]:[{backgroundColor:"#ccc"},{backgroundColor:"#ccc"}]},tooltipStyles:function(){return Array.isArray(this.tooltipStyle)?this.isRange?this.tooltipStyle:this.tooltipStyle[1]:"function"==typeof this.tooltipStyle?this.tooltipStyle(this.val,this.currentIndex):this.isRange?[this.tooltipStyle,this.tooltipStyle]:this.tooltipStyle},elemStyles:function(){return"vertical"===this.direction?{width:this.width+"px",height:"100%"}:{height:this.height+"px"}},dotStyles:function(){return"vertical"===this.direction?{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",left:-(this.dotWidthVal-this.width)/2+"px"}:{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",top:-(this.dotHeightVal-this.height)/2+"px"}},piecewiseDotStyle:function(){return"vertical"===this.direction?{width:this.width+"px",height:this.width+"px"}:{width:this.height+"px",height:this.height+"px"}},piecewiseDotWrap:function(){if(!this.piecewise&&!this.piecewiseLabel)return!1;for(var t=[],e=0;e<=this.total;e++){var i="vertical"===this.direction?{bottom:this.gap*e-this.width/2+"px",left:0}:{left:this.gap*e-this.height/2+"px",top:0},s=this.reverse?this.total-e:e,r=this.data?this.data[s]:this.spacing*s+this.min;t.push({style:i,label:this.formatter?this.formatting(r):r,inRange:s>=this.indexRange[0]&&s<=this.indexRange[1]})}return t}},watch:{value:function(t){this.flag||this.setValue(t,!0)},max:function(t){if(t<this.min)return this.printError("The maximum value can not be less than the minimum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},min:function(t){if(t>this.max)return this.printError("The minimum value can not be greater than the maximum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},show:function(t){var e=this;t&&!this.size&&this.$nextTick(function(){e.refresh()})},fixed:function(){this.computedFixedValue()}},methods:{bindEvents:function(){document.addEventListener("touchmove",this.moving,{passive:!1}),document.addEventListener("touchend",this.moveEnd,{passive:!1}),document.addEventListener("mousedown",this.blurSlider),document.addEventListener("mousemove",this.moving),document.addEventListener("mouseup",this.moveEnd),document.addEventListener("mouseleave",this.moveEnd),document.addEventListener("keydown",this.handleKeydown),document.addEventListener("keyup",this.handleKeyup),window.addEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.addEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.addEventListener("transitionend",this.handleOverlapTooltip))},unbindEvents:function(){document.removeEventListener("touchmove",this.moving),document.removeEventListener("touchend",this.moveEnd),document.removeEventListener("mousedown",this.blurSlider),document.removeEventListener("mousemove",this.moving),document.removeEventListener("mouseup",this.moveEnd),document.removeEventListener("mouseleave",this.moveEnd),document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("keyup",this.handleKeyup),window.removeEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.removeEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.removeEventListener("transitionend",this.handleOverlapTooltip))},handleKeydown:function(t){if(!this.useKeyboard||!this.focusFlag)return!1;switch(t.keyCode){case 37:case 40:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[0]);break;case 38:case 39:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[1])}},handleKeyup:function(){this.keydownFlag&&(this.keydownFlag=!1,this.flag=!1)},changeFocusSlider:function(t){var e=this;if(this.isRange){var i=this.currentIndex.map(function(i,s){if(s===e.focusSlider||e.fixed){var r=t(i),o=e.fixed?e.valueLimit[s]:[0,e.total];if(r<=o[1]&&r>=o[0])return r}return i});i[0]>i[1]&&(this.focusSlider=0===this.focusSlider?1:0,i=i.reverse()),this.setIndex(i)}else this.setIndex(t(this.currentIndex))},blurSlider:function(t){var e=this.isRange?this.$refs["dot"+this.focusSlider]:this.$refs.dot;if(!e||e===t.target)return!1;this.focusFlag=!1},formatting:function(t){return"string"==typeof this.formatter?this.formatter.replace(/\{value\}/,t):this.formatter(t)},mergeFormatting:function(t,e){return"string"==typeof this.mergeFormatter?this.mergeFormatter.replace(/\{(value1|value2)\}/g,function(i,s){return"value1"===s?t:e}):this.mergeFormatter(t,e)},getPos:function(t){return this.realTime&&this.getStaticData(),"vertical"===this.direction?this.reverse?t.pageY-this.offset:this.size-(t.pageY-this.offset):this.reverse?this.size-(t.clientX-this.offset):t.clientX-this.offset},processClick:function(t){this.fixed&&t.stopPropagation()},wrapClick:function(t){var e=this;if(this.isDisabled||!this.clickable||this.processFlag)return!1;var i=this.getPos(t);if(this.isRange)if(this.disabledArray.every(function(t){return!1===t}))this.currentSlider=i>(this.position[1]-this.position[0])/2+this.position[0]?1:0;else if(this.disabledArray[0]){if(i<this.position[0])return!1;this.currentSlider=1}else if(this.disabledArray[1]){if(i>this.position[1])return!1;this.currentSlider=0}if(this.disabledArray[this.currentSlider])return!1;if(this.setValueOnPos(i),this.isRange&&this.tooltipMerge){var s=setInterval(function(){return e.handleOverlapTooltip()},16.7);setTimeout(function(){return window.clearInterval(s)},1e3*this.speed)}},moveStart:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments[2];if(this.disabledArray[e])return!1;if(this.stopPropagation&&t.stopPropagation(),this.isRange&&(this.currentSlider=e,i)){if(!this.processDragable)return!1;this.processFlag=!0,this.processSign={pos:this.position,start:this.getPos(t.targetTouches&&t.targetTouches[0]?t.targetTouches[0]:t)}}!i&&this.useKeyboard&&(this.focusFlag=!0,this.focusSlider=e),this.flag=!0,this.$emit("drag-start",this)},moving:function(t){if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;t.preventDefault(),t.targetTouches&&t.targetTouches[0]&&(t=t.targetTouches[0]),this.processFlag?(this.currentSlider=0,this.setValueOnPos(this.processSign.pos[0]+this.getPos(t)-this.processSign.start,!0),this.currentSlider=1,this.setValueOnPos(this.processSign.pos[1]+this.getPos(t)-this.processSign.start,!0)):this.setValueOnPos(this.getPos(t),!0),this.isRange&&this.tooltipMerge&&this.handleOverlapTooltip()},moveEnd:function(t){var e=this;if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;this.$emit("drag-end",this),this.lazy&&this.isDiff(this.val,this.value)&&this.syncValue(),this.flag=!1,window.setTimeout(function(){e.processFlag=!1},0),this.setPosition()},setValueOnPos:function(t,e){var i=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit;if(t>=i[0]&&t<=i[1]){this.setTransform(t);var r=this.getValueByIndex(Math.round(t/this.gap));this.setCurrentValue(r,e),this.isRange&&this.fixed&&(this.setTransform(t+this.fixedValue*this.gap*(0===this.currentSlider?1:-1),!0),this.setCurrentValue((r*this.multiple+this.fixedValue*this.spacing*this.multiple*(0===this.currentSlider?1:-1))/this.multiple,e,!0))}else t<i[0]?(this.setTransform(i[0]),this.setCurrentValue(s[0]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][0],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][0],e,!0)):this.fixed||this.disabledArray[0]||1!==this.currentSlider||(this.focusSlider=0,this.currentSlider=0)):(this.setTransform(i[1]),this.setCurrentValue(s[1]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][1],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][1],e,!0)):this.fixed||this.disabledArray[1]||0!==this.currentSlider||(this.focusSlider=1,this.currentSlider=1))},isDiff:function(t,e){return Object.prototype.toString.call(t)!==Object.prototype.toString.call(e)||(Array.isArray(t)&&t.length===e.length?t.some(function(t,i){return t!==e[i]}):t!==e)},setCurrentValue:function(t,e,i){var s=i?this.idleSlider:this.currentSlider;if(t<this.minimum||t>this.maximum)return!1;this.isRange?this.isDiff(this.currentValue[s],t)&&(this.currentValue.splice(s,1,t),this.lazy&&this.flag||this.syncValue()):this.isDiff(this.currentValue,t)&&(this.currentValue=t,this.lazy&&this.flag||this.syncValue()),e||this.setPosition()},getValueByIndex:function(t){return(this.spacing*this.multiple*t+this.minimum*this.multiple)/this.multiple},getIndexByValue:function(t){return Math.round((t-this.minimum)*this.multiple)/(this.spacing*this.multiple)},setIndex:function(t){if(Array.isArray(t)&&this.isRange){var e=void 0;e=this.data?[this.data[t[0]],this.data[t[1]]]:[this.getValueByIndex(t[0]),this.getValueByIndex(t[1])],this.setValue(e)}else t=this.getValueByIndex(t),this.isRange&&(this.currentSlider=t>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(t)},setValue:function(t,e,i){var s=this;if(this.isDiff(this.val,t)){var r=this.limitValue(t);this.val=this.isRange?r.concat():r,this.computedFixedValue(),this.syncValue(e)}this.$nextTick(function(){return s.setPosition(i)})},computedFixedValue:function(){if(!this.fixed)return this.fixedValue=0,!1;this.fixedValue=this.currentIndex[1]-this.currentIndex[0]},setPosition:function(t){this.flag||this.setTransitionTime(void 0===t?this.speed:t),this.isRange?(this.setTransform(this.position[0],1===this.currentSlider),this.setTransform(this.position[1],0===this.currentSlider)):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(t,e){var i=e?this.idleSlider:this.currentSlider,r=s(("vertical"===this.direction?this.dotHeightVal/2-t:t-this.dotWidthVal/2)*(this.reverse?-1:1)),o="vertical"===this.direction?"translateY("+r+"px)":"translateX("+r+"px)",n=this.fixed?this.fixedValue*this.gap+"px":(0===i?this.position[1]-t:t-this.position[0])+"px",l=this.fixed?(0===i?t:t-this.fixedValue*this.gap)+"px":(0===i?t:this.position[0])+"px";this.isRange?(this.slider[i].style.transform=o,this.slider[i].style.WebkitTransform=o,this.slider[i].style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=n,this.$refs.process.style[this.reverse?"top":"bottom"]=l):(this.$refs.process.style.width=n,this.$refs.process.style[this.reverse?"right":"left"]=l)):(this.slider.style.transform=o,this.slider.style.WebkitTransform=o,this.slider.style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=t+"px",this.$refs.process.style[this.reverse?"top":"bottom"]=0):(this.$refs.process.style.width=t+"px",this.$refs.process.style[this.reverse?"right":"left"]=0))},setTransitionTime:function(t){if(t||this.$refs.process.offsetWidth,this.isRange){for(var e=0;e<this.slider.length;e++)this.slider[e].style.transitionDuration=t+"s",this.slider[e].style.WebkitTransitionDuration=t+"s";this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"}else this.slider.style.transitionDuration=t+"s",this.slider.style.WebkitTransitionDuration=t+"s",this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"},limitValue:function(t){var e=this;if(this.data)return t;var i=function(i){return i<e.min?(e.printError("The value of the slider is "+t+", the minimum value is "+e.min+", the value of this slider can not be less than the minimum value"),e.min):i>e.max?(e.printError("The value of the slider is "+t+", the maximum value is "+e.max+", the value of this slider can not be greater than the maximum value"),e.max):i};return this.isRange?t.map(function(t){return i(t)}):i(t)},syncValue:function(t){var e=this.isRange?this.val.concat():this.val;this.$emit("input",e),this.keydownFlag&&this.$emit("on-keypress",e),t||this.$emit("callback",e)},getValue:function(){return this.val},getIndex:function(){return this.currentIndex},getStaticData:function(){this.$refs.elem&&(this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.offset="vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left)},refresh:function(){this.$refs.elem&&(this.getStaticData(),this.computedFixedValue(),this.setPosition())},printError:function(t){this.debug&&console.error("[VueSlider error]: "+t)},handleOverlapTooltip:function(){var t=this.tooltipDirection[0]===this.tooltipDirection[1];if(this.isRange&&t){var e=this.reverse?this.$refs.tooltip1:this.$refs.tooltip0,i=this.reverse?this.$refs.tooltip0:this.$refs.tooltip1,s=e.getBoundingClientRect().right,r=i.getBoundingClientRect().left,o=e.getBoundingClientRect().y,n=i.getBoundingClientRect().y+i.getBoundingClientRect().height,l="horizontal"===this.direction&&s>r,a="vertical"===this.direction&&n>o;l||a?this.handleDisplayMergedTooltip(!0):this.handleDisplayMergedTooltip(!1)}},handleDisplayMergedTooltip:function(t){var e=this.$refs.tooltip0,i=this.$refs.tooltip1,s=this.$refs.process.getElementsByClassName("vue-merged-tooltip")[0];t?(e.style.visibility="hidden",i.style.visibility="hidden",s.style.visibility="visible"):(e.style.visibility="visible",i.style.visibility="visible",s.style.visibility="hidden")}},mounted:function(){var t=this;if(this.isComponentExists=!0,"undefined"==typeof window||"undefined"==typeof document)return this.printError("window or document is undefined, can not be initialization.");this.$nextTick(function(){t.isComponentExists&&(t.getStaticData(),t.setValue(t.limitValue(t.value),!0,t.startAnimation?t.speed:0),t.bindEvents())}),this.isMounted=!0},beforeDestroy:function(){this.isComponentExists=!1,this.unbindEvents()}}},function(t,e,i){"use strict";var s=i(0);t.exports=s},function(t,e,i){e=t.exports=i(4)(),e.push([t.i,'.vue-slider-component{position:relative;box-sizing:border-box;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}.vue-slider-component.vue-slider-disabled{opacity:.5;cursor:not-allowed}.vue-slider-component.vue-slider-has-label{margin-bottom:15px}.vue-slider-component.vue-slider-disabled .vue-slider-dot{cursor:not-allowed}.vue-slider-component .vue-slider{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-slider-component .vue-slider:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2}.vue-slider-component .vue-slider-process{position:absolute;border-radius:15px;background-color:#3498db;transition:all 0s;z-index:1}.vue-slider-component .vue-slider-process.vue-slider-process-dragable{cursor:pointer;z-index:3}.vue-slider-component.vue-slider-horizontal .vue-slider-process{width:0;height:100%;top:0;left:0;will-change:width}.vue-slider-component.vue-slider-vertical .vue-slider-process{width:100%;height:0;bottom:0;left:0;will-change:height}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-process{width:0;height:100%;top:0;right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-process{width:100%;height:0;top:0;left:0}.vue-slider-component .vue-slider-dot{position:absolute;border-radius:50%;background-color:#fff;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);transition:all 0s;will-change:transform;cursor:pointer;z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-focus{box-shadow:0 0 2px 1px #3498db}.vue-slider-component .vue-slider-dot.vue-slider-dot-dragging{z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-disabled{z-index:4}.vue-slider-component.vue-slider-horizontal .vue-slider-dot{left:0}.vue-slider-component.vue-slider-vertical .vue-slider-dot{bottom:0}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-dot{right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-dot{top:0}.vue-slider-component .vue-slider-tooltip-wrap{display:none;position:absolute;z-index:9}.vue-slider-component .vue-slider-tooltip{display:block;font-size:14px;white-space:nowrap;padding:2px 5px;min-width:20px;text-align:center;color:#fff;border-radius:5px;border:1px solid #3498db;background-color:#3498db}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top{top:-9px;left:50%;transform:translate(-50%,-100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom{bottom:-9px;left:50%;transform:translate(-50%,100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left{top:50%;left:-9px;transform:translate(-100%,-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right{top:50%;right:-9px;transform:translate(100%,-50%)}.vue-slider-component .vue-slider-tooltip-top .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top .vue-slider-tooltip:before{content:"";position:absolute;bottom:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-top-color:inherit;transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-merged-tooltip{display:block;visibility:hidden}.vue-slider-component .vue-slider-tooltip-bottom .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom .vue-slider-tooltip:before{content:"";position:absolute;top:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-bottom-color:inherit;transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-left .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left .vue-slider-tooltip:before{content:"";position:absolute;top:50%;right:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-left-color:inherit;transform:translateY(-50%)}.vue-slider-component .vue-slider-tooltip-right .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right .vue-slider-tooltip:before{content:"";position:absolute;top:50%;left:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-right-color:inherit;transform:translateY(-50%)}.vue-slider-component .vue-slider-dot.vue-slider-hover:hover .vue-slider-tooltip-wrap{display:block}.vue-slider-component .vue-slider-dot.vue-slider-always .vue-slider-tooltip-wrap{display:block!important}.vue-slider-component .vue-slider-piecewise{position:absolute;width:100%;padding:0;margin:0;left:0;top:0;height:100%;list-style:none}.vue-slider-component .vue-slider-piecewise-item{position:absolute;width:8px;height:8px}.vue-slider-component .vue-slider-piecewise-dot{position:absolute;left:50%;top:50%;width:100%;height:100%;display:inline-block;background-color:rgba(0,0,0,.16);border-radius:50%;transform:translate(-50%,-50%);z-index:2;transition:all .3s}.vue-slider-component .vue-slider-piecewise-item:first-child .vue-slider-piecewise-dot,.vue-slider-component .vue-slider-piecewise-item:last-child .vue-slider-piecewise-dot{visibility:hidden}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-horizontal .vue-slider-piecewise-label{position:absolute;display:inline-block;top:100%;left:50%;white-space:nowrap;font-size:12px;color:#333;transform:translate(-50%,8px);visibility:visible}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-vertical .vue-slider-piecewise-label{position:absolute;display:inline-block;top:50%;left:100%;white-space:nowrap;font-size:12px;color:#333;transform:translate(8px,-50%);visibility:visible}.vue-slider-component .vue-slider-sr-only{clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute!important}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var s={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(s[o]=!0)}for(r=0;r<e.length;r++){var n=e[r];"number"==typeof n[0]&&s[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),t.push(n))}},t}},function(t,e){t.exports=function(t,e,i,s){var r,o=t=t||{},n=typeof t.default;"object"!==n&&"function"!==n||(r=t,o=t.default);var l="function"==typeof o?o.options:o;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns),i&&(l._scopeId=i),s){var a=Object.create(l.computed||null);Object.keys(s).forEach(function(t){var e=s[t];a[t]=function(){return e}}),l.computed=a}return{esModule:r,exports:o,options:l}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],ref:"wrap",class:["vue-slider-component",t.flowDirection,t.disabledClass,t.stateClass,{"vue-slider-has-label":t.piecewiseLabel}],style:[t.wrapStyles,t.boolDisabled?t.disabledStyle:null],on:{click:t.wrapClick}},[i("div",{ref:"elem",staticClass:"vue-slider",style:[t.elemStyles,t.bgStyle],attrs:{"aria-hidden":"true"}},[t.isRange?[i("div",{key:"dot0",ref:"dot0",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[0]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[0]?t.disabledDotStyles[0]:null,t.sliderStyles[0],t.focusFlag&&0===t.focusSlider?t.focusStyles[0]:null],on:{mousedown:function(e){t.moveStart(e,0)},touchstart:function(e){t.moveStart(e,0)}}},[i("div",{ref:"tooltip0",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[0]},[t._v(t._s(t.formatter?t.formatting(t.val[0]):t.val[0]))])],{value:t.val[0],index:0,disabled:!t.boolDisabled&&t.disabledArray[0]})],2)]),t._v(" "),i("div",{key:"dot1",ref:"dot1",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&1===t.focusSlider,"vue-slider-dot-dragging":t.flag&&1===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[1]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[1]?t.disabledDotStyles[1]:null,t.sliderStyles[1],t.focusFlag&&1===t.focusSlider?t.focusStyles[1]:null],on:{mousedown:function(e){t.moveStart(e,1)},touchstart:function(e){t.moveStart(e,1)}}},[i("div",{ref:"tooltip1",class:["vue-slider-tooltip-"+t.tooltipDirection[1],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[1]},[t._v(t._s(t.formatter?t.formatting(t.val[1]):t.val[1]))])],{value:t.val[1],index:1,disabled:!t.boolDisabled&&t.disabledArray[1]})],2)])]:[i("div",{key:"dot",ref:"dot",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider}],style:[t.dotStyles,t.sliderStyles,t.focusFlag&&0===t.focusSlider?t.focusStyles:null],on:{mousedown:t.moveStart,touchstart:t.moveStart}},[i("div",{class:["vue-slider-tooltip-"+t.tooltipDirection,"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v(t._s(t.formatter?t.formatting(t.val):t.val))])],{value:t.val})],2)])],t._v(" "),i("ul",{staticClass:"vue-slider-piecewise"},t._l(t.piecewiseDotWrap,function(e,s){return i("li",{key:s,staticClass:"vue-slider-piecewise-item",style:[t.piecewiseDotStyle,e.style]},[t._t("piecewise",[t.piecewise?i("span",{staticClass:"vue-slider-piecewise-dot",style:[t.piecewiseStyle,e.inRange?t.piecewiseActiveStyle:null]}):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange}),t._v(" "),t._t("label",[t.piecewiseLabel?i("span",{staticClass:"vue-slider-piecewise-label",style:[t.labelStyle,e.inRange?t.labelActiveStyle:null]},[t._v("\n            "+t._s(e.label)+"\n          ")]):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange})],2)})),t._v(" "),i("div",{ref:"process",class:["vue-slider-process",{"vue-slider-process-dragable":t.isRange&&t.processDragable}],style:t.processStyle,on:{click:t.processClick,mousedown:function(e){t.moveStart(e,0,!0)},touchstart:function(e){t.moveStart(e,0,!0)}}},[i("div",{ref:"mergedTooltip",staticClass:"vue-merged-tooltip",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"],style:t.tooltipMergedPosition},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v("\n            "+t._s(t.mergeFormatter?t.mergeFormatting(t.val[0],t.val[1]):t.formatter?t.val[0]===t.val[1]?t.formatting(t.val[0]):t.formatting(t.val[0])+" - "+t.formatting(t.val[1]):t.val[0]===t.val[1]?t.val[0]:t.val[0]+" - "+t.val[1])+"\n          ")])])],2)]),t._v(" "),t.isRange||t.data?t._e():i("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],staticClass:"vue-slider-sr-only",attrs:{type:"range",min:t.min,max:t.max},domProps:{value:t.val},on:{__r:function(e){t.val=e.target.value}}})],2)])},staticRenderFns:[]}},function(t,e,i){var s=i(3);"string"==typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);i(8)("743d98f5",s,!0)},function(t,e,i){function s(t){for(var e=0;e<t.length;e++){var i=t[e],s=d[i.id];if(s){s.refs++;for(var r=0;r<s.parts.length;r++)s.parts[r](i.parts[r]);for(;r<i.parts.length;r++)s.parts.push(o(i.parts[r]));s.parts.length>i.parts.length&&(s.parts.length=i.parts.length)}else{for(var n=[],r=0;r<i.parts.length;r++)n.push(o(i.parts[r]));d[i.id]={id:i.id,refs:1,parts:n}}}}function r(){var t=document.createElement("style");return t.type="text/css",h.appendChild(t),t}function o(t){var e,i,s=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(s){if(f)return v;s.parentNode.removeChild(s)}if(m){var o=p++;s=c||(c=r()),e=n.bind(null,s,o,!1),i=n.bind(null,s,o,!0)}else s=r(),e=l.bind(null,s),i=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else i()}}function n(t,e,i,s){var r=i?"":s.css;if(t.styleSheet)t.styleSheet.cssText=g(e,r);else{var o=document.createTextNode(r),n=t.childNodes;n[e]&&t.removeChild(n[e]),n.length?t.insertBefore(o,n[e]):t.appendChild(o)}}function l(t,e){var i=e.css,s=e.media,r=e.sourceMap;if(s&&t.setAttribute("media",s),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(9),d={},h=a&&(document.head||document.getElementsByTagName("head")[0]),c=null,p=0,f=!1,v=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,i){f=i;var r=u(t,e);return s(r),function(e){for(var i=[],o=0;o<r.length;o++){var n=r[o],l=d[n.id];l.refs--,i.push(l)}e?(r=u(t,e),s(r)):r=[];for(var o=0;o<i.length;o++){var l=i[o];if(0===l.refs){for(var a=0;a<l.parts.length;a++)l.parts[a]();delete d[l.id]}}}};var g=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var i=[],s={},r=0;r<e.length;r++){var o=e[r],n=o[0],l=o[1],a=o[2],u=o[3],d={id:t+":"+r,css:l,media:a,sourceMap:u};s[n]?s[n].parts.push(d):i.push(s[n]={id:n,parts:[d]})}return i}}])});
->>>>>>> fec17d201aa48748c6963097fdab7ebcde507241
 
 /***/ }),
 /* 51 */
diff --git a/public/themes/default/assets/mix-manifest.json b/public/themes/default/assets/mix-manifest.json
index b7e923adb..2141a2aae 100644
--- a/public/themes/default/assets/mix-manifest.json
+++ b/public/themes/default/assets/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/shop.js": "/js/shop.js",
     "/css/shop.css": "/css/shop.css"
-}
+}
\ No newline at end of file

From 2930e1cbbd01f5b0c1b09b8570d8c5757850fa2b Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Wed, 26 Sep 2018 15:53:06 +0530
Subject: [PATCH 04/11] CSS fixed

---
 .../Shop/src/Resources/assets/sass/app.scss   | 23 -------------------
 public/themes/default/assets/css/shop.css     | 15 ------------
 2 files changed, 38 deletions(-)

diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 8cc501715..93e720a25 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -1997,25 +1997,6 @@ section.cart {
     }
 }
 
-@media all and (max-width: 480px){
-
-    .attached-products-wrapper {
-
-        .title {
-
-            .border-bottom {
-                border-bottom: 1px solid rgba(162, 162, 162, 0.2);
-                display: inline-block;
-                width: 100%;
-                position: initial;
-                top: 40px;
-                left: 0%;
-                margin-left: 0px;
-            }
-        }
-    }
-}
-
 @media all and (min-width: 481px) and (max-width: 920px) {
 
     .attached-products-wrapper {
@@ -2023,11 +2004,8 @@ section.cart {
         .title {
 
             .border-bottom {
-                border-bottom: 1px solid rgba(162, 162, 162, 0.2);
-                display: inline-block;
                 width: 100%;
                 position: initial;
-                top: 40px;
                 left: 0%;
                 margin-left: 0px;
             }
@@ -2037,7 +2015,6 @@ section.cart {
 
 
 // order page css start here
-
 .order {
     margin-left: 5.5%;
     margin-top: 1%;
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index aa3f19af1..eeea62207 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -1967,25 +1967,10 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   margin-right: auto;
 }
 
-@media all and (max-width: 480px) {
-  .attached-products-wrapper .title .border-bottom {
-    border-bottom: 1px solid rgba(162, 162, 162, 0.2);
-    display: inline-block;
-    width: 100%;
-    position: initial;
-    top: 40px;
-    left: 0%;
-    margin-left: 0px;
-  }
-}
-
 @media all and (min-width: 481px) and (max-width: 920px) {
   .attached-products-wrapper .title .border-bottom {
-    border-bottom: 1px solid rgba(162, 162, 162, 0.2);
-    display: inline-block;
     width: 100%;
     position: initial;
-    top: 40px;
     left: 0%;
     margin-left: 0px;
   }

From f9bcfac638672fe8c34d41da90731753c46d2620 Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Wed, 26 Sep 2018 15:54:33 +0530
Subject: [PATCH 05/11] CSS fixed

---
 .../Shop/src/Resources/assets/sass/app.scss   | 501 +++++++++++++++++-
 public/themes/default/assets/css/shop.css     | 417 ++++++++++++++-
 2 files changed, 916 insertions(+), 2 deletions(-)

diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 93e720a25..b18ddcd09 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -19,7 +19,6 @@ body {
     font-family: "Montserrat", sans-serif;
 }
 
-// header page responsive starts here
 .header {
     margin-top: 16px;
     margin-bottom: 21px;
@@ -298,6 +297,319 @@ body {
         }
     }
 }
+
+
+// header page responsive css start here
+
+@media all and (max-width: 480px) {
+
+    .header {
+        // border: 1px solid black;
+        margin-top: 16px;
+        margin-bottom: 21px;
+
+        .header-top {
+            margin-bottom: 16px;
+            display: flex;
+            // max-width: 92%;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            // border: 1px solid indigo;
+            align-items: center;
+            justify-content: space-between;
+
+            div.left-content {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+
+                ul.logo-container {
+                    margin-right: 12px;
+
+                    li {
+                        display: flex;
+                    }
+                }
+
+                ul.search-container {
+                    li.search-group {
+                        display: none;
+                    }
+                }
+            }
+
+            div.right-content {
+                display: none;
+            }
+
+            .right-responsive {
+                display: inherit;
+            }
+        }
+
+        .search-suggestion {
+            display: none;
+
+            .search-content {
+                border-top: 1px solid #e8e8e8;
+                border-bottom: 1px solid #e8e8e8;
+                height: 48px;
+
+                .icon.search-icon {
+                    margin-left: 15px;
+                    margin-top: 12px;
+                }
+
+                span {
+                    font-size: 16px;
+                    color: #242424;
+                    margin-bottom: -7px;
+                    margin-left: 5px;
+                }
+
+                .right {
+                    float: right;
+                    margin-right: 15px;
+                }
+            }
+
+            .suggestion {
+                margin-top: 14px;
+                height: 32px;
+                margin-bottom: 14px;
+                border-bottom: 1px solid #e8e8e8;
+
+                span {
+                    font-size: 16px;
+                    color: #242424;
+                    margin-left: 48px;
+                }
+            }
+        }
+
+        .header-bottom {
+            height: 200px;
+            margin-left: auto;
+            margin-right: auto;
+            border-top: none;
+            border-bottom: none;
+            display: none;
+
+            ul.nav {
+                width: 100%;
+                height: 100px;
+            }
+
+            .nav > li {
+                float: none;
+                border-bottom: 1px solid #e8e8e8;
+
+                a {
+                    margin-left: 10px;
+                }
+
+                .dropdown-right-icon{
+                   float: right;
+                   margin-top: 5px;
+                   margin-right: 5px;
+                }
+            }
+
+            .nav > li:first-child {
+                border-top: 1px solid #e8e8e8;
+            }
+
+            .nav > li:last-child {
+                float:none;
+
+                span {
+                    font-size: 16px;
+                    color: #FF6472;
+                    letter-spacing: -0.38px;
+                }
+
+                img {
+                    margin-left: 20px;
+                }
+            }
+
+            /* submenu positioning*/
+
+            .nav ul {
+                position: absolute;
+                white-space: nowrap;
+                border: 1px solid #B1B1B1;
+                background-color:white;
+                z-index: 1;
+                left: -99999em;
+            }
+
+            .nav > li:hover > ul {
+                left: auto;
+                min-width: 100%;
+            }
+
+            .nav > li li:hover > ul {
+                left: 100%;
+                margin-left: 1px;
+                top: -1px;
+            }
+
+            .nav > li:hover > a:first-child:nth-last-child(2):before {
+                margin-top:-5px
+            }
+
+            .nav li li > a:first-child:nth-last-child(2):before {
+                margin-top: -5px
+            }
+
+            .nav li li:hover > a:first-child:nth-last-child(2):before {
+                right: 10px;
+            }
+        }
+    }
+
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+
+    .header {
+        // border: 1px solid black;
+        margin-top: 16px;
+        margin-bottom: 21px;
+
+        .header-top {
+            margin-bottom: 16px;
+            display: flex;
+            // max-width: 92%;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            // border: 1px solid indigo;
+            align-items: center;
+            justify-content: space-between;
+
+            div.left-content {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+
+                ul.logo-container {
+                    margin-right: 12px;
+
+                    li {
+                        display: flex;
+                    }
+                }
+
+                ul.search-container {
+                    li.search-group {
+                        display: none;
+                    }
+                }
+            }
+
+            div.right-content {
+                display: none;
+            }
+
+            .right-responsive {
+                display: inherit;
+            }
+        }
+
+        .search-suggestion {
+            display: none;
+        }
+
+        .header-bottom {
+            height: 200px;
+            margin-left: auto;
+            margin-right: auto;
+            border-top: none;
+            border-bottom: none;
+            display: none;
+
+            ul.nav {
+                width: 100%;
+                height: 100px;
+            }
+
+            .nav > li {
+                float: none;
+                border-bottom: 1px solid #e8e8e8;
+
+                a {
+                    margin-left: 10px;
+                }
+
+                .dropdown-right-icon{
+                   float: right;
+                   margin-top: 5px;
+                   margin-right: 5px;
+                }
+            }
+
+            .nav > li:first-child {
+                border-top: 1px solid #e8e8e8;
+            }
+
+            .nav > li:last-child {
+                float:none;
+
+                span {
+                    font-size: 16px;
+                    color: #FF6472;
+                    letter-spacing: -0.38px;
+                }
+
+                img {
+                    margin-left: 20px;
+                }
+            }
+
+            /* submenu positioning*/
+
+            .nav ul {
+                position: absolute;
+                white-space: nowrap;
+                border: 1px solid #B1B1B1;
+                background-color:white;
+                z-index: 1;
+                left: -99999em;
+            }
+
+            .nav > li:hover > ul {
+                left: auto;
+                min-width: 100%;
+            }
+
+            .nav > li li:hover > ul {
+                left: 100%;
+                margin-left: 1px;
+                top: -1px;
+            }
+
+            .nav > li:hover > a:first-child:nth-last-child(2):before {
+                margin-top:-5px
+            }
+
+            .nav li li > a:first-child:nth-last-child(2):before {
+                margin-top: -5px
+            }
+
+            .nav li li:hover > a:first-child:nth-last-child(2):before {
+                right: 10px;
+            }
+        }
+    }
+
+}
+
+
 // header page responsive ends here
 
 section.slider-block {
@@ -455,6 +767,7 @@ section.slider-block {
     }
 }
 
+
 .main-container-wrapper {
     max-width: 80%;
     width: auto;
@@ -1997,6 +2310,25 @@ section.cart {
     }
 }
 
+@media all and (max-width: 480px){
+
+    .attached-products-wrapper {
+
+        .title {
+
+            .border-bottom {
+                border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+                display: inline-block;
+                width: 100%;
+                position: initial;
+                top: 40px;
+                left: 0%;
+                margin-left: 0px;
+            }
+        }
+    }
+}
+
 @media all and (min-width: 481px) and (max-width: 920px) {
 
     .attached-products-wrapper {
@@ -2004,8 +2336,11 @@ section.cart {
         .title {
 
             .border-bottom {
+                border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+                display: inline-block;
                 width: 100%;
                 position: initial;
+                top: 40px;
                 left: 0%;
                 margin-left: 0px;
             }
@@ -2015,6 +2350,7 @@ section.cart {
 
 
 // order page css start here
+
 .order {
     margin-left: 5.5%;
     margin-top: 1%;
@@ -3034,8 +3370,171 @@ section.cart {
         }
     }
 }
+
 // checkout ends here
 
+// responsive checkout start here
+
+@media all and (max-width: 480px) {
+    .checkout-process{
+        width: 100%;
+        margin-top: 3%;
+
+        .left-side {
+            width: 100%;
+            margin-right: 0%;
+            height: 60px;
+
+            .checkout-menu {
+                width: 100%;
+
+                ul.checkout-detail {
+                    height: 60px;
+                    width: 100%;
+                    padding: 5px;
+
+                    li {
+                        height: 48px;
+
+                        .wrapper {
+                            display: flex;
+
+                            span {
+                               display: none;
+                            }
+                        }
+                    }
+
+                    .line {
+                        margin-top: 23px;
+                        width: 100%;
+                        margin-left: 5px;
+                        margin-right: 5px;
+                        border: 1px solid #E7E7E7;
+                        height: 1px;
+                    }
+                }
+
+                .horizontal-rule {
+                   display: none;
+                }
+            }
+        }
+
+        .right-side {
+            display: none;
+        }
+    }
+
+    .order-info{
+        width: 100%;
+        margin-right: 0%;
+        margin-top: 10px;
+        height:50px;
+
+        .control-group {
+
+            .control{
+                width:100%;
+            }
+        }
+
+        .different-billing-addr {
+            margin-top: 5%;
+        }
+
+        .horizontal-rule {
+            margin-top: 10%;
+        }
+
+        .countinue-button {
+            margin-top: 8%;
+        }
+    }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+
+    .checkout-process{
+        width: 100%;
+        margin-top:3%;
+
+        .left-side {
+            width: 100%;
+            margin-right: 0%;
+            height: 60px;
+
+            .checkout-menu {
+                width: 100%;
+
+                ul.checkout-detail {
+                    height: 60px;
+                    width: 100%;
+                    padding: 5px;
+
+                    li {
+                        height: 48px;
+
+                        .wrapper {
+                            display:flex;
+
+                            span {
+                               display: none;
+                            }
+
+                        }
+                    }
+
+                    .line {
+                        margin-top: 23px;
+                        width: 100%;
+                        margin-left: 10px;
+                        margin-right: 10px;
+                        border: 1px solid #E7E7E7;
+                        height: 1px;
+                    }
+                }
+
+                .horizontal-rule {
+                   display: none;
+                }
+            }
+        }
+
+        .right-side {
+            display:none;
+        }
+    }
+
+    .order-info{
+        width: 100%;
+        margin-right: 0%;
+        margin-top: 10px;
+        height:50px;
+
+        .control-group {
+
+            .control{
+                width:100%;
+            }
+        }
+
+        .different-billing-addr {
+            margin-top: 3%;
+        }
+
+        .horizontal-rule {
+            margin-top: 10%;
+        }
+
+        .countinue-button {
+            margin-top: 5%;
+        }
+    }
+}
+// responsive checkout end here
+
+
 
 //shipment start here
 .ship-method {
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index eeea62207..660585c3c 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -406,6 +406,280 @@ body {
   right: 10px;
 }
 
+@media all and (max-width: 480px) {
+  .header {
+    margin-top: 16px;
+    margin-bottom: 21px;
+  }
+  .header .header-top {
+    margin-bottom: 16px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .header .header-top div.left-content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .header .header-top div.left-content ul.logo-container {
+    margin-right: 12px;
+  }
+  .header .header-top div.left-content ul.logo-container li {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .header .header-top div.left-content ul.search-container li.search-group {
+    display: none;
+  }
+  .header .header-top div.right-content {
+    display: none;
+  }
+  .header .header-top .right-responsive {
+    display: inherit;
+  }
+  .header .search-suggestion {
+    display: none;
+  }
+  .header .search-suggestion .search-content {
+    border-top: 1px solid #e8e8e8;
+    border-bottom: 1px solid #e8e8e8;
+    height: 48px;
+  }
+  .header .search-suggestion .search-content .icon.search-icon {
+    margin-left: 15px;
+    margin-top: 12px;
+  }
+  .header .search-suggestion .search-content span {
+    font-size: 16px;
+    color: #242424;
+    margin-bottom: -7px;
+    margin-left: 5px;
+  }
+  .header .search-suggestion .search-content .right {
+    float: right;
+    margin-right: 15px;
+  }
+  .header .search-suggestion .suggestion {
+    margin-top: 14px;
+    height: 32px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .header .search-suggestion .suggestion span {
+    font-size: 16px;
+    color: #242424;
+    margin-left: 48px;
+  }
+  .header .header-bottom {
+    height: 200px;
+    margin-left: auto;
+    margin-right: auto;
+    border-top: none;
+    border-bottom: none;
+    display: none;
+    /* submenu positioning*/
+  }
+  .header .header-bottom ul.nav {
+    width: 100%;
+    height: 100px;
+  }
+  .header .header-bottom .nav > li {
+    float: none;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li a {
+    margin-left: 10px;
+  }
+  .header .header-bottom .nav > li .dropdown-right-icon {
+    float: right;
+    margin-top: 5px;
+    margin-right: 5px;
+  }
+  .header .header-bottom .nav > li:first-child {
+    border-top: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li:last-child {
+    float: none;
+  }
+  .header .header-bottom .nav > li:last-child span {
+    font-size: 16px;
+    color: #FF6472;
+    letter-spacing: -0.38px;
+  }
+  .header .header-bottom .nav > li:last-child img {
+    margin-left: 20px;
+  }
+  .header .header-bottom .nav ul {
+    position: absolute;
+    white-space: nowrap;
+    border: 1px solid #B1B1B1;
+    background-color: white;
+    z-index: 1;
+    left: -99999em;
+  }
+  .header .header-bottom .nav > li:hover > ul {
+    left: auto;
+    min-width: 100%;
+  }
+  .header .header-bottom .nav > li li:hover > ul {
+    left: 100%;
+    margin-left: 1px;
+    top: -1px;
+  }
+  .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before {
+    right: 10px;
+  }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+  .header {
+    margin-top: 16px;
+    margin-bottom: 21px;
+  }
+  .header .header-top {
+    margin-bottom: 16px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .header .header-top div.left-content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .header .header-top div.left-content ul.logo-container {
+    margin-right: 12px;
+  }
+  .header .header-top div.left-content ul.logo-container li {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .header .header-top div.left-content ul.search-container li.search-group {
+    display: none;
+  }
+  .header .header-top div.right-content {
+    display: none;
+  }
+  .header .header-top .right-responsive {
+    display: inherit;
+  }
+  .header .search-suggestion {
+    display: none;
+  }
+  .header .header-bottom {
+    height: 200px;
+    margin-left: auto;
+    margin-right: auto;
+    border-top: none;
+    border-bottom: none;
+    display: none;
+    /* submenu positioning*/
+  }
+  .header .header-bottom ul.nav {
+    width: 100%;
+    height: 100px;
+  }
+  .header .header-bottom .nav > li {
+    float: none;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li a {
+    margin-left: 10px;
+  }
+  .header .header-bottom .nav > li .dropdown-right-icon {
+    float: right;
+    margin-top: 5px;
+    margin-right: 5px;
+  }
+  .header .header-bottom .nav > li:first-child {
+    border-top: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li:last-child {
+    float: none;
+  }
+  .header .header-bottom .nav > li:last-child span {
+    font-size: 16px;
+    color: #FF6472;
+    letter-spacing: -0.38px;
+  }
+  .header .header-bottom .nav > li:last-child img {
+    margin-left: 20px;
+  }
+  .header .header-bottom .nav ul {
+    position: absolute;
+    white-space: nowrap;
+    border: 1px solid #B1B1B1;
+    background-color: white;
+    z-index: 1;
+    left: -99999em;
+  }
+  .header .header-bottom .nav > li:hover > ul {
+    left: auto;
+    min-width: 100%;
+  }
+  .header .header-bottom .nav > li li:hover > ul {
+    left: 100%;
+    margin-left: 1px;
+    top: -1px;
+  }
+  .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before {
+    right: 10px;
+  }
+}
+
 section.slider-block {
   display: block;
   margin-left: auto;
@@ -1967,10 +2241,25 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   margin-right: auto;
 }
 
-@media all and (min-width: 481px) and (max-width: 920px) {
+@media all and (max-width: 480px) {
   .attached-products-wrapper .title .border-bottom {
+    border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+    display: inline-block;
     width: 100%;
     position: initial;
+    top: 40px;
+    left: 0%;
+    margin-left: 0px;
+  }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+  .attached-products-wrapper .title .border-bottom {
+    border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+    display: inline-block;
+    width: 100%;
+    position: initial;
+    top: 40px;
     left: 0%;
     margin-left: 0px;
   }
@@ -2893,6 +3182,132 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   color: #242424;
 }
 
+@media all and (max-width: 480px) {
+  .checkout-process {
+    width: 100%;
+    margin-top: 3%;
+  }
+  .checkout-process .left-side {
+    width: 100%;
+    margin-right: 0%;
+    height: 60px;
+  }
+  .checkout-process .left-side .checkout-menu {
+    width: 100%;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail {
+    height: 60px;
+    width: 100%;
+    padding: 5px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
+    height: 48px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
+    display: none;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
+    margin-top: 23px;
+    width: 100%;
+    margin-left: 5px;
+    margin-right: 5px;
+    border: 1px solid #E7E7E7;
+    height: 1px;
+  }
+  .checkout-process .left-side .checkout-menu .horizontal-rule {
+    display: none;
+  }
+  .checkout-process .right-side {
+    display: none;
+  }
+  .order-info {
+    width: 100%;
+    margin-right: 0%;
+    margin-top: 10px;
+    height: 50px;
+  }
+  .order-info .control-group .control {
+    width: 100%;
+  }
+  .order-info .different-billing-addr {
+    margin-top: 5%;
+  }
+  .order-info .horizontal-rule {
+    margin-top: 10%;
+  }
+  .order-info .countinue-button {
+    margin-top: 8%;
+  }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+  .checkout-process {
+    width: 100%;
+    margin-top: 3%;
+  }
+  .checkout-process .left-side {
+    width: 100%;
+    margin-right: 0%;
+    height: 60px;
+  }
+  .checkout-process .left-side .checkout-menu {
+    width: 100%;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail {
+    height: 60px;
+    width: 100%;
+    padding: 5px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
+    height: 48px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
+    display: none;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
+    margin-top: 23px;
+    width: 100%;
+    margin-left: 10px;
+    margin-right: 10px;
+    border: 1px solid #E7E7E7;
+    height: 1px;
+  }
+  .checkout-process .left-side .checkout-menu .horizontal-rule {
+    display: none;
+  }
+  .checkout-process .right-side {
+    display: none;
+  }
+  .order-info {
+    width: 100%;
+    margin-right: 0%;
+    margin-top: 10px;
+    height: 50px;
+  }
+  .order-info .control-group .control {
+    width: 100%;
+  }
+  .order-info .different-billing-addr {
+    margin-top: 3%;
+  }
+  .order-info .horizontal-rule {
+    margin-top: 10%;
+  }
+  .order-info .countinue-button {
+    margin-top: 5%;
+  }
+}
+
 .ship-method {
   width: 67%;
   margin-right: 6%;

From 69ada20a2b7f306015b6756c5e5d18e360e82d72 Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Thu, 27 Sep 2018 10:55:06 +0530
Subject: [PATCH 06/11] Unnecessary css removed

---
 .../Shop/src/Resources/assets/js/app.js       |    2 +-
 .../src/Resources/assets/sass/_variables.scss |   26 +-
 .../Shop/src/Resources/assets/sass/app.scss   | 1512 +++++------------
 .../Shop/src/Resources/assets/sass/icons.scss |   12 +
 .../Webkul/Shop/src/Resources/lang/en/app.php |    5 +-
 .../views/checkout/cart/index.blade.php       |   86 +-
 .../views/checkout/onepage/review.blade.php   |  231 +--
 .../views/checkout/total/summary.blade.php    |   25 +-
 .../checkout/common/common.blade.php          |    8 -
 .../checkout/common/nav-left.blade.php        |   53 -
 .../checkout/common/nav-right.blade.php       |    3 -
 .../customers/checkout/complete.blade.php     |  265 ---
 .../views/customers/checkout/guest.blade.php  |   73 -
 .../views/customers/checkout/index.blade.php  |   66 -
 .../checkout/payment-method.blade.php         |   57 -
 .../customers/checkout/ship-method.blade.php  |   52 -
 .../views/customers/checkout/signin.blade.php |   40 -
 .../Resources/views/layouts/master.blade.php  |    2 +
 public/themes/default/assets/css/shop.css     | 1180 +++----------
 public/themes/default/assets/js/shop.js       |    2 +-
 20 files changed, 815 insertions(+), 2885 deletions(-)
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/customers/checkout/common/common.blade.php
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-left.blade.php
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-right.blade.php
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/customers/checkout/complete.blade.php
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/customers/checkout/guest.blade.php
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/customers/checkout/index.blade.php
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/customers/checkout/payment-method.blade.php
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/customers/checkout/ship-method.blade.php
 delete mode 100644 packages/Webkul/Shop/src/Resources/views/customers/checkout/signin.blade.php

diff --git a/packages/Webkul/Shop/src/Resources/assets/js/app.js b/packages/Webkul/Shop/src/Resources/assets/js/app.js
index 87860f794..d4abea11f 100644
--- a/packages/Webkul/Shop/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Shop/src/Resources/assets/js/app.js
@@ -63,10 +63,10 @@ $(document).ready(function () {
                 const flashes = this.$refs.flashes;
 
                 flashMessages.forEach(function (flash) {
-                    console.log(flash);
                     flashes.addFlash(flash);
                 }, this);
             },
+
             responsiveHeader: function () { }
         }
     });
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss
index dde936d7c..67c473993 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss
@@ -1,32 +1,12 @@
 //shop variables
 $font-color: #242424;
+$border-color: #E8E8E8;
 $font-size-base: 16px;
-$font-name: "Montserrat", sans-serif;
-$background-color: #f2f2f2;
-$footer-back: #f2f2f2;
-$list-heading-color: rgba(165, 165, 165, 1);
-$list-color: #242424;
-$subscribe-btn-color: black;
-$logo-color: #0031f0;
 $border-color: #c7c7c7;
-$offer-color: #ff6472;
+$brand-color: #0031f0;
 //shop variables ends here
 
 //customer variables
-$sign-up-text-color: #5e5e5e;
-$login-text: #3a3a3a;
-$background-color: #ffffff;
-$color-black : black;
-$forgot-password-color: #0031f0;
 $profile-content-color: #5e5e5e;
 $horizontal-rule-color: #E8E8E8;
-//customer variables ends here
-
-//product
-$real-price:#A5A5A5;
-$product-font-color: #242424;
-$product-special-price-color:  #FF6472;
-$product-price-color:  #FF6472;
-$dark-blue-shade: #0031F0;
-$bar-color: #D8D8D8;
-$gray-shade: #5E5E5E;
\ No newline at end of file
+//customer variables ends here
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index b18ddcd09..07fbc6dc6 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -140,7 +140,7 @@ body {
                         padding-right: 5px;
 
                         .cart-count {
-                            color: #0031f0;
+                            color: $brand-color;
                             padding-right: 3px;
                         }
                     }
@@ -184,7 +184,6 @@ body {
         margin-right: auto;
         border-top: 1px solid lightgrey;
         border-bottom: 1px solid lightgrey;
-        font-size: 16px;
         display: block;
 
         ul.nav {
@@ -299,8 +298,8 @@ body {
 }
 
 
+//=======>Need to be removed
 // header page responsive css start here
-
 @media all and (max-width: 480px) {
 
     .header {
@@ -353,8 +352,8 @@ body {
             display: none;
 
             .search-content {
-                border-top: 1px solid #e8e8e8;
-                border-bottom: 1px solid #e8e8e8;
+                border-top: 1px solid $border-color;
+                border-bottom: 1px solid $border-color;
                 height: 48px;
 
                 .icon.search-icon {
@@ -363,8 +362,6 @@ body {
                 }
 
                 span {
-                    font-size: 16px;
-                    color: #242424;
                     margin-bottom: -7px;
                     margin-left: 5px;
                 }
@@ -379,11 +376,9 @@ body {
                 margin-top: 14px;
                 height: 32px;
                 margin-bottom: 14px;
-                border-bottom: 1px solid #e8e8e8;
+                border-bottom: 1px solid $border-color;
 
                 span {
-                    font-size: 16px;
-                    color: #242424;
                     margin-left: 48px;
                 }
             }
@@ -404,7 +399,7 @@ body {
 
             .nav > li {
                 float: none;
-                border-bottom: 1px solid #e8e8e8;
+                border-bottom: 1px solid $border-color;
 
                 a {
                     margin-left: 10px;
@@ -418,14 +413,13 @@ body {
             }
 
             .nav > li:first-child {
-                border-top: 1px solid #e8e8e8;
+                border-top: 1px solid $border-color;
             }
 
             .nav > li:last-child {
                 float:none;
 
                 span {
-                    font-size: 16px;
                     color: #FF6472;
                     letter-spacing: -0.38px;
                 }
@@ -540,7 +534,7 @@ body {
 
             .nav > li {
                 float: none;
-                border-bottom: 1px solid #e8e8e8;
+                border-bottom: 1px solid $border-color;
 
                 a {
                     margin-left: 10px;
@@ -554,14 +548,13 @@ body {
             }
 
             .nav > li:first-child {
-                border-top: 1px solid #e8e8e8;
+                border-top: 1px solid $border-color;
             }
 
             .nav > li:last-child {
                 float:none;
 
                 span {
-                    font-size: 16px;
                     color: #FF6472;
                     letter-spacing: -0.38px;
                 }
@@ -608,9 +601,9 @@ body {
     }
 
 }
-
-
 // header page responsive ends here
+//<=======Need to be removed
+
 
 section.slider-block {
     display: block;
@@ -651,6 +644,7 @@ section.slider-block {
                 width:100%;
             }
         }
+
         div.slider-control {
             display: block;
             position: absolute;
@@ -660,7 +654,7 @@ section.slider-block {
 
 
             .dark-left-icon {
-                background-color: $background-color;
+                background-color: #f2f2f2;
                 height: 48px;
                 width: 48px;
                 max-height: 100%;
@@ -668,7 +662,7 @@ section.slider-block {
             }
 
             .light-right-icon {
-                background-color: $color-black;
+                background-color: #000;
                 height: 48px;
                 width: 48px;
                 max-height: 100%;
@@ -685,27 +679,25 @@ section.slider-block {
     min-height: 1px;
 
     .filter-title {
-        border-bottom: 1px solid #E8E8E8;
-        font-size: 16px;
+        border-bottom: 1px solid $border-color;
         color: $font-color;
         padding: 10px 0;
     }
 
     .filter-attributes {
         .filter-attributes-item {
-            border-bottom: 1px solid #E8E8E8;
+            border-bottom: 1px solid $border-color;
             padding-bottom: 10px;
 
             .filter-attributes-title {
                 padding: 10px 40px 0 10px;
-                font-size: 16px;
                 color: #5E5E5E;
                 cursor: pointer;
                 position: relative;
 
                 .remove-filter-link {
                     font-weight: 400;
-                    color: #0031F0;
+                    color: $brand-color;
                     margin-right: 10px;
                 }
 
@@ -730,7 +722,6 @@ section.slider-block {
 
                     li.item {
                         padding: 8px 0;
-                        font-size: 16px;
                         color: #5E5E5E;
 
                         .checkbox {
@@ -767,7 +758,6 @@ section.slider-block {
     }
 }
 
-
 .main-container-wrapper {
     max-width: 80%;
     width: auto;
@@ -812,7 +802,6 @@ section.slider-block {
         }
 
         .product-name {
-            font-size: 16px;
             margin-bottom: 14px;
             width: 100%;
             color: $font-color;
@@ -823,7 +812,6 @@ section.slider-block {
         }
 
         .product-description {
-            font-size: 16px;
             margin-bottom: 14px;
             display: none;
         }
@@ -907,7 +895,6 @@ section.slider-block {
             float: right;
 
             label {
-                font-size: 16px;
                 margin-right: 5px;
             }
 
@@ -915,7 +902,6 @@ section.slider-block {
                 background: #FFFFFF;
                 border: 1px solid #C7C7C7;
                 border-radius: 3px;
-                font-size: 16px;
                 color: $font-color;
                 padding: 10px;
             }
@@ -1028,8 +1014,9 @@ section.slider-block {
     }
 }
 
-// responsive category css start here
 
+//=======>Need to be removed
+// responsive category css start here
 @media all and (max-width: 480px) {
 
     .main-container-wrapper {
@@ -1078,7 +1065,7 @@ section.slider-block {
         }
 
         .top-toolbar {
-            border-bottom: 1px solid #E8E8E8;
+            border-bottom: 1px solid $border-color;
             margin-bottom: 10px;
 
             .page-info {
@@ -1129,7 +1116,6 @@ section.slider-block {
                 background: #FFFFFF;
                 border: 1px solid #C7C7C7;
                 border-radius: 3px;
-                font-size: 16px;
                 color: $font-color;
                 padding: 10px;
             }
@@ -1189,7 +1175,7 @@ section.slider-block {
         }
 
         .top-toolbar {
-            border-bottom: 1px solid #E8E8E8;
+            border-bottom: 1px solid $border-color;
             margin-bottom: 10px;
 
             .page-info {
@@ -1240,7 +1226,6 @@ section.slider-block {
                 background: #FFFFFF;
                 border: 1px solid #C7C7C7;
                 border-radius: 3px;
-                font-size: 16px;
                 color: $font-color;
                 padding: 10px;
             }
@@ -1251,9 +1236,10 @@ section.slider-block {
         }
     }
 }
+//<=======Need to be removed
+
 
 .product-price {
-    font-size: 16px;
     margin-bottom: 14px;
     width: 100%;
     font-weight: 600;
@@ -1264,20 +1250,18 @@ section.slider-block {
     }
 
     .regular-price {
-        font-size: 16px;
         color: #A5A5A5;
         text-decoration: line-through;
         margin-right: 10px;
     }
 
     .special-price {
-        font-size: 16px;
         color: #FF6472;
     }
 }
 
 .footer {
-    background-color: $footer-back;
+    background-color: #f2f2f2;
     padding-left: 10%;
     padding-right: 10%;
 
@@ -1294,10 +1278,9 @@ section.slider-block {
 
             .list-container {
                 .list-heading {
-                    font-size: 16px;
                     letter-spacing: -0.26px;
                     text-transform: uppercase;
-                    color: $list-heading-color;
+                    color: rgba(165, 165, 165, 1);
                 }
 
                 .list-group {
@@ -1305,7 +1288,6 @@ section.slider-block {
 
                     li {
                         margin-bottom: 12px;
-                        color: $list-color;
                         list-style-type: none;
                         text-transform: uppercase;
 
@@ -1343,7 +1325,7 @@ section.slider-block {
                         }
 
                         .btn-primary {
-                            background-color: $subscribe-btn-color;
+                            background-color: #000;
                             margin-top: 8px;
                             border-radius: 0px;
                             text-align: center;
@@ -1356,7 +1338,6 @@ section.slider-block {
 }
 
 //customers page css goes here
-
 .content {
     padding-top: 15%;
     padding-bottom: 15%;
@@ -1367,7 +1348,7 @@ section.slider-block {
         margin-right: auto;
         text-align: center;
         font-size: 18px;
-        color: $sign-up-text-color;
+        color: #5e5e5e;
         letter-spacing: -0.29px;
         text-align: center;
     }
@@ -1376,7 +1357,7 @@ section.slider-block {
         margin-left: auto;
         margin-right: auto;
         display: flex;
-        background: $background-color;
+        background: #f2f2f2;
         border: 1px solid $border-color;
         flex-direction: column;
         max-width: 530px;
@@ -1388,7 +1369,7 @@ section.slider-block {
         .login-text {
             font-size: 24px;
             font-weight: bold;
-            color: $login-text;
+            color: #3a3a3a;
             letter-spacing: -0.23px;
             margin-top: 5%;
             margin-bottom: 3%;
@@ -1404,7 +1385,7 @@ section.slider-block {
 
         .forgot-password-link {
             font-size: 17px;
-            color: $forgot-password-color;
+            color: $brand-color;
             letter-spacing: -0.11px;
             margin-bottom: 5%;
         }
@@ -1437,16 +1418,14 @@ section.slider-block {
         flex-direction: column;
         align-content: center;
         justify-content: flex-start;
-        border: 1px solid #e8e8e8;
-        background: $background-color;
+        border: 1px solid $border-color;
+        background: #f2f2f2;
         width: 25%;
         height: 100%;
         text-transform: capitalize;
-        font-size: 16px;
         color: #5e5e5e;
 
         li {
-            font-size: 16px;
             width: 95%;
             height: 50px;
             margin-left: 5%;
@@ -1467,7 +1446,7 @@ section.slider-block {
         }
 
         li.active {
-            color: $forgot-password-color;
+            color: $brand-color;
         }
     }
 
@@ -1487,7 +1466,7 @@ section.slider-block {
             .profile-edit {
                 font-size: 17px;
                 margin-top: 1%;
-                color: #0031f0;
+                color: $brand-color;
                 letter-spacing: -0.11px;
                 float: right;
             }
@@ -1497,13 +1476,12 @@ section.slider-block {
                 width: 100%;
                 height: 1px;
                 vertical-align: middle;
-                background: #e8e8e8;
+                background: $border-color;
             }
         }
     }
 
     .profile-content {
-        font-size: 16px;
         color: $profile-content-color;
         margin-top: 1.4%;
 
@@ -1536,7 +1514,7 @@ section.slider-block {
 
         .edit-form {
             display: flex;
-            background: $background-color;
+            background: #f2f2f2;
             border: 1px solid $border-color;
             flex-direction: column;
             min-height: 345px;
@@ -1550,8 +1528,7 @@ section.slider-block {
 
 // product pages css starts here
 section.product-detail {
-    font-size: 16px;
-    color: $product-font-color;
+    color: $font-color;
 
     div.category-breadcrumbs {
         display: inline;
@@ -1713,7 +1690,7 @@ section.product-detail {
 
                 .product-heading {
                     font-size: 24px;
-                    color: $product-font-color;
+                    color: $font-color;
                     margin-bottom: 15px;
                 }
 
@@ -1748,7 +1725,6 @@ section.product-detail {
                 }
 
                 .accordian .accordian-header {
-                    font-size: 16px;
                     padding-left: 0;
                     font-weight: 600;
                 }
@@ -1762,104 +1738,15 @@ section.product-detail {
                     width: 100%;
                     border-bottom: solid 1px rgba(162, 162, 162, 0.2);
                 }
-
-                .full-description {
-                    font-size: 16px;
-                }
             }
-
-            // .rating-reviews {
-            //     margin-top: 0px;
-            //     width: 50%;
-            //     margin-left: 20px;
-
-            //     .title-inline {
-            //         display: inline-flex;
-            //         align-items: center;
-            //         justify-content: space-between;
-            //         margin-bottom: 20px;
-            //         width: 100%;
-
-            //         button {
-            //             float: right;
-            //             border-radius: 0px !important;
-            //         }
-            //     }
-
-            //     .overall {
-            //         display: flex;
-            //         flex-direction: row;
-            //         align-items: center;
-            //         justify-content: space-between;
-            //         height: 150px;
-
-            //         .left-side {
-            //             margin-bottom: 20px;
-
-            //             .number{
-            //                 font-size: 34px;
-            //             }
-            //         }
-
-            //         .right-side {
-            //             display: block;
-
-            //             .rater {
-            //                 display: inline-flex;
-            //                 align-items: center;
-
-            //                 .star {
-            //                     width: 50px;
-            //                     height: 20px;
-            //                     padding: 1px;
-            //                     margin-right: 8px;
-            //                 }
-
-            //                 .line-bar {
-            //                     height: 4px;
-            //                     width: 158px;
-            //                     margin-right: 12px;
-            //                     background: $bar-color;
-
-            //                     .line-value {
-            //                         background-color: $dark-blue-shade;
-            //                     }
-            //                 }
-            //             }
-            //         }
-            //     }
-
-            //     .reviews {
-            //         margin-top: 34px;
-            //         margin-bottom: 90px;
-
-            //         .review {
-            //             margin-bottom: 25px;
-
-            //             .title {
-            //                 margin-bottom: 5px;
-            //             }
-
-            //             .stars {
-            //                 margin-bottom: 15px;
-            //             }
-            //             .message {
-            //                 margin-bottom: 10px;
-            //             }
-            //         }
-            //         .view-all {
-            //             margin-top:15px;
-            //             color: $logo-color;
-            //             margin-bottom:15px;
-            //         }
-            //     }
-            // }
         }
     }
 }
+// product pages css ends here
 
-// products responsive css start here
 
+//=======>Need to be removed
+// products responsive css starts here
 @media all and (max-width: 480px) {
 
     section.product-detail {
@@ -1912,7 +1799,7 @@ section.product-detail {
                 .details {
                     width: 100%;
                     margin-top: 20px;
-                    border-bottom: 1px solid #e8e8e8e8;
+                    border-bottom: 1px solid $border-color;
 
                     .attributes {
                         border-bottom: none;
@@ -1976,7 +1863,7 @@ section.product-detail {
                 .details {
                     width: 100%;
                     margin-top: 20px;
-                    border-bottom: 1px solid #e8e8e8e8;
+                    border-bottom: 1px solid $border-color;
 
                     .attributes {
                         border-bottom: none;
@@ -1987,8 +1874,8 @@ section.product-detail {
     }
 
 }
-
-// products responsive css end here
+// products responsive css ends here
+//<=======Need to be removed
 
 .rating-reviews {
 
@@ -2048,7 +1935,7 @@ section.product-detail {
 
         .view-all {
             margin-top:15px;
-            color: $logo-color;
+            color: $brand-color;
             margin-bottom:15px;
         }
     }
@@ -2056,8 +1943,7 @@ section.product-detail {
 
 /* cart pages and elements css begins here */
 section.cart {
-    color: $product-font-color;
-    font-size: 16px;
+    color: $font-color;
     margin-bottom: 80px;
 
     .title {
@@ -2069,214 +1955,216 @@ section.cart {
         padding: 1px;
         display: flex;
         flex-direction: row;
+    }
+}
 
-        .left-side {
-            width: 68.6%;
-            margin-right: 2.4%;
+.cart {
+    .left-side {
+        width: 68.6%;
+        margin-right: 2.4%;
+    }
 
-            .item {
-                padding: 1.1%;
-                margin-bottom: 20px;
-                display: flex;
-                flex-direction: row;
+    .right-side {
+        width: 29%;
+        display: block;
 
-                .item-image {
-                    height: 160px;
-                    width: 160px;
-                }
+        .price-section {
+            width: 100%;
+            padding: 10px 10px 18px 18px;
+            margin-bottom: 20px;
+
+            .title {
+                font-weight: bold;
+                padding-bottom: 8px;
+                margin-bottom: 10px;
+            }
+
+            .all-item-details {
+                margin-bottom: 17px;
 
                 .item-details {
-                    display: flex;
-                    flex-direction: column;
+                    margin-bottom: 10px;
 
-                    .item-title {
-                        font-size: 18px;
-                        margin-bottom: 10px;
+                    .name {
                     }
 
                     .price {
-                        margin-bottom: 10px;
-
-                        .main-price {
-                            font-size: 18px;
-                            margin-right: 4px;
-                        }
-
-                        .real-price {
-                            margin-right: 4px;
-                            text-decoration-line: line-through;
-                        }
-
-                        .discount {
-                            color: $product-price-color;
-                        }
-                    }
-
-                    .summary {
-                        margin-bottom: 17px;
-                    }
-
-                    .misc {
-                        display: inline-flex;
-                        align-items: center;
-                        justify-content: flex-start;
-
-                        div.qty-text {
-                            color: $gray-shade;
-                            margin-right: 10px;
-                        }
-
-                        div.box {
-                            height: 38px;
-                            width: 60px;
-                            text-align: center;
-                            line-height: 38px;
-                            border: 1px solid $border-color;
-                            border-radius: 3px;
-                            margin-right: 30px;
-                        }
-
-                        .remove {
-                            color: $dark-blue-shade;
-                            margin-right: 30px;
-                        }
-
-                        .towishlist {
-                            color : $dark-blue-shade;
-                        }
-
+                        float: right;
                     }
                 }
             }
+            .horizontal-rule {
+                width: 100%;
+                height: 1px;
+                vertical-align: middle;
+                background: $border-color;
+            }
 
-            .misc-controls {
-                float: right;
+            .total-details {
+                margin-top: 10px;
 
-                span {
-                    margin-right: 15px;
-                }
-
-                button {
-                    border-radius: 0px;
+                .amount {
+                    float: right;
                 }
             }
         }
 
-        .right-side {
-            width: 29%;
-            display: block;
+        .coupon-section {
+            padding: 10px 10px 18px 18px;
 
-            .price-section {
+            .title {
+                font-weight: bold;
+                margin-bottom: 10px;
+            }
+
+            .control-group {
+                margin-bottom: 12px !important;
+
+                input.coupon-input::-moz-placeholder {
+                    font-family: "montserrat", sans-serif;
+                    color: $font-color;
+                }
+
+                input.coupon-input::-webkit-input-placeholder {
+                    font-family: "montserrat", sans-serif;
+                    color: $font-color;
+                }
+
+            }
+
+            button {
+                margin-bottom: 10px;
+                background-color: #000;
+                border-radius: 0px;
+            }
+
+            .coupon-details {
+
+                .coupon {
+                    margin-bottom: 8px;
+
+                    .discount {
+                        float: right;
+                    }
+                }
+            }
+
+            .horizontal-rule {
                 width: 100%;
-                padding: 10px 10px 18px 18px;
-                margin-bottom: 20px;
-
-                .title {
-                    font-size: 16px;
-                    font-weight: bold;
-                    padding-bottom: 8px;
-                    margin-bottom: 10px;
-                }
-
-                .all-item-details {
-                    margin-bottom: 17px;
-
-                    .item-details {
-                        margin-bottom: 10px;
-
-                        .name {
-                        }
-
-                        .price {
-                            float: right;
-                        }
-                    }
-                }
-                .horizontal-rule {
-                    width: 100%;
-                    height: 1px;
-                    vertical-align: middle;
-                    background: #e8e8e8;
-                }
-
-                .total-details {
-                    margin-top: 10px;
-
-                    .amount {
-                        float: right;
-                    }
-                }
+                height: 1px;
+                vertical-align: middle;
+                background: $border-color;
+                margin-bottom: 9px;
             }
 
-            .coupon-section {
-                padding: 10px 10px 18px 18px;
+            .after-coupon-amount {
 
-                .title {
-                    font-size: 16px;
+                .name {
                     font-weight: bold;
-                    margin-bottom: 10px;
                 }
 
-                .control-group {
-                    margin-bottom: 12px !important;
-
-                    input.coupon-input::-moz-placeholder {
-                        font-family: "montserrat", sans-serif;
-                        font-size: 16px;
-                        color: $product-font-color;
-                    }
-
-                    input.coupon-input::-webkit-input-placeholder {
-                        font-family: "montserrat", sans-serif;
-                        font-size: 16px;
-                        color: $product-font-color;
-                    }
-
-                }
-
-                button {
-                    margin-bottom: 10px;
-                    background-color: $color-black;
-                    border-radius: 0px;
-                }
-
-                .coupon-details {
-
-                    .coupon {
-                        margin-bottom: 8px;
-
-                        .discount {
-                            float: right;
-                        }
-                    }
-                }
-
-                .horizontal-rule {
-                    width: 100%;
-                    height: 1px;
-                    vertical-align: middle;
-                    background: #e8e8e8;
-                    margin-bottom: 9px;
-                }
-
-                .after-coupon-amount {
-
-                    .name {
-                        font-weight: bold;
-                    }
-
-                    .amount {
-                        float: right;
-                        font-weight: bold;
-                    }
-
+                .amount {
+                    float: right;
+                    font-weight: bold;
                 }
 
             }
 
         }
+
+    }
+}
+
+.cart-item-list {
+    margin-top: 21px;
+    padding: 1px;
+
+    .item {
+        padding: 1.1%;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: row;
+
+        .item-image {
+            height: 160px;
+            width: 160px;
+        }
+
+        .item-details {
+            display: flex;
+            flex-direction: column;
+
+            .item-title {
+                font-size: 18px;
+                margin-bottom: 10px;
+            }
+
+            .price {
+                margin-bottom: 10px;
+
+                .main-price {
+                    font-size: 18px;
+                    margin-right: 4px;
+                }
+
+                .real-price {
+                    margin-right: 4px;
+                    text-decoration-line: line-through;
+                }
+
+                .discount {
+                    color: #FF6472;
+                }
+            }
+
+            .summary {
+                margin-bottom: 17px;
+            }
+
+            .misc {
+                display: inline-flex;
+                align-items: center;
+                justify-content: flex-start;
+
+                div.qty-text {
+                    color: #5E5E5E;
+                    margin-right: 10px;
+                }
+
+                div.box {
+                    height: 38px;
+                    width: 60px;
+                    text-align: center;
+                    line-height: 38px;
+                    border: 1px solid $border-color;
+                    border-radius: 3px;
+                    margin-right: 30px;
+                }
+
+                .remove {
+                    color: $brand-color;
+                    margin-right: 30px;
+                }
+
+                .towishlist {
+                    color : $brand-color;
+                }
+
+            }
+        }
     }
 
+    .misc-controls {
+        float: right;
+
+        span {
+            margin-right: 15px;
+        }
+
+        button {
+            border-radius: 0px;
+        }
+    }
 }
 
 .attached-products-wrapper {
@@ -2285,7 +2173,7 @@ section.cart {
     .title {
         margin-bottom: 40px;
         font-size: 18px;
-        color: $product-font-color;
+        color: $font-color;
         text-align: center;
         position: relative;
 
@@ -2310,6 +2198,8 @@ section.cart {
     }
 }
 
+
+//=======>Need to be removed
 @media all and (max-width: 480px){
 
     .attached-products-wrapper {
@@ -2328,7 +2218,12 @@ section.cart {
         }
     }
 }
+//<=======Need to be removed
 
+
+
+
+//=======>Need to be removed
 @media all and (min-width: 481px) and (max-width: 920px) {
 
     .attached-products-wrapper {
@@ -2347,10 +2242,13 @@ section.cart {
         }
     }
 }
+//<=======Need to be removed
 
 
+
+
+//=======>Need to be removed
 // order page css start here
-
 .order {
     margin-left: 5.5%;
     margin-top: 1%;
@@ -2359,7 +2257,6 @@ section.cart {
     .order-section-head {
         .order-number {
             font-size: 28px;
-            color: #242424;
             text-transform: capitalize;
             text-align: left;
         }
@@ -2367,7 +2264,7 @@ section.cart {
         .order-cancel {
             font-size: 17px;
             margin-top: 1%;
-            color: #0031f0;
+            color: $brand-color;
             letter-spacing: -0.11px;
             float: right;
         }
@@ -2387,7 +2284,7 @@ section.cart {
             width: 100%;
             height: 1px;
             vertical-align: middle;
-            background: #e8e8e8;
+            background: $border-color;
         }
     }
 
@@ -2396,7 +2293,6 @@ section.cart {
     }
 
     .payment-place {
-        font-size: 16px;
         color: $profile-content-color;
         margin-top: 1.4%;
 
@@ -2410,7 +2306,6 @@ section.cart {
                 span {
                     color: #5E5E5E;
                     letter-spacing: -0.12px;
-                    font-size: 16px;
                 }
 
                 .processing {
@@ -2423,7 +2318,6 @@ section.cart {
                 span {
                     color: #5E5E5E;
                     letter-spacing: -0.12px;
-                    font-size: 16px;
                 }
             }
         }
@@ -2439,7 +2333,6 @@ section.cart {
                 span {
                     color: #5E5E5E;
                     letter-spacing: -0.12px;
-                    font-size: 16px;
                 }
             }
 
@@ -2448,7 +2341,6 @@ section.cart {
                 span {
                     color: #5E5E5E;
                     letter-spacing: -0.12px;
-                    font-size: 16px;
                 }
             }
         }
@@ -2458,7 +2350,7 @@ section.cart {
             width: 100%;
             height: 1px;
             vertical-align: middle;
-            background: #e8e8e8;
+            background: $border-color;
         }
     }
 
@@ -2595,7 +2487,7 @@ section.cart {
         width: 100%;
         height: 1px;
         vertical-align: middle;
-        background: #e8e8e8;
+        background: $border-color;
     }
 
     .order-information {
@@ -2614,17 +2506,14 @@ section.cart {
         }
 
         p {
-            font-size: 16px;
             color: #3A3A3A;
 
         }
     }
 }
-
 // oder page css end here
 
 // responsive order page css start here
-
 @media all and (max-width: 480px) {
 
     .order {
@@ -2653,8 +2542,6 @@ section.cart {
 
             .order-number {
                 text-align: center;
-                font-size: 16px;
-                color: #242424;
                 letter-spacing: -0.38px;
                 text-align: center;
                 margin-top: 13px;
@@ -2665,14 +2552,14 @@ section.cart {
                 float: right;
                 text-align: right;
                 font-size: 17px;
-                color: #0031F0;
+                color: $brand-color;
                 letter-spacing: -0.11px;
                 margin-top: 13px;
                 margin-bottom: 13px;
             }
 
             .horizon-rule {
-                border: .5px solid #E8E8E8;
+                border: .5px solid $border-color;
                 width: 150%;
                 margin-left: -10%;
                 margin-right: -10%;
@@ -2680,7 +2567,6 @@ section.cart {
         }
 
         .payment-place {
-            font-size: 16px;
             color: $profile-content-color;
             margin-top: 4%;
 
@@ -2738,7 +2624,7 @@ section.cart {
                 width: 100%;
                 height: 1px;
                 vertical-align: middle;
-                background: #e8e8e8;
+                background: $border-color;
             }
         }
 
@@ -2846,7 +2732,7 @@ section.cart {
         }
 
         .product-config {
-            border: 1px solid #E8E8E8;
+            border: 1px solid $border-color;
             height: 19%;
             width:100%;
             margin-top: 10px;
@@ -2873,7 +2759,6 @@ section.cart {
                     width:50%;
 
                     span {
-                        font-size: 16px;
                         color: #5E5E5E;
                         letter-spacing: -0.11px;
                     }
@@ -2933,8 +2818,6 @@ section.cart {
 
             .order-number {
                 text-align: center;
-                font-size: 16px;
-                color: #242424;
                 letter-spacing: -0.38px;
                 text-align: center;
                 margin-top: 13px;
@@ -2945,14 +2828,14 @@ section.cart {
                 float: right;
                 text-align: right;
                 font-size: 17px;
-                color: #0031F0;
+                color: $brand-color;
                 letter-spacing: -0.11px;
                 margin-top: 13px;
                 margin-bottom: 13px;
             }
 
             .horizon-rule {
-                border: .5px solid #E8E8E8;
+                border: .5px solid $border-color;
                 width: 150%;
                 margin-left: -10%;
                 margin-right: -10%;
@@ -2960,7 +2843,6 @@ section.cart {
         }
 
         .payment-place {
-            font-size: 16px;
             color: $profile-content-color;
             margin-top: 4%;
 
@@ -3018,7 +2900,7 @@ section.cart {
                 width: 100%;
                 height: 1px;
                 vertical-align: middle;
-                background: #e8e8e8;
+                background: $border-color;
             }
         }
 
@@ -3126,7 +3008,7 @@ section.cart {
         }
 
         .product-config {
-            border: 1px solid #E8E8E8;
+            border: 1px solid $border-color;
             height: 19%;
             width:100%;
             margin-top: 10px;
@@ -3153,7 +3035,6 @@ section.cart {
                     width:50%;
 
                     span {
-                        font-size: 16px;
                         color: #5E5E5E;
                         letter-spacing: -0.11px;
                     }
@@ -3186,9 +3067,11 @@ section.cart {
 
 }
 // responsive order css end here
+//<=======Need to be removed
+
 
 // checkout starts here
-.checkout-process{
+.checkout-process {
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -3205,7 +3088,7 @@ section.cart {
             justify-content: space-between;
             width: 100%;
             padding-bottom: 15px;
-            border-bottom: 1px solid #E8E8E8;;
+            border-bottom: 1px solid $border-color;
 
             li {
                 height: 48px;
@@ -3217,7 +3100,7 @@ section.cart {
                     border: 1px solid black;
                     border-radius: 50%;
                     display: inline-flex;
-                    border: 1px solid #E8E8E8;
+                    border: 1px solid $border-color;
                     background-repeat: no-repeat;
                     background-position: center;
 
@@ -3250,7 +3133,6 @@ section.cart {
                     margin-left: 7px;
                     margin-top: auto;
                     margin-bottom: auto;
-                    font-size: 16px;
                 }
 
                 &.active {
@@ -3280,7 +3162,7 @@ section.cart {
             }
 
             .form-container {
-                border-bottom: 1px solid #E8E8E8;
+                border-bottom: 1px solid $border-color;
                 padding-top: 20px;
                 padding-bottom: 20px;
             }
@@ -3300,774 +3182,158 @@ section.cart {
                     margin-left: 28px;
                 }
             }
+
+            .address {
+                display: inline-block;
+                width: 100%;
+
+                .address-card {
+                    width: 50%;
+
+                    &.left {
+                        float: left;
+                    }
+
+                    &.right {
+                        float: right;
+                    }
+
+                    .card-title span {
+                        font-weight: 600;
+                    }
+
+                    .card-content {
+                        margin-top: 15px;
+                        color: #121212;
+                        line-height: 25px;
+
+                        .horizontal-rule {
+                            margin: 12px 0;
+                            display: block;
+                            width: 25px;
+                            background: #121212;
+                        }
+                    }
+                }
+            }
+
+            .cart-item-list {
+                .item {
+                    border: 1px solid $border-color;
+                    border-radius: 3px;
+                    padding: 20px;
+
+                    .row {
+                        .title {
+                            width: 100px;
+                            display: inline-block;
+                            color: #5E5E5E;
+                            font-weight: 500;
+                            margin-bottom: 10px;
+                        }
+
+                        .value {
+                            font-size: 18px;
+                            font-weight: 600;
+                        }
+                    }
+                }
+            }
+
+            .order-description {
+                display: inline-block;
+                width: 100%;
+
+                .shipping {
+                    margin-bottom: 25px;
+                }
+
+                .decorator {
+                    height: 48px;
+                    width: 48px;
+                    border-radius: 50%;
+                    border: 1px solid $border-color;
+                    vertical-align: middle;
+                    display: inline-block;
+                    text-align: center;
+
+                    .icon {
+                        margin-top: 7px;
+                    }
+                }
+
+                .text {
+                    font-weight: 600;
+                    vertical-align: middle;
+                    display: inline-block;
+
+                    .info {
+                        font-weight: 500;
+                        margin-top: 2px;
+                    }
+                }
+            }
+            // complete page end here
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
         }
     }
 
     .col-right {
         width: 35%;
         padding-left: 40px;
-
-        .order-summary {
-
-            .price {
-
-                span {
-                    margin-left: 3px;
-                    font-size: 16px;
-                    color: #242424;
-                    font-weight: bold;
-                }
-            }
-
-            .item-detail {
-                margin-top:12px;
-
-                span {
-                    margin-left: 3px;
-
-                    label {
-                        font-size: 16px;
-                        color: #242424;
-                    }
-
-                    .right {
-                        float: right;
-                        font-size: 16px;
-                        color: #242424;
-                    }
-                }
-            }
-
-            .horizontal-rule {
-                margin-top: 6%;
-                width: 100%;
-                height: 1px;
-                vertical-align: middle;
-                background: #e8e8e8;
-            }
-
-            .payble-amount {
-                margin-top: 12px;
-
-                span {
-                    margin-left: 3px;
-                    font-weight: bold;
-
-                    label {
-                        font-size: 16px;
-                        color: #242424;
-                        font-weight: bold;
-                    }
-
-                    .right {
-
-                        float:right;
-                        font-size: 16px;
-                        color: #242424;
-                    }
-                }
-            }
-        }
     }
-}
-
-// checkout ends here
-
-// responsive checkout start here
-
-@media all and (max-width: 480px) {
-    .checkout-process{
-        width: 100%;
-        margin-top: 3%;
-
-        .left-side {
-            width: 100%;
-            margin-right: 0%;
-            height: 60px;
-
-            .checkout-menu {
-                width: 100%;
-
-                ul.checkout-detail {
-                    height: 60px;
-                    width: 100%;
-                    padding: 5px;
-
-                    li {
-                        height: 48px;
-
-                        .wrapper {
-                            display: flex;
-
-                            span {
-                               display: none;
-                            }
-                        }
-                    }
-
-                    .line {
-                        margin-top: 23px;
-                        width: 100%;
-                        margin-left: 5px;
-                        margin-right: 5px;
-                        border: 1px solid #E7E7E7;
-                        height: 1px;
-                    }
-                }
-
-                .horizontal-rule {
-                   display: none;
-                }
-            }
-        }
-
-        .right-side {
-            display: none;
-        }
-    }
-
-    .order-info{
-        width: 100%;
-        margin-right: 0%;
-        margin-top: 10px;
-        height:50px;
-
-        .control-group {
-
-            .control{
-                width:100%;
-            }
-        }
-
-        .different-billing-addr {
-            margin-top: 5%;
-        }
-
-        .horizontal-rule {
-            margin-top: 10%;
-        }
-
-        .countinue-button {
-            margin-top: 8%;
-        }
-    }
-}
-
-@media all and (min-width: 481px) and (max-width: 920px) {
-
-    .checkout-process{
-        width: 100%;
-        margin-top:3%;
-
-        .left-side {
-            width: 100%;
-            margin-right: 0%;
-            height: 60px;
-
-            .checkout-menu {
-                width: 100%;
-
-                ul.checkout-detail {
-                    height: 60px;
-                    width: 100%;
-                    padding: 5px;
-
-                    li {
-                        height: 48px;
-
-                        .wrapper {
-                            display:flex;
-
-                            span {
-                               display: none;
-                            }
-
-                        }
-                    }
-
-                    .line {
-                        margin-top: 23px;
-                        width: 100%;
-                        margin-left: 10px;
-                        margin-right: 10px;
-                        border: 1px solid #E7E7E7;
-                        height: 1px;
-                    }
-                }
-
-                .horizontal-rule {
-                   display: none;
-                }
-            }
-        }
-
-        .right-side {
-            display:none;
-        }
-    }
-
-    .order-info{
-        width: 100%;
-        margin-right: 0%;
-        margin-top: 10px;
-        height:50px;
-
-        .control-group {
-
-            .control{
-                width:100%;
-            }
-        }
-
-        .different-billing-addr {
-            margin-top: 3%;
-        }
-
-        .horizontal-rule {
-            margin-top: 10%;
-        }
-
-        .countinue-button {
-            margin-top: 5%;
-        }
-    }
-}
-// responsive checkout end here
-
-
-
-//shipment start here
-.ship-method {
-    width: 67%;
-    margin-right: 6%;
-    height: 600px;
-    margin-top: -190px;
-
-    .ship-info {
-
-        .ship-text{
-            font-size: 24px;
-            color: #242424;
-            letter-spacing: -0.58px;
-            font-weight: bold;
-        }
-    }
-
-    .ship-price {
-        margin-top: 31px;
-
-        .price-checkbox {
-            display:flex;
-
-            span {
-                margin-left: 8px;
-                font-size: 16px;
-                color: #242424;
-                line-height: 22px;
-                font-weight: bold;
-            }
-
-        }
-
-        .price-checkbox-text {
-            margin-left: 25px;
-            width:580px;
-            height:44px;
-            margin-top: 4px;
-
-            b {
-               font-size: 16px;
-            }
-
-            span {
-                font-size: 16px;
-                color: #242424;
-                line-height: 22px;
-            }
-        }
-
-
-    }
-
-    .horizontal-rule {
-        margin-top: 7%;
-        width: 100%;
-        height: 1px;
-        vertical-align: middle;
-        background: #e8e8e8;
-    }
-
-    .countinue-button {
-        margin-top: 3%;
-
-        button {
-            background: #0031F0;
-            font-size: 14px;
-            color: #FFFFFF;
-            letter-spacing: -0.26px;
-            text-align: center;
-            height: 38px;
-            width: 137px;
-            border: none;
-        }
-    }
-}
-//shipment end here
-
-// payment method start here
-.payment-method {
-    width: 67%;
-    margin-right: 6%;
-    height: 600px;
-    margin-top: -190px;
-
-    .payment-info {
-
-        .payment-text{
-            font-size: 24px;
-            color: #242424;
-            letter-spacing: -0.58px;
-            font-weight: bold;
-        }
-    }
-
-    .payment-price {
-        margin-top: 31px;
-
-        .payment-checkbox {
-            display:flex;
-
-            span {
-                margin-left: 8px;
-                font-size: 16px;
-                color: #242424;
-                line-height: 22px;
-                font-weight: bold;
-            }
-
-        }
-
-        .payment-checkbox-text {
-            margin-left: 25px;
-            width:580px;
-            height:44px;
-            margin-top: 4px;
-
-            b {
-               font-size: 16px;
-            }
-
-            span {
-                font-size: 16px;
-                color: #242424;
-                line-height: 22px;
-            }
-        }
-
-
-    }
-
-    .horizontal-rule {
-        margin-top: 7%;
-        width: 100%;
-        height: 1px;
-        vertical-align: middle;
-        background: #e8e8e8;
-    }
-
-    .countinue-button {
-        margin-top: 3%;
-
-        button {
-            background: #0031F0;
-            font-size: 14px; .horizontal-rule {
-                margin-top: 7%;
-                width: 100%;
-                height: 1px;
-                vertical-align: middle;
-                background: #e8e8e8;
-            }
-            color: #FFFFFF;
-            letter-spacing: -0.26px; .horizontal-rule {
-                margin-top: 7%;
-                width: 100%;
-                height: 1px;
-                vertical-align: middle;
-                background: #e8e8e8;
-            }
-            text-align: center;
-            height: 38px;
-            width: 137px;
-            border: none;
-        }
-    }
-}
-// payment method end here
-
-
-// complete page start here
-.complete-page{
-    width:880px;
-    height: 1050px;
 
     .order-summary {
-
-        span {
-            font-size: 24px;
-            color: #242424;
-            font-weight: bold;
-            letter-spacing: -0.58px;
+        h3 {
+            font-size: 16px;
         }
-    }
 
-    .address {
-        display: flex;
-        flex-direction: row;
-        margin-top: 30px;
+        .item-detail {
+            margin-top:12px;
 
-        .shipping-address {
-            height: 100px;
-            width: 415px;
-
-            .shipping-title {
-
-                span {
-                    font-weight: bold;
-                    font-size: 16px;
-                    color: #242424
-                }
-            }
-
-            .shipping-content {
-                margin-top: 15px;
-                width: 175px;
-
-                .addr {
-                    margin-top: 5px;
-
-                    span {
-                        font-size: 16px;
-                        color: #121212;
-                    }
-                }
-
-                .horizontal-rule {
-                    margin-top: 7%;
-                    width: 25px;
-                    height: 1px;
-                    vertical-align: middle;
-                    background: #121212;
-                }
-
-                .contact {
-                    margin-top: 10px;
-
-                    span {
-                        font-size: 16px;
-                        color: #121212;
-                    }
+            label {
+                &.right {
+                    float: right;
                 }
             }
         }
 
-        .billing-address {
-            width: 415px;
+        .payble-amount {
+            margin-top: 17px;
+            border-top: 1px solid $border-color;
+            padding-top: 12px;
 
-            .shipping-title {
+            label {
+                font-weight: bold;
 
-                span {
-                    font-weight: bold;
-                    font-size: 16px;
-                    color: #242424
-                }
-            }
-
-            .shipping-content {
-                margin-top: 15px;
-                width: 175px;
-
-                .addr {
-                    margin-top: 5px;
-
-                    span {
-                        font-size: 16px;
-                        color: #121212;
-                    }
-                }
-
-                .horizontal-rule {
-                    margin-top: 7%;
-                    width: 25px;
-                    height: 1px;
-                    vertical-align: middle;
-                    background: #121212;
-                }
-
-                .contact {
-                    margin-top: 10px;
-
-                    span {
-                        font-size: 16px;
-                        color: #121212;
-                    }
-                }
-            }
-        }
-    }
-
-    .product-detail {
-        height: 200px;
-        border: 1px solid #E8E8E8;
-        border-radius: 3px;
-        margin-top: 30px;
-        display: flex;
-        flex-direction: row;
-
-        .product-image {
-            margin: 20px 0px 20px 20px;
-
-            img {
-                height: 160px;
-                width:160px;
-            }
-        }
-        margin-top: 30px;
-        .product-desc {
-            margin-top: 20px;
-            margin-left: 10px;
-
-            .product-title {
-
-                span {
-                    font-size: 18px;
-                    color: #242424;
-                    letter-spacing: -0.43px;
-                    font-weight: bold;
-                }
-            }
-
-            .price {
-                margin-top:11px;
-
-                span {
-
-                    label {
-                        font-size: 16px;
-                        color: #5E5E5E;
-                    }
-
-                    label.bold {
-                        margin-left:45px;
-                        font-weight: bold;
-                        font-size: 18px;
-                        color: #242424;
-                    }
-                }
-            }
-
-            .quantity {
-                margin-top:11px;
-
-                span {
-
-                    label {
-                        font-size: 16px;
-                        color: #5E5E5E;
-                    }
-
-                    label.quat-bold {
-                        margin-left:15px;
-                        font-weight: bold;
-                        font-size: 18px;
-                        color: #242424;
-                    }
-                }
-            }
-
-            .pro-attribute {
-                width:413px;
-                margin-top:14px;
-
-                span {
-
-                    font-size: 16px;
-                    color: #242424;
-                }
-            }
-        }
-    }
-
-    .order-description {
-        height: 140px;
-        border-radius: 3px;
-        margin-top: 30px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-
-        .payment {
-
-            .shipping{
-                display: flex;
-                flex-direction: row;
-
-                .pay-icon {
-                    height: 48px;
-                    width: 48px;
-                    border-radius: 50%;
-                    border: 1px solid #E8E8E8;
-
-                    img {
-                        margin-left: 8px;
-                        margin-top: 8px;
-                    }
-
-                    span {
-                        margin-left: 10px;
-                        font-size: 16px;
-                        color: #242424;
-                        letter-spacing: -0.38px;
-                    }
-                }
-
-                .shipping-text {
-                    display: flex;
-                    flex-direction: column;
-
-                    .price {
-                        margin-top: 5px;
-                        margin-left: 5px;
-
-                        span {
-                            font-size: 16px;
-                            color: #242424;
-                            letter-spacing: -0.38px;
-                        }
-                    }
-
-                    .fedex-shipping {
-                        margin-left: 5px;
-
-                        span {
-                            font-size: 16px;
-                            color: #242424;
-                            letter-spacing: -0.38px;
-                        }
-                    }
-                }
-            }
-
-            .net-banking{
-                margin-top: 23px;
-                display: flex;
-                flex-direction: row;
-
-                .pay-icon {
-                    height: 48px;
-                    width: 48px;
-                    border-radius: 50%;
-                    border: 1px solid #E8E8E8;
-
-                    img {
-                        margin-left: 8px;
-                        margin-top: 8px;
-                    }
-                }
-
-                span {
-                    margin-left: 5px;
-                    margin-top: 15px;
-                    font-size: 16px;
-                    color: #242424;
-                    letter-spacing: -0.38px;
-                }
-            }
-        }
-
-        .product-bill {
-            height:200px;
-            width:300px;
-
-            .sub-total {
-
-                span {
-                    font-size: 16px;
-                    color: #242424;
-                    letter-spacing: -0.38px;
-                }
-
-                .right{
+                &.right {
                     float:right;
                 }
             }
-
-            .charge-discount {
-                margin-top: 10px;
-
-                span {
-                    font-size: 16px;
-                    color: #242424;
-                    letter-spacing: -0.38px;
-                }
-
-                .right{
-                    float:right;
-                }
-            }
-
-            .horizontal-rule {
-                margin-top: 5%;
-                width: 100%;
-                height: 1px;
-                vertical-align: middle;
-                background: #e8e8e8;
-            }
-
-            .amount-pay {
-                margin-top: 15px;
-
-                span {
-                    font-size: 16px;
-                    color: #242424;
-                    letter-spacing: -0.38px;
-                }
-
-                .right{
-                    float:right;
-                }
-            }
-        }
-    }
-
-    .horizontal-rule {
-        width: 100%;
-        height: 1px;
-        vertical-align: middle;
-        background: #e8e8e8;
-    }
-
-    .palce-order-button {
-        margin-top: 30px;
-
-        button {
-            width:137px;
-            height: 38px;
-            background: #0031F0;
-            font-size: 14px;
-            color: #FFFFFF;
-            letter-spacing: -0.26px;
-            text-align: center;
-            border:none;
         }
     }
 }
-// complete page end here
-
+// checkout ends here
 
 // review page start here
 section.review {
-    font-size: 16px;
-    color: $product-font-color;
+    color: $font-color;
 
     .category-breadcrumbs {
         display: inline;
@@ -4094,7 +3360,6 @@ section.review {
 
                 span {
                     font-size: 24px;
-                    color: #242424;
                     letter-spacing: -0.58px;
                 }
             }
@@ -4110,15 +3375,12 @@ section.review {
 
                 .pro-price-not {
                     margin-left: 10px;
-                    font-size: 16px;
                     color: #A5A5A5;
                     letter-spacing: -0.26px;
                 }
 
                 .offer {
                     margin-left: 10px;
-                    font-size: 16px;
-                    color: #242424;
                     letter-spacing: -0.26px;
                 }
             }
@@ -4132,8 +3394,6 @@ section.review {
                 margin-top: 10px;
 
                 span {
-                    font-size: 16px;
-                    color: #242424;
                     letter-spacing: -0.26px;
                 }
 
@@ -4145,7 +3405,6 @@ section.review {
 
             .rating {
                 margin-top : 25px;
-                font-size: 16px;
                 color: #5E5E5E;
                 letter-spacing: -0.12px;
 
@@ -4191,7 +3450,7 @@ section.review {
                 margin-top: 10px;
 
                 button {
-                    background: #0031F0;
+                    background: $brand-color;
                     font-size: 14px;
                     color: #FFFFFF;
                     letter-spacing: -0.26px;
@@ -4218,7 +3477,6 @@ section.review {
 
                         span {
                             font-size: 34px;
-                            color: #242424;
                             letter-spacing: -0.82px;
                             text-align: center;
                         }
@@ -4236,12 +3494,10 @@ section.review {
         }
     }
 }
-
 // review page end here
 
 
 // customer section css start here
-
 .cusomer-section {
     margin-left: 50px;
     width:100%;
@@ -4249,7 +3505,7 @@ section.review {
     .customer-section-info {
         display: flex;
         flex-direction: row;
-        border-top: 1px solid #E8E8E8;
+        border-top: 1px solid $border-color;
 
         .pro-img {
             margin-top: 10px;
@@ -4266,8 +3522,7 @@ section.review {
             width: 100%;
 
             .title {
-                font-size: 16px;
-                color: #0031F0;
+                color: $brand-color;
                 margin-top: 15px;
             }
 
@@ -4287,8 +3542,7 @@ section.review {
     }
 
     .customer-section-info:last-child {
-        border-bottom: 1px solid #e8e8e8;
+        border-bottom: 1px solid $border-color;
     }
 }
-
 // customer section css end here
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
index d4c2de509..df3227acc 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/icons.scss
@@ -53,4 +53,16 @@
     background-image:URL('../images/icon-share.svg');
     width: 24px;
     height: 24px;
+}
+
+.shipping-icon {
+    background-image: url('../images/shipping.svg');
+    width: 32px;
+    height: 32px;
+}
+
+.payment-icon {
+    background-image: url('../images/payment.svg');
+    width: 32px;
+    height: 32px;
 }
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index af33d2f71..736b6ba5e 100644
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -87,7 +87,10 @@ return [
             'use_for_shipping' => 'Ship to this address',
             'continue' => 'Continue',
             'shipping-method' => 'Shipping Method',
-            'payment-information' => 'Payment Information'
+            'payment-information' => 'Payment Information',
+            'summary' => 'Summary of Order',
+            'price' => 'Price',
+            'quantity' => 'Quantity'
         ],
 
         'total' => [
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
index 361731c3b..0b21826d7 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
@@ -20,51 +20,55 @@
 
                 <div class="left-side">
 
-                    @foreach($cart->items as $item)
+                    <div class="cart-item-list">
+                        @foreach($cart->items as $item)
 
-                        <?php 
-                            $product = $item->product; 
+                            <?php 
+                                $product = $item->product; 
 
-                            $productBaseImage = $productImageHelper->getProductBaseImage($product);
-                        ?>
+                                $productBaseImage = $productImageHelper->getProductBaseImage($product);
+                            ?>
+
+                            <div class="item">
+                                <div style="margin-right: 15px;">
+                                    <img class="item-image" src="{{ $productBaseImage['medium_image_url'] }}" />
+                                </div>
+
+                                <div class="item-details">
+
+                                    <div class="item-title">
+                                        {{ $product->name }}
+                                    </div>
+
+                                    <div class="price">
+                                        <span class="main-price">
+                                            {{ $item->price }}
+                                        </span>
+                                        <span class="real-price">
+                                            $25.00
+                                        </span>
+                                        <span class="discount">
+                                            10% Off
+                                        </span>
+                                    </div>
+
+                                    <div class="summary" >
+                                        Color : Gray, Size : S
+                                    </div>
+
+                                    <div class="misc">
+                                        <div class="qty-text">Quantity</div>
+                                        <div class="box">{{ $item->quantity }}</div>
+                                        <span class="remove">Remove</span>
+                                        <span class="towishlist">Move to Wishlist</span>
+                                    </div>
+                                </div>
 
-                        <div class="item">
-                            <div style="margin-right: 15px;">
-                                <img class="item-image" src="{{ $productBaseImage['medium_image_url'] }}" />
                             </div>
+                        @endforeach
 
-                            <div class="item-details">
-
-                                <div class="item-title">
-                                    {{ $product->name }}
-                                </div>
-
-                                <div class="price">
-                                    <span class="main-price">
-                                        {{ $item->price }}
-                                    </span>
-                                    <span class="real-price">
-                                        $25.00
-                                    </span>
-                                    <span class="discount">
-                                        10% Off
-                                    </span>
-                                </div>
-
-                                <div class="summary" >
-                                    Color : Gray, Size : S
-                                </div>
-
-                                <div class="misc">
-                                    <div class="qty-text">Quantity</div>
-                                    <div class="box">{{ $item->quantity }}</div>
-                                    <span class="remove">Remove</span>
-                                    <span class="towishlist">Move to Wishlist</span>
-                                </div>
-                            </div>
-
-                        </div>
-                    @endforeach
+                    </div>
+                    
 
                     <div class="misc-controls">
                         <span>Continue Shopping</span>
@@ -73,6 +77,7 @@
                 </div>
 
                 <div class="right-side">
+
                     <div class="price-section">
                         <div class="title">
                             Price Detail
@@ -94,6 +99,7 @@
                         </div>
 
                     </div>
+
                     <div class="coupon-section">
 
                         <span class="title">Apply Coupon</span>
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
index 40db17f16..6ca9b95ea 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
@@ -1,190 +1,127 @@
-<div class="complete-page">
-    <div class="order-summary">
-        <span>Summary of Order</span>
+<div class="form-container">
+    <div class="form-header">
+        <h1>{{ __('shop::app.checkout.onepage.summary') }}</h1>
     </div>
 
     <div class="address">
 
-        <div class="shipping-address">
-            <div class="shipping-title">
+        <div class="address-card shipping-address left">
+            <div class="card-title">
                 <span>Shipping address</span>
             </div>
 
-            <div class="shipping-content">
-                <div class="name">
-                    <span>John Doe </span>
-                </div>
-                <div class="addr">
-                    <span>
-                        25 , Washington USA 5751434
-                    </span>
-                </div>
-                <div class="horizontal-rule">
-                </div>
-                <div class="contact">
-                    <span>Contact : 9876543210 </span>
-                </div>
+            <div class="card-content">
+                John Doe</br>
+                25 , Washington</br>
+                USA 5751434</br>
+                
+                <span class="horizontal-rule"></span>
+
+                Contact : 9876543210 
             </div>
         </div>
 
-        <div class="billing-address">
-            <div class="shipping-title">
+        <div class="address-card billing-addres right">
+            <div class="card-title">
                 <span>Billing address</span>
             </div>
 
-            <div class="shipping-content">
-                <div class="name">
-                    <span>John Doe </span>
-                </div>
-                <div class="addr">
-                    <span>
-                        25 , Washington USA 5751434
-                    </span>
-                </div>
-                <div class="horizontal-rule">
-                </div>
-                <div class="contact">
-                    <span>Contact : 9876543210 </span>
-                </div>
+            <div class="card-content">
+                John Doe</br>
+                25 , Washington</br>
+                USA 5751434</br>
+                
+                <span class="horizontal-rule"></span>
+
+                Contact : 9876543210 
             </div>
         </div>
 
     </div>
 
-    <div class="product-detail">
-        <div class="product-image">
-            <img src="{{asset('themes/default/assets/images/1.png')}}" />
-        </div>
+    @inject ('productImageHelper', 'Webkul\Product\Product\ProductImage')
 
-        <div class="product-desc">
-            <div class="product-title">
-                <span>
-                    Rainbow creation Embroidered
-                </span>
-            </div>
-            <div class="price">
-                <span>
-                    <label>Price </label>
-                    <label class="bold"> $40.00 </label>
-                </span>
-            </div>
-            <div class="quantity">
-                <span>
-                    <label>Quantity</label>
-                    <label class="quat-bold"> 1 </label>
-                </span>
-            </div>
-            <div class="pro-attribute">
-                <span>
-                    Color : Grey, Size : S,Sleeve Type : Puffed Sleeves,Occasion : Birthday ,Marriage Anniversary
-                </span>
-            </div>
-        </div>
-    </div>
+    <div class="cart-item-list">
+        @foreach($cart->items as $item)
 
-    <div class="product-detail">
-        <div class="product-image">
-            <img src="{{asset('themes/default/assets/images/1.png')}}" />
-        </div>
+            <?php 
+                $product = $item->product; 
+
+                $productBaseImage = $productImageHelper->getProductBaseImage($product);
+            ?>
+
+            <div class="item">
+                <div style="margin-right: 15px;">
+                    <img class="item-image" src="{{ $productBaseImage['medium_image_url'] }}" />
+                </div>
+
+                <div class="item-details">
+
+                    <div class="item-title">
+                        {{ $product->name }}
+                    </div>
+
+                    <div class="row">
+                        <span class="title">
+                            {{ __('shop::app.checkout.onepage.price') }}
+                        </span>
+                        <span class="value">
+                            {{ core()->currency($item->base_price) }}
+                        </span>
+                    </div>
+
+                    <div class="row">
+                        <span class="title">
+                            {{ __('shop::app.checkout.onepage.quantity') }}
+                        </span>
+                        <span class="value">
+                            {{ $item->quantity }}
+                        </span>
+                    </div>
+
+                    <div class="summary" >
+                        Color : Gray, Size : S
+                    </div>
+                </div>
 
-        <div class="product-desc">
-            <div class="product-title">
-                <span>
-                    Rainbow creation Embroidered
-                </span>
             </div>
-            <div class="price">
-                <span>
-                    <label>Price </label>
-                    <label class="bold"> $40.00 </label>
-               </span>
-            </div>
-            <div class="quantity">
-                <span>
-                    <label>Quantity</label>
-                    <label class="quat-bold"> 1 </label>
-                </span>
-            </div>
-            <div class="pro-attribute">
-                <span>
-                    Color : Grey, Size : S,Sleeve Type : Puffed Sleeves,Occasion : Birthday ,Marriage Anniversary
-                </span>
-            </div>
-        </div>
+        @endforeach
+
     </div>
 
     <div class="order-description">
 
-        <div class="payment">
+        <div class="pull-left">
             
             <div class="shipping">
-                <div class="pay-icon">
-                    <img src="{{asset('themes/default/assets/images/shipping.svg')}}" />
+                <div class="decorator">
+                    <i class="icon shipping-icon"></i>
                 </div>
-                <div class="shipping-text">
-                    <div class="price">
-                        <span>
-                            $ 25.00
-                        </span>
-                    </div>
 
-                    <div class="fedex-shipping">
-                        <span>
-                            FedEx Shipping
-                        </span>
+                <div class="text">
+                    $ 25.00
+
+                    <div class="info">
+                        FedEx Shipping
                     </div>
                 </div>
             </div>
 
-            <div class="net-banking">
-                <div class="pay-icon">
-                    <img src="{{asset('themes/default/assets/images/payment.svg')}}" />
+            <div class="payment">
+                <div class="decorator">
+                    <i class="icon payment-icon"></i>
+                </div>
+
+                <div class="text">
+                    Net banking 
                 </div>
-                <span>Net banking </span>
             </div>
 
         </div>
 
-        <div class="product-bill">
+        <div class="pull-right">
 
-            <div class="sub-total">
-                <span>
-                    Subtotal
-                </span>
-                <span class="right">
-                    $ 2,506.00
-                </span>
-            </div>
-
-            <div class="charge-discount">
-                <span>
-                   Delivery Charges
-                </span>
-                <span class="right">
-                    $ 40.00
-                </span>
-            </div>
-
-            <div class="charge-discount">
-                <span>
-                   Coupan discount
-                </span>
-                <span class="right">
-                    $ 25.00
-                </span>
-            </div>
-
-            <div class="horizontal-rule">
-            </div>
-
-            <div class="amount-pay">
-                <span>
-                   Amount payable
-                </span>
-                <span class="right">
-                    $ 2,571.00
-                </span>
-            </div>
+            @include('shop::checkout.total.summary', ['cart' => $cart])
 
         </div>
 
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/total/summary.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/total/summary.blade.php
index 5f598bbd9..11aa1ca18 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/total/summary.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/total/summary.blade.php
@@ -1,31 +1,20 @@
 <div class="order-summary">
-    <div class="price">
-        <span>{{ __('shop::app.checkout.total.order-summary') }}</span>
-    </div>
+    <h3>{{ __('shop::app.checkout.total.order-summary') }}</h3>
 
     <div class="item-detail">
-        <span>
-            <label>{{ __('shop::app.checkout.total.sub-total') }}</label>
-            <label class="right">{{ core()->currency($cart->sub_total) }}</label>
-        </span>
+        <label>{{ __('shop::app.checkout.total.sub-total') }}</label>
+        <label class="right">{{ core()->currency($cart->sub_total) }}</label>
     </div>
 
     @if ($cart->selected_shipping_rate)
         <div class="item-detail">
-            <span>
-                <label>{{ __('shop::app.checkout.total.delivery-charges') }}</label>
-                <label class="right">{{ core()->currency($cart->selected_shipping_rate->price) }}</label>
-            </span>
+            <label>{{ __('shop::app.checkout.total.delivery-charges') }}</label>
+            <label class="right">{{ core()->currency($cart->selected_shipping_rate->price) }}</label>
         </div>
     @endif
 
-    <div class="horizontal-rule">
-    </div>
-
     <div class="payble-amount">
-        <span>
-            <label>{{ __('shop::app.checkout.total.grand-total') }}</label>
-            <label class="right">{{ core()->currency($cart->grand_total) }}</label>
-        </span>
+        <label>{{ __('shop::app.checkout.total.grand-total') }}</label>
+        <label class="right">{{ core()->currency($cart->grand_total) }}</label>
     </div>
 </div>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/common.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/common.blade.php
deleted file mode 100644
index 68186c19b..000000000
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/common.blade.php
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="checkout-process">
-
-    @include('shop::customers.checkout.common.nav-left')
-
-    @include('shop::customers.checkout.common.nav-right')
-
-</div>
-
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-left.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-left.blade.php
deleted file mode 100644
index 2a33dfe10..000000000
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-left.blade.php
+++ /dev/null
@@ -1,53 +0,0 @@
-<div class="left-side">
-    <div class="checkout-menu">
-
-        <ul class="checkout-detail">
-
-            <li>
-                <div class="wrapper">
-                    <div class="decorator" v-bind:class="{ active: isGuest }">
-                        <img src="{{asset('themes/default/assets/images/address.svg')}}" />
-                    </div>
-
-                    <span>Information</span>
-
-                </div>
-
-            </li>
-
-            <li>
-                <div class="wrapper" >
-                    <div class="decorator" v-bind:class="{ active: isShip }">
-                        <img src="{{asset('themes/default/assets/images/shipping.svg')}}"/>
-                    </div>
-
-                    <span>Shipping</span>
-                </div>
-            </li>
-
-            <li>
-                <div class="wrapper">
-                    <div class="decorator">
-                        <img src="{{asset('themes/default/assets/images/payment.svg')}}" />
-                    </div>
-
-                    <span>Payment</span>
-                </div>
-            </li>
-
-            <li>
-                <div class="wrapper">
-                    <div class="decorator">
-                        <img src="{{asset('themes/default/assets/images/finish.svg')}}" />
-                    </div>
-
-                    <span>Complete</span>
-                </div>
-            </li>
-        </ul>
-
-        <div class="horizontal-rule">
-        </div>
-    </div>
-</div>
-
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-right.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-right.blade.php
deleted file mode 100644
index 35d745c8c..000000000
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/common/nav-right.blade.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="right-side">
-    
-</div>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/complete.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/complete.blade.php
deleted file mode 100644
index 6f9d4b8e2..000000000
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/complete.blade.php
+++ /dev/null
@@ -1,265 +0,0 @@
-
-@extends('shop::layouts.master')
-
-@section('content-wrapper')
-
-
-<div class="checkout-process">
-
-    <div class="left-side">
-        <div class="checkout-menu">
-
-            <ul class="checkout-detail">
-
-                <li>
-                    <div class="wrapper">
-                        <div class="decorator active">
-                            <img src="{{asset('themes/default/assets/images/completed.svg')}}" />
-                        </div>
-                        
-                        <span>Information</span>
-                    </div>
-                    
-                </li>
-                
-                <li>
-                    <div class="wrapper">
-                        <div class="decorator">
-                            <img src="{{asset('themes/default/assets/images/completed.svg')}}" />
-                        </div>
-                        
-                        <span>Shipping</span>
-                    </div>
-                </li>
-                
-                <li>
-                    <div class="wrapper">
-                        <div class="decorator">
-                            <img src="{{asset('themes/default/assets/images/completed.svg')}}" />
-                        </div>
-                        
-                        <span>Payment</span>
-                    </div>
-                </li>
-                
-                <li>
-                    <div class="wrapper">
-                        <div class="decorator">
-                            <img src="{{asset('themes/default/assets/images/finish.svg')}}" />
-                        </div>
-                        
-                        <span>Complete</span>
-                    </div>
-                </li>
-            </ul> 
-
-            <div class="horizontal-rule">
-            </div>          
-        </div>
-    </div>
-
-
-</div>
-
-<div class="complete-page">
-    <div class="order-summary">
-        <span>Summary of Order<span>
-    </div>
-
-    <div class="address">
-
-        <div class="shipping-address">
-            <div class="shipping-title">
-                <span>Shipping address</span>
-            </div>
-
-            <div class="shipping-content">
-                <div class="name">
-                    <span>John Doe </span>
-                </div>
-                <div class="addr">
-                    <span>
-                        25 , Washington USA 5751434
-                    </span>
-                </div>
-                <div class="horizontal-rule">
-                </div>
-                <div class="contact">
-                    <span>Contact : 9876543210 </span>
-                </div>
-            </div>
-        </div>
-
-        <div class="billing-address">
-            <div class="shipping-title">
-                <span>Billing address</span>
-            </div>
-
-            <div class="shipping-content">
-                <div class="name">
-                    <span>John Doe </span>
-                </div>
-                <div class="addr">
-                    <span>
-                        25 , Washington USA 5751434
-                    </span>
-                </div>
-                <div class="horizontal-rule">
-                </div>
-                <div class="contact">
-                    <span>Contact : 9876543210 </span>
-                </div>
-            </div>
-        </div>
-
-    </div>
-
-    <div class="product-detail">
-        <div class="product-image">
-            <img src="{{asset('themes/default/assets/images/1.png')}}" />
-        </div>
-
-        <div class="product-desc">
-            <div class="product-title">
-                <span>
-                    Rainbow creation Embroidered
-                </span>
-            </div>
-            <div class="price">
-                <span>
-                    <label>Price </label>
-                    <label class="bold"> $40.00 </label>
-                <span>
-            </div>
-            <div class="quantity">
-                <span>
-                    <label>Quantity</label>
-                    <label class="quat-bold"> 1 </label>
-                <span>
-            </div>
-            <div class="pro-attribute">
-                <span>
-                    Color : Grey, Size : S,Sleeve Type : Puffed Sleeves,Occasion : Birthday ,Marriage Anniversary
-                </span>
-            </div>
-        </div>
-    </div>
-
-    <div class="product-detail">
-        <div class="product-image">
-            <img src="{{asset('themes/default/assets/images/1.png')}}" />
-        </div>
-
-        <div class="product-desc">
-            <div class="product-title">
-                <span>
-                    Rainbow creation Embroidered
-                </span>
-            </div>
-            <div class="price">
-                <span>
-                    <label>Price </label>
-                    <label class="bold"> $40.00 </label>
-               </span>
-            </div>
-            <div class="quantity">
-                <span>
-                    <label>Quantity</label>
-                    <label class="quat-bold"> 1 </label>
-                </span>
-            </div>
-            <div class="pro-attribute">
-                <span>
-                    Color : Grey, Size : S,Sleeve Type : Puffed Sleeves,Occasion : Birthday ,Marriage Anniversary
-                </span>
-            </div>
-        </div>
-    </div>
-
-    <div class="order-description">
-
-        <div class="payment">
-            
-            <div class="shipping">
-                <div class="pay-icon">
-                    <img src="{{asset('themes/default/assets/images/shipping.svg')}}" />
-                </div>
-                <div class="shipping-text">
-                    <div class="price">
-                        <span>
-                            $ 25.00
-                        </span>
-                    </div>
-
-                    <div class="fedex-shipping">
-                        <span>
-                            FedEx Shipping
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="net-banking">
-                <div class="pay-icon">
-                    <img src="{{asset('themes/default/assets/images/payment.svg')}}" />
-                </div>
-                <span>Net banking </span>
-            </div>
-
-        </div>
-
-        <div class="product-bill">
-
-            <div class="sub-total">
-                <span>
-                    Subtotal
-                </span>
-                <span class="right">
-                    $ 2,506.00
-                </span>
-            </div>
-
-            <div class="charge-discount">
-                <span>
-                   Delivery Charges
-                </span>
-                <span class="right">
-                    $ 40.00
-                </span>
-            </div>
-
-            <div class="charge-discount">
-                <span>
-                   Coupan discount
-                </span>
-                <span class="right">
-                    $ 25.00
-                </span>
-            </div>
-
-            <div class="horizontal-rule">
-            </div>
-
-            <div class="amount-pay">
-                <span>
-                   Amount payable
-                </span>
-                <span class="right">
-                    $ 2,571.00
-                </span>
-            </div>
-
-        </div>
-
-    </div>
-
-    <div class="horizontal-rule">
-    </div>
-
-    <div class="palce-order-button">
-        <button>PLACE ORDER </button>
-    </div>
-
-</div>
-
-@endsection
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/guest.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/guest.blade.php
deleted file mode 100644
index 475c06621..000000000
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/guest.blade.php
+++ /dev/null
@@ -1,73 +0,0 @@
-    <div class="order-info">
-        <div class="order-guest">
-            <span class="order-text">
-                Order as Guest
-            </span>
-            <button class="btn btn-lg btn-primary sign-in">
-                SIGN IN
-            </button>
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">Email address <span>*</span></label>
-            <input type="text" class="control" name="email_address">
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">First Name <span>*</span> </label>
-            <input type="text" class="control" name="first_name">
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">Last Name <span>*</span> </label>
-            <input type="text" class="control" name="last_name">
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">Company Name <span>*</span> </label>
-            <input type="text" class="control" name="company_name">
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">Street address <span>*</span> </label>
-            <input type="text" class="control" name="street_address">
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">City <span>*</span> </label>
-            <input type="text" class="control" name="city">
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">Country <span>*</span> </label>
-            <input type="text" class="control" name="country">
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">Provinces <span>*</span> </label>
-            <input type="text" class="control" name="provinces">
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">Zip code <span>*</span> </label>
-            <input type="text" class="control" name="zip_code">
-        </div>
-
-        <div class="control-group">
-            <label for="first_name">Phone number <span>*</span> </label>
-            <input type="text" class="control" name="phone_number">
-        </div>
-
-        <div class="different-billing-addr">
-            <span>qwdevf</span>
-            <span>Usedifferent address for billing?</span>
-        </div>
-
-        <div class="horizontal-rule">
-        </div>
-
-        <div class="countinue-button">
-            <button class="btn btn-lg btn-primary" @click="count()">CONTINUE</button>
-        </div>
-
-    </div>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/index.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/index.blade.php
deleted file mode 100644
index d257eedbb..000000000
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/index.blade.php
+++ /dev/null
@@ -1,66 +0,0 @@
-@extends('shop::layouts.master')
-
-@section('content-wrapper')
-
-    <checkout customer="{{$customer_id}}"> </checkout>
-
-@endsection
-
-@push('scripts')
-
-    <script type="text/x-template" id="checkout-template">
-
-        <div>
-            @include('shop::customers.checkout.common.common')
-
-            <div v-if="customer">
-                @include('shop::customers.checkout.ship-method')
-            </div>
-            <div v-if="!customer">
-                @include('shop::customers.checkout.guest')
-            </div>
-        </div>
-
-    </script>
-
-    <script>
-
-        Vue.component('checkout', {
-
-            props: ['customer'],
-
-            data: () => ({
-                isGuest:true,
-                isShip:false,
-                disabled: 0,
-                isShipMethod:false
-            }),
-
-            template: '#checkout-template',
-
-            mounted () {
-
-                if(this.customer){
-                    this.isShip=true;
-                }else{
-                    this.isGuest=true;
-                    this.disabled=1;
-                }
-            } ,
-
-            methods: {
-                count () {
-                    this.isShipMethod=true;
-                }
-            }
-
-        })
-
-    </script>
-
-
-
-@endpush
-
-
-
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/payment-method.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/payment-method.blade.php
deleted file mode 100644
index 5eda20d85..000000000
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/payment-method.blade.php
+++ /dev/null
@@ -1,57 +0,0 @@
-
-@extends('shop::layouts.master')
-
-@section('content-wrapper')
-
-@include('shop::customers.checkout.common.common')
-
-<div class="payment-method">
-    <div class="payment-info">
-        <span class="payment-text">
-            Payment Method
-        </span>
-    </div>
-
-    <div class="payment-price">
-        <div class="payment-checkbox">
-            <img src="{{asset('themes/default/assets/images/unselected.svg')}}" />
-            <span> Cash on Delivery</span>
-        </div>
-        <div class="payment-checkbox-text">
-            <b>Fadex - </b>
-            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</span>
-        </div>
-    </div>
-
-    <div class="payment-price">
-        <div class="payment-checkbox">
-            <img src="{{asset('themes/default/assets/images/selected.svg')}}" />
-            <span> Net Banking</span>
-        </div>
-        <div class="payment-checkbox-text">
-            <b>Fadex - </b>
-            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</span>
-        </div>
-    </div>
-
-    <div class="payment-price">
-        <div class="payment-checkbox">
-            <img src="{{asset('themes/default/assets/images/unselected.svg')}}" />
-            <span> Debit / Credit Card</span>
-        </div>
-        <div class="payment-checkbox-text">
-            <b>Fadex - </b>
-            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</span>
-        </div>
-    </div>
-
-
-    <div class="horizontal-rule">
-    </div>
-
-    <div class="countinue-button">
-        <button>CONTINUE</button>
-    </div>
-</div>
-
-@endsection
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/ship-method.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/ship-method.blade.php
deleted file mode 100644
index b0303e15d..000000000
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/ship-method.blade.php
+++ /dev/null
@@ -1,52 +0,0 @@
-
-
-<div class="ship-method">
-    <div class="ship-info">
-        <span class="ship-text">
-            Shipment Method
-        </span>
-    </div>
-
-    <div class="ship-price">
-        <div class="price-checkbox">
-            {{--  <img src="{{asset('themes/default/assets/images/selected.svg')}}" />  --}}
-            <input type="radio" name="gender" value="male" checked>
-            <span> $ 25.00 </span>
-        </div>
-        <div class="price-checkbox-text">
-            <b>Fadex - </b>
-            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</span>
-        </div>
-    </div>
-
-    <div class="ship-price">
-        <div class="price-checkbox">
-            <img src="{{asset('themes/default/assets/images/unselected.svg')}}" />
-            <span> $ 25.00 </span>
-        </div>
-        <div class="price-checkbox-text">
-            <b>Fadex - </b>
-            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</span>
-        </div>
-    </div>
-
-    <div class="ship-price">
-        <div class="price-checkbox">
-            <img src="{{asset('themes/default/assets/images/unselected.svg')}}" />
-            <span> $ 25.00 </span>
-        </div>
-        <div class="price-checkbox-text">
-            <b>Fadex - </b>
-            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</span>
-        </div>
-    </div>
-
-
-    <div class="horizontal-rule">
-    </div>
-
-    <div class="countinue-button">
-        <button>CONTINUE</button>
-    </div>
-</div>
-
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/checkout/signin.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/checkout/signin.blade.php
deleted file mode 100644
index 6d550259e..000000000
--- a/packages/Webkul/Shop/src/Resources/views/customers/checkout/signin.blade.php
+++ /dev/null
@@ -1,40 +0,0 @@
-
-@extends('shop::layouts.master')
-
-@section('content-wrapper')
-
-@include('shop::customers.checkout.common')
-
-<div class="signin-form">
-    <div class="signin-guest">
-        <span class="signin-text">
-            Sign In
-        </span>
-        <button class="order-button">
-            ORDER AS GUEST
-        </button>
-    </div>
-
-    <div class="control-group">
-        <label for="first_name">Email </label>
-        <input type="text" class="control" name="email_address">
-    </div>
-
-    <div class="control-group">
-        <label for="first_name">Password </label>
-        <input type="text" class="control" name="first_name">
-    </div>
-
-    <div class="forgot-pass">
-        <span>Forgot Password</span>
-    </div>
-
-    <div class="horizontal-rule">
-    </div>
-
-    <div class="countinue-button">
-        <button>CONTINUE</button>
-    </div>
-</div>
-
-@endsection
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
index 143fc99f6..129790e8b 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
@@ -21,6 +21,8 @@
 
     <div id="app">
 
+        <flash-wrapper ref='flashes'></flash-wrapper>
+
         <div class="main-container-wrapper">
 
             @include('shop::layouts.header.index')
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 660585c3c..d341e82b8 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -55,6 +55,18 @@
   height: 24px;
 }
 
+.shipping-icon {
+  background-image: url("../images/shipping.svg");
+  width: 32px;
+  height: 32px;
+}
+
+.payment-icon {
+  background-image: url("../images/payment.svg");
+  width: 32px;
+  height: 32px;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -289,7 +301,6 @@ body {
   margin-right: auto;
   border-top: 1px solid lightgrey;
   border-bottom: 1px solid lightgrey;
-  font-size: 16px;
   display: block;
   /* submenu positioning*/
 }
@@ -462,8 +473,8 @@ body {
     display: none;
   }
   .header .search-suggestion .search-content {
-    border-top: 1px solid #e8e8e8;
-    border-bottom: 1px solid #e8e8e8;
+    border-top: 1px solid #c7c7c7;
+    border-bottom: 1px solid #c7c7c7;
     height: 48px;
   }
   .header .search-suggestion .search-content .icon.search-icon {
@@ -471,8 +482,6 @@ body {
     margin-top: 12px;
   }
   .header .search-suggestion .search-content span {
-    font-size: 16px;
-    color: #242424;
     margin-bottom: -7px;
     margin-left: 5px;
   }
@@ -484,11 +493,9 @@ body {
     margin-top: 14px;
     height: 32px;
     margin-bottom: 14px;
-    border-bottom: 1px solid #e8e8e8;
+    border-bottom: 1px solid #c7c7c7;
   }
   .header .search-suggestion .suggestion span {
-    font-size: 16px;
-    color: #242424;
     margin-left: 48px;
   }
   .header .header-bottom {
@@ -506,7 +513,7 @@ body {
   }
   .header .header-bottom .nav > li {
     float: none;
-    border-bottom: 1px solid #e8e8e8;
+    border-bottom: 1px solid #c7c7c7;
   }
   .header .header-bottom .nav > li a {
     margin-left: 10px;
@@ -517,13 +524,12 @@ body {
     margin-right: 5px;
   }
   .header .header-bottom .nav > li:first-child {
-    border-top: 1px solid #e8e8e8;
+    border-top: 1px solid #c7c7c7;
   }
   .header .header-bottom .nav > li:last-child {
     float: none;
   }
   .header .header-bottom .nav > li:last-child span {
-    font-size: 16px;
     color: #FF6472;
     letter-spacing: -0.38px;
   }
@@ -628,7 +634,7 @@ body {
   }
   .header .header-bottom .nav > li {
     float: none;
-    border-bottom: 1px solid #e8e8e8;
+    border-bottom: 1px solid #c7c7c7;
   }
   .header .header-bottom .nav > li a {
     margin-left: 10px;
@@ -639,13 +645,12 @@ body {
     margin-right: 5px;
   }
   .header .header-bottom .nav > li:first-child {
-    border-top: 1px solid #e8e8e8;
+    border-top: 1px solid #c7c7c7;
   }
   .header .header-bottom .nav > li:last-child {
     float: none;
   }
   .header .header-bottom .nav > li:last-child span {
-    font-size: 16px;
     color: #FF6472;
     letter-spacing: -0.38px;
   }
@@ -744,7 +749,7 @@ section.slider-block div.slider-content div.slider-control {
 }
 
 section.slider-block div.slider-content div.slider-control .dark-left-icon {
-  background-color: #ffffff;
+  background-color: #f2f2f2;
   height: 48px;
   width: 48px;
   max-height: 100%;
@@ -752,7 +757,7 @@ section.slider-block div.slider-content div.slider-control .dark-left-icon {
 }
 
 section.slider-block div.slider-content div.slider-control .light-right-icon {
-  background-color: black;
+  background-color: #000;
   height: 48px;
   width: 48px;
   max-height: 100%;
@@ -767,20 +772,18 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .layered-filter-wrapper .filter-title {
-  border-bottom: 1px solid #E8E8E8;
-  font-size: 16px;
+  border-bottom: 1px solid #c7c7c7;
   color: #242424;
   padding: 10px 0;
 }
 
 .layered-filter-wrapper .filter-attributes .filter-attributes-item {
-  border-bottom: 1px solid #E8E8E8;
+  border-bottom: 1px solid #c7c7c7;
   padding-bottom: 10px;
 }
 
 .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title {
   padding: 10px 40px 0 10px;
-  font-size: 16px;
   color: #5E5E5E;
   cursor: pointer;
   position: relative;
@@ -788,7 +791,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 
 .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link {
   font-weight: 400;
-  color: #0031F0;
+  color: #0031f0;
   margin-right: 10px;
 }
 
@@ -814,7 +817,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 
 .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-content ol.items li.item {
   padding: 8px 0;
-  font-size: 16px;
   color: #5E5E5E;
 }
 
@@ -893,7 +895,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .main-container-wrapper .product-card .product-name {
-  font-size: 16px;
   margin-bottom: 14px;
   width: 100%;
   color: #242424;
@@ -904,7 +905,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .main-container-wrapper .product-card .product-description {
-  font-size: 16px;
   margin-bottom: 14px;
   display: none;
 }
@@ -991,7 +991,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .main-container-wrapper .top-toolbar .pager label {
-  font-size: 16px;
   margin-right: 5px;
 }
 
@@ -999,7 +998,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   background: #FFFFFF;
   border: 1px solid #C7C7C7;
   border-radius: 3px;
-  font-size: 16px;
   color: #242424;
   padding: 10px;
 }
@@ -1146,7 +1144,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
     font-size: 12px;
   }
   .main-container-wrapper .top-toolbar {
-    border-bottom: 1px solid #E8E8E8;
+    border-bottom: 1px solid #c7c7c7;
     margin-bottom: 10px;
   }
   .main-container-wrapper .top-toolbar .page-info span:first-child {
@@ -1182,7 +1180,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
     background: #FFFFFF;
     border: 1px solid #C7C7C7;
     border-radius: 3px;
-    font-size: 16px;
     color: #242424;
     padding: 10px;
   }
@@ -1221,7 +1218,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
     font-size: 12px;
   }
   .main-container-wrapper .top-toolbar {
-    border-bottom: 1px solid #E8E8E8;
+    border-bottom: 1px solid #c7c7c7;
     margin-bottom: 10px;
   }
   .main-container-wrapper .top-toolbar .page-info span:first-child {
@@ -1257,7 +1254,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
     background: #FFFFFF;
     border: 1px solid #C7C7C7;
     border-radius: 3px;
-    font-size: 16px;
     color: #242424;
     padding: 10px;
   }
@@ -1267,7 +1263,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .product-price {
-  font-size: 16px;
   margin-bottom: 14px;
   width: 100%;
   font-weight: 600;
@@ -1279,14 +1274,12 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .product-price .regular-price {
-  font-size: 16px;
   color: #A5A5A5;
   text-decoration: line-through;
   margin-right: 10px;
 }
 
 .product-price .special-price {
-  font-size: 16px;
   color: #FF6472;
 }
 
@@ -1308,7 +1301,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .footer .footer-content .footer-list-container .list-container .list-heading {
-  font-size: 16px;
   letter-spacing: -0.26px;
   text-transform: uppercase;
   color: #a5a5a5;
@@ -1320,7 +1312,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 
 .footer .footer-content .footer-list-container .list-container .list-group li {
   margin-bottom: 12px;
-  color: #242424;
   list-style-type: none;
   text-transform: uppercase;
 }
@@ -1359,7 +1350,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .footer .footer-content .footer-list-container .list-container .form-container .control-group .btn-primary {
-  background-color: black;
+  background-color: #000;
   margin-top: 8px;
   border-radius: 0px;
   text-align: center;
@@ -1387,7 +1378,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  background: #ffffff;
+  background: #f2f2f2;
   border: 1px solid #c7c7c7;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
@@ -1463,17 +1454,15 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  border: 1px solid #e8e8e8;
-  background: #ffffff;
+  border: 1px solid #c7c7c7;
+  background: #f2f2f2;
   width: 25%;
   height: 100%;
   text-transform: capitalize;
-  font-size: 16px;
   color: #5e5e5e;
 }
 
 .account-content .account-side-menu li {
-  font-size: 16px;
   width: 95%;
   height: 50px;
   margin-left: 5%;
@@ -1532,11 +1521,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #e8e8e8;
+  background: #c7c7c7;
 }
 
 .account-content .profile-content {
-  font-size: 16px;
   color: #5e5e5e;
   margin-top: 1.4%;
 }
@@ -1567,7 +1555,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  background: #ffffff;
+  background: #f2f2f2;
   border: 1px solid #c7c7c7;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
@@ -1578,7 +1566,6 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 section.product-detail {
-  font-size: 16px;
   color: #242424;
 }
 
@@ -1794,7 +1781,6 @@ section.product-detail div.layouter form .details .full-specifications td:first-
 }
 
 section.product-detail div.layouter form .details .accordian .accordian-header {
-  font-size: 16px;
   padding-left: 0;
   font-weight: 600;
 }
@@ -1809,10 +1795,6 @@ section.product-detail div.layouter form .details .attributes {
   border-bottom: solid 1px rgba(162, 162, 162, 0.2);
 }
 
-section.product-detail div.layouter form .details .full-description {
-  font-size: 16px;
-}
-
 @media all and (max-width: 480px) {
   section.product-detail div.category-breadcrumbs {
     display: none;
@@ -1855,7 +1837,7 @@ section.product-detail div.layouter form .details .full-description {
   section.product-detail div.layouter form .details {
     width: 100%;
     margin-top: 20px;
-    border-bottom: 1px solid #e8e8e8e8;
+    border-bottom: 1px solid #c7c7c7;
   }
   section.product-detail div.layouter form .details .attributes {
     border-bottom: none;
@@ -1904,7 +1886,7 @@ section.product-detail div.layouter form .details .full-description {
   section.product-detail div.layouter form .details {
     width: 100%;
     margin-top: 20px;
-    border-bottom: 1px solid #e8e8e8e8;
+    border-bottom: 1px solid #c7c7c7;
   }
   section.product-detail div.layouter form .details .attributes {
     border-bottom: none;
@@ -1980,7 +1962,6 @@ section.product-detail div.layouter form .details .full-description {
 /* cart pages and elements css begins here */
 section.cart {
   color: #242424;
-  font-size: 16px;
   margin-bottom: 80px;
 }
 
@@ -2000,12 +1981,115 @@ section.cart .cart-content {
           flex-direction: row;
 }
 
-section.cart .cart-content .left-side {
+.cart .left-side {
   width: 68.6%;
   margin-right: 2.4%;
 }
 
-section.cart .cart-content .left-side .item {
+.cart .right-side {
+  width: 29%;
+  display: block;
+}
+
+.cart .right-side .price-section {
+  width: 100%;
+  padding: 10px 10px 18px 18px;
+  margin-bottom: 20px;
+}
+
+.cart .right-side .price-section .title {
+  font-weight: bold;
+  padding-bottom: 8px;
+  margin-bottom: 10px;
+}
+
+.cart .right-side .price-section .all-item-details {
+  margin-bottom: 17px;
+}
+
+.cart .right-side .price-section .all-item-details .item-details {
+  margin-bottom: 10px;
+}
+
+.cart .right-side .price-section .all-item-details .item-details .price {
+  float: right;
+}
+
+.cart .right-side .price-section .horizontal-rule {
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #c7c7c7;
+}
+
+.cart .right-side .price-section .total-details {
+  margin-top: 10px;
+}
+
+.cart .right-side .price-section .total-details .amount {
+  float: right;
+}
+
+.cart .right-side .coupon-section {
+  padding: 10px 10px 18px 18px;
+}
+
+.cart .right-side .coupon-section .title {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.cart .right-side .coupon-section .control-group {
+  margin-bottom: 12px !important;
+}
+
+.cart .right-side .coupon-section .control-group input.coupon-input::-moz-placeholder {
+  font-family: "montserrat", sans-serif;
+  color: #242424;
+}
+
+.cart .right-side .coupon-section .control-group input.coupon-input::-webkit-input-placeholder {
+  font-family: "montserrat", sans-serif;
+  color: #242424;
+}
+
+.cart .right-side .coupon-section button {
+  margin-bottom: 10px;
+  background-color: #000;
+  border-radius: 0px;
+}
+
+.cart .right-side .coupon-section .coupon-details .coupon {
+  margin-bottom: 8px;
+}
+
+.cart .right-side .coupon-section .coupon-details .coupon .discount {
+  float: right;
+}
+
+.cart .right-side .coupon-section .horizontal-rule {
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #c7c7c7;
+  margin-bottom: 9px;
+}
+
+.cart .right-side .coupon-section .after-coupon-amount .name {
+  font-weight: bold;
+}
+
+.cart .right-side .coupon-section .after-coupon-amount .amount {
+  float: right;
+  font-weight: bold;
+}
+
+.cart-item-list {
+  margin-top: 21px;
+  padding: 1px;
+}
+
+.cart-item-list .item {
   padding: 1.1%;
   margin-bottom: 20px;
   display: -webkit-box;
@@ -2017,12 +2101,12 @@ section.cart .cart-content .left-side .item {
           flex-direction: row;
 }
 
-section.cart .cart-content .left-side .item .item-image {
+.cart-item-list .item .item-image {
   height: 160px;
   width: 160px;
 }
 
-section.cart .cart-content .left-side .item .item-details {
+.cart-item-list .item .item-details {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -2032,35 +2116,35 @@ section.cart .cart-content .left-side .item .item-details {
           flex-direction: column;
 }
 
-section.cart .cart-content .left-side .item .item-details .item-title {
+.cart-item-list .item .item-details .item-title {
   font-size: 18px;
   margin-bottom: 10px;
 }
 
-section.cart .cart-content .left-side .item .item-details .price {
+.cart-item-list .item .item-details .price {
   margin-bottom: 10px;
 }
 
-section.cart .cart-content .left-side .item .item-details .price .main-price {
+.cart-item-list .item .item-details .price .main-price {
   font-size: 18px;
   margin-right: 4px;
 }
 
-section.cart .cart-content .left-side .item .item-details .price .real-price {
+.cart-item-list .item .item-details .price .real-price {
   margin-right: 4px;
   -webkit-text-decoration-line: line-through;
           text-decoration-line: line-through;
 }
 
-section.cart .cart-content .left-side .item .item-details .price .discount {
+.cart-item-list .item .item-details .price .discount {
   color: #FF6472;
 }
 
-section.cart .cart-content .left-side .item .item-details .summary {
+.cart-item-list .item .item-details .summary {
   margin-bottom: 17px;
 }
 
-section.cart .cart-content .left-side .item .item-details .misc {
+.cart-item-list .item .item-details .misc {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -2072,12 +2156,12 @@ section.cart .cart-content .left-side .item .item-details .misc {
           justify-content: flex-start;
 }
 
-section.cart .cart-content .left-side .item .item-details .misc div.qty-text {
+.cart-item-list .item .item-details .misc div.qty-text {
   color: #5E5E5E;
   margin-right: 10px;
 }
 
-section.cart .cart-content .left-side .item .item-details .misc div.box {
+.cart-item-list .item .item-details .misc div.box {
   height: 38px;
   width: 60px;
   text-align: center;
@@ -2087,129 +2171,27 @@ section.cart .cart-content .left-side .item .item-details .misc div.box {
   margin-right: 30px;
 }
 
-section.cart .cart-content .left-side .item .item-details .misc .remove {
-  color: #0031F0;
+.cart-item-list .item .item-details .misc .remove {
+  color: #0031f0;
   margin-right: 30px;
 }
 
-section.cart .cart-content .left-side .item .item-details .misc .towishlist {
-  color: #0031F0;
+.cart-item-list .item .item-details .misc .towishlist {
+  color: #0031f0;
 }
 
-section.cart .cart-content .left-side .misc-controls {
+.cart-item-list .misc-controls {
   float: right;
 }
 
-section.cart .cart-content .left-side .misc-controls span {
+.cart-item-list .misc-controls span {
   margin-right: 15px;
 }
 
-section.cart .cart-content .left-side .misc-controls button {
+.cart-item-list .misc-controls button {
   border-radius: 0px;
 }
 
-section.cart .cart-content .right-side {
-  width: 29%;
-  display: block;
-}
-
-section.cart .cart-content .right-side .price-section {
-  width: 100%;
-  padding: 10px 10px 18px 18px;
-  margin-bottom: 20px;
-}
-
-section.cart .cart-content .right-side .price-section .title {
-  font-size: 16px;
-  font-weight: bold;
-  padding-bottom: 8px;
-  margin-bottom: 10px;
-}
-
-section.cart .cart-content .right-side .price-section .all-item-details {
-  margin-bottom: 17px;
-}
-
-section.cart .cart-content .right-side .price-section .all-item-details .item-details {
-  margin-bottom: 10px;
-}
-
-section.cart .cart-content .right-side .price-section .all-item-details .item-details .price {
-  float: right;
-}
-
-section.cart .cart-content .right-side .price-section .horizontal-rule {
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-section.cart .cart-content .right-side .price-section .total-details {
-  margin-top: 10px;
-}
-
-section.cart .cart-content .right-side .price-section .total-details .amount {
-  float: right;
-}
-
-section.cart .cart-content .right-side .coupon-section {
-  padding: 10px 10px 18px 18px;
-}
-
-section.cart .cart-content .right-side .coupon-section .title {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-section.cart .cart-content .right-side .coupon-section .control-group {
-  margin-bottom: 12px !important;
-}
-
-section.cart .cart-content .right-side .coupon-section .control-group input.coupon-input::-moz-placeholder {
-  font-family: "montserrat", sans-serif;
-  font-size: 16px;
-  color: #242424;
-}
-
-section.cart .cart-content .right-side .coupon-section .control-group input.coupon-input::-webkit-input-placeholder {
-  font-family: "montserrat", sans-serif;
-  font-size: 16px;
-  color: #242424;
-}
-
-section.cart .cart-content .right-side .coupon-section button {
-  margin-bottom: 10px;
-  background-color: black;
-  border-radius: 0px;
-}
-
-section.cart .cart-content .right-side .coupon-section .coupon-details .coupon {
-  margin-bottom: 8px;
-}
-
-section.cart .cart-content .right-side .coupon-section .coupon-details .coupon .discount {
-  float: right;
-}
-
-section.cart .cart-content .right-side .coupon-section .horizontal-rule {
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-  margin-bottom: 9px;
-}
-
-section.cart .cart-content .right-side .coupon-section .after-coupon-amount .name {
-  font-weight: bold;
-}
-
-section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amount {
-  float: right;
-  font-weight: bold;
-}
-
 .attached-products-wrapper {
   margin-bottom: 80px;
 }
@@ -2273,7 +2255,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
 
 .order .order-section-head .order-number {
   font-size: 28px;
-  color: #242424;
   text-transform: capitalize;
   text-align: left;
 }
@@ -2301,7 +2282,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #e8e8e8;
+  background: #c7c7c7;
 }
 
 .order .order-section-head-small {
@@ -2309,7 +2290,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
 }
 
 .order .payment-place {
-  font-size: 16px;
   color: #5e5e5e;
   margin-top: 1.4%;
 }
@@ -2331,7 +2311,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
 .order .payment-place .placed-on .place-text span {
   color: #5E5E5E;
   letter-spacing: -0.12px;
-  font-size: 16px;
 }
 
 .order .payment-place .placed-on .place-text .processing {
@@ -2341,7 +2320,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
 .order .payment-place .placed-on .place-date span {
   color: #5E5E5E;
   letter-spacing: -0.12px;
-  font-size: 16px;
 }
 
 .order .payment-place .payment-status {
@@ -2362,13 +2340,11 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
 .order .payment-place .payment-status .payment-text span {
   color: #5E5E5E;
   letter-spacing: -0.12px;
-  font-size: 16px;
 }
 
 .order .payment-place .payment-status .status span {
   color: #5E5E5E;
   letter-spacing: -0.12px;
-  font-size: 16px;
 }
 
 .order .payment-place .horizontal-rule {
@@ -2376,7 +2352,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #e8e8e8;
+  background: #c7c7c7;
 }
 
 .order .order-details {
@@ -2510,7 +2486,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #e8e8e8;
+  background: #c7c7c7;
 }
 
 .order .order-information {
@@ -2537,7 +2513,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
 }
 
 .order .order-information p {
-  font-size: 16px;
   color: #3A3A3A;
 }
 
@@ -2564,8 +2539,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   }
   .order .order-section-head-small .order-number {
     text-align: center;
-    font-size: 16px;
-    color: #242424;
     letter-spacing: -0.38px;
     text-align: center;
     margin-top: 13px;
@@ -2575,19 +2548,18 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
     float: right;
     text-align: right;
     font-size: 17px;
-    color: #0031F0;
+    color: #0031f0;
     letter-spacing: -0.11px;
     margin-top: 13px;
     margin-bottom: 13px;
   }
   .order .order-section-head-small .horizon-rule {
-    border: .5px solid #E8E8E8;
+    border: 0.5px solid #c7c7c7;
     width: 150%;
     margin-left: -10%;
     margin-right: -10%;
   }
   .order .payment-place {
-    font-size: 16px;
     color: #5e5e5e;
     margin-top: 4%;
   }
@@ -2644,7 +2616,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
     width: 100%;
     height: 1px;
     vertical-align: middle;
-    background: #e8e8e8;
+    background: #c7c7c7;
   }
   .order .order-details {
     display: none;
@@ -2715,7 +2687,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
     display: none;
   }
   .order .product-config {
-    border: 1px solid #E8E8E8;
+    border: 1px solid #c7c7c7;
     height: 19%;
     width: 100%;
     margin-top: 10px;
@@ -2745,7 +2717,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
     width: 50%;
   }
   .order .product-config .product-attribute .property-name span {
-    font-size: 16px;
     color: #5E5E5E;
     letter-spacing: -0.11px;
   }
@@ -2792,8 +2763,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   }
   .order .order-section-head-small .order-number {
     text-align: center;
-    font-size: 16px;
-    color: #242424;
     letter-spacing: -0.38px;
     text-align: center;
     margin-top: 13px;
@@ -2803,19 +2772,18 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
     float: right;
     text-align: right;
     font-size: 17px;
-    color: #0031F0;
+    color: #0031f0;
     letter-spacing: -0.11px;
     margin-top: 13px;
     margin-bottom: 13px;
   }
   .order .order-section-head-small .horizon-rule {
-    border: .5px solid #E8E8E8;
+    border: 0.5px solid #c7c7c7;
     width: 150%;
     margin-left: -10%;
     margin-right: -10%;
   }
   .order .payment-place {
-    font-size: 16px;
     color: #5e5e5e;
     margin-top: 4%;
   }
@@ -2872,7 +2840,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
     width: 100%;
     height: 1px;
     vertical-align: middle;
-    background: #e8e8e8;
+    background: #c7c7c7;
   }
   .order .order-details {
     display: none;
@@ -2943,7 +2911,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
     display: none;
   }
   .order .product-config {
-    border: 1px solid #E8E8E8;
+    border: 1px solid #c7c7c7;
     height: 19%;
     width: 100%;
     margin-top: 10px;
@@ -2973,7 +2941,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
     width: 50%;
   }
   .order .product-config .product-attribute .property-name span {
-    font-size: 16px;
     color: #5E5E5E;
     letter-spacing: -0.11px;
   }
@@ -3025,7 +2992,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
           justify-content: space-between;
   width: 100%;
   padding-bottom: 15px;
-  border-bottom: 1px solid #E8E8E8;
+  border-bottom: 1px solid #c7c7c7;
 }
 
 .checkout-process .col-main ul.checkout-steps li {
@@ -3043,7 +3010,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border: 1px solid #E8E8E8;
+  border: 1px solid #c7c7c7;
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -3076,7 +3043,6 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   margin-left: 7px;
   margin-top: auto;
   margin-bottom: auto;
-  font-size: 16px;
 }
 
 .checkout-process .col-main ul.checkout-steps li.active {
@@ -3105,7 +3071,7 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
 }
 
 .checkout-process .col-main .step-content .form-container {
-  border-bottom: 1px solid #E8E8E8;
+  border-bottom: 1px solid #c7c7c7;
   padding-top: 20px;
   padding-bottom: 20px;
 }
@@ -3122,718 +3088,125 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   margin-left: 28px;
 }
 
+.checkout-process .col-main .step-content .address {
+  display: inline-block;
+  width: 100%;
+}
+
+.checkout-process .col-main .step-content .address .address-card {
+  width: 50%;
+}
+
+.checkout-process .col-main .step-content .address .address-card.left {
+  float: left;
+}
+
+.checkout-process .col-main .step-content .address .address-card.right {
+  float: right;
+}
+
+.checkout-process .col-main .step-content .address .address-card .card-title span {
+  font-weight: 600;
+}
+
+.checkout-process .col-main .step-content .address .address-card .card-content {
+  margin-top: 15px;
+  color: #121212;
+  line-height: 25px;
+}
+
+.checkout-process .col-main .step-content .address .address-card .card-content .horizontal-rule {
+  margin: 12px 0;
+  display: block;
+  width: 25px;
+  background: #121212;
+}
+
+.checkout-process .col-main .step-content .cart-item-list .item {
+  border: 1px solid #c7c7c7;
+  border-radius: 3px;
+  padding: 20px;
+}
+
+.checkout-process .col-main .step-content .cart-item-list .item .row .title {
+  width: 100px;
+  display: inline-block;
+  color: #5E5E5E;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.checkout-process .col-main .step-content .cart-item-list .item .row .value {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.checkout-process .col-main .step-content .order-description {
+  display: inline-block;
+  width: 100%;
+}
+
+.checkout-process .col-main .step-content .order-description .shipping {
+  margin-bottom: 25px;
+}
+
+.checkout-process .col-main .step-content .order-description .decorator {
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  border: 1px solid #c7c7c7;
+  vertical-align: middle;
+  display: inline-block;
+  text-align: center;
+}
+
+.checkout-process .col-main .step-content .order-description .decorator .icon {
+  margin-top: 7px;
+}
+
+.checkout-process .col-main .step-content .order-description .text {
+  font-weight: 600;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.checkout-process .col-main .step-content .order-description .text .info {
+  font-weight: 500;
+  margin-top: 2px;
+}
+
 .checkout-process .col-right {
   width: 35%;
   padding-left: 40px;
 }
 
-.checkout-process .col-right .order-summary .price span {
-  margin-left: 3px;
+.checkout-process .order-summary h3 {
   font-size: 16px;
-  color: #242424;
-  font-weight: bold;
 }
 
-.checkout-process .col-right .order-summary .item-detail {
+.checkout-process .order-summary .item-detail {
   margin-top: 12px;
 }
 
-.checkout-process .col-right .order-summary .item-detail span {
-  margin-left: 3px;
-}
-
-.checkout-process .col-right .order-summary .item-detail span label {
-  font-size: 16px;
-  color: #242424;
-}
-
-.checkout-process .col-right .order-summary .item-detail span .right {
-  float: right;
-  font-size: 16px;
-  color: #242424;
-}
-
-.checkout-process .col-right .order-summary .horizontal-rule {
-  margin-top: 6%;
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-.checkout-process .col-right .order-summary .payble-amount {
-  margin-top: 12px;
-}
-
-.checkout-process .col-right .order-summary .payble-amount span {
-  margin-left: 3px;
-  font-weight: bold;
-}
-
-.checkout-process .col-right .order-summary .payble-amount span label {
-  font-size: 16px;
-  color: #242424;
-  font-weight: bold;
-}
-
-.checkout-process .col-right .order-summary .payble-amount span .right {
-  float: right;
-  font-size: 16px;
-  color: #242424;
-}
-
-@media all and (max-width: 480px) {
-  .checkout-process {
-    width: 100%;
-    margin-top: 3%;
-  }
-  .checkout-process .left-side {
-    width: 100%;
-    margin-right: 0%;
-    height: 60px;
-  }
-  .checkout-process .left-side .checkout-menu {
-    width: 100%;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail {
-    height: 60px;
-    width: 100%;
-    padding: 5px;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
-    height: 48px;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
-    display: none;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
-    margin-top: 23px;
-    width: 100%;
-    margin-left: 5px;
-    margin-right: 5px;
-    border: 1px solid #E7E7E7;
-    height: 1px;
-  }
-  .checkout-process .left-side .checkout-menu .horizontal-rule {
-    display: none;
-  }
-  .checkout-process .right-side {
-    display: none;
-  }
-  .order-info {
-    width: 100%;
-    margin-right: 0%;
-    margin-top: 10px;
-    height: 50px;
-  }
-  .order-info .control-group .control {
-    width: 100%;
-  }
-  .order-info .different-billing-addr {
-    margin-top: 5%;
-  }
-  .order-info .horizontal-rule {
-    margin-top: 10%;
-  }
-  .order-info .countinue-button {
-    margin-top: 8%;
-  }
-}
-
-@media all and (min-width: 481px) and (max-width: 920px) {
-  .checkout-process {
-    width: 100%;
-    margin-top: 3%;
-  }
-  .checkout-process .left-side {
-    width: 100%;
-    margin-right: 0%;
-    height: 60px;
-  }
-  .checkout-process .left-side .checkout-menu {
-    width: 100%;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail {
-    height: 60px;
-    width: 100%;
-    padding: 5px;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
-    height: 48px;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
-    display: none;
-  }
-  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
-    margin-top: 23px;
-    width: 100%;
-    margin-left: 10px;
-    margin-right: 10px;
-    border: 1px solid #E7E7E7;
-    height: 1px;
-  }
-  .checkout-process .left-side .checkout-menu .horizontal-rule {
-    display: none;
-  }
-  .checkout-process .right-side {
-    display: none;
-  }
-  .order-info {
-    width: 100%;
-    margin-right: 0%;
-    margin-top: 10px;
-    height: 50px;
-  }
-  .order-info .control-group .control {
-    width: 100%;
-  }
-  .order-info .different-billing-addr {
-    margin-top: 3%;
-  }
-  .order-info .horizontal-rule {
-    margin-top: 10%;
-  }
-  .order-info .countinue-button {
-    margin-top: 5%;
-  }
-}
-
-.ship-method {
-  width: 67%;
-  margin-right: 6%;
-  height: 600px;
-  margin-top: -190px;
-}
-
-.ship-method .ship-info .ship-text {
-  font-size: 24px;
-  color: #242424;
-  letter-spacing: -0.58px;
-  font-weight: bold;
-}
-
-.ship-method .ship-price {
-  margin-top: 31px;
-}
-
-.ship-method .ship-price .price-checkbox {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.ship-method .ship-price .price-checkbox span {
-  margin-left: 8px;
-  font-size: 16px;
-  color: #242424;
-  line-height: 22px;
-  font-weight: bold;
-}
-
-.ship-method .ship-price .price-checkbox-text {
-  margin-left: 25px;
-  width: 580px;
-  height: 44px;
-  margin-top: 4px;
-}
-
-.ship-method .ship-price .price-checkbox-text b {
-  font-size: 16px;
-}
-
-.ship-method .ship-price .price-checkbox-text span {
-  font-size: 16px;
-  color: #242424;
-  line-height: 22px;
-}
-
-.ship-method .horizontal-rule {
-  margin-top: 7%;
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-.ship-method .countinue-button {
-  margin-top: 3%;
-}
-
-.ship-method .countinue-button button {
-  background: #0031F0;
-  font-size: 14px;
-  color: #FFFFFF;
-  letter-spacing: -0.26px;
-  text-align: center;
-  height: 38px;
-  width: 137px;
-  border: none;
-}
-
-.payment-method {
-  width: 67%;
-  margin-right: 6%;
-  height: 600px;
-  margin-top: -190px;
-}
-
-.payment-method .payment-info .payment-text {
-  font-size: 24px;
-  color: #242424;
-  letter-spacing: -0.58px;
-  font-weight: bold;
-}
-
-.payment-method .payment-price {
-  margin-top: 31px;
-}
-
-.payment-method .payment-price .payment-checkbox {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.payment-method .payment-price .payment-checkbox span {
-  margin-left: 8px;
-  font-size: 16px;
-  color: #242424;
-  line-height: 22px;
-  font-weight: bold;
-}
-
-.payment-method .payment-price .payment-checkbox-text {
-  margin-left: 25px;
-  width: 580px;
-  height: 44px;
-  margin-top: 4px;
-}
-
-.payment-method .payment-price .payment-checkbox-text b {
-  font-size: 16px;
-}
-
-.payment-method .payment-price .payment-checkbox-text span {
-  font-size: 16px;
-  color: #242424;
-  line-height: 22px;
-}
-
-.payment-method .horizontal-rule {
-  margin-top: 7%;
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-.payment-method .countinue-button {
-  margin-top: 3%;
-}
-
-.payment-method .countinue-button button {
-  background: #0031F0;
-  font-size: 14px;
-  color: #FFFFFF;
-  letter-spacing: -0.26px;
-  text-align: center;
-  height: 38px;
-  width: 137px;
-  border: none;
-}
-
-.payment-method .countinue-button button .horizontal-rule {
-  margin-top: 7%;
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-.payment-method .countinue-button button .horizontal-rule {
-  margin-top: 7%;
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-.complete-page {
-  width: 880px;
-  height: 1050px;
-}
-
-.complete-page .order-summary span {
-  font-size: 24px;
-  color: #242424;
-  font-weight: bold;
-  letter-spacing: -0.58px;
-}
-
-.complete-page .address {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  margin-top: 30px;
-}
-
-.complete-page .address .shipping-address {
-  height: 100px;
-  width: 415px;
-}
-
-.complete-page .address .shipping-address .shipping-title span {
-  font-weight: bold;
-  font-size: 16px;
-  color: #242424;
-}
-
-.complete-page .address .shipping-address .shipping-content {
-  margin-top: 15px;
-  width: 175px;
-}
-
-.complete-page .address .shipping-address .shipping-content .addr {
-  margin-top: 5px;
-}
-
-.complete-page .address .shipping-address .shipping-content .addr span {
-  font-size: 16px;
-  color: #121212;
-}
-
-.complete-page .address .shipping-address .shipping-content .horizontal-rule {
-  margin-top: 7%;
-  width: 25px;
-  height: 1px;
-  vertical-align: middle;
-  background: #121212;
-}
-
-.complete-page .address .shipping-address .shipping-content .contact {
-  margin-top: 10px;
-}
-
-.complete-page .address .shipping-address .shipping-content .contact span {
-  font-size: 16px;
-  color: #121212;
-}
-
-.complete-page .address .billing-address {
-  width: 415px;
-}
-
-.complete-page .address .billing-address .shipping-title span {
-  font-weight: bold;
-  font-size: 16px;
-  color: #242424;
-}
-
-.complete-page .address .billing-address .shipping-content {
-  margin-top: 15px;
-  width: 175px;
-}
-
-.complete-page .address .billing-address .shipping-content .addr {
-  margin-top: 5px;
-}
-
-.complete-page .address .billing-address .shipping-content .addr span {
-  font-size: 16px;
-  color: #121212;
-}
-
-.complete-page .address .billing-address .shipping-content .horizontal-rule {
-  margin-top: 7%;
-  width: 25px;
-  height: 1px;
-  vertical-align: middle;
-  background: #121212;
-}
-
-.complete-page .address .billing-address .shipping-content .contact {
-  margin-top: 10px;
-}
-
-.complete-page .address .billing-address .shipping-content .contact span {
-  font-size: 16px;
-  color: #121212;
-}
-
-.complete-page .product-detail {
-  height: 200px;
-  border: 1px solid #E8E8E8;
-  border-radius: 3px;
-  margin-top: 30px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  margin-top: 30px;
-}
-
-.complete-page .product-detail .product-image {
-  margin: 20px 0px 20px 20px;
-}
-
-.complete-page .product-detail .product-image img {
-  height: 160px;
-  width: 160px;
-}
-
-.complete-page .product-detail .product-desc {
-  margin-top: 20px;
-  margin-left: 10px;
-}
-
-.complete-page .product-detail .product-desc .product-title span {
-  font-size: 18px;
-  color: #242424;
-  letter-spacing: -0.43px;
-  font-weight: bold;
-}
-
-.complete-page .product-detail .product-desc .price {
-  margin-top: 11px;
-}
-
-.complete-page .product-detail .product-desc .price span label {
-  font-size: 16px;
-  color: #5E5E5E;
-}
-
-.complete-page .product-detail .product-desc .price span label.bold {
-  margin-left: 45px;
-  font-weight: bold;
-  font-size: 18px;
-  color: #242424;
-}
-
-.complete-page .product-detail .product-desc .quantity {
-  margin-top: 11px;
-}
-
-.complete-page .product-detail .product-desc .quantity span label {
-  font-size: 16px;
-  color: #5E5E5E;
-}
-
-.complete-page .product-detail .product-desc .quantity span label.quat-bold {
-  margin-left: 15px;
-  font-weight: bold;
-  font-size: 18px;
-  color: #242424;
-}
-
-.complete-page .product-detail .product-desc .pro-attribute {
-  width: 413px;
-  margin-top: 14px;
-}
-
-.complete-page .product-detail .product-desc .pro-attribute span {
-  font-size: 16px;
-  color: #242424;
-}
-
-.complete-page .order-description {
-  height: 140px;
-  border-radius: 3px;
-  margin-top: 30px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
-
-.complete-page .order-description .payment .shipping {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-
-.complete-page .order-description .payment .shipping .pay-icon {
-  height: 48px;
-  width: 48px;
-  border-radius: 50%;
-  border: 1px solid #E8E8E8;
-}
-
-.complete-page .order-description .payment .shipping .pay-icon img {
-  margin-left: 8px;
-  margin-top: 8px;
-}
-
-.complete-page .order-description .payment .shipping .pay-icon span {
-  margin-left: 10px;
-  font-size: 16px;
-  color: #242424;
-  letter-spacing: -0.38px;
-}
-
-.complete-page .order-description .payment .shipping .shipping-text {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-}
-
-.complete-page .order-description .payment .shipping .shipping-text .price {
-  margin-top: 5px;
-  margin-left: 5px;
-}
-
-.complete-page .order-description .payment .shipping .shipping-text .price span {
-  font-size: 16px;
-  color: #242424;
-  letter-spacing: -0.38px;
-}
-
-.complete-page .order-description .payment .shipping .shipping-text .fedex-shipping {
-  margin-left: 5px;
-}
-
-.complete-page .order-description .payment .shipping .shipping-text .fedex-shipping span {
-  font-size: 16px;
-  color: #242424;
-  letter-spacing: -0.38px;
-}
-
-.complete-page .order-description .payment .net-banking {
-  margin-top: 23px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-
-.complete-page .order-description .payment .net-banking .pay-icon {
-  height: 48px;
-  width: 48px;
-  border-radius: 50%;
-  border: 1px solid #E8E8E8;
-}
-
-.complete-page .order-description .payment .net-banking .pay-icon img {
-  margin-left: 8px;
-  margin-top: 8px;
-}
-
-.complete-page .order-description .payment .net-banking span {
-  margin-left: 5px;
-  margin-top: 15px;
-  font-size: 16px;
-  color: #242424;
-  letter-spacing: -0.38px;
-}
-
-.complete-page .order-description .product-bill {
-  height: 200px;
-  width: 300px;
-}
-
-.complete-page .order-description .product-bill .sub-total span {
-  font-size: 16px;
-  color: #242424;
-  letter-spacing: -0.38px;
-}
-
-.complete-page .order-description .product-bill .sub-total .right {
+.checkout-process .order-summary .item-detail label.right {
   float: right;
 }
 
-.complete-page .order-description .product-bill .charge-discount {
-  margin-top: 10px;
+.checkout-process .order-summary .payble-amount {
+  margin-top: 17px;
+  border-top: 1px solid #c7c7c7;
+  padding-top: 12px;
 }
 
-.complete-page .order-description .product-bill .charge-discount span {
-  font-size: 16px;
-  color: #242424;
-  letter-spacing: -0.38px;
+.checkout-process .order-summary .payble-amount label {
+  font-weight: bold;
 }
 
-.complete-page .order-description .product-bill .charge-discount .right {
+.checkout-process .order-summary .payble-amount label.right {
   float: right;
 }
 
-.complete-page .order-description .product-bill .horizontal-rule {
-  margin-top: 5%;
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-.complete-page .order-description .product-bill .amount-pay {
-  margin-top: 15px;
-}
-
-.complete-page .order-description .product-bill .amount-pay span {
-  font-size: 16px;
-  color: #242424;
-  letter-spacing: -0.38px;
-}
-
-.complete-page .order-description .product-bill .amount-pay .right {
-  float: right;
-}
-
-.complete-page .horizontal-rule {
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #e8e8e8;
-}
-
-.complete-page .palce-order-button {
-  margin-top: 30px;
-}
-
-.complete-page .palce-order-button button {
-  width: 137px;
-  height: 38px;
-  background: #0031F0;
-  font-size: 14px;
-  color: #FFFFFF;
-  letter-spacing: -0.26px;
-  text-align: center;
-  border: none;
-}
-
 section.review {
-  font-size: 16px;
   color: #242424;
 }
 
@@ -3867,7 +3240,6 @@ section.review .review-layouter .product-info .heading {
 
 section.review .review-layouter .product-info .heading span {
   font-size: 24px;
-  color: #242424;
   letter-spacing: -0.58px;
 }
 
@@ -3883,15 +3255,12 @@ section.review .review-layouter .product-info .price .pro-price {
 
 section.review .review-layouter .product-info .price .pro-price-not {
   margin-left: 10px;
-  font-size: 16px;
   color: #A5A5A5;
   letter-spacing: -0.26px;
 }
 
 section.review .review-layouter .product-info .price .offer {
   margin-left: 10px;
-  font-size: 16px;
-  color: #242424;
   letter-spacing: -0.26px;
 }
 
@@ -3905,8 +3274,6 @@ section.review .review-layouter .review-info .heading {
 }
 
 section.review .review-layouter .review-info .heading span {
-  font-size: 16px;
-  color: #242424;
   letter-spacing: -0.26px;
 }
 
@@ -3917,7 +3284,6 @@ section.review .review-layouter .review-info .heading .btn.btn-primary.right {
 
 section.review .review-layouter .review-info .rating {
   margin-top: 25px;
-  font-size: 16px;
   color: #5E5E5E;
   letter-spacing: -0.12px;
 }
@@ -3963,7 +3329,7 @@ section.review .review-layouter .review-info .submit-button {
 }
 
 section.review .review-layouter .review-info .submit-button button {
-  background: #0031F0;
+  background: #0031f0;
   font-size: 14px;
   color: #FFFFFF;
   letter-spacing: -0.26px;
@@ -3994,7 +3360,6 @@ section.review .review-layouter .review-info .review-detail .rating-review {
 
 section.review .review-layouter .review-info .review-detail .rating-review .avg-rating-count span {
   font-size: 34px;
-  color: #242424;
   letter-spacing: -0.82px;
   text-align: center;
 }
@@ -4017,7 +3382,7 @@ section.review .review-layouter .review-info .review-detail .rating-calculate .p
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  border-top: 1px solid #E8E8E8;
+  border-top: 1px solid #c7c7c7;
 }
 
 .cusomer-section .customer-section-info .pro-img {
@@ -4036,8 +3401,7 @@ section.review .review-layouter .review-info .review-detail .rating-calculate .p
 }
 
 .cusomer-section .customer-section-info .pro-discription .title {
-  font-size: 16px;
-  color: #0031F0;
+  color: #0031f0;
   margin-top: 15px;
 }
 
@@ -4055,5 +3419,5 @@ section.review .review-layouter .review-info .review-detail .rating-calculate .p
 }
 
 .cusomer-section .customer-section-info:last-child {
-  border-bottom: 1px solid #e8e8e8;
+  border-bottom: 1px solid #c7c7c7;
 }
diff --git a/public/themes/default/assets/js/shop.js b/public/themes/default/assets/js/shop.js
index eac787839..7c26cd63d 100644
--- a/public/themes/default/assets/js/shop.js
+++ b/public/themes/default/assets/js/shop.js
@@ -1460,10 +1460,10 @@ $(document).ready(function () {
                 var flashes = this.$refs.flashes;
 
                 flashMessages.forEach(function (flash) {
-                    console.log(flash);
                     flashes.addFlash(flash);
                 }, this);
             },
+
             responsiveHeader: function responsiveHeader() {}
         }
     });

From 19775a4017020c96a8b5b86e223a74d5463d8429 Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Thu, 27 Sep 2018 13:23:26 +0530
Subject: [PATCH 07/11] Checkout review page added

---
 .../2018_09_19_093453_create_cart_payment.php |  1 +
 packages/Webkul/Cart/src/Helpers/Checkout.php | 43 +++++++++
 packages/Webkul/Cart/src/Models/Cart.php      |  6 +-
 .../Webkul/Cart/src/Models/CartAddress.php    |  8 ++
 packages/Webkul/Core/src/Core.php             | 18 ++++
 packages/Webkul/Payment/src/Payment.php       |  2 +-
 .../Webkul/Payment/src/Payment/Payment.php    | 10 +--
 .../src/Carriers/AbstractShipping.php         | 11 +--
 .../src/Resources/assets/sass/_variables.scss |  8 +-
 .../Shop/src/Resources/assets/sass/app.scss   | 11 +--
 .../Webkul/Shop/src/Resources/lang/en/app.php |  6 +-
 .../views/checkout/onepage.blade.php          |  2 +-
 .../views/checkout/onepage/payment.blade.php  |  2 +-
 .../views/checkout/onepage/review.blade.php   | 80 +++++++++--------
 .../Resources/views/products/view.blade.php   |  2 +-
 .../view/configurable-options.blade.php       |  2 +
 public/themes/default/assets/css/shop.css     | 89 +++++++++----------
 17 files changed, 180 insertions(+), 121 deletions(-)
 create mode 100644 packages/Webkul/Cart/src/Helpers/Checkout.php

diff --git a/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093453_create_cart_payment.php b/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093453_create_cart_payment.php
index 9521ad2b6..89ab7fd4d 100644
--- a/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093453_create_cart_payment.php
+++ b/packages/Webkul/Cart/src/Database/Migrations/2018_09_19_093453_create_cart_payment.php
@@ -16,6 +16,7 @@ class CreateCartPayment extends Migration
         Schema::create('cart_payment', function (Blueprint $table) {
             $table->increments('id');
             $table->string('method');
+            $table->string('method_title')->nullable();
             $table->integer('cart_id')->nullable()->unsigned();
             $table->foreign('cart_id')->references('id')->on('cart');
             $table->timestamps();
diff --git a/packages/Webkul/Cart/src/Helpers/Checkout.php b/packages/Webkul/Cart/src/Helpers/Checkout.php
new file mode 100644
index 000000000..9e695c7db
--- /dev/null
+++ b/packages/Webkul/Cart/src/Helpers/Checkout.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace Webkul\Cart\Helpers;
+
+use Webkul\Attribute\Repositories\AttributeOptionRepository as AttributeOption;
+
+class Checkout
+{
+    /**
+     * AttributeOptionRepository object
+     *
+     * @var array
+     */
+    protected $attributeOption;
+
+    /**
+     * Create a new helper instance.
+     *
+     * @param  Webkul\Attribute\Repositories\AttributeOptionRepository $attributeOption
+     * @return void
+     */
+    public function __construct(AttributeOption $attributeOption)
+    {
+        $this->attributeOption = $attributeOption;
+    }
+
+    /**
+     * Returns the allowed variants
+     *
+     * @param CartItem $item
+     * @return array
+     */
+    public function getItemOptionDetails($item)
+    {
+        $data = [];
+
+        foreach ($item->product->super_attributes as $attribute) {
+
+        }
+
+        return $data;
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Models/Cart.php b/packages/Webkul/Cart/src/Models/Cart.php
index 310d16703..e70421da3 100644
--- a/packages/Webkul/Cart/src/Models/Cart.php
+++ b/packages/Webkul/Cart/src/Models/Cart.php
@@ -31,7 +31,7 @@ class Cart extends Model
     /**
      * Get the biling address for the cart.
      */
-    public function biling_address()
+    public function billing_address()
     {
         return $this->addresses()->where('address_type', 'billing');
     }
@@ -39,9 +39,9 @@ class Cart extends Model
     /**
      * Get all of the attributes for the attribute groups.
      */
-    public function getBilingAddressAttribute()
+    public function getBillingAddressAttribute()
     {
-        return $this->biling_address()->first();
+        return $this->billing_address()->first();
     }
 
     /**
diff --git a/packages/Webkul/Cart/src/Models/CartAddress.php b/packages/Webkul/Cart/src/Models/CartAddress.php
index 889328d39..935b09eb0 100644
--- a/packages/Webkul/Cart/src/Models/CartAddress.php
+++ b/packages/Webkul/Cart/src/Models/CartAddress.php
@@ -18,4 +18,12 @@ class CartAddress extends Model
     {
         return $this->hasMany(CartShippingRate::class);
     }
+
+    /**
+     * Get all of the attributes for the attribute groups.
+     */
+    public function getNameAttribute()
+    {
+        return $this->first_name . ' ' . $this->last_name;
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Core/src/Core.php b/packages/Webkul/Core/src/Core.php
index 35aa98a5d..2375fc466 100644
--- a/packages/Webkul/Core/src/Core.php
+++ b/packages/Webkul/Core/src/Core.php
@@ -8,6 +8,7 @@ use Webkul\Core\Models\Locale as LocaleModel;
 use Webkul\Core\Models\Currency as CurrencyModel;
 use Webkul\Core\Models\TaxCategory as TaxCategory;
 use Webkul\Core\Models\TaxRate as TaxRate;
+use Illuminate\Support\Facades\Config;
 
 class Core
 {
@@ -276,4 +277,21 @@ class Core
 
         return $date->format($format);
     }
+
+    /**
+     * Retrieve information from payment configuration
+     *
+     * @param string $field
+     * @param int|string|null $channelId
+     *
+     * @return mixed
+     */
+    public function getConfigData($field, $channelId = null)
+    {
+        if (null === $channelId) {
+            $channelId = $this->getCurrentChannel()->id;
+        }
+
+        return Config::get($field);
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Payment/src/Payment.php b/packages/Webkul/Payment/src/Payment.php
index ebbd54637..da4d78114 100644
--- a/packages/Webkul/Payment/src/Payment.php
+++ b/packages/Webkul/Payment/src/Payment.php
@@ -21,7 +21,7 @@ class Payment
                 if($object->isAvailable()) {
                     $paymentMethods[] = [
                         'method' => $object->getCode(),
-                        'title' => $object->getTitle(),
+                        'method_title' => $object->getTitle(),
                         'description' => $object->getDescription(),
                     ];
                 }
diff --git a/packages/Webkul/Payment/src/Payment/Payment.php b/packages/Webkul/Payment/src/Payment/Payment.php
index 6b4c0a063..4f3f5242c 100644
--- a/packages/Webkul/Payment/src/Payment/Payment.php
+++ b/packages/Webkul/Payment/src/Payment/Payment.php
@@ -58,14 +58,8 @@ abstract class Payment
      *
      * @return mixed
      */
-    public function getConfigData($field, $channelId = null)
+    public function getConfigData($field)
     {
-        if (null === $channelId) {
-            $channelId = core()->getCurrentChannel()->id;
-        }
-
-        $paymentConfig = Config::get('paymentmethods.' . $this->getCode());
-
-        return $paymentConfig[$field];
+        return core()->getConfigData('paymentmethods.' . $this->getCode() . '.' . $field);
     }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Shipping/src/Carriers/AbstractShipping.php b/packages/Webkul/Shipping/src/Carriers/AbstractShipping.php
index 55cb97848..53be021ac 100644
--- a/packages/Webkul/Shipping/src/Carriers/AbstractShipping.php
+++ b/packages/Webkul/Shipping/src/Carriers/AbstractShipping.php
@@ -67,16 +67,9 @@ abstract class AbstractShipping
      *
      * @return mixed
      */
-    public function getConfigData($field, $channelId = null)
+    public function getConfigData($field)
     {
-        if (null === $channelId) {
-            $channelId = core()->getCurrentChannel()->id;
-        }
-
-        $shippingConfig = Config::get('carriers.' . $this->getCode());
-
-        return $shippingConfig[$field];
+        return core()->getConfigData('carriers.' . $this->getCode() . '.' . $field);
     }
-
 }
 ?>
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss
index 67c473993..b9b2593e8 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss
@@ -1,12 +1,14 @@
 //shop variables
 $font-color: #242424;
-$border-color: #E8E8E8;
 $font-size-base: 16px;
-$border-color: #c7c7c7;
+$border-color: #E8E8E8;
 $brand-color: #0031f0;
 //shop variables ends here
 
+
+//=======>Need to be removed
 //customer variables
 $profile-content-color: #5e5e5e;
 $horizontal-rule-color: #E8E8E8;
-//customer variables ends here
\ No newline at end of file
+//customer variables ends here
+//<=======Need to be removed
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 07fbc6dc6..970be8186 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -1,6 +1,4 @@
-
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,500");
-
 @import "icons";
 @import "mixins";
 @import "variables";
@@ -3189,14 +3187,7 @@ section.cart {
 
                 .address-card {
                     width: 50%;
-
-                    &.left {
-                        float: left;
-                    }
-
-                    &.right {
-                        float: right;
-                    }
+                    float: left;
 
                     .card-title span {
                         font-weight: 600;
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index 736b6ba5e..d2ccf7be8 100644
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -90,7 +90,11 @@ return [
             'payment-information' => 'Payment Information',
             'summary' => 'Summary of Order',
             'price' => 'Price',
-            'quantity' => 'Quantity'
+            'quantity' => 'Quantity',
+            'billing-address' => 'Billing Address',
+            'shipping-address' => 'Shipping Address',
+            'contact' => 'Contact',
+            'place-order' => 'Place Order'
         ],
 
         'total' => [
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
index 17b2889c8..11de9111c 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage.blade.php
@@ -88,7 +88,7 @@
                     <div class="button-group">
 
                         <button type="button" class="btn btn-lg btn-primary" @click="placeOrder()">
-                            {{ __('shop::app.checkout.onepage.continue') }}
+                            {{ __('shop::app.checkout.onepage.place-order') }}
                         </button>
 
                     </div>
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php
index d5dba6af8..e12395dbf 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/payment.blade.php
@@ -13,7 +13,7 @@
                     <span class="radio" >
                         <input v-validate="'required'" type="radio" id="{{ $payment['method'] }}" name="payment[method]" value="{{ $payment['method'] }}" v-model="payment.method" @change="methodSelected()">
                         <label class="radio-view" for="{{ $payment['method'] }}"></label>
-                        {{ $payment['title'] }}
+                        {{ $payment['method_title'] }}
                     </span>
                     
                     <span class="control-info">{{ $payment['description'] }}</span>
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
index 6ca9b95ea..33f4b31d7 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
@@ -5,37 +5,41 @@
 
     <div class="address">
 
-        <div class="address-card shipping-address left">
-            <div class="card-title">
-                <span>Shipping address</span>
+        @if ($billingAddress = $cart->billing_address)
+            <div class="address-card billing-address">
+                <div class="card-title">
+                    <span>{{ __('shop::app.checkout.onepage.billing-address') }}</span>
+                </div>
+
+                <div class="card-content">
+                    {{ $billingAddress->name }}</br>
+                    {{ $billingAddress->address1 }}, {{ $billingAddress->address2 ? $billingAddress->address2 . ',' : '' }} {{ $billingAddress->state }}</br>
+                    {{ country()->name($billingAddress->country) }} {{ $billingAddress->postcode }}</br>
+                    
+                    <span class="horizontal-rule"></span>
+
+                    {{ __('shop::app.checkout.onepage.contact') }} : {{ $billingAddress->phone }} 
+                </div>
             </div>
+        @endif
 
-            <div class="card-content">
-                John Doe</br>
-                25 , Washington</br>
-                USA 5751434</br>
-                
-                <span class="horizontal-rule"></span>
+        @if ($shippingAddress = $cart->shipping_address)
+            <div class="address-card shipping-address">
+                <div class="card-title">
+                    <span>{{ __('shop::app.checkout.onepage.shipping-address') }}</span>
+                </div>
 
-                Contact : 9876543210 
+                <div class="card-content">
+                    {{ $shippingAddress->name }}</br>
+                    {{ $shippingAddress->address1 }}, {{ $shippingAddress->address2 ? $shippingAddress->address2 . ',' : '' }} , {{ $shippingAddress->state }}</br>
+                    {{ country()->name($shippingAddress->country) }} {{ $shippingAddress->postcode }}</br>
+                    
+                    <span class="horizontal-rule"></span>
+
+                    {{ __('shop::app.checkout.onepage.contact') }} : {{ $shippingAddress->phone }} 
+                </div>
             </div>
-        </div>
-
-        <div class="address-card billing-addres right">
-            <div class="card-title">
-                <span>Billing address</span>
-            </div>
-
-            <div class="card-content">
-                John Doe</br>
-                25 , Washington</br>
-                USA 5751434</br>
-                
-                <span class="horizontal-rule"></span>
-
-                Contact : 9876543210 
-            </div>
-        </div>
+        @endif
 
     </div>
 
@@ -79,9 +83,15 @@
                         </span>
                     </div>
 
-                    <div class="summary" >
-                        Color : Gray, Size : S
-                    </div>
+                    @if ($product->type == 'configurable')
+                        <div class="summary" >
+                            @foreach ($product->super_attributes as $attribute)
+
+                                {{ $attribute->name . ' : ' . $product->{$attribute->code} }},
+
+                            @endforeach
+                        </div>
+                    @endif
                 </div>
 
             </div>
@@ -91,7 +101,7 @@
 
     <div class="order-description">
 
-        <div class="pull-left">
+        <div class="pull-left" style="width: 50%;">
             
             <div class="shipping">
                 <div class="decorator">
@@ -99,10 +109,10 @@
                 </div>
 
                 <div class="text">
-                    $ 25.00
+                    {{ core()->currency($cart->selected_shipping_rate->base_price) }}
 
                     <div class="info">
-                        FedEx Shipping
+                        {{ $cart->selected_shipping_rate->method_title }}
                     </div>
                 </div>
             </div>
@@ -113,13 +123,13 @@
                 </div>
 
                 <div class="text">
-                    Net banking 
+                    {{ core()->getConfigData('paymentmethods.' . $cart->payment->method . '.title') }}
                 </div>
             </div>
 
         </div>
 
-        <div class="pull-right">
+        <div class="pull-right" style="width: 50%;">
 
             @include('shop::checkout.total.summary', ['cart' => $cart])
 
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
index 8d61b6af9..8ff545cc2 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
@@ -11,7 +11,7 @@
             <span class="breadcrumb">Home</span> > <span class="breadcrumb">Men</span> > <span class="breadcrumb">Slit Open Jeans</span>
         </div>
         <div class="layouter">
-            <form method="POST" action="{{ route('cart.add', $product->id) }}">
+            <form method="POST" action="{{ route('cart.add', $product->id) }}" @submit.prevent="onSubmit">
                 @csrf()
 
                 <input type="hidden" name="product" value="{{ $product->id }}">
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
index b22edf9f1..53e7d6939 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
@@ -49,6 +49,8 @@
 
                 template: '#product-options-template',
 
+            inject: ['$validator'],
+
                 data: () => ({
                     config: @json($config),
 
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index d341e82b8..84a0cc127 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -147,7 +147,7 @@ body {
 
 .header .header-top div.left-content ul.search-container li.search-group .search-field {
   height: 38px;
-  border: 2px solid #c7c7c7;
+  border: 2px solid #E8E8E8;
   border-radius: 3px;
   border-right: none;
   border-top-right-radius: 0px;
@@ -162,7 +162,7 @@ body {
           box-sizing: border-box;
   height: 38px;
   width: 38px;
-  border: 2px solid #c7c7c7;
+  border: 2px solid #E8E8E8;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
@@ -192,7 +192,7 @@ body {
 
 .header .header-top div.right-content ul.account-dropdown-container {
   float: right;
-  border-right: 2px solid #c7c7c7;
+  border-right: 2px solid #E8E8E8;
 }
 
 .header .header-top div.right-content ul.account-dropdown-container li.account-dropdown {
@@ -473,8 +473,8 @@ body {
     display: none;
   }
   .header .search-suggestion .search-content {
-    border-top: 1px solid #c7c7c7;
-    border-bottom: 1px solid #c7c7c7;
+    border-top: 1px solid #E8E8E8;
+    border-bottom: 1px solid #E8E8E8;
     height: 48px;
   }
   .header .search-suggestion .search-content .icon.search-icon {
@@ -493,7 +493,7 @@ body {
     margin-top: 14px;
     height: 32px;
     margin-bottom: 14px;
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid #E8E8E8;
   }
   .header .search-suggestion .suggestion span {
     margin-left: 48px;
@@ -513,7 +513,7 @@ body {
   }
   .header .header-bottom .nav > li {
     float: none;
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid #E8E8E8;
   }
   .header .header-bottom .nav > li a {
     margin-left: 10px;
@@ -524,7 +524,7 @@ body {
     margin-right: 5px;
   }
   .header .header-bottom .nav > li:first-child {
-    border-top: 1px solid #c7c7c7;
+    border-top: 1px solid #E8E8E8;
   }
   .header .header-bottom .nav > li:last-child {
     float: none;
@@ -634,7 +634,7 @@ body {
   }
   .header .header-bottom .nav > li {
     float: none;
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid #E8E8E8;
   }
   .header .header-bottom .nav > li a {
     margin-left: 10px;
@@ -645,7 +645,7 @@ body {
     margin-right: 5px;
   }
   .header .header-bottom .nav > li:first-child {
-    border-top: 1px solid #c7c7c7;
+    border-top: 1px solid #E8E8E8;
   }
   .header .header-bottom .nav > li:last-child {
     float: none;
@@ -772,13 +772,13 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .layered-filter-wrapper .filter-title {
-  border-bottom: 1px solid #c7c7c7;
+  border-bottom: 1px solid #E8E8E8;
   color: #242424;
   padding: 10px 0;
 }
 
 .layered-filter-wrapper .filter-attributes .filter-attributes-item {
-  border-bottom: 1px solid #c7c7c7;
+  border-bottom: 1px solid #E8E8E8;
   padding-bottom: 10px;
 }
 
@@ -1144,7 +1144,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
     font-size: 12px;
   }
   .main-container-wrapper .top-toolbar {
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid #E8E8E8;
     margin-bottom: 10px;
   }
   .main-container-wrapper .top-toolbar .page-info span:first-child {
@@ -1218,7 +1218,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
     font-size: 12px;
   }
   .main-container-wrapper .top-toolbar {
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid #E8E8E8;
     margin-bottom: 10px;
   }
   .main-container-wrapper .top-toolbar .page-info span:first-child {
@@ -1379,7 +1379,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   display: -ms-flexbox;
   display: flex;
   background: #f2f2f2;
-  border: 1px solid #c7c7c7;
+  border: 1px solid #E8E8E8;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
@@ -1454,7 +1454,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  border: 1px solid #c7c7c7;
+  border: 1px solid #E8E8E8;
   background: #f2f2f2;
   width: 25%;
   height: 100%;
@@ -1479,7 +1479,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border-bottom: 1px solid #c7c7c7;
+  border-bottom: 1px solid #E8E8E8;
   text-align: center;
 }
 
@@ -1521,7 +1521,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #c7c7c7;
+  background: #E8E8E8;
 }
 
 .account-content .profile-content {
@@ -1556,7 +1556,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   display: -ms-flexbox;
   display: flex;
   background: #f2f2f2;
-  border: 1px solid #c7c7c7;
+  border: 1px solid #E8E8E8;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
@@ -1837,7 +1837,7 @@ section.product-detail div.layouter form .details .attributes {
   section.product-detail div.layouter form .details {
     width: 100%;
     margin-top: 20px;
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid #E8E8E8;
   }
   section.product-detail div.layouter form .details .attributes {
     border-bottom: none;
@@ -1886,7 +1886,7 @@ section.product-detail div.layouter form .details .attributes {
   section.product-detail div.layouter form .details {
     width: 100%;
     margin-top: 20px;
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid #E8E8E8;
   }
   section.product-detail div.layouter form .details .attributes {
     border-bottom: none;
@@ -2019,7 +2019,7 @@ section.cart .cart-content {
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #c7c7c7;
+  background: #E8E8E8;
 }
 
 .cart .right-side .price-section .total-details {
@@ -2071,7 +2071,7 @@ section.cart .cart-content {
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #c7c7c7;
+  background: #E8E8E8;
   margin-bottom: 9px;
 }
 
@@ -2166,7 +2166,7 @@ section.cart .cart-content {
   width: 60px;
   text-align: center;
   line-height: 38px;
-  border: 1px solid #c7c7c7;
+  border: 1px solid #E8E8E8;
   border-radius: 3px;
   margin-right: 30px;
 }
@@ -2282,7 +2282,7 @@ section.cart .cart-content {
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #c7c7c7;
+  background: #E8E8E8;
 }
 
 .order .order-section-head-small {
@@ -2352,7 +2352,7 @@ section.cart .cart-content {
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #c7c7c7;
+  background: #E8E8E8;
 }
 
 .order .order-details {
@@ -2486,7 +2486,7 @@ section.cart .cart-content {
   width: 100%;
   height: 1px;
   vertical-align: middle;
-  background: #c7c7c7;
+  background: #E8E8E8;
 }
 
 .order .order-information {
@@ -2554,7 +2554,7 @@ section.cart .cart-content {
     margin-bottom: 13px;
   }
   .order .order-section-head-small .horizon-rule {
-    border: 0.5px solid #c7c7c7;
+    border: 0.5px solid #E8E8E8;
     width: 150%;
     margin-left: -10%;
     margin-right: -10%;
@@ -2616,7 +2616,7 @@ section.cart .cart-content {
     width: 100%;
     height: 1px;
     vertical-align: middle;
-    background: #c7c7c7;
+    background: #E8E8E8;
   }
   .order .order-details {
     display: none;
@@ -2687,7 +2687,7 @@ section.cart .cart-content {
     display: none;
   }
   .order .product-config {
-    border: 1px solid #c7c7c7;
+    border: 1px solid #E8E8E8;
     height: 19%;
     width: 100%;
     margin-top: 10px;
@@ -2778,7 +2778,7 @@ section.cart .cart-content {
     margin-bottom: 13px;
   }
   .order .order-section-head-small .horizon-rule {
-    border: 0.5px solid #c7c7c7;
+    border: 0.5px solid #E8E8E8;
     width: 150%;
     margin-left: -10%;
     margin-right: -10%;
@@ -2840,7 +2840,7 @@ section.cart .cart-content {
     width: 100%;
     height: 1px;
     vertical-align: middle;
-    background: #c7c7c7;
+    background: #E8E8E8;
   }
   .order .order-details {
     display: none;
@@ -2911,7 +2911,7 @@ section.cart .cart-content {
     display: none;
   }
   .order .product-config {
-    border: 1px solid #c7c7c7;
+    border: 1px solid #E8E8E8;
     height: 19%;
     width: 100%;
     margin-top: 10px;
@@ -2992,7 +2992,7 @@ section.cart .cart-content {
           justify-content: space-between;
   width: 100%;
   padding-bottom: 15px;
-  border-bottom: 1px solid #c7c7c7;
+  border-bottom: 1px solid #E8E8E8;
 }
 
 .checkout-process .col-main ul.checkout-steps li {
@@ -3010,7 +3010,7 @@ section.cart .cart-content {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  border: 1px solid #c7c7c7;
+  border: 1px solid #E8E8E8;
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -3071,7 +3071,7 @@ section.cart .cart-content {
 }
 
 .checkout-process .col-main .step-content .form-container {
-  border-bottom: 1px solid #c7c7c7;
+  border-bottom: 1px solid #E8E8E8;
   padding-top: 20px;
   padding-bottom: 20px;
 }
@@ -3095,16 +3095,9 @@ section.cart .cart-content {
 
 .checkout-process .col-main .step-content .address .address-card {
   width: 50%;
-}
-
-.checkout-process .col-main .step-content .address .address-card.left {
   float: left;
 }
 
-.checkout-process .col-main .step-content .address .address-card.right {
-  float: right;
-}
-
 .checkout-process .col-main .step-content .address .address-card .card-title span {
   font-weight: 600;
 }
@@ -3123,7 +3116,7 @@ section.cart .cart-content {
 }
 
 .checkout-process .col-main .step-content .cart-item-list .item {
-  border: 1px solid #c7c7c7;
+  border: 1px solid #E8E8E8;
   border-radius: 3px;
   padding: 20px;
 }
@@ -3154,7 +3147,7 @@ section.cart .cart-content {
   height: 48px;
   width: 48px;
   border-radius: 50%;
-  border: 1px solid #c7c7c7;
+  border: 1px solid #E8E8E8;
   vertical-align: middle;
   display: inline-block;
   text-align: center;
@@ -3194,7 +3187,7 @@ section.cart .cart-content {
 
 .checkout-process .order-summary .payble-amount {
   margin-top: 17px;
-  border-top: 1px solid #c7c7c7;
+  border-top: 1px solid #E8E8E8;
   padding-top: 12px;
 }
 
@@ -3382,7 +3375,7 @@ section.review .review-layouter .review-info .review-detail .rating-calculate .p
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  border-top: 1px solid #c7c7c7;
+  border-top: 1px solid #E8E8E8;
 }
 
 .cusomer-section .customer-section-info .pro-img {
@@ -3419,5 +3412,5 @@ section.review .review-layouter .review-info .review-detail .rating-calculate .p
 }
 
 .cusomer-section .customer-section-info:last-child {
-  border-bottom: 1px solid #c7c7c7;
+  border-bottom: 1px solid #E8E8E8;
 }

From e0f45d2762931fc10bdc90d70ed0b2541ff91698 Mon Sep 17 00:00:00 2001
From: prashant-webkul <prashant.singh852@webkul.com>
Date: Thu, 27 Sep 2018 13:25:34 +0530
Subject: [PATCH 08/11] Before merge with master

---
 packages/Webkul/Cart/src/Cart.php | 89 ++++++++++++++++++++-----------
 1 file changed, 57 insertions(+), 32 deletions(-)

diff --git a/packages/Webkul/Cart/src/Cart.php b/packages/Webkul/Cart/src/Cart.php
index 2a1572cd1..2fc24d46f 100644
--- a/packages/Webkul/Cart/src/Cart.php
+++ b/packages/Webkul/Cart/src/Cart.php
@@ -211,7 +211,7 @@ class Cart {
         if(!isset($data['is_configurable']) || !isset($data['product']) ||!isset($data['quantity'])) {
             session()->flash('error', 'Cart System Integrity Violation, Some Required Fields Missing.');
 
-            dd('discrepancy 1');
+            dd('Missing Essential Parameters, Cannot Proceed Further');
 
             return redirect()->back();
         } else {
@@ -219,7 +219,7 @@ class Cart {
                 if(!isset($data['super_attribute'])) {
                     session()->flash('error', 'Cart System Integrity Violation, Configurable Options Not Found In Request.');
 
-                    dd('discrepancy 2');
+                    dd('Super Attributes Missing From the Request Parameters.');
 
                     return redirect()->back();
                 }
@@ -398,47 +398,72 @@ class Cart {
 
                 if(isset($customerCart)) {
                     foreach($customerCartItems as $customerCartItem) {
-                        if($customerCartItem->type == "simple" && isset($customerCartItem->parent_id)) {
-                            //write the merge case whem the items exists with the customer cart also.
-                            $child = $customerCartItem;
+                        foreach($cartItems as $cartItem) {
 
-                            $parentId = $child->parent_id;
+                            if($cartItem->type == "simple" && !isset($cartItem->parent_id)) {
 
-                            $parent = $this->cartItem->findOneByField('id', $parentId);
+                                if($customerCartItem->type == "simple" && !isset($customerCartItem->parent_id)) {
 
-                            $parentPrice = $parent->price;
+                                    //update the customer cart item details and delete the guest instance
+                                    if($customerCartItem->product_id == $cartItem->productId) {
 
-                            $prevQty = $parent->quantity;
-
-                            foreach ($cartItems as $key => $cartItem) {
-                                if ($cartItem->type == "simple" && isset($cartItem->parent_id)) {
-                                    $newQty = $data['quantity'];
-
-                                    $parent->update(['quantity' => $prevQty + $newQty, 'item_total' => $parentPrice * ($prevQty + $newQty)]);
-                                } else if($cartItem->type == "simple" && is_null($cartItem->parent_id)){
+                                        $prevQty = $cartItem->quantity;
+                                        $newQty = $customerCartItem->quantity;
 
+                                        $customerCartItem->update([
+                                            'quantity' => $prevQty + $newQty,
+                                            'item_total' => $customerCartItem->price * ($prevQty + $newQty),
+                                            'base_item_total' => $customerCartItem->price * ($prevQty + $newQty),
+                                            'item_total_weight' => $customerCartItem->weight * ($prevQty + $newQty),
+                                            'base_item_total_weight' => $customerCartItem->weight * ($prevQty + $newQty)
+                                        ]);
+                                    }
                                 }
+                            } else if($cartItem->type == "simple" && isset($cartItem->parent_id)) {
 
-                            }
+                                if($customerCartItem->type == "simple" && isset($customerCartItem->parent_id)) {
 
-
-                        } elseif($customerCartItem->type == "simple" && is_null($customerCartItem->parent_id)) {
-                            foreach($cartItems as $key => $cartItem) {
-
-                                if($cartItem->product_id == $customerCartItem->product_id) {
-
-                                    $customerItemQuantity = $customerCartItem->quantity;
-
-                                    $cartItemQuantity = $cartItem->quantity;
-
-                                    $customerCartItem->update(['cart_id' => $customerCart->id, 'quantity' => $cartItemQuantity + $customerItemQuantity]);
-
-                                    $this->cartItem->delete($cartItem->id);
-
-                                    $cartItems->forget($key);
                                 }
                             }
                         }
+                        // if($customerCartItem->type == "simple" && isset($customerCartItem->parent_id)) {
+                        //     //write the merge case whem the items exists with the customer cart also.
+                        //     $child = $customerCartItem;
+
+                        //     $parentId = $child->parent_id;
+
+                        //     $parent = $this->cartItem->findOneByField('id', $parentId);
+
+                        //     $parentPrice = $parent->price;
+
+                        //     $prevQty = $parent->quantity;
+
+                        //     foreach ($cartItems as $key => $cartItem) {
+                        //         if ($cartItem->type == "simple" && isset($cartItem->parent_id)) {
+                        //             $newQty = $data['quantity'];
+
+                        //             $parent->update(['quantity' => $prevQty + $newQty, 'item_total' => $parentPrice * ($prevQty + $newQty)]);
+                        //         } else if($cartItem->type == "simple" && is_null($cartItem->parent_id)){
+
+                        //         }
+                        //     }
+                        // } elseif($customerCartItem->type == "simple" && !isset($customerCartItem->parent_id)) {
+                        //     foreach($cartItems as $key => $cartItem) {
+
+                        //         if($cartItem->product_id == $customerCartItem->product_id) {
+
+                        //             $customerItemQuantity = $customerCartItem->quantity;
+
+                        //             $cartItemQuantity = $cartItem->quantity;
+
+                        //             $customerCartItem->update(['cart_id' => $customerCart->id, 'quantity' => $cartItemQuantity + $customerItemQuantity]);
+
+                        //             $this->cartItem->delete($cartItem->id);
+
+                        //             $cartItems->forget($key);
+                        //         }
+                        //     }
+                        // }
                     }
 
                     foreach($cartItems as $cartItem) {

From 9e57c5117b1e753ca8ff6b2619e6d5f53a7889d3 Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Thu, 27 Sep 2018 15:31:25 +0530
Subject: [PATCH 09/11] Cart page issues fixedx

---
 composer.json                                 |   6 +-
 config/app.php                                |   1 +
 packages/Webkul/Cart/src/Cart.php             |  21 +
 packages/Webkul/Cart/src/Helpers/Checkout.php |  43 --
 packages/Webkul/Cart/src/Http/helpers.php     |  10 +
 packages/Webkul/Cart/src/Models/Cart.php      |   3 +-
 packages/Webkul/Cart/src/Models/CartItem.php  |  16 +
 .../src/Providers/CartServiceProvider.php     |   2 +
 packages/Webkul/Sales/composer.json           |  25 +
 .../src/Providers/SalesServiceProvider.php    |  26 +
 packages/Webkul/Shop/src/Http/routes.php      |   2 +-
 .../src/Resources/assets/sass/_variables.scss |   2 +-
 .../Shop/src/Resources/assets/sass/app.scss   | 640 +++++++-----------
 .../Webkul/Shop/src/Resources/lang/en/app.php |   2 +
 .../views/checkout/cart/index.blade.php       |  39 +-
 .../views/checkout/onepage/review.blade.php   |   7 +-
 .../views/layouts/header/index.blade.php      |   2 +-
 public/themes/default/assets/css/shop.css     | 626 +++++++----------
 18 files changed, 648 insertions(+), 825 deletions(-)
 delete mode 100644 packages/Webkul/Cart/src/Helpers/Checkout.php
 create mode 100644 packages/Webkul/Cart/src/Http/helpers.php
 create mode 100644 packages/Webkul/Sales/composer.json
 create mode 100644 packages/Webkul/Sales/src/Providers/SalesServiceProvider.php

diff --git a/composer.json b/composer.json
index ec0706a90..7fe23c407 100644
--- a/composer.json
+++ b/composer.json
@@ -42,7 +42,8 @@
         "webkul/laravel-shop": "self.version",
         "webkul/laravel-theme": "self.version",
         "webkul/laravel-shipping": "self.version",
-        "webkul/laravel-payment": "self.version"
+        "webkul/laravel-payment": "self.version",
+        "webkul/laravel-sales": "self.version"
     },
     "autoload": {
         "classmap": [
@@ -64,7 +65,8 @@
             "Webkul\\Product\\": "packages/Webkul/Product/src",
             "Webkul\\Theme\\": "packages/Webkul/Theme/src",
             "Webkul\\Shipping\\": "packages/Webkul/Shipping/src",
-            "Webkul\\Payment\\": "packages/Webkul/Payment/src"
+            "Webkul\\Payment\\": "packages/Webkul/Payment/src",
+            "Webkul\\Sales\\": "packages/Webkul/Sales/src"
         }
     },
     "autoload-dev": {
diff --git a/config/app.php b/config/app.php
index c649dc388..56e8a7b5a 100644
--- a/config/app.php
+++ b/config/app.php
@@ -191,6 +191,7 @@ return [
         Webkul\Cart\Providers\CartServiceProvider::class,
         Webkul\Shipping\Providers\ShippingServiceProvider::class,
         Webkul\Payment\Providers\PaymentServiceProvider::class,
+        Webkul\Sales\Providers\SalesServiceProvider::class,
     ],
 
     /*
diff --git a/packages/Webkul/Cart/src/Cart.php b/packages/Webkul/Cart/src/Cart.php
index 934b5906b..e11cce3e5 100644
--- a/packages/Webkul/Cart/src/Cart.php
+++ b/packages/Webkul/Cart/src/Cart.php
@@ -269,6 +269,27 @@ class Cart {
         return $this->cart->find($cart->id);
     }
 
+    /**
+     * Returns cart
+     *
+     * @return Mixed
+     */
+    public function getItemAttributeOptionDetails($item)
+    {
+        $data = [];
+
+        foreach($item->product->super_attributes as $attribute) {
+            $option = $attribute->options()->where('id', $item->child->{$attribute->code})->first();
+
+            $data['attributes'][$attribute->code] = [
+                'attribute_name' => $attribute->name,
+                'option_label' => $option->label,
+            ];
+        }
+
+        return $data;
+    }
+
     /**
      * Save customer address
      *
diff --git a/packages/Webkul/Cart/src/Helpers/Checkout.php b/packages/Webkul/Cart/src/Helpers/Checkout.php
deleted file mode 100644
index 9e695c7db..000000000
--- a/packages/Webkul/Cart/src/Helpers/Checkout.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php
-
-namespace Webkul\Cart\Helpers;
-
-use Webkul\Attribute\Repositories\AttributeOptionRepository as AttributeOption;
-
-class Checkout
-{
-    /**
-     * AttributeOptionRepository object
-     *
-     * @var array
-     */
-    protected $attributeOption;
-
-    /**
-     * Create a new helper instance.
-     *
-     * @param  Webkul\Attribute\Repositories\AttributeOptionRepository $attributeOption
-     * @return void
-     */
-    public function __construct(AttributeOption $attributeOption)
-    {
-        $this->attributeOption = $attributeOption;
-    }
-
-    /**
-     * Returns the allowed variants
-     *
-     * @param CartItem $item
-     * @return array
-     */
-    public function getItemOptionDetails($item)
-    {
-        $data = [];
-
-        foreach ($item->product->super_attributes as $attribute) {
-
-        }
-
-        return $data;
-    }
-}
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Http/helpers.php b/packages/Webkul/Cart/src/Http/helpers.php
new file mode 100644
index 000000000..4dea2757c
--- /dev/null
+++ b/packages/Webkul/Cart/src/Http/helpers.php
@@ -0,0 +1,10 @@
+<?php
+    use Webkul\Cart\Cart;
+    
+    if (! function_exists('cart')) {
+        function cart()
+        {
+            return new Cart;
+        }
+    }
+?>
\ No newline at end of file
diff --git a/packages/Webkul/Cart/src/Models/Cart.php b/packages/Webkul/Cart/src/Models/Cart.php
index e70421da3..c830605ac 100644
--- a/packages/Webkul/Cart/src/Models/Cart.php
+++ b/packages/Webkul/Cart/src/Models/Cart.php
@@ -4,6 +4,7 @@ namespace Webkul\Cart\Models;
 
 use Illuminate\Database\Eloquent\Model;
 use Webkul\Product\Models\Product;
+use Webkul\Cart\Models\CartItem;
 use Webkul\Cart\Models\CartAddress;
 use Webkul\Cart\Models\CartPayment;
 use Webkul\Cart\Models\CartShippingRate;
@@ -17,7 +18,7 @@ class Cart extends Model
     protected $hidden = ['coupon_code'];
 
     public function items() {
-        return $this->hasMany('Webkul\Cart\Models\CartItem');
+        return $this->hasMany(CartItem::class)->whereNull('parent_id');
     }
 
     /**
diff --git a/packages/Webkul/Cart/src/Models/CartItem.php b/packages/Webkul/Cart/src/Models/CartItem.php
index c54ba0756..1a434f138 100644
--- a/packages/Webkul/Cart/src/Models/CartItem.php
+++ b/packages/Webkul/Cart/src/Models/CartItem.php
@@ -14,4 +14,20 @@ class CartItem extends Model
     public function product() {
         return $this->hasOne('Webkul\Product\Models\Product', 'id', 'product_id');
     }
+
+    /**
+     * Get the phone record associated with the user.
+     */
+    public function parent()
+    {
+        return $this->hasOne(self::class, 'parent_id');
+    }
+
+    /**
+     * Get the phone record associated with the user.
+     */
+    public function child()
+    {
+        return $this->belongsTo(self::class, 'parent_id');
+    }
 }
diff --git a/packages/Webkul/Cart/src/Providers/CartServiceProvider.php b/packages/Webkul/Cart/src/Providers/CartServiceProvider.php
index ab3302409..b6438bc9f 100644
--- a/packages/Webkul/Cart/src/Providers/CartServiceProvider.php
+++ b/packages/Webkul/Cart/src/Providers/CartServiceProvider.php
@@ -16,6 +16,8 @@ class CartServiceProvider extends ServiceProvider
 
     public function boot(Router $router)
     {
+        include __DIR__ . '/../Http/helpers.php';
+        
         $this->loadMigrationsFrom(__DIR__ . '/../Database/Migrations');
 
         $router->aliasMiddleware('admin', RedirectIfNotAdmin::class);
diff --git a/packages/Webkul/Sales/composer.json b/packages/Webkul/Sales/composer.json
new file mode 100644
index 000000000..96628ca1c
--- /dev/null
+++ b/packages/Webkul/Sales/composer.json
@@ -0,0 +1,25 @@
+{
+    "name": "webkul/laravel-sales",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Jitendra Singh",
+            "email": "jitendra@webkul.com"
+        }
+    ],
+    "require": {},
+    "autoload": {
+        "psr-4": {
+            "Webkul\\Sales\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Webkul\\Sales\\Providers\\SalesServiceProvider"
+            ],
+            "aliases": {}
+        }
+    },
+    "minimum-stability": "dev"
+}
diff --git a/packages/Webkul/Sales/src/Providers/SalesServiceProvider.php b/packages/Webkul/Sales/src/Providers/SalesServiceProvider.php
new file mode 100644
index 000000000..38d971983
--- /dev/null
+++ b/packages/Webkul/Sales/src/Providers/SalesServiceProvider.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace Webkul\Sales\Providers;
+
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Routing\Router;
+use Illuminate\Foundation\AliasLoader;
+
+class SalesServiceProvider extends ServiceProvider
+{
+
+    public function boot(Router $router)
+    {
+        $this->loadMigrationsFrom(__DIR__ . '/../Database/Migrations');
+    }
+
+    /**
+     * Register services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php
index b296570f6..a2cb5d4c9 100644
--- a/packages/Webkul/Shop/src/Http/routes.php
+++ b/packages/Webkul/Shop/src/Http/routes.php
@@ -4,7 +4,7 @@ Route::group(['middleware' => ['web']], function () {
 
     Route::get('/', 'Webkul\Shop\Http\Controllers\HomeController@index')->defaults('_config', [
         'view' => 'shop::home.index'
-    ])->name('store.home');
+    ])->name('shop.home.index');
 
     Route::get('/categories/{slug}', 'Webkul\Shop\Http\Controllers\CategoryController@index')->defaults('_config', [
         'view' => 'shop::products.index'
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss
index b9b2593e8..b39e65387 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss
@@ -2,7 +2,7 @@
 $font-color: #242424;
 $font-size-base: 16px;
 $border-color: #E8E8E8;
-$brand-color: #0031f0;
+$brand-color: #0041FF;
 //shop variables ends here
 
 
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index 970be8186..e6723503e 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -1941,135 +1941,39 @@ section.product-detail {
 
 /* cart pages and elements css begins here */
 section.cart {
+    width: 100%;
     color: $font-color;
     margin-bottom: 80px;
+    margin-top: 20px;
 
     .title {
         font-size: 24px;
     }
 
     .cart-content {
-        margin-top: 21px;
-        padding: 1px;
-        display: flex;
-        flex-direction: row;
-    }
-}
+        margin-top: 20px;
+        width: 100%;
+        display: inline-block;
 
-.cart {
-    .left-side {
-        width: 68.6%;
-        margin-right: 2.4%;
-    }
+        .left-side {
+            width: 70%;
+            float: left;
 
-    .right-side {
-        width: 29%;
-        display: block;
+            .misc-controls {
+                float: right;
+                margin-top: 20px;
 
-        .price-section {
-            width: 100%;
-            padding: 10px 10px 18px 18px;
-            margin-bottom: 20px;
-
-            .title {
-                font-weight: bold;
-                padding-bottom: 8px;
-                margin-bottom: 10px;
-            }
-
-            .all-item-details {
-                margin-bottom: 17px;
-
-                .item-details {
-                    margin-bottom: 10px;
-
-                    .name {
-                    }
-
-                    .price {
-                        float: right;
-                    }
-                }
-            }
-            .horizontal-rule {
-                width: 100%;
-                height: 1px;
-                vertical-align: middle;
-                background: $border-color;
-            }
-
-            .total-details {
-                margin-top: 10px;
-
-                .amount {
-                    float: right;
+                a.link {
+                    margin-right: 15px;
                 }
             }
         }
 
-        .coupon-section {
-            padding: 10px 10px 18px 18px;
-
-            .title {
-                font-weight: bold;
-                margin-bottom: 10px;
-            }
-
-            .control-group {
-                margin-bottom: 12px !important;
-
-                input.coupon-input::-moz-placeholder {
-                    font-family: "montserrat", sans-serif;
-                    color: $font-color;
-                }
-
-                input.coupon-input::-webkit-input-placeholder {
-                    font-family: "montserrat", sans-serif;
-                    color: $font-color;
-                }
-
-            }
-
-            button {
-                margin-bottom: 10px;
-                background-color: #000;
-                border-radius: 0px;
-            }
-
-            .coupon-details {
-
-                .coupon {
-                    margin-bottom: 8px;
-
-                    .discount {
-                        float: right;
-                    }
-                }
-            }
-
-            .horizontal-rule {
-                width: 100%;
-                height: 1px;
-                vertical-align: middle;
-                background: $border-color;
-                margin-bottom: 9px;
-            }
-
-            .after-coupon-amount {
-
-                .name {
-                    font-weight: bold;
-                }
-
-                .amount {
-                    float: right;
-                    font-weight: bold;
-                }
-
-            }
-
+        .right-side {
+            width: 30%;
+            display: inline-block;
+            padding-left: 40px;
         }
-
     }
 }
 
@@ -2078,10 +1982,12 @@ section.cart {
     padding: 1px;
 
     .item {
-        padding: 1.1%;
+        padding: 10px;
         margin-bottom: 20px;
         display: flex;
         flex-direction: row;
+        border: 1px solid $border-color;
+        border-radius: 3px;
 
         .item-image {
             height: 160px;
@@ -2095,24 +2001,13 @@ section.cart {
             .item-title {
                 font-size: 18px;
                 margin-bottom: 10px;
+                font-weight: 600;
             }
 
             .price {
                 margin-bottom: 10px;
-
-                .main-price {
-                    font-size: 18px;
-                    margin-right: 4px;
-                }
-
-                .real-price {
-                    margin-right: 4px;
-                    text-decoration-line: line-through;
-                }
-
-                .discount {
-                    color: #FF6472;
-                }
+                font-size: 18px;
+                font-weight: 600;
             }
 
             .summary {
@@ -2151,20 +2046,242 @@ section.cart {
             }
         }
     }
+}
 
-    .misc-controls {
-        float: right;
+.order-summary {
+    h3 {
+        font-size: 16px;
+        margin-top: 0;
+    }
 
-        span {
-            margin-right: 15px;
+    .item-detail {
+        margin-top:12px;
+
+        label {
+            &.right {
+                float: right;
+            }
         }
+    }
 
-        button {
-            border-radius: 0px;
+    .payble-amount {
+        margin-top: 17px;
+        border-top: 1px solid $border-color;
+        padding-top: 12px;
+
+        label {
+            font-weight: bold;
+
+            &.right {
+                float:right;
+            }
         }
     }
 }
 
+// checkout starts here
+.checkout-process {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    .col-main {
+        width: 65%;
+        padding-right: 40px;
+
+        ul.checkout-steps {
+            width: 100%;
+            display: inline-flex;
+            justify-content: space-between;
+            width: 100%;
+            padding-bottom: 15px;
+            border-bottom: 1px solid $border-color;
+
+            li {
+                height: 48px;
+                display:flex;
+
+                .decorator {
+                    height: 48px;
+                    width: 48px;
+                    border: 1px solid black;
+                    border-radius: 50%;
+                    display: inline-flex;
+                    border: 1px solid $border-color;
+                    background-repeat: no-repeat;
+                    background-position: center;
+
+                    &.address-info {
+                        background-image: url('../images/address.svg');
+                    }
+
+                    &.shipping {
+                        background-image: url('../images/shipping.svg');
+                    }
+
+                    &.payment {
+                        background-image: url('../images/payment.svg');
+                    }
+
+                    &.review {
+                        background-image: url('../images/finish.svg');
+                    }
+                }
+
+                &.completed {
+                    cursor: pointer;
+
+                    .decorator {
+                        background-image: url('../images/complete.svg');
+                    }
+                }
+
+                span {
+                    margin-left: 7px;
+                    margin-top: auto;
+                    margin-bottom: auto;
+                }
+
+                &.active {
+                    color: #2650EF;
+
+                    .decorator {
+                        border: 1px solid #2650EF;
+                    }
+                }
+            }
+        }
+
+        .step-content {
+            padding-top: 20px;
+
+            .form-header {
+                width: 100%;
+                display: inline-block;
+
+                h1 {
+                    float: left;
+                }
+
+                .btn {
+                    float: right;
+                }
+            }
+
+            .form-container {
+                border-bottom: 1px solid $border-color;
+                padding-top: 20px;
+                padding-bottom: 20px;
+            }
+
+            .shipping-methods {
+                h4 {
+                    margin: 0;
+                }
+            }
+
+            .payment-methods {
+                .radio {
+                    font-weight: 600;
+                }
+
+                .control-info {
+                    margin-left: 28px;
+                }
+            }
+
+            .address {
+                display: inline-block;
+                width: 100%;
+
+                .address-card {
+                    width: 50%;
+                    float: left;
+
+                    .card-title span {
+                        font-weight: 600;
+                    }
+
+                    .card-content {
+                        margin-top: 15px;
+                        color: #121212;
+                        line-height: 25px;
+
+                        .horizontal-rule {
+                            margin: 12px 0;
+                            display: block;
+                            width: 25px;
+                            background: #121212;
+                        }
+                    }
+                }
+            }
+
+            .cart-item-list {
+                .item {
+                    .row {
+                        .title {
+                            width: 100px;
+                            display: inline-block;
+                            color: #5E5E5E;
+                            font-weight: 500;
+                            margin-bottom: 10px;
+                        }
+
+                        .value {
+                            font-size: 18px;
+                            font-weight: 600;
+                        }
+                    }
+                }
+            }
+
+            .order-description {
+                display: inline-block;
+                width: 100%;
+
+                .shipping {
+                    margin-bottom: 25px;
+                }
+
+                .decorator {
+                    height: 48px;
+                    width: 48px;
+                    border-radius: 50%;
+                    border: 1px solid $border-color;
+                    vertical-align: middle;
+                    display: inline-block;
+                    text-align: center;
+
+                    .icon {
+                        margin-top: 7px;
+                    }
+                }
+
+                .text {
+                    font-weight: 600;
+                    vertical-align: middle;
+                    display: inline-block;
+
+                    .info {
+                        font-weight: 500;
+                        margin-top: 2px;
+                    }
+                }
+            }
+            // complete page end here
+        }
+    }
+
+    .col-right {
+        width: 35%;
+        padding-left: 40px;
+    }
+}
+// checkout ends here
+
 .attached-products-wrapper {
     margin-bottom: 80px;
 
@@ -2197,6 +2314,9 @@ section.cart {
 }
 
 
+
+
+
 //=======>Need to be removed
 @media all and (max-width: 480px){
 
@@ -3068,259 +3188,7 @@ section.cart {
 //<=======Need to be removed
 
 
-// checkout starts here
-.checkout-process {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    margin-top: 20px;
-    margin-bottom: 20px;
 
-    .col-main {
-        width: 65%;
-        padding-right: 40px;
-
-        ul.checkout-steps {
-            width: 100%;
-            display: inline-flex;
-            justify-content: space-between;
-            width: 100%;
-            padding-bottom: 15px;
-            border-bottom: 1px solid $border-color;
-
-            li {
-                height: 48px;
-                display:flex;
-
-                .decorator {
-                    height: 48px;
-                    width: 48px;
-                    border: 1px solid black;
-                    border-radius: 50%;
-                    display: inline-flex;
-                    border: 1px solid $border-color;
-                    background-repeat: no-repeat;
-                    background-position: center;
-
-                    &.address-info {
-                        background-image: url('../images/address.svg');
-                    }
-
-                    &.shipping {
-                        background-image: url('../images/shipping.svg');
-                    }
-
-                    &.payment {
-                        background-image: url('../images/payment.svg');
-                    }
-
-                    &.review {
-                        background-image: url('../images/finish.svg');
-                    }
-                }
-
-                &.completed {
-                    cursor: pointer;
-
-                    .decorator {
-                        background-image: url('../images/complete.svg');
-                    }
-                }
-
-                span {
-                    margin-left: 7px;
-                    margin-top: auto;
-                    margin-bottom: auto;
-                }
-
-                &.active {
-                    color: #2650EF;
-
-                    .decorator {
-                        border: 1px solid #2650EF;
-                    }
-                }
-            }
-        }
-
-        .step-content {
-            padding-top: 20px;
-
-            .form-header {
-                width: 100%;
-                display: inline-block;
-
-                h1 {
-                    float: left;
-                }
-
-                .btn {
-                    float: right;
-                }
-            }
-
-            .form-container {
-                border-bottom: 1px solid $border-color;
-                padding-top: 20px;
-                padding-bottom: 20px;
-            }
-
-            .shipping-methods {
-                h4 {
-                    margin: 0;
-                }
-            }
-
-            .payment-methods {
-                .radio {
-                    font-weight: 600;
-                }
-
-                .control-info {
-                    margin-left: 28px;
-                }
-            }
-
-            .address {
-                display: inline-block;
-                width: 100%;
-
-                .address-card {
-                    width: 50%;
-                    float: left;
-
-                    .card-title span {
-                        font-weight: 600;
-                    }
-
-                    .card-content {
-                        margin-top: 15px;
-                        color: #121212;
-                        line-height: 25px;
-
-                        .horizontal-rule {
-                            margin: 12px 0;
-                            display: block;
-                            width: 25px;
-                            background: #121212;
-                        }
-                    }
-                }
-            }
-
-            .cart-item-list {
-                .item {
-                    border: 1px solid $border-color;
-                    border-radius: 3px;
-                    padding: 20px;
-
-                    .row {
-                        .title {
-                            width: 100px;
-                            display: inline-block;
-                            color: #5E5E5E;
-                            font-weight: 500;
-                            margin-bottom: 10px;
-                        }
-
-                        .value {
-                            font-size: 18px;
-                            font-weight: 600;
-                        }
-                    }
-                }
-            }
-
-            .order-description {
-                display: inline-block;
-                width: 100%;
-
-                .shipping {
-                    margin-bottom: 25px;
-                }
-
-                .decorator {
-                    height: 48px;
-                    width: 48px;
-                    border-radius: 50%;
-                    border: 1px solid $border-color;
-                    vertical-align: middle;
-                    display: inline-block;
-                    text-align: center;
-
-                    .icon {
-                        margin-top: 7px;
-                    }
-                }
-
-                .text {
-                    font-weight: 600;
-                    vertical-align: middle;
-                    display: inline-block;
-
-                    .info {
-                        font-weight: 500;
-                        margin-top: 2px;
-                    }
-                }
-            }
-            // complete page end here
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-        }
-    }
-
-    .col-right {
-        width: 35%;
-        padding-left: 40px;
-    }
-
-    .order-summary {
-        h3 {
-            font-size: 16px;
-        }
-
-        .item-detail {
-            margin-top:12px;
-
-            label {
-                &.right {
-                    float: right;
-                }
-            }
-        }
-
-        .payble-amount {
-            margin-top: 17px;
-            border-top: 1px solid $border-color;
-            padding-top: 12px;
-
-            label {
-                font-weight: bold;
-
-                &.right {
-                    float:right;
-                }
-            }
-        }
-    }
-}
-// checkout ends here
 
 // review page start here
 section.review {
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index d2ccf7be8..d87981178 100644
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -62,6 +62,8 @@ return [
         'cart' => [
             'title' => 'Shopping Cart',
             'empty' => 'Shopping Cart Is Empty',
+            'continue-shopping' => 'Continue Shopping',
+            'proceed-to-checkout' => 'Proceed To Checkout'
         ],
 
         'onepage' => [
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
index 0b21826d7..cffcfd32a 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
@@ -20,7 +20,7 @@
 
                 <div class="left-side">
 
-                    <div class="cart-item-list">
+                    <div class="cart-item-list" style="margin-top: 0">
                         @foreach($cart->items as $item)
 
                             <?php 
@@ -41,20 +41,19 @@
                                     </div>
 
                                     <div class="price">
-                                        <span class="main-price">
-                                            {{ $item->price }}
-                                        </span>
-                                        <span class="real-price">
-                                            $25.00
-                                        </span>
-                                        <span class="discount">
-                                            10% Off
-                                        </span>
+                                        {{ core()->currency($item->base_price) }}
                                     </div>
 
-                                    <div class="summary" >
-                                        Color : Gray, Size : S
-                                    </div>
+                                    @if ($product->type == 'configurable')
+                        
+                                        <div class="summary" >
+                                            @foreach (cart()->getItemAttributeOptionDetails($item) as $key => $option)
+
+                                                {{ (!$key ? '' : ' , ') . $option['attribute_name'] . ' : ' . $option['option_label'] }}
+                                            
+                                            @endforeach
+                                        </div>
+                                    @endif
 
                                     <div class="misc">
                                         <div class="qty-text">Quantity</div>
@@ -71,14 +70,20 @@
                     
 
                     <div class="misc-controls">
-                        <span>Continue Shopping</span>
-                        <button class="btn btn-lg btn-primary">PROCEED TO CHECKOUT</button>
+                        <a href="{{ route('shop.home.index') }}" class="link">{{ __('shop::app.checkout.cart.continue-shopping') }}</a>
+
+                        <a href="{{ route('shop.checkout.onepage.index') }}" class="btn btn-lg btn-primary">
+                            {{ __('shop::app.checkout.cart.proceed-to-checkout') }}
+                        </a>
                     </div>
                 </div>
 
                 <div class="right-side">
 
-                    <div class="price-section">
+
+                    @include('shop::checkout.total.summary', ['cart' => $cart])
+
+                    <!--<div class="price-section">
                         <div class="title">
                             Price Detail
                         </div>
@@ -129,7 +134,7 @@
                             <span class="amount">$75.00</span>
                         </div>
 
-                    </div>
+                    </div>-->
 
                 </div>
 
diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
index 33f4b31d7..32f0397ce 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/onepage/review.blade.php
@@ -84,11 +84,12 @@
                     </div>
 
                     @if ($product->type == 'configurable')
+                        
                         <div class="summary" >
-                            @foreach ($product->super_attributes as $attribute)
-
-                                {{ $attribute->name . ' : ' . $product->{$attribute->code} }},
+                            @foreach (cart()->getItemAttributeOptionDetails($item) as $key => $option)
 
+                                {{ (!$key ? '' : ' , ') . $option['attribute_name'] . ' : ' . $option['option_label'] }}
+                            
                             @endforeach
                         </div>
                     @endif
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
index 78c921a49..039e5b528 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
@@ -4,7 +4,7 @@
 
             <ul class="logo-container">
                 <li>
-                    <a href="{{ route('store.home') }}">
+                    <a href="{{ route('shop.home.index') }}">
                         <img class="logo" src="{{ asset('vendor/webkul/shop/assets/images/logo.svg') }}" />
                     </a>
                 </li>
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 84a0cc127..c7ab7b824 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -253,7 +253,7 @@ body {
 }
 
 .header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart .cart-count {
-  color: #0031f0;
+  color: #0041FF;
   padding-right: 3px;
 }
 
@@ -791,7 +791,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 
 .layered-filter-wrapper .filter-attributes .filter-attributes-item .filter-attributes-title .remove-filter-link {
   font-weight: 400;
-  color: #0031f0;
+  color: #0041FF;
   margin-right: 10px;
 }
 
@@ -1410,7 +1410,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 
 .content .login-form .forgot-password-link {
   font-size: 17px;
-  color: #0031f0;
+  color: #0041FF;
   letter-spacing: -0.11px;
   margin-bottom: 5%;
 }
@@ -1492,7 +1492,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .account-content .account-side-menu li.active {
-  color: #0031f0;
+  color: #0041FF;
 }
 
 .account-content .profile {
@@ -1511,7 +1511,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 .account-content .profile .section-head .profile-edit {
   font-size: 17px;
   margin-top: 1%;
-  color: #0031f0;
+  color: #0041FF;
   letter-spacing: -0.11px;
   float: right;
 }
@@ -1955,14 +1955,16 @@ section.product-detail div.layouter form .details .attributes {
 
 .rating-reviews .reviews .view-all {
   margin-top: 15px;
-  color: #0031f0;
+  color: #0041FF;
   margin-bottom: 15px;
 }
 
 /* cart pages and elements css begins here */
 section.cart {
+  width: 100%;
   color: #242424;
   margin-bottom: 80px;
+  margin-top: 20px;
 }
 
 section.cart .title {
@@ -1970,118 +1972,29 @@ section.cart .title {
 }
 
 section.cart .cart-content {
-  margin-top: 21px;
-  padding: 1px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-}
-
-.cart .left-side {
-  width: 68.6%;
-  margin-right: 2.4%;
-}
-
-.cart .right-side {
-  width: 29%;
-  display: block;
-}
-
-.cart .right-side .price-section {
+  margin-top: 20px;
   width: 100%;
-  padding: 10px 10px 18px 18px;
-  margin-bottom: 20px;
+  display: inline-block;
 }
 
-.cart .right-side .price-section .title {
-  font-weight: bold;
-  padding-bottom: 8px;
-  margin-bottom: 10px;
+section.cart .cart-content .left-side {
+  width: 70%;
+  float: left;
 }
 
-.cart .right-side .price-section .all-item-details {
-  margin-bottom: 17px;
-}
-
-.cart .right-side .price-section .all-item-details .item-details {
-  margin-bottom: 10px;
-}
-
-.cart .right-side .price-section .all-item-details .item-details .price {
+section.cart .cart-content .left-side .misc-controls {
   float: right;
+  margin-top: 20px;
 }
 
-.cart .right-side .price-section .horizontal-rule {
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #E8E8E8;
+section.cart .cart-content .left-side .misc-controls a.link {
+  margin-right: 15px;
 }
 
-.cart .right-side .price-section .total-details {
-  margin-top: 10px;
-}
-
-.cart .right-side .price-section .total-details .amount {
-  float: right;
-}
-
-.cart .right-side .coupon-section {
-  padding: 10px 10px 18px 18px;
-}
-
-.cart .right-side .coupon-section .title {
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.cart .right-side .coupon-section .control-group {
-  margin-bottom: 12px !important;
-}
-
-.cart .right-side .coupon-section .control-group input.coupon-input::-moz-placeholder {
-  font-family: "montserrat", sans-serif;
-  color: #242424;
-}
-
-.cart .right-side .coupon-section .control-group input.coupon-input::-webkit-input-placeholder {
-  font-family: "montserrat", sans-serif;
-  color: #242424;
-}
-
-.cart .right-side .coupon-section button {
-  margin-bottom: 10px;
-  background-color: #000;
-  border-radius: 0px;
-}
-
-.cart .right-side .coupon-section .coupon-details .coupon {
-  margin-bottom: 8px;
-}
-
-.cart .right-side .coupon-section .coupon-details .coupon .discount {
-  float: right;
-}
-
-.cart .right-side .coupon-section .horizontal-rule {
-  width: 100%;
-  height: 1px;
-  vertical-align: middle;
-  background: #E8E8E8;
-  margin-bottom: 9px;
-}
-
-.cart .right-side .coupon-section .after-coupon-amount .name {
-  font-weight: bold;
-}
-
-.cart .right-side .coupon-section .after-coupon-amount .amount {
-  float: right;
-  font-weight: bold;
+section.cart .cart-content .right-side {
+  width: 30%;
+  display: inline-block;
+  padding-left: 40px;
 }
 
 .cart-item-list {
@@ -2090,7 +2003,7 @@ section.cart .cart-content {
 }
 
 .cart-item-list .item {
-  padding: 1.1%;
+  padding: 10px;
   margin-bottom: 20px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -2099,6 +2012,8 @@ section.cart .cart-content {
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
+  border: 1px solid #E8E8E8;
+  border-radius: 3px;
 }
 
 .cart-item-list .item .item-image {
@@ -2119,25 +2034,13 @@ section.cart .cart-content {
 .cart-item-list .item .item-details .item-title {
   font-size: 18px;
   margin-bottom: 10px;
+  font-weight: 600;
 }
 
 .cart-item-list .item .item-details .price {
   margin-bottom: 10px;
-}
-
-.cart-item-list .item .item-details .price .main-price {
   font-size: 18px;
-  margin-right: 4px;
-}
-
-.cart-item-list .item .item-details .price .real-price {
-  margin-right: 4px;
-  -webkit-text-decoration-line: line-through;
-          text-decoration-line: line-through;
-}
-
-.cart-item-list .item .item-details .price .discount {
-  color: #FF6472;
+  font-weight: 600;
 }
 
 .cart-item-list .item .item-details .summary {
@@ -2172,24 +2075,242 @@ section.cart .cart-content {
 }
 
 .cart-item-list .item .item-details .misc .remove {
-  color: #0031f0;
+  color: #0041FF;
   margin-right: 30px;
 }
 
 .cart-item-list .item .item-details .misc .towishlist {
-  color: #0031f0;
+  color: #0041FF;
 }
 
-.cart-item-list .misc-controls {
+.order-summary h3 {
+  font-size: 16px;
+  margin-top: 0;
+}
+
+.order-summary .item-detail {
+  margin-top: 12px;
+}
+
+.order-summary .item-detail label.right {
   float: right;
 }
 
-.cart-item-list .misc-controls span {
-  margin-right: 15px;
+.order-summary .payble-amount {
+  margin-top: 17px;
+  border-top: 1px solid #E8E8E8;
+  padding-top: 12px;
 }
 
-.cart-item-list .misc-controls button {
-  border-radius: 0px;
+.order-summary .payble-amount label {
+  font-weight: bold;
+}
+
+.order-summary .payble-amount label.right {
+  float: right;
+}
+
+.checkout-process {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  width: 100%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.checkout-process .col-main {
+  width: 65%;
+  padding-right: 40px;
+}
+
+.checkout-process .col-main ul.checkout-steps {
+  width: 100%;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #E8E8E8;
+}
+
+.checkout-process .col-main ul.checkout-steps li {
+  height: 48px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.checkout-process .col-main ul.checkout-steps li .decorator {
+  height: 48px;
+  width: 48px;
+  border: 1px solid black;
+  border-radius: 50%;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border: 1px solid #E8E8E8;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.checkout-process .col-main ul.checkout-steps li .decorator.address-info {
+  background-image: url("../images/address.svg");
+}
+
+.checkout-process .col-main ul.checkout-steps li .decorator.shipping {
+  background-image: url("../images/shipping.svg");
+}
+
+.checkout-process .col-main ul.checkout-steps li .decorator.payment {
+  background-image: url("../images/payment.svg");
+}
+
+.checkout-process .col-main ul.checkout-steps li .decorator.review {
+  background-image: url("../images/finish.svg");
+}
+
+.checkout-process .col-main ul.checkout-steps li.completed {
+  cursor: pointer;
+}
+
+.checkout-process .col-main ul.checkout-steps li.completed .decorator {
+  background-image: url("../images/complete.svg");
+}
+
+.checkout-process .col-main ul.checkout-steps li span {
+  margin-left: 7px;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.checkout-process .col-main ul.checkout-steps li.active {
+  color: #2650EF;
+}
+
+.checkout-process .col-main ul.checkout-steps li.active .decorator {
+  border: 1px solid #2650EF;
+}
+
+.checkout-process .col-main .step-content {
+  padding-top: 20px;
+}
+
+.checkout-process .col-main .step-content .form-header {
+  width: 100%;
+  display: inline-block;
+}
+
+.checkout-process .col-main .step-content .form-header h1 {
+  float: left;
+}
+
+.checkout-process .col-main .step-content .form-header .btn {
+  float: right;
+}
+
+.checkout-process .col-main .step-content .form-container {
+  border-bottom: 1px solid #E8E8E8;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.checkout-process .col-main .step-content .shipping-methods h4 {
+  margin: 0;
+}
+
+.checkout-process .col-main .step-content .payment-methods .radio {
+  font-weight: 600;
+}
+
+.checkout-process .col-main .step-content .payment-methods .control-info {
+  margin-left: 28px;
+}
+
+.checkout-process .col-main .step-content .address {
+  display: inline-block;
+  width: 100%;
+}
+
+.checkout-process .col-main .step-content .address .address-card {
+  width: 50%;
+  float: left;
+}
+
+.checkout-process .col-main .step-content .address .address-card .card-title span {
+  font-weight: 600;
+}
+
+.checkout-process .col-main .step-content .address .address-card .card-content {
+  margin-top: 15px;
+  color: #121212;
+  line-height: 25px;
+}
+
+.checkout-process .col-main .step-content .address .address-card .card-content .horizontal-rule {
+  margin: 12px 0;
+  display: block;
+  width: 25px;
+  background: #121212;
+}
+
+.checkout-process .col-main .step-content .cart-item-list .item .row .title {
+  width: 100px;
+  display: inline-block;
+  color: #5E5E5E;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.checkout-process .col-main .step-content .cart-item-list .item .row .value {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.checkout-process .col-main .step-content .order-description {
+  display: inline-block;
+  width: 100%;
+}
+
+.checkout-process .col-main .step-content .order-description .shipping {
+  margin-bottom: 25px;
+}
+
+.checkout-process .col-main .step-content .order-description .decorator {
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  border: 1px solid #E8E8E8;
+  vertical-align: middle;
+  display: inline-block;
+  text-align: center;
+}
+
+.checkout-process .col-main .step-content .order-description .decorator .icon {
+  margin-top: 7px;
+}
+
+.checkout-process .col-main .step-content .order-description .text {
+  font-weight: 600;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.checkout-process .col-main .step-content .order-description .text .info {
+  font-weight: 500;
+  margin-top: 2px;
+}
+
+.checkout-process .col-right {
+  width: 35%;
+  padding-left: 40px;
 }
 
 .attached-products-wrapper {
@@ -2262,7 +2383,7 @@ section.cart .cart-content {
 .order .order-section-head .order-cancel {
   font-size: 17px;
   margin-top: 1%;
-  color: #0031f0;
+  color: #0041FF;
   letter-spacing: -0.11px;
   float: right;
 }
@@ -2548,7 +2669,7 @@ section.cart .cart-content {
     float: right;
     text-align: right;
     font-size: 17px;
-    color: #0031f0;
+    color: #0041FF;
     letter-spacing: -0.11px;
     margin-top: 13px;
     margin-bottom: 13px;
@@ -2772,7 +2893,7 @@ section.cart .cart-content {
     float: right;
     text-align: right;
     font-size: 17px;
-    color: #0031f0;
+    color: #0041FF;
     letter-spacing: -0.11px;
     margin-top: 13px;
     margin-bottom: 13px;
@@ -2964,241 +3085,6 @@ section.cart .cart-content {
   }
 }
 
-.checkout-process {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  width: 100%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.checkout-process .col-main {
-  width: 65%;
-  padding-right: 40px;
-}
-
-.checkout-process .col-main ul.checkout-steps {
-  width: 100%;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  width: 100%;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #E8E8E8;
-}
-
-.checkout-process .col-main ul.checkout-steps li {
-  height: 48px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.checkout-process .col-main ul.checkout-steps li .decorator {
-  height: 48px;
-  width: 48px;
-  border: 1px solid black;
-  border-radius: 50%;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  border: 1px solid #E8E8E8;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.checkout-process .col-main ul.checkout-steps li .decorator.address-info {
-  background-image: url("../images/address.svg");
-}
-
-.checkout-process .col-main ul.checkout-steps li .decorator.shipping {
-  background-image: url("../images/shipping.svg");
-}
-
-.checkout-process .col-main ul.checkout-steps li .decorator.payment {
-  background-image: url("../images/payment.svg");
-}
-
-.checkout-process .col-main ul.checkout-steps li .decorator.review {
-  background-image: url("../images/finish.svg");
-}
-
-.checkout-process .col-main ul.checkout-steps li.completed {
-  cursor: pointer;
-}
-
-.checkout-process .col-main ul.checkout-steps li.completed .decorator {
-  background-image: url("../images/complete.svg");
-}
-
-.checkout-process .col-main ul.checkout-steps li span {
-  margin-left: 7px;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.checkout-process .col-main ul.checkout-steps li.active {
-  color: #2650EF;
-}
-
-.checkout-process .col-main ul.checkout-steps li.active .decorator {
-  border: 1px solid #2650EF;
-}
-
-.checkout-process .col-main .step-content {
-  padding-top: 20px;
-}
-
-.checkout-process .col-main .step-content .form-header {
-  width: 100%;
-  display: inline-block;
-}
-
-.checkout-process .col-main .step-content .form-header h1 {
-  float: left;
-}
-
-.checkout-process .col-main .step-content .form-header .btn {
-  float: right;
-}
-
-.checkout-process .col-main .step-content .form-container {
-  border-bottom: 1px solid #E8E8E8;
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-.checkout-process .col-main .step-content .shipping-methods h4 {
-  margin: 0;
-}
-
-.checkout-process .col-main .step-content .payment-methods .radio {
-  font-weight: 600;
-}
-
-.checkout-process .col-main .step-content .payment-methods .control-info {
-  margin-left: 28px;
-}
-
-.checkout-process .col-main .step-content .address {
-  display: inline-block;
-  width: 100%;
-}
-
-.checkout-process .col-main .step-content .address .address-card {
-  width: 50%;
-  float: left;
-}
-
-.checkout-process .col-main .step-content .address .address-card .card-title span {
-  font-weight: 600;
-}
-
-.checkout-process .col-main .step-content .address .address-card .card-content {
-  margin-top: 15px;
-  color: #121212;
-  line-height: 25px;
-}
-
-.checkout-process .col-main .step-content .address .address-card .card-content .horizontal-rule {
-  margin: 12px 0;
-  display: block;
-  width: 25px;
-  background: #121212;
-}
-
-.checkout-process .col-main .step-content .cart-item-list .item {
-  border: 1px solid #E8E8E8;
-  border-radius: 3px;
-  padding: 20px;
-}
-
-.checkout-process .col-main .step-content .cart-item-list .item .row .title {
-  width: 100px;
-  display: inline-block;
-  color: #5E5E5E;
-  font-weight: 500;
-  margin-bottom: 10px;
-}
-
-.checkout-process .col-main .step-content .cart-item-list .item .row .value {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.checkout-process .col-main .step-content .order-description {
-  display: inline-block;
-  width: 100%;
-}
-
-.checkout-process .col-main .step-content .order-description .shipping {
-  margin-bottom: 25px;
-}
-
-.checkout-process .col-main .step-content .order-description .decorator {
-  height: 48px;
-  width: 48px;
-  border-radius: 50%;
-  border: 1px solid #E8E8E8;
-  vertical-align: middle;
-  display: inline-block;
-  text-align: center;
-}
-
-.checkout-process .col-main .step-content .order-description .decorator .icon {
-  margin-top: 7px;
-}
-
-.checkout-process .col-main .step-content .order-description .text {
-  font-weight: 600;
-  vertical-align: middle;
-  display: inline-block;
-}
-
-.checkout-process .col-main .step-content .order-description .text .info {
-  font-weight: 500;
-  margin-top: 2px;
-}
-
-.checkout-process .col-right {
-  width: 35%;
-  padding-left: 40px;
-}
-
-.checkout-process .order-summary h3 {
-  font-size: 16px;
-}
-
-.checkout-process .order-summary .item-detail {
-  margin-top: 12px;
-}
-
-.checkout-process .order-summary .item-detail label.right {
-  float: right;
-}
-
-.checkout-process .order-summary .payble-amount {
-  margin-top: 17px;
-  border-top: 1px solid #E8E8E8;
-  padding-top: 12px;
-}
-
-.checkout-process .order-summary .payble-amount label {
-  font-weight: bold;
-}
-
-.checkout-process .order-summary .payble-amount label.right {
-  float: right;
-}
-
 section.review {
   color: #242424;
 }
@@ -3322,7 +3208,7 @@ section.review .review-layouter .review-info .submit-button {
 }
 
 section.review .review-layouter .review-info .submit-button button {
-  background: #0031f0;
+  background: #0041FF;
   font-size: 14px;
   color: #FFFFFF;
   letter-spacing: -0.26px;
@@ -3394,7 +3280,7 @@ section.review .review-layouter .review-info .review-detail .rating-calculate .p
 }
 
 .cusomer-section .customer-section-info .pro-discription .title {
-  color: #0031f0;
+  color: #0041FF;
   margin-top: 15px;
 }
 

From 2ed733941e732e7e4fcd73bd6f0bba5df3049235 Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Thu, 27 Sep 2018 15:43:47 +0530
Subject: [PATCH 10/11] Unnecessary code removed from cart page

---
 .../views/checkout/cart/index.blade.php       | 54 -------------------
 1 file changed, 54 deletions(-)

diff --git a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
index cffcfd32a..ddd754cbc 100644
--- a/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/checkout/cart/index.blade.php
@@ -80,62 +80,8 @@
 
                 <div class="right-side">
 
-
                     @include('shop::checkout.total.summary', ['cart' => $cart])
 
-                    <!--<div class="price-section">
-                        <div class="title">
-                            Price Detail
-                        </div>
-                        <div class="all-item-details">
-                            @foreach($cart->items as $item)
-                                <div class="item-details">
-                                    <span class="name">{{ $item->product->name }}</span>
-                                    <span class="price">$ {{ $item->price }}</span>
-                                </div>
-                            @endforeach
-                        </div>
-
-                        <div class="horizontal-rule"></div>
-
-                        <div class="total-details">
-                            <span class="name">Amount Payable</span>
-                            <span class="amount">$75.00</span>
-                        </div>
-
-                    </div>
-
-                    <div class="coupon-section">
-
-                        <span class="title">Apply Coupon</span>
-
-                        <div class="control-group">
-                            <input type="text" class="control coupon-input" placeholder="Coupon Code" />
-                        </div>
-
-                        <button class="btn btn-md btn-primary">Apply</button>
-
-                        <div class="coupon-details">
-                            <div class="title">Coupon Used</div>
-                            <div class="coupon">
-                                <span class="name">Coupon 1</span>
-                                <span class="discount">$15</span>
-                            </div>
-                            <div class="coupon">
-                                <span class="name">Coupon 2</span>
-                                <span class="discount">$5</span>
-                            </div>
-                        </div>
-
-                        <div class="horizontal-rule"></div>
-
-                        <div class="after-coupon-amount">
-                            <span class="name">Amount Payable</span>
-                            <span class="amount">$75.00</span>
-                        </div>
-
-                    </div>-->
-
                 </div>
 
             </div>

From 8ba80c0d2b1e06421c73b9b157187c9001b24e84 Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Thu, 27 Sep 2018 16:16:57 +0530
Subject: [PATCH 11/11] Cart facade issue fixed

---
 packages/Webkul/Cart/src/Cart.php | 66 +++++++++++++++----------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/packages/Webkul/Cart/src/Cart.php b/packages/Webkul/Cart/src/Cart.php
index 9e5f8f4a4..e2d810f48 100644
--- a/packages/Webkul/Cart/src/Cart.php
+++ b/packages/Webkul/Cart/src/Cart.php
@@ -206,51 +206,49 @@ class Cart {
      *
      * @return array
      */
-    public function prepareItemData($id, $data) {
+    public function prepareItemData($productId, $data)
+    {
+        $product = $this->product->findOneByField('id', $productId);
+
         unset($data['_token']);
 
-        if(!isset($data['is_configurable']) || !isset($data['product']) ||!isset($data['quantity'])) {
+        //Check if the product is salable
+        if(!isset($data['product']) ||!isset($data['quantity'])) {
             session()->flash('error', 'Cart System Integrity Violation, Some Required Fields Missing.');
 
             dd('Missing Essential Parameters, Cannot Proceed Further');
 
             return redirect()->back();
         } else {
-            if($data['is_configurable'] == "true") {
-                if(!isset($data['super_attribute'])) {
-                    session()->flash('error', 'Cart System Integrity Violation, Configurable Options Not Found In Request.');
+            if($product->type == 'configurable' && !isset($data['super_attribute'])) {
+                session()->flash('error', 'Cart System Integrity Violation, Configurable Options Not Found In Request.');
 
-                    dd('Super Attributes Missing From the Request Parameters.');
+                dd('Super Attributes Missing From the Request Parameters.');
 
-                    return redirect()->back();
-                }
+                return redirect()->back();
             }
         }
 
-        $data['sku'] = $this->product->findOneByField('id', $data['product'])->sku;
+        if($product->type == 'configurable') {
+            //Check if the product is salable
+            $child = $this->product->findOneByField('id', $data['selected_configurable_option']);
 
-        if(isset($data['is_configurable']) && $data['is_configurable'] == "true") {
-            $parentData['sku'] = $data['sku'];
+            $parentData = [
+                'sku' => $product->sku,
+                'product_id' => $productId,
+                'quantity' => $data['quantity'],
+                'type' => 'configurable',
+                'name' => $product->name,
+                'price' => ($price = $child->price), //This shoulf final price
+                'base_price' => $price,
+                'item_total' => $price * $data['quantity'],
+                'base_item_total' => $price * $data['quantity'],
+                'weight' => ($weight = $child->weight),
+                'item_weight' => $weight * $parentData['quantity'],
+                'base_item_weight' => $weight * $parentData['quantity'],
+            ];
 
-            $parentData['product_id'] = $id;
-
-            $parentData['quantity'] = $data['quantity'];
-
-            $parentData['type'] = 'configurable';
-
-            $parentData['name'] = $this->product->findOneByField('id', $id)->name;
-
-            $parentData['price'] = $this->product->findOneByField('id', $data['selected_configurable_option'])->price;
-
-            $parentData['base_price'] = $parentData['price'];
-
-            $parentData['item_total'] = $parentData['price'] * $data['quantity'];
-
-            $parentData['base_item_total'] = $parentData['price'] * $data['quantity'];
-
-            $parentData['weight'] = $this->product->findOneByField('id', $data['selected_configurable_option'])->weight;
-
-            $parentData['item_weight'] = $parentData['weight'] * $parentData['quantity'];
+            
 
             $parentData['base_item_weight'] = $parentData['weight'] * $parentData['quantity'];
 
@@ -267,14 +265,14 @@ class Cart {
 
             return ['parent' => $parentData, 'child' => $childData];
         } else {
-            $data['product_id'] = $id;
+            $data['product_id'] = $productId;
             unset($data['product']);
 
             $data['type'] = 'simple';
 
-            $data['name'] = $this->product->findOneByField('id', $id)->name;
+            $data['name'] = $this->product->findOneByField('id', $productId)->name;
 
-            $data['price'] = $this->product->findOneByField('id', $id)->price;
+            $data['price'] = $this->product->findOneByField('id', $productId)->price;
 
             $data['base_price'] = $data['price'];
 
@@ -282,7 +280,7 @@ class Cart {
 
             $data['base_item_total'] = $data['price'] * $data['quantity'];
 
-            $data['weight'] = $this->product->findOneByField('id', $id)->weight;
+            $data['weight'] = $this->product->findOneByField('id', $productId)->weight;
 
             $data['item_weight'] = $data['weight'] * $data['quantity'];