Level 102
Add a slash before the url in the ajax call. Without it, ajax will append the url to the current "path" (which you dont want)
url:'/get-product-price',
Aug 7, 2020
6
Level 2
Laravel Ajax URL Issue
This is the error
GET http://localhost/eshopper/public/detail/get-product-price?idSize=1-Small 404 (Not Found)
The issue is my url (get-product-price) function in my main.js file main.js file
$(document).ready(function(){
//Change product price by size
$("#selSize").change(function(){
var idSize = $(this).val();
if(idSize == ""){
return false;
}
$.ajax({
type:'get',
url:'get-product-price',
data:{idSize:idSize},
success:function(resp){
//alert(resp);
var arr = resp.split('#');
$("#getPrice").html("GHC "+arr[0]);
if(arr[1]==0){
$("#cartButton").hide();
$("#Availability").text("Out Of Stock");
}else{
$("#cartButton").show();
$("#Availability").text("In Stock");
}
},error:function(){
alert("Error");
}
});
});
});
My route file
Route::get('detail/{id}','ProductsController@product');
Route::get('get-product-price','ProductsController@getProductPrice');
My Product controller
public function products($url = null){
$countCategory = Category::where(['url'=>$url,'status'=>1])->count();
if($countCategory == 0){
abort(404);
}
$categories = Category::with('categories')->where(['parent_id'=>0])->get();
$categoryDetails = Category::where(['url' => $url])->first();
if($categoryDetails->parent_id == 0){
$subCategories = Category::where(['parent_id' => $categoryDetails->id])->get();
foreach($subCategories as $key => $subcat){
$cat_ids[] = $subcat->id;
}
$productsAll = Product::whereIn('category_id',$cat_ids)->where('status',1)->get();
}else{
$productsAll = Product::where(['category_id' => $categoryDetails->id])->where('status',1)->get();
}
return view('listing')->with(compact('categoryDetails','productsAll','categories'));
}
public function product($id = null){
$productsCount = Product::where(['id'=>$id,'status'=>1])->count();
if($productsCount == 0){
abort(404);
}
$productDetails = Product::with('attributes')->where('id',$id)->first();
$relatedProducts = Product::where('id','!=',$id)->where(['category_id'=>$productDetails->category_id])->get();
//The use of array chunk to display 3 products at a time in recommended items
/*foreach($relatedProducts->chunk(3) as $chunk){
foreach($chunk as $item){
echo $item; echo "<br>";
}
echo "<br><br><br>";
}*/
$categories = Category::with('categories')->where(['parent_id'=>0])->get();
$productAltImages = ProductsImage::where('product_id',$id)->get();
$total_stock = ProductsAttribute::where('product_id',$id)->sum('stock');
return view('detail')->with(compact('productDetails','categories','productAltImages','total_stock','relatedProducts'));
}
public function getProductPrice(Request $request){
$data = $request->all();
$proArr = explode("-",$data['idSize']);
$proAttr = ProductsAttribute::where(['product_id' => $proArr[0], 'size' => $proArr[1]])->first();
echo $proAttr->price;
echo "#";
echo $proAttr->stock;
}
My details.blade.php file
@extends('frontend.layouts.app')
@section('main-content')
<section>
<div class="container">
<div class="row">
<div class="col-sm-3">
@include('sidebar')
</div>
<div class="col-sm-9 padding-right">
<div class="product-details"><!--product-details-->
<div class="col-sm-5">
<div class="view-product">
<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails">
<a href="{{ asset('images/backend_images/products/large/'.$productDetails->image) }}">
<img class="mainImage" src="{{ asset('images/backend_images/products/small/'.$productDetails->image) }}" alt="" style="width:300px; height:300px;"/>
</a>
</div>
</div>
<div id="similar-product" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active thumbnails">
<a href="{{ asset('images/backend_images/products/large/'.$productDetails->image) }}">
<img class="changeImage" src="{{ asset('images/backend_images/products/small/'.$productDetails->image) }}" data-standard="{{ asset('images/backend_images/products/small/'.$productDetails->image) }}" style="width:84px; height:84px;"/>
</a>
@foreach($productAltImages as $altimage)
<a href="{{ asset('images/backend_images/products/large/'.$altimage->image) }}" data-standard="{{ asset('images/backend_images/products/small/'.$altimage->image) }}">
<img class="changeImage" src="{{ asset('images/backend_images/products/small/'.$altimage->image) }}" alt="" style="width:84px; height:84px; cursor:pointer;">
</a>
@endforeach
</div>
</div>
</div>
</div>
<div class="col-sm-7">
<div class="product-information"><!--/product-information-->
<img src="images/product-details/new.jpg" class="newarrival" alt="" />
<h2>{{ $productDetails->product_name }}</h2>
<p>Code: {{ $productDetails->product_code }}</p>
<p>
<select id="selSize" name="size" style="width:150px;">
<option value="">Select Size</option>
@foreach($productDetails->attributes as $sizes)
<option value="{{ $productDetails->id }}-{{ $sizes->size }}">{{ $sizes->size }}</option>
@endforeach
</select>
</p>
<img src="images/product-details/rating.png" alt="" />
<span>
<span id="getPrice">GHC {{ $productDetails->price }}</span>
<label>Quantity:</label>
<input type="text" value="1" />
@if($total_stock > 0)
<button type="button" class="btn btn-fefault cart" id="cartButton">
<i class="fa fa-shopping-cart"></i>
Add to cart
</button>
@endif
</span>
<p><b>Availability:</b> <span id="Availability"> @if($total_stock > 0)In Stock @else Out Of Stock @endif </span></p>
<p><b>Condition:</b> New</p>
<p><b>Brand:</b> E-SHOPPER</p>
<a href=""><img src="images/product-details/share.png" class="share img-responsive" alt="" /></a>
</div><!--/product-information-->
</div>
</div><!--/product-details-->
<div class="category-tab shop-details-tab"><!--category-tab-->
<div class="col-sm-12">
<ul class="nav nav-tabs">
<li class="active"><a href="#description" data-toggle="tab">DESCRIPTION</a></li>
<li><a href="#care" data-toggle="tab">MATERIAL & CARE</a></li>
<li><a href="#company" data-toggle="tab">COMPANY PROFILE</a></li>
<li><a href="#delivery" data-toggle="tab">DELIVERY OPTIONS</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade active in" id="description" >
<div class="col-sm-12">
<p>{!! html_entity_decode($productDetails->description) !!}</p>
</div>
</div>
<div class="tab-pane fade" id="care" >
<div class="col-sm-12">
<p>{{ $productDetails->care }}</p>
</div>
</div>
<div class="tab-pane fade" id="company" >
<div class="col-sm-12">
<p>This is for the company profile</p>
</div>
</div>
<div class="tab-pane fade" id="delivery" >
<div class="col-sm-12">
<p>100% original products<br>
Care on delivery
</p>
</div>
</div>
</div>
</div><!--/category-tab-->
<div class="recommended_items"><!--recommended_items-->
<h2 class="title text-center">recommended items</h2>
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php $count=1; ?>
@foreach($relatedProducts->chunk(3) as $chunk)
<div <?php if($count==1){ ?> class="item active" <?php } else { ?> class="item" <?php } ?>>
@foreach($chunk as $item)
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="{{ asset('images/backend_images/products/small/'.$item->image) }}" alt="" style="width:230px;"/>
<h2>GHC {{ $item->price }}</h2>
<p>{{ $item->product_name }}</p>
<a href="{{ url('detail/'.$item->id) }}"><button type="button" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</button></a>
</div>
</div>
</div>
</div>
@endforeach
</div>
<?php $count++; ?>
@endforeach
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div><!--/recommended_items-->
</div>
</div>
</div>
</section>
@endsection
The main issue is how to link my main.js Ajax url to my details page. Can someone please help
Level 2
after add the url:'/get-product-price', this is the error that i get
jquery.js:6 GET http://localhost/get-product-price?idSize=1-Small 404 (Not Found)
which means after localhost, instead of my public folder to come it is not comming example
jquery.js:6 GET http://localhost/public/get-product-price?idSize=1-Small 404 (Not Found)
Level 102
Can you find the actual url manually?
If it needs public then just add that
url:'/public/get-product-price',
Level 102
Oh and just curious. Why does your urls have public in them? Is that a bug or did you add that intentially?
Level 2
i am using the default inatallation of laravel 6 and for you to open the default welcome.blade.php page, the url comes like localhost/example/public/welcome, or should i move the /public folder from the url because am still getting error
Level 102
Seems that your server is setup incorrectly. It would just be http://localhost/welcome
But again, you can add that whole url in there
url:'/example/public/get-product-price',
Please or to participate in this conversation.