Laravel 8 E-Commerce - Move Product From Wishlist to Cart and Make Quantity Working on Details Page

In this video, we are going to learn about moving a product from the wishlist to the cart and making the quantity work on the product details page.

So, let's see how we can add a product to the cart from the wishlist first.

Switch to the project and let's open the WishlistComponent.php class file.

And here, let's create a function for moving a product from the wishlist to the cart:

 public function moveProductFromWishlistToCart($rowId)
    {
        $item = Cart::instance('wishlist')->get($rowId);
        Cart::instance('wishlist')->remove($rowId);
        Cart::instance('cart')->add($item->id,$item->name,1,$item->price)->associate('App\Models\Product');
        $this->emitTo('wishlist-count-component','refreshComponent');
        $this->emitTo('cart-count-component','refreshComponent');
    }

Now, go to the wishlist-component.blade.php view file.

From here, let's call the moveProductFromWishlistToCart function:

<div class="product-info">
	<a href="{{route('product.details',['slug'=>$item->model->slug])}}" class="product-name"><span>{{$item->model->name}}</span></a>
	<div class="wrap-price"><span class="product-price">${{$item->model->regular_price}}</span></div>
	<a href="#" class="btn add-to-cart" wire:click.prevent="moveProductFromWishlistToCart('{{$item->rowId}}')">Move To Cart</a> 
	<div class="product-wish">
		<a href="#" wire:click.prevent="removeFromWishlist({{$item->model->id}})"><i class="fa fa-heart fill-heart"></i></a>                                
	</div>                                   
</div>

Now, it's done. So, let's check it.

So, switch to the project and just refresh the page.

Now, let's add a product to the wishlist.

Now, let's move the product to the cart from the wishlist.

So, click here to add to cart.

Here, you can see that the product has been removed from the wishlist and added to the cart.

Now, let's see how we can make the quantity work on this product details page.

For that, go to the DetailsComponent.php class file and here, let's create a property and set the default value to 1:

public $qty=1;

Now, here, let's create two functions: one for increasing the quantity and another for decreasing the quantity.

public function increaseQuantity()
    {
        $this->qty++;
    }

    public function decreseQuantity()
    {
        if($this->qty > 1)
        {
            $this->qty--;
        }
    }

Now, let's open the details-component.blade.php view file and add the following code:

<div class="quantity">
	<span>Quantity:</span>
	<div class="quantity-input">
		<input type="text" name="product-quatity" value="1" data-max="120" pattern="[0-9]*" wire:model="qty" >                                
		<a class="btn btn-reduce" href="#" wire:click.prevent="decreseQuantity"></a>
		<a class="btn btn-increase" href="#" wire:click.prevent="increaseQuantity"></a>
	</div>
</div>

Now, it's done. So, let's check it.

So, switch to the browser and refresh the page.

Now, click on any product, and you can see here the details page.

Now, increase the product quantity.

And now, let's click on add to cart.

And here, you can see that the selected number of products has been added to the cart.

There is one problem in the cart: if the product is on sale, you can see here that it's showing the regular price.

So, for showing the sale price, go to the cart.blade.php file and here, let's remove this ->model->regular_price and simply write here $item->price.

Now, let's check the cart page, and you can see that it's now showing the sale price.

So, in this way, you can move a product from the wishlist to the cart and make the quantity work on the product details page.