<div class="ajax-loading">
<div class="container-fluid cont-categori col-top">
<div class="row col-xl-11">
<div class="col-md-12 col-12 px-0">
<div class="px-3 category-n">
@if ($category->description)
<h1>{{ $category->h1 ?: $category->name }}</h1>
@elseif($tag->description)
<h1>{{ $tag->h1 ?: $tag->name }}</h1>
@elseif($brand->description)
<h1>{{ $brand->h1 ?: $brand->name }}</h1>
@endif
</div>
<ul class="filter-category ps-0">
<li class="filter-item sticky_column">
<div class="row filter-box">
<div class="panel-group accordion-section ps-md-0" id="accordion">
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<ul>
<li>
<a data-bs-toggle="collapse" data-bs-parent="#accordion"
href="#collapseTwo" aria-expanded="false" class="">
<button class="btn btn-filter">
<i class="fas fa-filter"></i>
<span>فیلتر محصولات</span>
</button>
</a>
</li>
<li class="sort-option">
<div class="center">
<button data-bs-toggle="modal" data-bs-target="#sortModal"
class="btn btn-sort"><i
class="fas fa-sort-amount-down"></i>مرتب سازی
</button>
</div>
</li>
</ul>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="row close-box-fiter d-xl-nne d-lg-none d-md-none">
<div class="col-5 action-filter-box"></div>
<div class="col-5 clear-filter-box"></div>
<div class="col-2 gap-col-mob close-flter">
<span class="action-button"><i class="fas fa-times"></i></span>
</div>
</div>
<div class="panel-body">
<div class="panel panel-default filter_pannel">
<ul class="ps-0">
<div class="block-title">فیلتر محصولات</div>
@unless ($q)
<li class="block cat-filter scroll">
<input type="checkbox" name="item" id="off_filter_part">
<i class="fal fa-plus icon-button-filter"></i>
<label class="filter-cation" for="off_filter_part">جستجو
در
نتایج</label>
<div class="options">
<div class="input-quick-search">
<input type="text" wire:model.lazy="phrase"
class="input-field"
placeholder="نام محصول مورد نظر را بنویسید…">
</div>
</div>
</li>
@endunless
@if (!$brand->id && count($brands))
<li class="block cat-filter scroll" wire:ignore>
<input type="checkbox" id="color_filter_part_brand">
<i class="fal fa-plus icon-button-filter"></i>
<label class="filter-cation"
for="color_filter_part_brand">برند</label>
<div class="options">
<ul class="li-item ps-0">
@foreach ($brands as $p)
<li>
<label
class="checkbox-icon customradio">
<!--@if ($p->image)-->
<!-- <span class="logo-brand">-->
<!-- <img-->
<!-- src="{{ asset($p->image) }}"-->
<!-- alt="{{ $p->name }}" with="50" height="22">-->
<!-- </span>-->
<!--@endif-->
<span class="name-factur">
{{ $p->name }}</span>
<input type="checkbox"
value="{{ $p->id }}"
wire:model="brand_id">
<span class="checkmark"></span>
</label>
</li>
@endforeach
</ul>
</div>
</li>
@endif
@foreach ($attributes as $attribute)
<li class="block cat-filter scroll" wire:ignore>
<input type="checkbox"
id="color_filter_part_attribute{{ $attribute->id }}">
<i class="fal fa-plus icon-button-filter"></i>
<label class="filter-cation"
for="color_filter_part_attribute{{ $attribute->id }}">{{ $attribute->name }}</label>
<div class="options">
<ul class="li-item">
@foreach ($attribute->values as $value)
<li>
<label
class="checkbox-icon customradio">
{{ $value->value }}
<input type="checkbox"
value="{{ $value->id }}"
wire:model="value_id">
<span class="checkmark"></span>
</label>
</li>
@endforeach
</ul>
</div>
</li>
@endforeach
@foreach ($options as $option)
<li class="block cat-filter scroll" wire:ignore>
<input type="checkbox"
id="color_filter_part_option{{ $option->id }}">
<i class="fal fa-plus icon-button-filter"></i>
<label class="filter-cation"
for="color_filter_part_option{{ $option->id }}">{{ $option->name }}</label>
<div class="options">
<ul class="li-item">
@foreach ($option->values as $value)
<li>
<label
class="checkbox-icon customradio">
{{ $value->name }}
<input type="checkbox"
value="{{ $value->id }}"
wire:model="option_id">
<span class="checkmark"></span>
</label>
</li>
@endforeach
</ul>
</div>
</li>
@endforeach
<li class="block cat-filter" wire:ignore>
<input type="checkbox" name="item" id="cost_filter_part">
<i class="fal fa-plus icon-button-filter"></i>
<label class="filter-cation" for="cost_filter_part">جستجو
بر
اساس قیمت محصول</label>
<div class="options">
<div id="double-handle-slider"></div>
<ul class="cost-rang">
<li>
<p class="lbl-prise"> از</p>
<input type="number" class="min-value"
id="min-value"
value="{{ $min_price }}"
min="0" max="{{ $max_price }}"
readonly/>
<p>تومان</p>
</li>
<li>
<p class="lbl-prise">تا</p>
<input type="number" class="max-value"
id="max-value"
value="{{ $max_price ?: $max_price_products }}"
min="0" max="{{ $max_price }}"
readonly/>
<p>تومان</p>
</li>
</ul>
<p class="btn-action">
<button class="btn btn-filter-cost"
id="filter-cost">
<i class="fas fa-filter"></i>
<span>اعمال محدوه قیمت</span>
</button>
</p>
</div>
</li>
<li class="block cat-filter pt-0">
<label class="c-ui-statusswitcher">
<input type="checkbox" value="1"
wire:model="stock" id="stock_status-param-1">
<span class="c-ui-statusswitcher__slider">
<span
class="c-ui-statusswitcher__slider__toggle"></span>
</span>
</label>
<span class="status"> فقط کالاهای موجود</span>
</li>
<li class="block cat-filter pt-0">
<label class="c-ui-statusswitcher">
<input type="checkbox" value="1"
wire:model="special" id="special_status-param-1">
<span class="c-ui-statusswitcher__slider">
<span
class="c-ui-statusswitcher__slider__toggle"></span>
</span>
</label>
<span class="status"> فقط کالاهای تخفیفدار</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
@if(count($tags))
<div class="d-block mt-3" wire:ignore>
<div class="accordion" id="accordionLabel">
<div class="accordion-item">
<div class="accordion-header">
<div class="block-title">برچسب های منتخب</div>
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseLabel" aria-expanded="true"
aria-controls="collapseLabel">
برچسب های منتخب
</button>
</div>
<div id="collapseLabel" class="accordion-collapse collapse show"
data-bs-parent="#accordionLabel">
<div class="accordion-body">
<div class="blk-tags-cont clearfix">
@foreach($tags as $t)
<a class="lnk-tag" href="{{ route('tags.show', $t->slug) }}">{{ $t->name }}</a>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
@endif
</li>
<li class="category-container bg-white">
@if(count($categories))
<div class="row" wire:ignore>
<div class="col-12 p-0">
<div class="row">
<div class="col-12 p-0">
<div class="owl-carousel owl-theme owl-top-cat">
@foreach($categories as $ca)
<div class="item">
<div class="item-image">
<a href="{{ route('categories.show', ['category' => $ca->slug]) }}">
<img src="{{ asset($ca->image ?: 'images/defaults/default.jpg') }}"
class="img-item img-fluid"
style="height: 160px !important;"
alt="{{ $ca->name }}">
</a>
</div>
<a href="{{ route('categories.show', ['category' => $ca->slug]) }}" class="lnk-name">
{{ $ca->name }}
</a>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
@endif
<div class="row mt-md-2">
<div class="col-md-12 d-none d-md-block p-0">
<div class="row row-sort-top">
<div class="col-md-11">
<div class="btn-filter">
<label class="icon-sort">
<span><i class="fa fa-sort-amount-down"></i></span>مرتبسازی
</label>
<label class="sort_label">
<input class="button_radio" value="latest" wire:model="sort"
type="radio">
<span>جدیدترین</span>
</label>
<label class="sort_label">
<input class="button_radio" value="oldest" wire:model="sort"
type="radio">
<span>قدیمیترین</span>
</label>
<label class="sort_label">
<input class="button_radio" value="minPrice" wire:model="sort"
type="radio">
<span>قيمت نزولی</span>
</label>
<label class="sort_label">
<input class="button_radio" value="maxPrice" wire:model="sort"
type="radio">
<span>قيمت صعودی</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row row-list-item pt-xs-15">
<!--<div class="col-12">-->
<!--</div>-->
<div class="row">
@foreach($products as $product)
<livewire:frontend.search.single :product="$product" :wire:key="$product->id"/>
@endforeach
</div>
@if ($category->description)
<div class="row mb-3">
<div class="col-12">
<div class="card crd-desc">
<div class="d-blocvk" id="hide-behind-deleted">
{!! $category->description !!}
</div>
</div>
</div>
</div>
@elseif($tag->description)
<div class="row mb-3">
<div class="col-12">
<div class="card crd-desc">
<div class="py-4 px-3" id="hide-behind">
{!! $tag->description !!}
</div>
<div onclick="hide_behinde(this)" style="cursor: pointer;"
class="m-auto text-center show-m">مشاهده بیشتر
</div>
</div>
</div>
</div>
@elseif($brand->description)
<div class="row mb-3">
<div class="col-12">
<div class="card crd-desc">
<div class="d-block" id="hide-behind">
{!! $brand->description !!}
</div>
<div onclick="hide_behinde(this)" style="cursor: pointer;"
class="m-auto text-center show-m">مشاهده بیشتر
</div>
</div>
</div>
</div>
@endif
@if ($faq)
<div class="py-4 px-3">
<div class="accordion" id="accordionExample3" wire:ignore>
@foreach ($faq as $f)
<div class="accordion-item m-3">
<h4 class="accordion-header" id="heading{{ $loop->iteration }}">
<button class="accordion-button" type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse{{ $loop->iteration }}"
aria-expanded="true"
aria-controls="collapse{{ $loop->iteration }}">
{{ $f['question'] }}
</button>
</h4>
<div id="collapse{{ $loop->iteration }}"
class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
aria-labelledby="heading{{ $loop->iteration }}"
data-bs-parent="#accordionExample3">
<div class="accordion-body">
{{ $f['answer'] }}
</div>
</div>
</div>
@endforeach
</div>
</div>
@endif
</div>
<div class="my-4">
{{ $products->onEachSide(1)->links() }}
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="modal fade" id="sortModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<p class="sort-caption">مرتبسازی</p>
<div class="radio radio-primary">
<label class="checkbox-icon customradio">
<span class="radiotextsty">جدیدترین</span>
<input id="sort-1" value="latest" name="sort" wire:model.defer="sort"
type="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="radio radio-primary">
<label class="checkbox-icon customradio">
<span class="radiotextsty">قدیمیترین</span>
<input id="sort-2" value="oldest" name="sort" wire:model.defer="sort"
type="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="radio radio-primary">
<label class="checkbox-icon customradio">
<span class="radiotextsty">قيمت نزولی</span>
<input id="sort-3" value="minPrice" name="sort" wire:model.defer="sort"
type="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="radio radio-primary">
<label class="checkbox-icon customradio">
<span class="radiotextsty">قيمت صعودی</span>
<input id="sort-4" value="maxPrice" name="sort" wire:model.defer="sort"
type="radio">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group btn-delete" role="group">
<button type="button" class="btn btn-default btn-hover-red" data-bs-dismiss="modal"
role="button" wire:click="$refresh">اعمال
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div wire:loading>
@include('livewire.loader')
</div>
</div>
@push('scripts')
<script type="text/javascript">
function sticky_sidebar() {
$('.sticky_column')
.theiaStickySidebar({
additionalMarginTop: 60
});
}
jQuery(document).ready(function () {
sticky_sidebar()
});
if (matchMedia('only screen and (min-width:768px)').matches) {
$('#collapseTwo').addClass('show');
}
if (matchMedia('only screen and (max-width:767px)').matches) {
$('#collapseTwo').removeClass('show');
}
///اسکریپت نمایش بیشتر در لیست نام مجموعه ها///
$('.c-catalog__list--depth').each(function () {
var LiN = $(this).find('li').length;
if (LiN > 5) {
$('li', this).eq(4).nextAll().hide().addClass('toggleable');
$(this).append('<li class="more">مشاهده همه دستهبندیها</li>');
}
});
$('.c-catalog__list--depth').on('click', '.more', function () {
if ($(this).hasClass('less')) {
$(this).text('مشاهده همه دستهبندیها').removeClass('less');
} else {
$(this).text('بستن').addClass('less');
}
$(this).siblings('li.toggleable').slideToggle();
});
///اسکریپت نمایش اسکرول قیمت///
;
(function () {
var doubleHandleSlider = document.querySelector('#double-handle-slider');
var minValInput = document.querySelector('.min-value');
var maxValInput = document.querySelector('.max-value');
noUiSlider.create(doubleHandleSlider, {
start: [0, {{ $max_price_products ?: 0 }}],
connect: true,
tooltips: true,
step: 1,
range: {
'min': [0],
'max': [{{ $max_price_products ?: 0 }}]
},
tooltips: [true, wNumb({
decimals: 0
})],
format: wNumb({
decimals: 0
}),
});
doubleHandleSlider.noUiSlider.on('change', function (values, handle) {
var rangeValues = values;
minValInput.value = rangeValues[0];
maxValInput.value = rangeValues[1];
});
minValInput.addEventListener('change', function () {
doubleHandleSlider.noUiSlider.set([this.value, null]);
});
maxValInput.addEventListener('change', function () {
doubleHandleSlider.noUiSlider.set([null, this.value]);
});
})();
$(".close-flter").on("click", function () {
$("#collapseTwo").collapse('hide');
});
</script>
<script>
Livewire.on('scrollTop', function () {
$('html, body').animate({
scrollTop: 0
}, 'slow');
});
Livewire.on('applyLozad', function () {
observer.observe(); // apply lazy load after ajax request
});
$(document).on('click', '#filter-cost', function (event) {
event.preventDefault();
@this.
set('min_price', $('#min-value').val());
@this.
set('max_price', $('#max-value').val());
});
</script>
<script>
function hide_behinde() {
$("#hide-behind").addClass('more-c');
$('.show-m').hide();
}
</script>
@endpush