mirror of https://github.com/4xmen/xshop.git
added pedram theme part
parent
3b6a686fbe
commit
825f6dd721
Binary file not shown.
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
After Width: | Height: | Size: 55 KiB |
@ -0,0 +1,62 @@
|
|||||||
|
<section class="PedramProducts live-setting" data-live="{{$data->area_name.'_'.$data->part}}">
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
|
||||||
|
<path fill="{{getSetting($data->area_name.'_'.$data->part.'_color_bg')}}"
|
||||||
|
d="M194,99c186.7,0.7,305-78.3,306-97.2c1,18.9,119.3,97.9,306,97.2c114.3-0.3,194,0.3,194,0.3s0-91.7,0-100c0,0,0,0,0-0 L0,0v99.3C0,99.3,79.7,98.7,194,99z"></path>
|
||||||
|
</svg>
|
||||||
|
<img src="{{asset('upload/images/'.$data->area_name.'.'.$data->part.'2.png')}}" alt="[right]" class="right-img">
|
||||||
|
<img src="{{asset('upload/images/'.$data->area_name.'.'.$data->part.'1.png')}}" alt="[left]" class="left-img">
|
||||||
|
<div class="content">
|
||||||
|
<div class="{{gfx()['container']}}">
|
||||||
|
<h1>
|
||||||
|
{{getSetting($data->area_name.'_'.$data->part.'_title')}}
|
||||||
|
</h1>
|
||||||
|
<div class="content2">
|
||||||
|
|
||||||
|
<ul class="pedi-tab-control">
|
||||||
|
@foreach(getCategorySubCatsBySetting($data->area_name.'_'.$data->part.'_category') as $k => $cat)
|
||||||
|
<li data-id=".cat{{$cat->id}}" @if($k == 0 ) class="active" @endif>
|
||||||
|
{{$cat->name}}
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
@foreach(getCategorySubCatsBySetting($data->area_name.'_'.$data->part.'_category') as $k => $cat)
|
||||||
|
<div class="cat{{$cat->id}} pedi-tab mp-4 @if($k == 0 ) active @endif">
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
@foreach($cat->products()->limit(6)->get() as $product)
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<a class="pedi-product" href="{{$product->webUrl()}}">
|
||||||
|
<img src="{{$product->thumbUrl()}}" alt="{{$product->name}}" class="float-start">
|
||||||
|
<span>
|
||||||
|
{{$product->getPrice()}}
|
||||||
|
</span>
|
||||||
|
<h4>
|
||||||
|
{{$product->name}}
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
{{\Illuminate\Support\Str::limit(strip_tags($product->description))}}
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
width="1000"
|
||||||
|
height="200"
|
||||||
|
viewBox="0 0 1000 200"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
style="fill:{{getSetting($data->area_name.'_'.$data->part.'_color_bg')}}"
|
||||||
|
d="M 0,0 H 1000 V 200 C 1000,200 457.30891,69.618505 188.97638,113.38583 120.58681,124.54075 0,200 0,200 Z"/>
|
||||||
|
</svg>
|
||||||
|
</section>
|
@ -0,0 +1,16 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded',function () {
|
||||||
|
document.querySelectorAll('.pedi-tab-control li')?.forEach(function (el) {
|
||||||
|
el.addEventListener('click',function () {
|
||||||
|
el.closest('.content').querySelectorAll('.pedi-tab').forEach(function (el2) {
|
||||||
|
el2.style.display = 'none';
|
||||||
|
});
|
||||||
|
el.closest('.content').querySelectorAll('.pedi-tab-control li').forEach(function (el2) {
|
||||||
|
el2.classList.remove('active');
|
||||||
|
});
|
||||||
|
el.classList.add('active');
|
||||||
|
el.closest('.content')
|
||||||
|
.querySelector(el.getAttribute('data-id'))
|
||||||
|
.style.display = 'block';
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "PedramProducts",
|
||||||
|
"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,88 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Resources\Views\Segments;
|
||||||
|
|
||||||
|
use App\Models\Category;
|
||||||
|
use App\Models\Part;
|
||||||
|
use App\Models\Setting;
|
||||||
|
use Illuminate\Support\Facades\File;
|
||||||
|
|
||||||
|
class PedramProducts
|
||||||
|
{
|
||||||
|
public static function onAdd(Part $part = null)
|
||||||
|
{
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_title';
|
||||||
|
$setting->value = 'My products';
|
||||||
|
$setting->type = 'TEXT';
|
||||||
|
$setting->size = 12;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' title';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_color_bg';
|
||||||
|
$setting->value = gfx()['primary'];
|
||||||
|
$setting->data = json_encode(['name' => 'pedi-bg-color']);
|
||||||
|
$setting->type = 'COLOR';
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' background color';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_color_text';
|
||||||
|
$setting->value = '#ffffff';
|
||||||
|
$setting->data = json_encode(['name' => 'pedi-text-color']);
|
||||||
|
$setting->type = 'COLOR';
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' text color';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_category';
|
||||||
|
$setting->value = Category::first()->id;
|
||||||
|
$setting->type = 'CATEGORY';
|
||||||
|
$setting->size = 4;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' category';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'1_png';
|
||||||
|
$setting->value = null;
|
||||||
|
$setting->type = 'FILE';
|
||||||
|
$setting->size = 6;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part.' Image';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
File::copy(__DIR__.'/../../default-assets/coin-left.png',public_path('upload/images/').$part->area_name . '.' . $part->part.'.png');
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'2_png';
|
||||||
|
$setting->value = null;
|
||||||
|
$setting->type = 'FILE';
|
||||||
|
$setting->size = 6;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part.' Image';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
File::copy(__DIR__.'/../../default-assets/gold-right.png',public_path('upload/images/').$part->area_name . '.' . $part->part.'.png');
|
||||||
|
}
|
||||||
|
public static function onRemove(Part $part = null)
|
||||||
|
{
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_title')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_category')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_color_bg')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_color_text')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'1_png')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'2_png')->first()?->delete();
|
||||||
|
}
|
||||||
|
public static function onMount(Part $part = null)
|
||||||
|
{
|
||||||
|
return $part;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,127 @@
|
|||||||
|
.PedramProducts {
|
||||||
|
margin-top: 1rem;
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background: var(--pedi-bg-color);
|
||||||
|
color: var(--pedi-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:first-child {
|
||||||
|
width: calc(176% + 1.3px);
|
||||||
|
height: 171px;
|
||||||
|
transform: rotateY(180deg) rotateZ(180deg);
|
||||||
|
display: block;
|
||||||
|
left: 50%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:last-child {
|
||||||
|
width: calc(100%);
|
||||||
|
//height: 171px;
|
||||||
|
//transform: rotateY(180deg) ;
|
||||||
|
//display: block;
|
||||||
|
//left: 50%;
|
||||||
|
//position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: .5rem;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
color: var(--xshop-text);
|
||||||
|
border-radius: var(--xshop-border-radius);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
//text-shadow: 3px 3px 0px #000000;
|
||||||
|
border: 1px solid var(--pedi-bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--pedi-bg-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pedi-tab {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content2 {
|
||||||
|
background: var(--xshop-background);
|
||||||
|
border-radius: var(--xshop-border-radius);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pedi-product {
|
||||||
|
display: block;
|
||||||
|
border: 1px dashed var(--pedi-bg-color);
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: var(--xshop-border-radius);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--xshop-text);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
span {
|
||||||
|
inset-inline-end: 1rem;
|
||||||
|
top: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin: 1rem;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-img {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-img {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-968px width*/
|
||||||
|
@media (max-width: 968px) {
|
||||||
|
|
||||||
|
.PedramProducts {
|
||||||
|
.content2 {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 260 KiB |
Loading…
Reference in New Issue