mirror of https://github.com/4xmen/xshop.git
added product grid side theme part [WIP: filter category]
parent
f88163e674
commit
a7d9607343
@ -0,0 +1,60 @@
|
||||
<section class='ProductGridSidebar content'>
|
||||
<div class="{{gfx()['container']}}">
|
||||
<h1>
|
||||
{{$title}}
|
||||
</h1>
|
||||
<div class="row">
|
||||
@if(!getSetting($data->area->name.'_'.$data->part.'_invert'))
|
||||
<div class="col-lg-3 p-lg-1 pt-lg-0">
|
||||
@include('segments.products.ProductGridSidebar.inc.product-sidebar')
|
||||
</div>
|
||||
@endif
|
||||
<div class="col-lg-9">
|
||||
<div class="row">
|
||||
@foreach($products as $product)
|
||||
<div class="col-md-4 p-2">
|
||||
<div class="product-item">
|
||||
<a class="fav-btn" data-slug="{{$product->slug}}" data-is-fav="{{$product->isFav()}}">
|
||||
<i class="ri-heart-line"></i>
|
||||
<i class="ri-heart-fill"></i>
|
||||
</a>
|
||||
<a class="compare-btn" data-slug="{{$product->slug}}">
|
||||
<i class="ri-scales-3-line"></i>
|
||||
</a>
|
||||
<a href="{{$product->webUrl()}}">
|
||||
<img src="{{$product->imgUrl()}}" alt="{{$product->name}}">
|
||||
<h3>
|
||||
{{$product->name}}
|
||||
</h3>
|
||||
<div class="prices">
|
||||
@if($product->hasDiscount())
|
||||
<span class="old-price">
|
||||
{{$product->oldPrice()}}
|
||||
</span>
|
||||
@endif
|
||||
<span class="price">
|
||||
{{$product->getPrice()}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<a href="{{ route('client.product-card-toggle',$product->slug) }}" class="btn btn-outline-primary w-100 add-to-card">
|
||||
<i class="ri-shopping-bag-3-line"></i>
|
||||
{{__("Add to card")}}
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
{{$products->links()}}
|
||||
|
||||
</div>
|
||||
@if(getSetting($data->area->name.'_'.$data->part.'_invert'))
|
||||
<div class="col-lg-3">
|
||||
@include('segments.products.ProductGridSidebar.inc.product-sidebar')
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "ProductGridSidebar",
|
||||
"version": "1.0",
|
||||
"author": "xStack",
|
||||
"email": "xshop@xstack.ir",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"url": "https:\/\/xstack.ir",
|
||||
"author_url": "https:\/\/4xmen.ir",
|
||||
"packages": []
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
<?php
|
||||
|
||||
namespace Resources\Views\Segments;
|
||||
|
||||
use App\Models\Part;
|
||||
use App\Models\Setting;
|
||||
|
||||
class ProductGridSidebar
|
||||
{
|
||||
public static function onAdd(Part $part = null)
|
||||
{
|
||||
$setting = new Setting();
|
||||
$setting->section = 'theme';
|
||||
$setting->key = $part->area->name . '_' . $part->part.'_invert';
|
||||
$setting->value = 0;
|
||||
$setting->size = 12;
|
||||
$setting->type = 'CHECKBOX';
|
||||
// $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
|
||||
$setting->title = $part->area->name . ' ' . $part->part. ' invert sidebar position';
|
||||
$setting->save();
|
||||
}
|
||||
public static function onRemove(Part $part = null)
|
||||
{
|
||||
Setting::where('key',$part->area->name . '_' . $part->part.'_invert')->first()?->delete();
|
||||
}
|
||||
|
||||
public static function onMount(Part $part = null)
|
||||
{
|
||||
return $part;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,162 @@
|
||||
.ProductGridSidebar {
|
||||
padding: 1rem 0;
|
||||
|
||||
h1{
|
||||
font-size: 30px;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 4px;
|
||||
&:after{
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
height: 1px;
|
||||
width: 70%;
|
||||
bottom: 0;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
background: linear-gradient(90deg,#ffffff00 0%, var(--xshop-primary) 50%, #ffffff00 100%);
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
border: 1px solid silver;
|
||||
box-shadow: var(--xshop-shadow);
|
||||
border-radius: var(--xshop-border-radius);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
h3 {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
color: var(--xshop-text);
|
||||
}
|
||||
|
||||
.prices {
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(0, 1fr);
|
||||
grid-auto-flow: column;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.old-price{
|
||||
text-decoration: red line-through;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
.fav-btn, .compare-btn {
|
||||
position: absolute;
|
||||
inset-inline-start: -12%;
|
||||
top: 3%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #ffffff55;
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
z-index: 4;
|
||||
cursor: pointer;
|
||||
transition: .4s;
|
||||
|
||||
&:hover {
|
||||
background: var(--xshop-primary);
|
||||
color: var(--xshop-diff);
|
||||
}
|
||||
}
|
||||
|
||||
.fav-btn {
|
||||
top: calc(3% + 50px);
|
||||
|
||||
&[data-is-fav="-1"]{
|
||||
display: none;
|
||||
}
|
||||
&[data-is-fav="1"]{
|
||||
.ri-heart-line{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&[data-is-fav="0"]{
|
||||
.ri-heart-fill{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fav-btn, .compare-btn {
|
||||
inset-inline-start: 3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aside{
|
||||
|
||||
h4{
|
||||
background: var(--xshop-primary);
|
||||
color: var(--xshop-diff);
|
||||
padding: .5rem 1rem;
|
||||
text-align: center;
|
||||
border-radius: var(--xshop-border-radius);
|
||||
opacity: .75;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
.side-item{
|
||||
background: #00000010;
|
||||
border-radius: var(--xshop-border-radius);
|
||||
margin-bottom: 1rem;
|
||||
.side-data{
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.side-list{
|
||||
ul{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
padding-top: 2px;
|
||||
li{
|
||||
position: relative;
|
||||
padding: 2px;
|
||||
a{
|
||||
display: block;
|
||||
}
|
||||
&:before{
|
||||
position: absolute;
|
||||
content: "\F035";
|
||||
font-family: 'remixicon';
|
||||
inset-inline-start: -20px;
|
||||
top: -2px;
|
||||
color: var(--xshop-secondary);
|
||||
}
|
||||
|
||||
&.active{
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0;
|
||||
background: var(--xshop-primary);
|
||||
a{
|
||||
color: var(--xshop-diff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
<aside class="mt-2">
|
||||
<div class="side-item">
|
||||
<h4>
|
||||
{{__("Search")}}
|
||||
</h4>
|
||||
<form action="" class="side-data">
|
||||
<div class="input-group mb-3">
|
||||
<input type="search" class="form-control" placeholder="{{__('Search')}}...">
|
||||
<button class="btn btn-outline-secondary" type="submit" id="button-addon2">
|
||||
<i class="ri-search-2-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="side-item">
|
||||
<h4>
|
||||
{{__("Categories")}}
|
||||
</h4>
|
||||
<div class="side-data side-list">
|
||||
<ul class="ps-3">
|
||||
{!! showCatNested(\App\Models\Category::all(['id','name','parent_id'])) !!}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
Loading…
Reference in New Issue