My template master.blade.php file look like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
@yield('meta')
<title>@yield('title')</title>
<link rel="icon" href="{{asset('frontEnd/images/favicon.png')}}">
<link rel="stylesheet" href="{{asset('frontEnd/fonts/flaticon/flaticon.css')}}">
<link rel="stylesheet" href="{{asset('frontEnd/fonts/icofont/icofont.min.css')}}">
<link rel="stylesheet" href="{{asset('frontEnd/fonts/fontawesome/fontawesome.min.css')}}">
<link rel="stylesheet" href="{{asset('frontEnd/css/vendor/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{asset('frontEnd/css/custom/home-grid.css')}}">
@livewireStyles
@yield('css')
</head>
<body>
<div class="backdrop"></div>
@include('frontEnd.includes.header')
@include('frontEnd.includes.menu')
@include('frontEnd.includes.categorySidebar')
@include('frontEnd.includes.navSidebar')
@yield('mainContent')
@include('frontEnd.includes.footer')
<script src="{{asset('frontEnd/js/vendor/jquery-1.12.4.min.js')}}"></script>
<script src="{{asset('frontEnd/js/vendor/popper.min.js')}}"></script>
<script src="{{asset('frontEnd/js/vendor/bootstrap.min.js')}}"></script>
<script src="{{asset('frontEnd/js/vendor/nice-select.min.js')}}"></script>
<script src="{{asset('frontEnd/js/vendor/venobox.min.js')}}"></script>
<script src="{{asset('frontEnd/js/vendor/countdown.min.js')}}"></script>
<script src="{{asset('frontEnd/js/vendor/slick.min.js')}}"></script>
@livewireScripts
@yield('scripts')
</body>
</html>
and here is livewire view file productdetails.blade.php
<div>
@section('title')
{{ $productById->productName}}
@endsection
@section('meta')
<meta property="og:url" content="{{ url('/product-details/'.$productById->productSlug) }}" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ $productById->productName }}" />
<meta property="og:description" content="{{ $productById->productName }}" />
<meta property="og:image" content="{{ asset('images/productImages/'.$productById->productImage) }}" />
@endsection
@section('css')
<link rel="stylesheet" href="{{ asset('frontEnd/css/custom/product-details.css') }}">
@endsection
@section('mainContent')
<section class="inner-section" style="margin-top: 30px;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row product_data">
<div class="col-lg-5">
<div class="details-gallery" style="border: 2px solid var(--primary); border-radius: 8px;">
<ul class="details-preview slider-arrow">
<li><img src="{{ asset('images/productImages/'.$productById->productImage) }}" alt="product"></li>
@php $productImgGallery = json_decode($productById->productGalleryImage); @endphp
@foreach($productImgGallery as $singleImages)
@if($singleImages != '')
<li><img src="{{ asset('images/productImages/'.$singleImages) }}" alt="product"></li>
@endif
@endforeach
</ul>
<ul class="details-thumb">
<li><img src="{{ asset('images/productImages/'.$productById->productImage) }}" alt="product"></li>
@php $productImgGallery = json_decode($productById->productGalleryImage); @endphp
@foreach($productImgGallery as $singleImages)
@if($singleImages != '')
<li><img src="{{ asset('images/productImages/'.$singleImages) }}" alt="product"></li>
@endif
@endforeach
</ul>
</div>
</div>
<div class="col-lg-7">
<div class="details-content" style="border-top: 2px solid var(--primary);">
<h3 class="details-name">{{ $productById->productName }}</h3>
<h3 class="details-price">
@if($productById->stock->offerPrice != '')
<del>৳ {{ $productById->stock->regularPrice }}</del>
<span>৳ {{ $productById->stock->offerPrice }} <small>/{{ $productById->unitName }}</small></span>
@else
<span>৳ {{ $productById->stock->regularPrice }} <small>/{{ $productById->unitName }}</small></span>
@endif
</h3>
<div class="details-desc">
{!! $productById->productShortDescription !!}
</div>
<div class="row no-gutters">
<div>
<div class="col-12 col-md-12">
<div class="cart-action-group">
<div class="product-action">
<button class="action-minus" title="Quantity Minus"><i class="icofont-minus"></i></button>
<input class="action-input" title="Quantity Number" type="text" name="qty" value="1">
<button class="action-plus" title="Quantity Plus"><i class="icofont-plus"></i></button>
</div>
</div>
<div class="details-add-group">
<button class="product-add add-to-cart-btn" title="Order Now" wire:click="addToCart({{ $productById->id }})">
<i class="fas fa-shopping-bag"></i>
<span>Order Now</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('scripts')
<script type="text/javascript">
function myChangeFunction(input1) {
var input2 = document.getElementById('quantity2');
input2.value = input1.value;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
//$(".slick-active").each(function(){
var imgPath = $('.slick-active img').attr('src');
$('#imagesName').val(imgPath);
console.log(imgPath);
});
</script>
@endsection
and final Productdetails class file code
<?php
namespace App\Livewire;
use App\Models\StockPrice;
use App\Models\Product;
use Livewire\Component;
use Surfsidemedia\Shoppingcart\Facades\Cart;
class Productdetails extends Component
{
public $cartCounter = 0;
public $cartTotal = 0;
protected $listeners = ['updateCartCount' => 'render'];
public $productById;
public function render(){
$this->cartCounter = Cart::count();
$cartContents = Cart::content();
$this->cartTotal = 0;
foreach ($cartContents as $item){
$this->cartTotal += $item->price * $item->qty;
}
return view('livewire.productdetails', [
'cartContents' => Cart::content()
]);
}
public function addToCart($id)
{
dd($id);
}
public function mount($productSlug){
$this->productById = Product::where('productSlug', $productSlug)
->where('products.status', 1)
->first();
}
}
When i can click Order now. Can't get any response. What is the wrong here. also i can use this project laravel controller file. In some cases i need to use livewire features.