Apr 16, 2019
0
Level 1
Items in cart not showing up
I'm not sure if this is a laravel or vue question, but I'm trying to create an eCommerce site using both laravel and vue. I've been doing good for the most part. I've now run into a problem that I can't seem to understand. When I click on the "Add To Cart" button after selecting the code that I want it goes to my cart page, which is correct. The problem comes in is when I go to another product and I select the code and click "Add To Cart", it goes to the cart page but then the previous product that I had selected isn't there anymore, but my cart amount is correct and my total is correct, as if I had both products showing.
Here is my single_product.blade.php (this page shows the product that I would like to add to the cart)
@extends('layouts.public')
@section('content')
<div class="content_wrapper">
@foreach($single_product as $product)
<div class="row single_product_wrapper">
<div class="col-lg-4 col-md-12 col-sm-12">
<?php
$product_image = getImagesArray($product->image);
$product_image2 = getImagesArray($product->image2);
?>
<div class="white-block">
<img src="{{ asset('img/white-block.jpg') }}">
</div>
<div class="slider-for main_product_slider">
@if(!empty($product_image))
@foreach($product_image as $image)
<div>
<img src="{{ asset('product_images/products/'.$image) }}" alt="{{ $image }}">
</div>
@endforeach
@endif
</div>
<div class="slider-nav main_product_nav">
@if(!empty($product_image2))
@foreach($product_image2 as $image2)
<div>
<img src="{{ asset('product_images/thumbs/'.$image2) }}" alt="{{ $image2 }}">
</div>
@endforeach
@endif
</div>
</div>
<div class="col-lg-8 col-md-12-col-sm-12">
<h1>
{{ $product->title }}
</h1>
@foreach($parent_product as $parent)
<h1>
{{ $parent->title }}
</h1>
<table style="width: 100%; height: 95px;" border="2" cellspacing="5" cellpadding="5">
<tbody>
<tr style="text-align: center;">
<td>
<strong>Code</strong>
</td>
@if(!empty($parent->description))
<td>
<strong>Description</strong>
</td>
@endif
@if(!empty($parent->price))
<td>
<strong>Price</strong>
</td>
@endif
</tr>
<tr style="text-align: center;">
@if(!empty($parent->code))
<td>
{{ $parent->code }}
</td>
@endif
@if(!empty($parent->description))
<td>
{{ $parent->description }}
</td>
@endif
@if(!empty($parent->price))
<td>
R {{ $parent->price }}
</td>
@endif
</tr>
@if(count($parent->parent))
@foreach($parent->parent as $child)
<tr style="text-align: center;">
@if(!empty($child->code))
<td>
{{ $child->code }}
</td>
@endif
@if(!empty($child->description))
<td>
{{ $child->description }}
</td>
@endif
@if(!empty($child->price))
<td>
R {{ $child->price }}
</td>
@endif
</tr>
@endforeach
@endif
</tbody>
</table>
@endforeach
<!-- BEGIN ADD TO CART FORM -->
<div id="app">
@foreach($parent_product as $parent)
<code-selection :products="{{ $parent_product }}" :children="{{ $parent->parent }}"></code-selection>
@endforeach
</div>
<!-- END ADD TO CART FORM -->
</div>
</div>
@endforeach
</div>
@stop
And this is my CodeSelection.vue (This is where I bring in the select dropdown box so that I can grab the id of the selected code)
<template>
<div>
<form @submit.prevent="submit">
<div class="row">
<div class="col-lg-12">
<select name="code" id="code" class="form-control mx-sm-3 mb-2" v-model="selected_parent">
<option>Please select your code</option>
<option v-for="product in products" :value="product.id">
{{ product.code }}
</option>
<option v-for="child in children" :value="child.id">
{{ child.code }}
</option>
</select>
</div>
</div>
<input type="submit" class="btn btn-dark btn-lg btn-block" value="Add To Cart">
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: [
'products',
'children',
'selected_parent'
],
mounted() {
console.log('Component mounted.')
},
methods: {
submit(){
var formData = new FormData();
console.log('this is the select box - '+this.selected_parent);
formData.append('code', this.selected_parent);
return axios.post('/add-to-cart/'+this.selected_parent, formData)
.then(
function(response)
{
console.log(response.data.redirect);
window.location = response.data.redirect;
}
);
},
},
}
</script>
and this is my controller function (This is where I put the products into a session and that passing it through to the cart page)
public function getAddToCart(Request $request, $id)
{
$menus_child = Menu::where('menu_id', 0)->with('menusP')->get();
$contacts = Contact::all();
$product = Product::find($id);
$code = $request->code;
$oldCart = Session::has('cart') ? Session::get('cart') : null;
$cart = new Cart($oldCart);
$cart->add($product, $product->id, $code);
$request->session()->put('cart', $cart);
return ['redirect' => route('product.shoppingCart', ['products' => $cart->items, 'totalPrice' => $cart->totalPrice, 'menus_child' => $menus_child, 'contacts' => $contacts, 'code' => $code])];
}
and this is my cart page
@extends('layouts.public')
@section('content')
<div class="content_wrapper">
@if(Session::has('cart'))
<div class="container">
<div class="cart_table">
<div class="table">
<div class="thead">
<div class="tr">
<div class="th border-bottom">Image</div>
<div class="th border-bottom">Code</div>
<div class="th border-bottom"> </div>
<div class="th border-bottom">Qty</div>
<div class="th border-bottom">Unit Price</div>
<div class="th border-bottom">Total Price</div>
<div class="th border-bottom">Remove</div>
<div class="th border-bottom"></div>
</div>
</div>
<div class="tbody">
@foreach($products as $product)
<?php
$image = getImagesArray($product['item']['image']);
?>
<div class="tr">
<div class="td border-bottom" data-title="Image">
@if(!empty($image))
<img src={!! asset("product_images/thumbs/$image[0]") !!}>
@endif
</div>
<div class="td border-bottom" data-title="Image">
{{ $product['code'] }}
</div>
<div class="td border-bottom" data-title="Title">
<strong>{{ $product['item']['title'] }}</strong>
</div>
<div class="td border-bottom" data-title="Qty">
<div class="quantity_box">
<div class="qty_number">
<form action="{{ route('cart.update', ['id' => $product['item']['id']]) }}" method="POST">
{{ csrf_field() }}
<input type="text" value="{{ $product['qty'] }}">
</form>
<div class="inc button">
<a href="{{ route('product.addItem', ['id' => $product['code']]) }}" class="">
+
</a>
</div>
<div class="dec button">
<a href="{{ route('product.removeFromCart', ['id' => $product['item']['id']]) }}" class="">
-
</a>
</div>
</div>
</div>
</div>
<div class="td border-bottom" data-title="Unit Price">
<span class="label label-success">R {{ $product['item']['price'] }}</span>
</div>
<div class="td border-bottom" data-title="Total Price">
<span class="label label-success">R {{ $product['price'] }}</span>
</div>
<div class="td border-bottom remove-item" data-title="Remove">
<a href="{{ route('product.removeWholeItem', ['id' => $product['item']['id']]) }}" class="">
<i class="fa fa-times"></i>
</a>
</div>
</div>
@endforeach
</div>
</div>
</div>
<div class="cart_subtotal text-right">
<div class="subtotal_text">
Subtotal
</div>
<div class="subtotal_price text-right">
R {{ $totalPrice }}
</div>
</div>
<div class="cart_btns text-right">
<a href="{{ url('products.html') }}" class="btn btn-outline-primary">Continue Shopping</a>
@if(Auth::check())
<a href="{{ route('cart.deliveryConfirmation') }}" class="btn btn-outline-success">Proceed to Checkout</a>
@else
<a href="{{ route('account.loginRegister') }}" class="btn btn-outline-success">Proceed to Checkout</a>
@endif
</div>
</div>
@else
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
<h2>No items in cart!</h2>
</div>
</div>
@endif
</div>
@stop
and this is my routes.php
Route::get('/shopping-cart', 'PublicController@getCart')->name('product.shoppingCart');
Route::any('/add-to-cart/{id}', 'PublicController@getAddToCart')->name('product.addToCart');
This is my Cart.php
<?php
namespace App;
use Session;
class Cart
{
public $items = null;
public $totalQty = 0;
public $totalPrice = 0;
public function __construct($oldCart)
{
if($oldCart)
{
$this->items = $oldCart->items;
$this->totalQty = $oldCart->totalQty;
$this->totalPrice = $oldCart->totalPrice;
}
}
public function add($item, $id, $code)
{
$storedItem = ['qty' => 0, 'price' => $item->price, 'item' => $item, 'code' => $code];
if($this->items)
{
if(array_key_exists($id, $this->items))
{
$storedItem = $this->items[$id];
}
}
$storedItem['qty']++;
$storedItem['price'] = $item->price * $storedItem['qty'];
$this->items[$code] = $storedItem;
$this->totalQty++;
$this->totalPrice += $item->price;
}
public function sendToCart($item, $id)
{
$storedItem = ['qty' => 0, 'price' => $item->price, 'item' => $item];
if($this->items)
{
if(array_key_exists($id, $this->items))
{
$storedItem = $this->items[$id];
}
}
$storedItem['qty']++;
$storedItem['price'] = $item->price * $storedItem['qty'];
$this->items[$id] = $storedItem;
$this->totalQty++;
$this->totalPrice += $item->price;
}
public function reduceByOne($id)
{
$this->items[$id]['qty']--;
$this->items[$id]['price'] -= $this->items[$id]['item']['price'];
$this->totalQty--;
$this->totalPrice -= $this->items[$id]['item']['price'];
if($this->items[$id]['qty'] <= 0)
{
unset($this->items[$id]);
}
}
public function removeWholeItem($id)
{
$this->totalQty -= $this->items[$id]['qty'];
$this->totalPrice -= $this->items[$id]['price'];
unset($this->items[$id]);
}
}
Please or to participate in this conversation.