product grid
This commit is contained in:
parent
e23744e810
commit
9ec2918fb4
|
|
@ -115,7 +115,7 @@ class ProductController extends Controller
|
||||||
$productHtml .= '</div>';
|
$productHtml .= '</div>';
|
||||||
} else {
|
} else {
|
||||||
foreach ($products as $product) {
|
foreach ($products as $product) {
|
||||||
$productHtml .= '<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">';
|
$productHtml .= '<div class="col">';
|
||||||
$productHtml .= view('components.home.product-card', ['product' => $product])->render();
|
$productHtml .= view('components.home.product-card', ['product' => $product])->render();
|
||||||
$productHtml .= '</div>';
|
$productHtml .= '</div>';
|
||||||
}
|
}
|
||||||
|
|
@ -289,6 +289,8 @@ class ProductController extends Controller
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$params['limit'] = 10;
|
||||||
|
|
||||||
$products = $productRepository->getList($params);
|
$products = $productRepository->getList($params);
|
||||||
|
|
||||||
// Render product cards HTML
|
// Render product cards HTML
|
||||||
|
|
@ -299,7 +301,80 @@ class ProductController extends Controller
|
||||||
$productHtml .= '</div>';
|
$productHtml .= '</div>';
|
||||||
} else {
|
} else {
|
||||||
foreach ($products as $product) {
|
foreach ($products as $product) {
|
||||||
$productHtml .= '<div class="col mb-2 mb-sm-3 mb-md-0">';
|
$productHtml .= '<div class="col">';
|
||||||
|
$productHtml .= view('components.home.product-card', ['product' => $product])->render();
|
||||||
|
$productHtml .= '</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return response()->json([
|
||||||
|
'success' => true,
|
||||||
|
'products' => $productHtml,
|
||||||
|
'count' => count($products),
|
||||||
|
'type' => $type,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function populers(Request $request)
|
||||||
|
{
|
||||||
|
$type = $request->input('type', 'new');
|
||||||
|
$limit = 6;
|
||||||
|
|
||||||
|
$user = auth()->user();
|
||||||
|
$userId = $user ? $user->id : 0;
|
||||||
|
[$location_id, $is_consignment] = Cache::remember('employee_user_'.$userId, 60 * 60 * 24, function () use ($user) {
|
||||||
|
|
||||||
|
if ($user == null) {
|
||||||
|
return [10, false];
|
||||||
|
}
|
||||||
|
|
||||||
|
$employee = @$user->employee;
|
||||||
|
$location_id = @$employee->location_id;
|
||||||
|
$location = @$employee->location;
|
||||||
|
$is_consignment = (bool) @$location->is_consignment;
|
||||||
|
|
||||||
|
return [$location_id, $is_consignment];
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$productRepository = new ProductRepository;
|
||||||
|
|
||||||
|
// Set parameters based on type
|
||||||
|
$params = [
|
||||||
|
'limit' => $limit,
|
||||||
|
'location_id' => $location_id,
|
||||||
|
'is_consignment' => $is_consignment,
|
||||||
|
];
|
||||||
|
|
||||||
|
switch ($type) {
|
||||||
|
case 'new':
|
||||||
|
$params['sort'] = 'new';
|
||||||
|
break;
|
||||||
|
case 'best_sellers':
|
||||||
|
$params['sort'] = 'best_sellers';
|
||||||
|
break;
|
||||||
|
case 'special-offer':
|
||||||
|
$params['event'] = 'special-offer';
|
||||||
|
break;
|
||||||
|
case 'top_rated':
|
||||||
|
$params['sort'] = 'random';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
$params['sort'] = 'new';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
$products = $productRepository->getList($params);
|
||||||
|
|
||||||
|
// Render product cards HTML
|
||||||
|
$productHtml = '';
|
||||||
|
if (count($products) == 0) {
|
||||||
|
$productHtml = '<div class="col-12 text-center py-4">';
|
||||||
|
$productHtml .= 'No products found';
|
||||||
|
$productHtml .= '</div>';
|
||||||
|
} else {
|
||||||
|
foreach ($products as $product) {
|
||||||
|
$productHtml .= '<div class="col">';
|
||||||
$productHtml .= view('components.home.product-card', ['product' => $product])->render();
|
$productHtml .= view('components.home.product-card', ['product' => $product])->render();
|
||||||
$productHtml .= '</div>';
|
$productHtml .= '</div>';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -113,7 +113,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make AJAX request for popular products
|
// Make AJAX request for popular products
|
||||||
fetch('{{ route("product.ajax.highlights") }}?type=best_sellers&limit=6')
|
fetch('{{ route("product.ajax.populers") }}?type=best_sellers&limit=6')
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.success && data.products) {
|
if (data.success && data.products) {
|
||||||
|
|
@ -167,8 +167,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
price.className = 'h6 mb-0';
|
price.className = 'h6 mb-0';
|
||||||
price.textContent = productPrice ? productPrice.textContent : '$0.00';
|
price.textContent = productPrice ? productPrice.textContent : '$0.00';
|
||||||
|
|
||||||
|
const name = document.createElement('div');
|
||||||
|
name.className = 'text-truncate mb-1';
|
||||||
|
name.textContent = productLink ? productLink.textContent.trim() : 'Product Name';
|
||||||
|
|
||||||
link.appendChild(span);
|
link.appendChild(span);
|
||||||
navDiv.appendChild(link);
|
navDiv.appendChild(link);
|
||||||
|
navDiv.appendChild(name);
|
||||||
navDiv.appendChild(price);
|
navDiv.appendChild(price);
|
||||||
listItem.appendChild(img);
|
listItem.appendChild(img);
|
||||||
listItem.appendChild(navDiv);
|
listItem.appendChild(navDiv);
|
||||||
|
|
|
||||||
|
|
@ -78,16 +78,16 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="position-relative">
|
<div class="position-relative">
|
||||||
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-4 gy-md-5 pb-xxl-3" id="product-highlights-container">
|
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-3" id="product-highlights-container">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center py-5 d-none" id="product-highlights-loading">
|
<div class="text-center py-5 d-none" id="product-highlights-loading">
|
||||||
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-4 gy-md-5 pb-xxl-3">
|
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-3">
|
||||||
@for ($i = 1; $i <= 8; $i++)
|
@for ($i = 1; $i <= 10; $i++)
|
||||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
<div class="col">
|
||||||
<div class="shimmer-wrapper-highlight">
|
<div class="shimmer-wrapper-highlight">
|
||||||
<div class="shimmer">
|
<div class="shimmer">
|
||||||
<div class="shimmer-content rounded">
|
<div class="shimmer-content rounded">
|
||||||
|
|
|
||||||
|
|
@ -487,7 +487,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row gy-4 gy-md-5 pb-4 pb-md-5" id="products-container">
|
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3" id="products-container">
|
||||||
<!-- Products will be loaded here via AJAX -->
|
<!-- Products will be loaded here via AJAX -->
|
||||||
</div>
|
</div>
|
||||||
{{-- <div class="col-12 col-md-8 mb-2 mb-sm-3 mb-md-0">
|
{{-- <div class="col-12 col-md-8 mb-2 mb-sm-3 mb-md-0">
|
||||||
|
|
@ -544,70 +544,7 @@
|
||||||
|
|
||||||
|
|
||||||
<!-- Instagram feed -->
|
<!-- Instagram feed -->
|
||||||
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
|
<x-home.instagram-feed />
|
||||||
<div class="text-center pb-2 pb-md-3">
|
|
||||||
<h2 class="pb-2 mb-1">
|
|
||||||
<span class="animate-underline">
|
|
||||||
<a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#AsiaGolf</a>
|
|
||||||
</span>
|
|
||||||
</h2>
|
|
||||||
<p>Find more inspiration on our Instagram</p>
|
|
||||||
</div>
|
|
||||||
<div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
|
|
||||||
<div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
|
|
||||||
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
||||||
href="#!">
|
|
||||||
<span
|
|
||||||
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
||||||
<i
|
|
||||||
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
||||||
<div class="hover-effect-target ratio ratio-1x1">
|
|
||||||
<img src="/img/instagram/01.jpg" alt="Instagram image">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
||||||
href="#!">
|
|
||||||
<span
|
|
||||||
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
||||||
<i
|
|
||||||
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
||||||
<div class="hover-effect-target ratio ratio-1x1">
|
|
||||||
<img src="/img/instagram/02.jpg" alt="Instagram image">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
||||||
href="#!">
|
|
||||||
<span
|
|
||||||
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
||||||
<i
|
|
||||||
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
||||||
<div class="hover-effect-target ratio ratio-1x1">
|
|
||||||
<img src="/img/instagram/03.jpg" alt="Instagram image">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
||||||
href="#!">
|
|
||||||
<span
|
|
||||||
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
||||||
<i
|
|
||||||
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
||||||
<div class="hover-effect-target ratio ratio-1x1">
|
|
||||||
<img src="/img/instagram/04.jpg" alt="Instagram image">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
|
|
||||||
href="#!">
|
|
||||||
<span
|
|
||||||
class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
|
|
||||||
<i
|
|
||||||
class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
|
|
||||||
<div class="hover-effect-target ratio ratio-1x1">
|
|
||||||
<img src="/img/instagram/05.jpg" alt="Instagram image">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
@include('layouts.partials.footer2')
|
@include('layouts.partials.footer2')
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ Route::get('/', [HomeController::class, 'index'])->name('home');
|
||||||
|
|
||||||
Route::get('/products', [ProductController::class, 'index'])->name('product.index');
|
Route::get('/products', [ProductController::class, 'index'])->name('product.index');
|
||||||
Route::get('/products/ajax', [ProductController::class, 'ajax'])->name('product.ajax');
|
Route::get('/products/ajax', [ProductController::class, 'ajax'])->name('product.ajax');
|
||||||
|
Route::get('/products/ajax/populers', [ProductController::class, 'populers'])->name('product.ajax.populers');
|
||||||
Route::get('/products/ajax/highlights', [ProductController::class, 'highlights'])->name('product.ajax.highlights');
|
Route::get('/products/ajax/highlights', [ProductController::class, 'highlights'])->name('product.ajax.highlights');
|
||||||
Route::get('/products/ajax/brands', [ProductController::class, 'brands'])->name('product.ajax.brands');
|
Route::get('/products/ajax/brands', [ProductController::class, 'brands'])->name('product.ajax.brands');
|
||||||
Route::get('/products/ajax/categories', [ProductController::class, 'categories'])->name('product.ajax.categories');
|
Route::get('/products/ajax/categories', [ProductController::class, 'categories'])->name('product.ajax.categories');
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue