/home2/mshostin/carnival.ms-hostingladz.com/resources/views/ShopFrontend/subVendor.blade.php
@extends('ShopFrontend.Layouts.layout')
@section('title')
Mas Camps
@endsection
@section('main')
<!-- MAIN -->
<main class="site-main">
<div class="columns container">
<!-- Block Breadcrumb-->
<ol class="breadcrumb no-hide">
<li><a href="#">Home </a></li>
<li class="active">Mascamps</li>
</ol><!-- Block Breadcrumb-->
<div class="row">
<!-- Main Content -->
<div class="col-md-9 col-md-push-3 col-main">
<!-- images categori -->
<div class="category-view">
<div class="owl-carousel " data-nav="true" data-dots="false" data-margin="0" data-items='1'
data-autoplayTimeout="700" data-autoplay="true" data-loop="true">
@foreach ($banners as $banner)
<div class="item">
<a href="#">
<img src="{{ asset($banner->banner_image) }}" alt="{{ $banner->description }}">
</a>
</div>
@endforeach
</div>
</div><!-- images categori -->
<!-- link categori -->
<ul class="category-links">
@foreach ($regions as $region)
<li>
<a class="getWithRegion" href="javascript:void(0)">
{{ $region->name }}
<input type="hidden" class="region_name" value="{{ $region->id }}">
</a>
</li>
@endforeach
</ul>
<!-- link categori -->
<div>
<form>
<input type="text" name="searchVal" fdprocessedid="3rmjh">
<button fdprocessedid="l2xg94" id="getSearchVal">Search</button>
</form>
</div>
<!-- Toolbar -->
<div class="catalog-view_op1">
<div class=" toolbar-products toolbar-top">
<div class="btn-filter-products">
<span>Filter</span>
</div>
<h1 class="cate-title">Mascamps</h1>
<div class="modes">
<strong class="label">View as:</strong>
<strong class="modes-mode active mode-grid" title="Grid">
<span>grid</span>
</strong>
<a href="Category2.html" title="List" class="modes-mode mode-list">
<span>list</span>
</a>
</div><!-- View as -->
</div>
</div>
<!-- Toolbar -->
<!-- List Products -->
<div class="products products-grid">
<ol class="product-items row product-listing" id="product-listing">
<li class="col-sm-4 product-item ">
<div class="product-item-opt-1">
<div class="product-item-info">
<div class="product-item-photo">
<a href="" class="product-item-img"><img
src="{{ asset('shopAssets/images/media/product9.jpg') }}"
alt="product name"></a>
</div>
<div class="product-item-detail">
<strong class="product-item-name"><a href="">Vendor Name</a></strong>
<div class="clearfix">
<div class="product-item-price">
<span class="price">$45.00-$500</span>
</div>
{{-- <div class="product-reviews-summary">
<div class="rating-summary">
<div class="rating-result" title="80%">
<span style="width:80%">
<span><span>80</span>% of <span>100</span></span>
</span>
</div>
</div>
</div> --}}
</div>
</div>
</div>
</div>
</li>
</ol><!-- list product -->
</div> <!-- List Products -->
<!-- Toolbar -->
<div class="catalog-view_op1">
<div class=" toolbar-products toolbar-bottom">
<div class="modes">
<strong class="label">View as:</strong>
<strong class="modes-mode active mode-grid" title="Grid">
<span>grid</span>
</strong>
<a href="Category2.html" title="List" class="modes-mode mode-list">
<span>list</span>
</a>
</div><!-- View as -->
<div class="toolbar-option">
<div class="toolbar-sorter ">
<label class="label">Short by:</label>
<select class="sorter-options form-control">
<option selected="selected" value="position">Product name</option>
<option value="name">Name</option>
<option value="price">Price</option>
</select>
<a href="" class="sorter-action"></a>
</div><!-- Short by -->
<div class="toolbar-limiter">
<label class="label">
<span>Show:</span>
</label>
<select class="limiter-options form-control">
<option selected="selected" value="9"> Show 18</option>
<option value="15">Show 15</option>
<option value="30">Show 30</option>
</select>
</div><!-- Show per page -->
</div>
<ul class="pagination">
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li class="action action-next">
<a href="#">
Next <span><i aria-hidden="true" class="fa fa-angle-double-right"></i></span>
</a>
</li>
</ul>
</div>
</div>
<!-- Toolbar -->
</div><!-- Main Content -->
<!-- Sidebar -->
<div class="col-md-3 col-md-pull-9 col-sidebar">
<div class="block-sidebar block-banner-sidebar">
<div class="owl-carousel owl-loaded owl-drag" data-nav="false" data-dots="true" data-margin="0"
data-items="1" data-autoplaytimeout="700" data-autoplay="true" data-loop="true">
@foreach ($adv1 as $key => $row)
<div class="item">
<img src="{{ asset('images/' . $row->image) }}" alt="{{ $row->alt_text }}">
</div>
@endforeach
</div>
</div>
<!-- block slide top -->
<div class="block-sidebar block-banner-sidebar">
<div class="owl-carousel owl-loaded owl-drag" data-nav="false" data-dots="true" data-margin="0"
data-items="1" data-autoplaytimeout="700" data-autoplay="true" data-loop="true">
@foreach ($adv2 as $key => $row)
<div class="item">
<img src="{{ asset('images/' . $row->image) }}" alt="{{ $row->alt_text }}">
</div>
@endforeach
</div>
</div><!-- block slide top -->
<!-- block slide top -->
<div class="block-sidebar block-banner-sidebar">
<div class="owl-carousel owl-loaded owl-drag" data-nav="false" data-dots="true" data-margin="0"
data-items="1" data-autoplaytimeout="700" data-autoplay="true" data-loop="true">
@foreach ($adv3 as $key => $row)
<div class="item">
<img src="/images/{{ $row->image }}" alt="images">
</div>
@endforeach
</div>
</div><!-- block slide top -->
</div>
<!-- Sidebar -->
</div>
</div>
</main><!-- end MAIN -->
@endsection
@section('script')
<!-- Custom scripts -->
<script>
$(document).ready(function() {
// Function to fetch and display products
function fetchProducts(page = 1) {
let searchVal = $('input[name="searchVal"]').val(); // Get the search input value
$('#product-listing').empty().addClass('blur-effect');
// Apply skeleton loading structure
for (let i = 0; i < 9; i++) {
var skeletonHtml = `
<li class="col-sm-4 product-item">
<div class="skeleton-item">
<div class="skeleton-content">
<div class="skeleton-line" style="width: 80%;"></div>
<div class="skeleton-line" style="width: 60%;"></div>
<div class="skeleton-line" style="width: 70%;"></div>
</div>
</div>
</li>`;
$('#product-listing').append(skeletonHtml);
}
$.ajax({
url: "{{ route('get.subVvendors.front') }}",
type: "GET",
data: {
page: page,
getSearchVal: searchVal // Pass search value in the request
},
success: function(response) {
console.log(response);
$('#product-listing').empty().removeClass('blur-effect');
$.each(response.data, function(index, vendor) {
var vendorHtml = `
<li class="col-sm-4 product-item">
<div class="product-item-opt-1">
<div class="product-item-info">
<div class="product-item-photo">
<a href="{{ route('front.subVendor.detail', '') }}/${vendor.user.slug}" class="product-item-img">
<img src="{{ asset('shopAssets/images/media/product9.jpg') }}" alt="product name">
</a>
</div>
<div class="product-item-detail">
<strong class="product-item-name">
<a href="#">${vendor.user.first_name} ${vendor.user.last_name}</a>
</strong>`;
if (vendor.user.products.length > 0) {
vendorHtml += `
<div class="clearfix">
<div class="product-item-price">
<span class="price">$${vendor.user.products[0].min_price}-$${vendor.user.products[0].max_price}</span>
</div>
</div>`;
}
vendorHtml += `</div></div></div></li>`;
$('#product-listing').append(vendorHtml);
});
// Pagination handling
$('.pagination').empty();
let pre = response.current_page - 1;
let nxt = response.current_page + 1;
if (pre > 0) {
$('.pagination').append(`<li class="action"><a href="#" data-page="${pre}"><span><i aria-hidden="true" class="fa fa-angle-left"></i></span></a></li>`);
}
for (let i = 1; i <= response.last_page; i++) {
let activeClass = i === response.current_page ? 'active' : '';
$('.pagination').append(`<li class="${activeClass}"><a href="#" data-page="${i}">${i}</a></li>`);
}
if (nxt <= response.last_page) {
$('.pagination').append(`<li class="action"><a href="#" data-page="${nxt}"><span><i aria-hidden="true" class="fa fa-angle-right"></i></span></a></li>`);
}
},
error: function(xhr, status, error) {
console.error(error);
}
});
}
// Initial call to fetch products
fetchProducts();
// Pagination click event handler
$(document).on('click', '.pagination a', function(e) {
e.preventDefault();
let page = $(this).data('page'); // Get the page number from the clicked link
fetchProducts(page);
});
// Search button click event
$('#getSearchVal').on('click', function(e) {
e.preventDefault();
fetchProducts(1); // Fetch with search input value
});
});
</script>
{{-- <script>
$(document).ready(function() {
// Function to fetch and display products
function fetchProducts(page = 1) {
// Apply skeleton loading structure
for (let i = 0; i < 9; i++) { // Assuming 9 products per page
var skeletonHtml = `
<li class="col-sm-4 product-item">
<div class="skeleton-item">
<div class="skeleton-content">
<div class="skeleton-line" style="width: 80%;"></div>
<div class="skeleton-line" style="width: 60%;"></div>
<div class="skeleton-line" style="width: 70%;"></div>
</div>
</div>
</li>
`;
$('#product-listing').append(skeletonHtml);
}
$.ajax({
url: "{{ route('get.subVvendors.front') }}",
type: "GET",
data: {
page: page
},
success: function(response) {
console.log(response);
$('#product-listing').empty();
$('#product-listing').removeClass('blur-effect');
$.each(response.data, function(index, vendor) {
var vendorHtml =
`
<li class="col-sm-4 product-item">
<div class="product-item-opt-1">
<div class="product-item-info">
<div class="product-item-photo">
<div class="product-item-photo">
<a href="{{ route('front.subVendor.detail', '') }}/${vendor.user.slug}" class="product-item-img"><img
src="{{ asset('shopAssets/images/media/product9.jpg') }}"
alt="product name"></a>
</div>
</div>
<div class="product-item-detail">
<strong class="product-item-name"><a href="">${vendor.user.first_name} ${vendor.user.last_name}</a></strong>`;
if (vendor.user.products.length > 0) {
vendorHtml += `
<div class="clearfix">
<div class="product-item-price">
<span class="price">$${vendor.user.products[0].min_price}-$${vendor.user.products[0].max_price}</span>
</div>
</div>`;
}
vendorHtml += `
</div>
</div>
</div>
</li>
`;
$('#product-listing').append(vendorHtml);
});
// Display pagination links
$('.pagination').empty();
pre = 0;
nxt = 0;
pre = response.current_page - 1;
var previousPageHtml = `
<li class="action">
<a href="#" data-page="${pre}"><span><i aria-hidden="true" class="fa fa-angle-left"></i></span></a>
</li>
`;
$('.pagination').append(previousPageHtml);
for (let i = 1; i <= response.last_page; i++) {
var activeClass = i === response.current_page ? 'active' : '';
var paginationHtml = `
<li class="${activeClass}">
<a href="#" data-page="${i}">${i}</a>
</li>
`;
$('.pagination').append(paginationHtml);
}
nxt = response.current_page + 1;
var nextPageHtml = `
<li class="action">
<a href="#" data-page="${nxt}"><span><i aria-hidden="true" class="fa fa-angle-right"></i></span></a>
</li>
`;
$('.pagination').append(nextPageHtml);
},
error: function(xhr, status, error) {
console.error(error);
}
});
}
// Initial call to fetch products
fetchProducts();
// Pagination click event handler
$(document).on('click', '.pagination a', function(e) {
e.preventDefault();
var page = $(this).data('page'); // Get the page number from the clicked link
fetchProducts(page);
});
});
</script> --}}
<script>
(function($) {
"use strict";
$(document).ready(function() {
$('#slider-range').slider({
range: true,
min: 0,
max: 500,
values: [0, 300],
slide: function(event, ui) {
$('#amount-left').text(ui.values[0]);
$('#amount-right').text(ui.values[1]);
}
});
$('#amount-left').text($('#slider-range').slider('values', 0));
$('#amount-right').text($('#slider-range').slider('values', 1));
});
})(jQuery);
</script>
@endsection