Skip to content

Commit 095d187

Browse files
A1GardA1Gard
committed
added curve category theme part
1 parent 5cd729f commit 095d187

File tree

9 files changed

+342
-6
lines changed

9 files changed

+342
-6
lines changed

‎resources/sass/client-custom/_zfix.scss

+4
Original file line numberDiff line numberDiff line change
@@ -146,3 +146,7 @@ ul.pagination {
146146
.accordion-button:not(.collapsed){
147147
background: transparent;
148148
}
149+
150+
.btn-outline-light:hover{
151+
color: black !important;
152+
}

‎resources/views/segments/categories/CurveCategories/CurveCategories.blade.php

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<section id='CurveCategories'>
2+
3+
4+
<div id="curve-cat-top">
5+
6+
</div>
7+
<div>
8+
{{-- class="{{gfx()['container']}}"--}}
9+
10+
<h1 class="text-center">
11+
{{getSetting($part->area_name . '_' . $part->part.'_title')}}
12+
</h1>
13+
<div id="curve-slider-cat-container">
14+
15+
<div id="crc-nxt" class="sld-btn">
16+
<i class="ri-arrow-right-line"></i>
17+
</div>
18+
<div id="crc-prv" class="sld-btn">
19+
<i class="ri-arrow-left-line"></i>
20+
</div>
21+
22+
<div id="curve-slider-cat">
23+
@foreach(getCategorySubCatsBySetting($part->area_name . '_' . $part->part.'_category') as $cat)
24+
<div class="item slider-content">
25+
<div class="curve-cat-item">
26+
<a href="{{$cat->webUrl()}}">
27+
<img src="{{$cat->imgUrl()}}" alt="{{$cat->name}}">
28+
<h4>
29+
{{$cat->name}}
30+
</h4>
31+
</a>
32+
</div>
33+
</div>
34+
@endforeach
35+
</div>
36+
</div>
37+
</div>
38+
39+
<div id="curve-cat-bottom">
40+
41+
</div>
42+
</section>

‎resources/views/segments/categories/CurveCategories/CurveCategories.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {tns} from "tiny-slider/src/tiny-slider";
2+
3+
var curveCatSlider ;
4+
5+
document.addEventListener('DOMContentLoaded', () => {
6+
document.querySelectorAll('#curve-slider-cat')?.forEach(function (el) {
7+
if (el.classList.contains('.tns-slider')){
8+
console.log('ignore');
9+
return 'ignore';
10+
}
11+
curveCatSlider = tns({
12+
container: el,
13+
responsive:{
14+
560:{
15+
items: 1.5,
16+
},
17+
1000:{
18+
items: 3.5,
19+
},
20+
1400:{
21+
items: 5.5,
22+
},
23+
24+
},
25+
// edgePadding: 50,
26+
autoplay: true,
27+
autoplayButton: false,
28+
mouseDrag: true,
29+
prevButton: false,
30+
nextButton: false,
31+
autoplayTimeout: 8000,
32+
center: true,
33+
nav: true,
34+
loop:true,
35+
});
36+
});
37+
//
38+
document.querySelector('#crc-nxt')?.addEventListener('click',function () {
39+
if (document.documentElement.getAttribute('dir') === 'rtl'){
40+
curveCatSlider.goTo('prev');
41+
}else{
42+
curveCatSlider.goTo('next');
43+
}
44+
});
45+
document.querySelector('#crc-prv')?.addEventListener('click',function () {
46+
if (document.documentElement.getAttribute('dir') !== 'rtl'){
47+
curveCatSlider.goTo('prev');
48+
}else{
49+
curveCatSlider.goTo('next');
50+
}
51+
});
52+
});

‎resources/views/segments/categories/CurveCategories/CurveCategories.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "CurveCategories",
3+
"version": "1.0",
4+
"author": "xStack",
5+
"email": "xshop@xstack.ir",
6+
"license": "GPL-3.0-or-later",
7+
"url": "https:\/\/xstack.ir",
8+
"author_url": "https:\/\/4xmen.ir",
9+
"packages": []
10+
}

‎resources/views/segments/categories/CurveCategories/CurveCategories.php

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<?php
2+
3+
namespace Resources\Views\Segments;
4+
5+
use App\Models\Category;
6+
use App\Models\Part;
7+
use App\Models\Setting;
8+
9+
class CurveCategories
10+
{
11+
public static function onAdd(Part $part = null)
12+
{
13+
$setting = new Setting();
14+
$setting->section = 'theme';
15+
$setting->key = $part->area_name . '_' . $part->part.'_title';
16+
$setting->value = 'Lorem ipsum dolor sit amet';
17+
$setting->type = 'TEXT';
18+
$setting->size = 4;
19+
$setting->title = $part->area_name . ' ' . $part->part .' titles';
20+
$setting->save();
21+
22+
23+
$setting = new Setting();
24+
$setting->section = 'theme';
25+
$setting->key = $part->area_name . '_' . $part->part.'_category';
26+
$setting->value = Category::first()->id;
27+
$setting->type = 'CATEGORY';
28+
$setting->size = 4;
29+
$setting->title = $part->area_name . ' ' . $part->part .' category';
30+
$setting->save();
31+
32+
33+
$setting = new Setting();
34+
$setting->section = 'theme';
35+
$setting->key = $part->area_name . '_' . $part->part.'_bg';
36+
$setting->value = gfx()['secondary'];
37+
$setting->type = 'COLOR';
38+
$setting->data = json_encode(['name' => 'curve-slider-bg']);
39+
$setting->size = 4;
40+
$setting->title = $part->area_name . ' ' . $part->part .' background color';
41+
$setting->save();
42+
43+
44+
45+
}
46+
public static function onRemove(Part $part = null)
47+
{
48+
Setting::where('key',$part->area_name . '_' . $part->part.'_title')->first()?->delete();
49+
Setting::where('key',$part->area_name . '_' . $part->part.'_category')->first()?->delete();
50+
Setting::where('key',$part->area_name . '_' . $part->part.'bg')->first()?->delete();
51+
}
52+
public static function onMount(Part $part = null)
53+
{
54+
return $part;
55+
}
56+
}

‎resources/views/segments/categories/CurveCategories/CurveCategories.scss

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
#CurveCategories {
2+
position: relative;
3+
background: var(--curve-slider-bg);
4+
5+
6+
h1{
7+
position: relative;
8+
z-index: 33;
9+
margin-bottom: 1rem;
10+
font-size: 30px;
11+
font-weight: 300;
12+
}
13+
#curve-cat-top, #curve-cat-bottom {
14+
height: 10rem;
15+
position: relative;
16+
background: transparent;
17+
overflow: hidden;
18+
19+
}
20+
21+
#curve-cat-top {
22+
23+
margin-bottom: -4.5rem;
24+
25+
z-index: 15;
26+
27+
&:before {
28+
content: " ";
29+
position: absolute;
30+
bottom: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 700%;
34+
background: var(--xshop-background);
35+
border-radius: 50%;
36+
transform: scaleX(1.75);
37+
}
38+
39+
}
40+
41+
#curve-cat-bottom {
42+
margin-top: -2.5rem;
43+
z-index: 10;
44+
45+
&:before {
46+
content: " ";
47+
position: absolute;
48+
top: 0;
49+
left: 0;
50+
width: 100%;
51+
height: 700%;
52+
background: var(--xshop-background);
53+
border-radius: 50%;
54+
transform: scaleX(1.75);
55+
}
56+
}
57+
58+
#curve-slider-cat-container {
59+
height: 35vh;
60+
61+
#curve-slider-cat{
62+
//width: 100vw;
63+
//left: 0;
64+
//right: 0;
65+
}
66+
67+
.slider-content {
68+
transform: translateX(25%);
69+
}
70+
71+
&:before, &:after {
72+
content: ' ';
73+
position: absolute;
74+
top: 0;
75+
bottom: 0;
76+
width: 45%;
77+
z-index: 9;
78+
pointer-events: none;
79+
}
80+
81+
&:before {
82+
background: linear-gradient(90deg, var(--curve-slider-bg) 20%, rgba(0, 0, 0, 0) 100%);
83+
left: 0;
84+
}
85+
86+
&:after {
87+
background: linear-gradient(-90deg, var(--curve-slider-bg) 20%, rgba(0, 0, 0, 0) 100%);
88+
right: 0;
89+
}
90+
91+
92+
.sld-btn,.tns-nav{
93+
z-index: 70;
94+
position: absolute;
95+
top: 75%;
96+
cursor: pointer;
97+
i{
98+
font-size: 35px;
99+
}
100+
}
101+
102+
#crc-nxt{
103+
right:calc(50% - 100px);
104+
transform: translateX(-50%);
105+
}
106+
#crc-prv{
107+
left:calc(50% - 100px);
108+
transform: translateX(50%);
109+
}
110+
111+
.tns-nav{
112+
display: flex !important;
113+
width: 150px;
114+
left:calc(50% - 75px);
115+
height: 50px;
116+
117+
align-items: center;
118+
justify-content: space-evenly;
119+
button{
120+
display: inline-block;
121+
margin: 3px;
122+
width: 10px;
123+
height: 10px;
124+
border-radius: var(--xshop-border-radius);
125+
background: #00000044;
126+
border: 0;
127+
}
128+
129+
.tns-nav-active{
130+
131+
background: var(--xshop-primary);
132+
}
133+
}
134+
}
135+
136+
.curve-cat-item {
137+
height: 35vh;
138+
position: relative;
139+
img {
140+
height: 100%;
141+
width: 100%;
142+
object-fit: cover;
143+
}
144+
145+
h4{
146+
position: absolute;
147+
bottom: 45%;
148+
left: 0;
149+
right: 0;
150+
width: 100%;
151+
text-align: center;
152+
z-index: 33;
153+
background: var(--xshop-background);
154+
padding: .5rem;
155+
transition: 300ms;
156+
font-weight: 400;
157+
opacity: 0;
158+
}
159+
160+
&:hover{
161+
h4{
162+
opacity: 1;
163+
}
164+
}
165+
166+
167+
168+
}
169+
170+
171+
}

‎resources/views/segments/categories/CurveCategories/screenshot.png

212 KB
Loading

‎resources/views/segments/products/SamiraProductSlider/SamiraProductSlider.blade.php

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828

2929
<a href="{{$product->webUrl()}}" class="btn btn-outline-light">
3030
{{__("View product")}}
31+
&nbsp;
3132
<i class="ri-arrow-right-circle-fill float-end"></i>
3233
</a>
3334
</div>

‎resources/views/segments/products/SamiraProductSlider/SamiraProductSlider.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import {tns} from "tiny-slider/src/tiny-slider";
22

3-
var author ;
3+
var samSlider ;
44

55
document.addEventListener('DOMContentLoaded', () => {
66
document.querySelectorAll('#samira-slider')?.forEach(function (el) {
77
if (el.classList.contains('.tns-slider')){
88
console.log('ignore');
99
return 'ignore';
1010
}
11-
author = tns({
11+
samSlider = tns({
1212
container: el,
1313
items: 1.5,
1414
// edgePadding: 50,
@@ -26,16 +26,16 @@ document.addEventListener('DOMContentLoaded', () => {
2626

2727
document.querySelector('#sam-nxt')?.addEventListener('click',function () {
2828
if (document.documentElement.getAttribute('dir') === 'rtl'){
29-
author.goTo('prev');
29+
samSlider.goTo('prev');
3030
}else{
31-
author.goTo('next');
31+
samSlider.goTo('next');
3232
}
3333
});
3434
document.querySelector('#sam-prv')?.addEventListener('click',function () {
3535
if (document.documentElement.getAttribute('dir') !== 'rtl'){
36-
author.goTo('prev');
36+
samSlider.goTo('prev');
3737
}else{
38-
author.goTo('next');
38+
samSlider.goTo('next');
3939
}
4040
});
4141
});

0 commit comments

Comments
 (0)