Nikki

Items in cart not showing up

Posted 3 months ago by Nikki

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">&nbsp</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', '[email protected]')->name('product.shoppingCart');
Route::any('/add-to-cart/{id}', '[email protected]')->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 sign in or create an account to participate in this conversation.