Cart Page Design Changes to be performed
This commit is contained in:
prashant-webkul
parent
c8f67009b1
commit
d99ef7eb9f
|
|
@ -50,8 +50,8 @@ class Cart {
|
|||
* instance with the
|
||||
* current item added.
|
||||
*
|
||||
* @param @id
|
||||
* @param $data
|
||||
* @param Integer $id
|
||||
* @param Mixed $data
|
||||
*
|
||||
* @return Mixed
|
||||
*/
|
||||
|
|
@ -68,6 +68,14 @@ class Cart {
|
|||
$data['cart_id'] = $cart->id;
|
||||
$data['product_id'] = $id;
|
||||
|
||||
if ($data['is_configurable'] == "true") {
|
||||
$temp = $data['super_attribute'];
|
||||
|
||||
unset($data['super_attribute']);
|
||||
|
||||
$data['additional'] = json_encode($temp);
|
||||
}
|
||||
|
||||
if($result = $this->cartItem->create($data)) {
|
||||
session()->put('cart', $cart);
|
||||
|
||||
|
|
@ -93,6 +101,10 @@ class Cart {
|
|||
* @return Mixed
|
||||
*/
|
||||
public function add($id, $data) {
|
||||
|
||||
// session()->forget('cart');
|
||||
// return redirect()->back();
|
||||
|
||||
if(session()->has('cart')) {
|
||||
$cart = session()->get('cart');
|
||||
|
||||
|
|
@ -117,6 +129,14 @@ class Cart {
|
|||
|
||||
$data['product_id'] = $id;
|
||||
|
||||
if ($data['is_configurable'] == "true") {
|
||||
$temp = $data['super_attribute'];
|
||||
|
||||
unset($data['super_attribute']);
|
||||
|
||||
$data['additional'] = json_encode($temp);
|
||||
}
|
||||
|
||||
$cart->items()->create($data);
|
||||
|
||||
session()->flash('success', 'Item Successfully Added To Cart');
|
||||
|
|
@ -136,6 +156,7 @@ class Cart {
|
|||
* use detach to remove the
|
||||
* current product from cart tables
|
||||
*
|
||||
* @param Integer $id
|
||||
* @return Mixed
|
||||
*/
|
||||
public function remove($id) {
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@ namespace Webkul\Cart\Http\Controllers;
|
|||
use Illuminate\Http\Request;
|
||||
use Illuminate\Http\Response;
|
||||
|
||||
//Cart repositories
|
||||
use Webkul\Cart\Repositories\CartRepository;
|
||||
use Webkul\Cart\Repositories\CartItemRepository;
|
||||
|
||||
//Product Repository
|
||||
use Webkul\Product\Repositories\ProductRepository;
|
||||
|
||||
//Customer repositories
|
||||
use Webkul\Customer\Repositories\CustomerRepository;
|
||||
|
||||
use Webkul\Product\Product\ProductImage;
|
||||
use Webkul\Product\Product\View as ProductView;
|
||||
|
||||
use Cart;
|
||||
use Cookie;
|
||||
|
||||
|
|
@ -45,7 +45,9 @@ class CartController extends Controller
|
|||
|
||||
protected $product;
|
||||
|
||||
public function __construct(CartRepository $cart, CartItemRepository $cartItem, CustomerRepository $customer, ProductRepository $product) {
|
||||
protected $productView;
|
||||
|
||||
public function __construct(CartRepository $cart, CartItemRepository $cartItem, CustomerRepository $customer, ProductRepository $product, ProductImage $productImage, ProductView $productView) {
|
||||
|
||||
$this->middleware('customer')->except(['add', 'remove', 'test']);
|
||||
|
||||
|
|
@ -56,6 +58,12 @@ class CartController extends Controller
|
|||
$this->cartItem = $cartItem;
|
||||
|
||||
$this->product = $product;
|
||||
|
||||
$this->productImage = $productImage;
|
||||
|
||||
$this->productView = $productView;
|
||||
|
||||
$this->_config = request('_config');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -99,6 +107,67 @@ 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
|
||||
|
|
@ -151,6 +220,26 @@ class CartController extends Controller
|
|||
}
|
||||
|
||||
public function test() {
|
||||
$cart = $this->cart->findOneByField('id', 144);
|
||||
|
||||
$cartItems = $this->cart->items($cart['id']);
|
||||
|
||||
$products = array();
|
||||
|
||||
foreach($cartItems as $cartItem) {
|
||||
$image = $this->productImage->getGalleryImages($cartItem->product);
|
||||
|
||||
dump($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];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
dd($products);
|
||||
}
|
||||
}
|
||||
|
|
@ -6,17 +6,19 @@ use Illuminate\View\View;
|
|||
use Illuminate\Support\Collection;
|
||||
|
||||
use Webkul\Cart\Repositories\CartRepository;
|
||||
|
||||
use Webkul\Cart\Repositories\CartItemRepository;
|
||||
|
||||
//Product Image Helper Class
|
||||
use Webkul\Product\Product\ProductImage;
|
||||
|
||||
use Cart;
|
||||
|
||||
/**
|
||||
* cart List Composer on Navigation Menu
|
||||
*
|
||||
* @author Prashant Singh <prashant.singh852@webkul.com>
|
||||
* @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
|
||||
*/
|
||||
|
||||
class CartComposer
|
||||
{
|
||||
|
||||
|
|
@ -33,10 +35,12 @@ class CartComposer
|
|||
* @param View $view
|
||||
* @return void
|
||||
*/
|
||||
public function __construct(CartRepository $cart, CartItemRepository $cartItem) {
|
||||
public function __construct(CartRepository $cart, CartItemRepository $cartItem, ProductImage $productImage) {
|
||||
$this->cart = $cart;
|
||||
|
||||
$this->cartItem = $cartItem;
|
||||
|
||||
$this->productImage = $productImage;
|
||||
}
|
||||
|
||||
public function compose(View $view) {
|
||||
|
|
@ -44,30 +48,51 @@ class CartComposer
|
|||
$cart = $this->cart->findOneByField('customer_id', auth()->guard('customer')->user()->id);
|
||||
|
||||
if(isset($cart)) {
|
||||
$cart_items = $this->cart->items($cart['id']);
|
||||
$cart = $this->cart->findOneByField('id', 144);
|
||||
|
||||
$cart_products = array();
|
||||
$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];
|
||||
}
|
||||
|
||||
foreach($cart_items as $cart_item) {
|
||||
array_push($cart_products, $this->cartItem->getProduct($cart_item->id));
|
||||
}
|
||||
session()->put('cart', $cart);
|
||||
|
||||
$view->with('cart', $cart_products);
|
||||
$view->with('cart', $products);
|
||||
}
|
||||
} else {
|
||||
if(session()->has('cart')) {
|
||||
$cart = session()->get('cart');
|
||||
|
||||
if(isset($cart)) {
|
||||
$cart = $this->cart->findOneByField('id', 144);
|
||||
|
||||
$cartItems = $this->cart->items($cart['id']);
|
||||
|
||||
$cart_products = array();
|
||||
$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];
|
||||
}
|
||||
|
||||
foreach($cart_items as $cart_item) {
|
||||
array_push($cart_products, $this->cartItem->getProduct($cart_item->id));
|
||||
}
|
||||
|
||||
$view->with('cart', $cart_products);
|
||||
$view->with('cart', $products);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ Route::group(['middleware' => ['web']], function () {
|
|||
|
||||
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');
|
||||
|
|
|
|||
|
|
@ -11,19 +11,22 @@
|
|||
</ul>
|
||||
<div class="dropdown-cart" :class="{ show: toggle }">
|
||||
<div class="dropdown-header">
|
||||
<p class="heading">Cart Subtotal - $80</p>
|
||||
<p class="heading">Cart Subtotal - $ {{ subtotal }}</p>
|
||||
<i class="icon icon-menu-close" @click="dropOrHide"></i>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-content">
|
||||
<div class="item">
|
||||
<div class="item-image">
|
||||
<img />
|
||||
<div class="item" v-for="(item, index) in items" :key="index">
|
||||
<div class="item-image" v-if="item[2]!='null'">
|
||||
<img :src="item[2]"/>
|
||||
</div>
|
||||
<div class="item-image" v-else>
|
||||
<img :src="placeholder"/>
|
||||
</div>
|
||||
<div class="item-details">
|
||||
<div class="item-name">Some Item Name</div>
|
||||
<div class="item-price">$ Some Price</div>
|
||||
<div class="item-qty">Some Quantity</div>
|
||||
<div class="item-name">{{item[0]}}</div>
|
||||
<div class="item-price">$ {{ item[1] }}</div>
|
||||
<div class="item-qty">Quantity - {{ item[3] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,14 +44,16 @@
|
|||
|
||||
export default {
|
||||
props: {
|
||||
items: Array,
|
||||
items: Object,
|
||||
},
|
||||
|
||||
data(){
|
||||
return {
|
||||
toggle: true,
|
||||
totalitems: 0,
|
||||
cart_items: []
|
||||
totalitems: parseInt(0),
|
||||
cart_items: [],
|
||||
placeholder: "http://localhost/bagisto/public/themes/default/assets/images/product/small-product-placeholder.png",
|
||||
subtotal : parseInt(0)
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -59,8 +64,9 @@ export default {
|
|||
},
|
||||
|
||||
mounted: function() {
|
||||
if(this.items != undefined)
|
||||
if(this.items != undefined) {
|
||||
this.initializeDropdown();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -73,8 +79,13 @@ export default {
|
|||
},
|
||||
|
||||
initializeDropdown: function() {
|
||||
this.totalitems = this.items.length;
|
||||
this.cart_items = this.items;
|
||||
|
||||
var item;
|
||||
for(item in this.cart_items) {
|
||||
this.subtotal = this.subtotal + parseInt(this.cart_items[item][1]);
|
||||
this.totalitems = this.totalitems + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,6 +100,7 @@ export default {
|
|||
background: #FFFFFF;
|
||||
border: 1px solid #E8E8E8;
|
||||
box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.40);
|
||||
color: #242424;
|
||||
padding: 20px;
|
||||
border-radius: 1px;
|
||||
right: 10%;
|
||||
|
|
@ -112,34 +124,47 @@ export default {
|
|||
width: 22px;
|
||||
}
|
||||
|
||||
.dropdown-cart > .dropdown-header p.heading {
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.dropdown-content .item{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
.dropdown-content .item img{
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.dropdown-content .item-details{
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.item-details .item-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.item-details .item-price {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.item-details .item-qty {
|
||||
margin-bottom: 10px;
|
||||
font-weight: lighter;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.dropdown-footer {
|
||||
|
|
@ -147,6 +172,7 @@ export default {
|
|||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dropdown-footer button {
|
||||
|
|
|
|||
|
|
@ -618,6 +618,7 @@ section.slider-block {
|
|||
margin-bottom: 5%;
|
||||
|
||||
div.slider-content {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -626,7 +627,7 @@ section.slider-block {
|
|||
ul.slider-images {
|
||||
|
||||
li{
|
||||
//both rules are equivalent to display none
|
||||
//both combined are equivalent to display none
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -634,7 +635,7 @@ section.slider-block {
|
|||
li.show {
|
||||
display:block;
|
||||
visibility: visible;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
animation-name: example;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
|
@ -654,7 +655,7 @@ section.slider-block {
|
|||
position: absolute;
|
||||
user-select: none;
|
||||
bottom: 2%;
|
||||
right: 11%;
|
||||
right: 2%;
|
||||
|
||||
|
||||
.dark-left-icon {
|
||||
|
|
@ -2147,19 +2148,19 @@ section.cart {
|
|||
border: 1px solid #E8E8E8;
|
||||
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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@
|
|||
|
||||
<div class="cart-content">
|
||||
|
||||
{{-- {{ dd($products) }} --}}
|
||||
|
||||
<div class="left-side">
|
||||
|
||||
<div class="item">
|
||||
{{-- <div class="item">
|
||||
<img class="item-image" src="{{ bagisto_asset('images/jeans_big.jpg') }}" />
|
||||
|
||||
<div class="item-details">
|
||||
|
|
@ -42,41 +44,45 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<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> --}}
|
||||
@foreach($products as $product)
|
||||
<div class="item">
|
||||
<div style="margin-right: 15px;">
|
||||
<img class="item-image" src="{{ bagisto_asset("$product[2]") }}" />
|
||||
</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 class="item-details">
|
||||
|
||||
<div class="item-title">
|
||||
{{$product[0]}}
|
||||
</div>
|
||||
|
||||
<div class="price">
|
||||
<span class="main-price">
|
||||
{{$product[1]}}
|
||||
</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">{{ $product[3] }}</div>
|
||||
<span class="remove">Remove</span>
|
||||
<span class="towishlist">Move to Wishlist</span>
|
||||
</div>
|
||||
</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>
|
||||
@endforeach
|
||||
|
||||
<div class="misc-controls">
|
||||
<span>Continue Shopping</span>
|
||||
|
|
@ -90,22 +96,12 @@
|
|||
Price Detail
|
||||
</div>
|
||||
<div class="all-item-details">
|
||||
|
||||
<div class="item-details">
|
||||
<span class="name">Item 1</span>
|
||||
<span class="price">$25.00</span>
|
||||
</div>
|
||||
|
||||
<div class="item-details">
|
||||
<span class="name">Item 2</span>
|
||||
<span class="price">$25.00</span>
|
||||
</div>
|
||||
|
||||
<div class="item-details">
|
||||
<span class="name">Item 3</span>
|
||||
<span class="price">$25.00</span>
|
||||
</div>
|
||||
|
||||
@foreach($products as $product)
|
||||
<div class="item-details">
|
||||
<span class="name">{{ $product[0] }}</span>
|
||||
<span class="price">$ {{ $product[1] }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="horizontal-rule"></div>
|
||||
|
|
@ -664,6 +664,7 @@ section.slider-block {
|
|||
}
|
||||
|
||||
section.slider-block div.slider-content {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -677,7 +678,7 @@ section.slider-block div.slider-content ul.slider-images li {
|
|||
section.slider-block div.slider-content ul.slider-images li.show {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
-webkit-animation-name: example;
|
||||
animation-name: example;
|
||||
-webkit-animation-duration: 4s;
|
||||
|
|
@ -715,7 +716,7 @@ section.slider-block div.slider-content div.slider-control {
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
bottom: 2%;
|
||||
right: 11%;
|
||||
right: 2%;
|
||||
}
|
||||
|
||||
section.slider-block div.slider-content div.slider-control .dark-left-icon {
|
||||
|
|
|
|||
|
|
@ -31573,7 +31573,7 @@ exports = module.exports = __webpack_require__(10)(false);
|
|||
|
||||
|
||||
// module
|
||||
exports.push([module.i, "\n.show {\n display: none;\n}\n.dropdown-cart {\n position: absolute;\n background: #FFFFFF;\n border: 1px solid #E8E8E8;\n -webkit-box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.40);\n box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.40);\n padding: 20px;\n border-radius: 1px;\n right: 10%;\n top: 75px;\n width: 387px;\n z-index: 5;\n}\n.dropdown-cart > .dropdown-header {\n width: 100%;\n}\n.dropdown-cart > .dropdown-header p{\n display: inline;\n line-height: 25px;\n}\n.dropdown-cart > .dropdown-header i{\n cursor: pointer;\n float: right;\n height: 22px;\n width: 22px;\n}\n.dropdown-content {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.dropdown-content .item{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n border-bottom: 1px solid #E8E8E8;\n}\n.dropdown-content .item img{\n height: 75px;\n width: 75px;\n margin-right: 8px;\n}\n.item-details .item-name {\n font-size: 16px;\n font-weight: bold;\n margin-bottom: 10px;\n}\n.item-details .item-price {\n margin-bottom: 10px;\n}\n.item-details .item-qty {\n margin-bottom: 10px;\n}\n.dropdown-footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.dropdown-footer button {\n border-radius: 0px;\n}\n\n", ""]);
|
||||
exports.push([module.i, "\n.show {\n display: none;\n}\n.dropdown-cart {\n position: absolute;\n background: #FFFFFF;\n border: 1px solid #E8E8E8;\n -webkit-box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.40);\n box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.40);\n color: #242424;\n padding: 20px;\n border-radius: 1px;\n right: 10%;\n top: 75px;\n width: 387px;\n z-index: 5;\n}\n.dropdown-cart > .dropdown-header {\n width: 100%;\n}\n.dropdown-cart > .dropdown-header p{\n display: inline;\n line-height: 25px;\n}\n.dropdown-cart > .dropdown-header i{\n cursor: pointer;\n float: right;\n height: 22px;\n width: 22px;\n}\n.dropdown-cart > .dropdown-header p.heading {\n font-weight: lighter;\n}\n.dropdown-content {\n padding-top: 10px;\n padding-bottom: 10px;\n margin-top: 7px;\n}\n.dropdown-content .item{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n border-bottom: 1px solid #E8E8E8;\n padding-top: 9px;\n padding-bottom: 9px;\n}\n.dropdown-content .item img{\n height: 75px;\n width: 75px;\n margin-right: 8px;\n}\n.dropdown-content .item-details{\n height: 75px;\n}\n.item-details .item-name {\n font-size: 16px;\n font-weight: bold;\n margin-bottom: 9px;\n}\n.item-details .item-price {\n margin-bottom: 9px;\n}\n.item-details .item-qty {\n font-weight: lighter;\n margin-bottom: 9px;\n}\n.dropdown-footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-top: 4px;\n}\n.dropdown-footer button {\n border-radius: 0px;\n}\n\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
|
@ -31621,20 +31621,25 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
|
||||
// define the item component
|
||||
|
||||
/* harmony default export */ __webpack_exports__["default"] = ({
|
||||
props: {
|
||||
items: Array
|
||||
items: Object
|
||||
},
|
||||
|
||||
data: function data() {
|
||||
return {
|
||||
toggle: true,
|
||||
totalitems: 0,
|
||||
cart_items: []
|
||||
totalitems: parseInt(0),
|
||||
cart_items: [],
|
||||
placeholder: "http://localhost/bagisto/public/themes/default/assets/images/product/small-product-placeholder.png",
|
||||
subtotal: parseInt(0)
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -31644,7 +31649,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
},
|
||||
|
||||
mounted: function mounted() {
|
||||
if (this.items != undefined) this.initializeDropdown();
|
||||
if (this.items != undefined) {
|
||||
this.initializeDropdown();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -31657,8 +31664,13 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
|||
},
|
||||
|
||||
initializeDropdown: function initializeDropdown() {
|
||||
this.totalitems = this.items.length;
|
||||
this.cart_items = this.items;
|
||||
|
||||
var item;
|
||||
for (item in this.cart_items) {
|
||||
this.subtotal = this.subtotal + parseInt(this.cart_items[item][1]);
|
||||
this.totalitems = this.totalitems + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -31691,7 +31703,9 @@ var render = function() {
|
|||
_vm._v(" "),
|
||||
_c("div", { staticClass: "dropdown-cart", class: { show: _vm.toggle } }, [
|
||||
_c("div", { staticClass: "dropdown-header" }, [
|
||||
_c("p", { staticClass: "heading" }, [_vm._v("Cart Subtotal - $80")]),
|
||||
_c("p", { staticClass: "heading" }, [
|
||||
_vm._v("Cart Subtotal - $ " + _vm._s(_vm.subtotal))
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("i", {
|
||||
staticClass: "icon icon-menu-close",
|
||||
|
|
@ -31699,31 +31713,41 @@ var render = function() {
|
|||
})
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_vm._m(0),
|
||||
_c(
|
||||
"div",
|
||||
{ staticClass: "dropdown-content" },
|
||||
_vm._l(_vm.items, function(item, index) {
|
||||
return _c("div", { key: index, staticClass: "item" }, [
|
||||
item[2] != "null"
|
||||
? _c("div", { staticClass: "item-image" }, [
|
||||
_c("img", { attrs: { src: item[2] } })
|
||||
])
|
||||
: _c("div", { staticClass: "item-image" }, [
|
||||
_c("img", { attrs: { src: _vm.placeholder } })
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "item-details" }, [
|
||||
_c("div", { staticClass: "item-name" }, [
|
||||
_vm._v(_vm._s(item[0]))
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "item-price" }, [
|
||||
_vm._v("$ " + _vm._s(item[1]))
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "item-qty" }, [
|
||||
_vm._v("Quantity - " + _vm._s(item[3]))
|
||||
])
|
||||
])
|
||||
])
|
||||
})
|
||||
),
|
||||
_vm._v(" "),
|
||||
_vm._m(1)
|
||||
_vm._m(0)
|
||||
])
|
||||
])
|
||||
}
|
||||
var staticRenderFns = [
|
||||
function() {
|
||||
var _vm = this
|
||||
var _h = _vm.$createElement
|
||||
var _c = _vm._self._c || _h
|
||||
return _c("div", { staticClass: "dropdown-content" }, [
|
||||
_c("div", { staticClass: "item" }, [
|
||||
_c("div", { staticClass: "item-image" }, [_c("img")]),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "item-details" }, [
|
||||
_c("div", { staticClass: "item-name" }, [_vm._v("Some Item Name")]),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "item-price" }, [_vm._v("$ Some Price")]),
|
||||
_vm._v(" "),
|
||||
_c("div", { staticClass: "item-qty" }, [_vm._v("Some Quantity")])
|
||||
])
|
||||
])
|
||||
])
|
||||
},
|
||||
function() {
|
||||
var _vm = this
|
||||
var _h = _vm.$createElement
|
||||
|
|
|
|||
Loading…
Reference in New Issue