product grid
This commit is contained in:
parent
e23744e810
commit
9ec2918fb4
|
|
@ -115,7 +115,7 @@ class ProductController extends Controller
|
|||
$productHtml .= '</div>';
|
||||
} else {
|
||||
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 .= '</div>';
|
||||
}
|
||||
|
|
@ -289,6 +289,8 @@ class ProductController extends Controller
|
|||
break;
|
||||
}
|
||||
|
||||
$params['limit'] = 10;
|
||||
|
||||
$products = $productRepository->getList($params);
|
||||
|
||||
// Render product cards HTML
|
||||
|
|
@ -299,7 +301,80 @@ class ProductController extends Controller
|
|||
$productHtml .= '</div>';
|
||||
} else {
|
||||
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 .= '</div>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
|
||||
// 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(data => {
|
||||
if (data.success && data.products) {
|
||||
|
|
@ -167,8 +167,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
price.className = 'h6 mb-0';
|
||||
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);
|
||||
navDiv.appendChild(link);
|
||||
navDiv.appendChild(name);
|
||||
navDiv.appendChild(price);
|
||||
listItem.appendChild(img);
|
||||
listItem.appendChild(navDiv);
|
||||
|
|
|
|||
|
|
@ -78,16 +78,16 @@
|
|||
</div>
|
||||
|
||||
<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 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">
|
||||
@for ($i = 1; $i <= 8; $i++)
|
||||
<div class="col-6 col-md-4 mb-2 mb-sm-3 mb-md-0">
|
||||
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-3">
|
||||
@for ($i = 1; $i <= 10; $i++)
|
||||
<div class="col">
|
||||
<div class="shimmer-wrapper-highlight">
|
||||
<div class="shimmer">
|
||||
<div class="shimmer-content rounded">
|
||||
|
|
|
|||
|
|
@ -487,7 +487,7 @@
|
|||
</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 -->
|
||||
</div>
|
||||
{{-- <div class="col-12 col-md-8 mb-2 mb-sm-3 mb-md-0">
|
||||
|
|
@ -544,70 +544,7 @@
|
|||
|
||||
|
||||
<!-- Instagram feed -->
|
||||
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
|
||||
<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>
|
||||
<x-home.instagram-feed />
|
||||
</main>
|
||||
|
||||
@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/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/brands', [ProductController::class, 'brands'])->name('product.ajax.brands');
|
||||
Route::get('/products/ajax/categories', [ProductController::class, 'categories'])->name('product.ajax.categories');
|
||||
|
|
|
|||
Loading…
Reference in New Issue