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