diff --git a/resources/js/client-vue/QuantitiesAddToCard.vue b/resources/js/client-vue/QuantitiesAddToCard.vue index 9207cd7..1a2c9a2 100644 --- a/resources/js/client-vue/QuantitiesAddToCard.vue +++ b/resources/js/client-vue/QuantitiesAddToCard.vue @@ -99,6 +99,9 @@ export default { methods: { select(i) { document.querySelector('#price').innerText = commafy(this.qz[i].price.toString()) + ' ' + this.currency; + let index = this.qz[i].image; + document.querySelector('#preview a').setAttribute('href',document.querySelector(`#hidden-images a:nth-child(${index+1})`).getAttribute('href')); + document.querySelector('#preview img').setAttribute('src',document.querySelector(`#hidden-images a:nth-child(${index+1}) img`).getAttribute('src')); this.selected = i; }, async add2card() { diff --git a/resources/views/segments/product/ProductAria/ProductAria.blade.php b/resources/views/segments/product/ProductAria/ProductAria.blade.php index e04208a..734bc0c 100644 --- a/resources/views/segments/product/ProductAria/ProductAria.blade.php +++ b/resources/views/segments/product/ProductAria/ProductAria.blade.php @@ -20,10 +20,12 @@
- - {{$product->name}} - +
+ + {{$product->name}} + +
@foreach($product->getMedia() as $media)
@@ -71,14 +73,14 @@
 
@if($product->quantities()->count()>0) hasDiscount()) - :discount='@json($product->activeDiscounts()->first())' - @endif + @if($product->hasDiscount()) + :discount='@json($product->activeDiscounts()->first())' + @endif > @else

- @@ -145,23 +148,25 @@

@if($product->table != null || trim($product->table) != '') -
-

- -

-
-
- {!! $product->table !!} +
+

+ +

+
+
+ {!! $product->table !!} +
-
@endif

-

@@ -198,16 +203,16 @@ diff --git a/resources/views/segments/product/ProductAria/ProductAria.js b/resources/views/segments/product/ProductAria/ProductAria.js index 49d362b..0d3091a 100644 --- a/resources/views/segments/product/ProductAria/ProductAria.js +++ b/resources/views/segments/product/ProductAria/ProductAria.js @@ -4,6 +4,8 @@ import {tns} from "tiny-slider/src/tiny-slider"; var ariaImgSlider, ariaRelativeSlider; document.addEventListener('DOMContentLoaded',function () { + + for (const el of document.querySelectorAll('.light-box')) { el.addEventListener('click', Lightbox.initialize); } diff --git a/resources/views/segments/product/ProductKaren/ProductKaren.blade.php b/resources/views/segments/product/ProductKaren/ProductKaren.blade.php new file mode 100644 index 0000000..b64f0b8 --- /dev/null +++ b/resources/views/segments/product/ProductKaren/ProductKaren.blade.php @@ -0,0 +1,204 @@ +
+ +
+
+
+
+ + {{$product->name}} + +
+
+ @foreach($product->getMedia() as $media) +
+ + {{$product->name}} + +
+ @endforeach +
+
+
+ + + +

+ {{$product->name}} +

+
+

+ {{$product->excerpt}} +

+
+
+
+ {{$product->getPrice()}} +
+ + @if($product->hasDiscount()) +
+ {{$product->oldPrice()}} +
+ @endif +
+ @if($product->sku != null && $product->sku != '') +
+ + + {{__("SKU")}}: + + + {{$product->sku}} + +
+ @endif + @if($product->categories()->count() > 0) +
+ + {{__("Categories")}}: + + @foreach($product->categories()->where('id','<>',$product->category->id)->get() as $cat) + + {{$cat->name}}, + + @endforeach + + {{$product->category->name}} + +
+ @endif + @if($product->tags()->count() > 0) +
+ + {{__("Tags")}}: + + @foreach($product->tags as $tag) + + + {{$tag->name}} + + @endforeach +
+ @endif +
+ + + + {{__("Toggle favorite")}} + + + + + {{__("Add to compare list")}} + +
 
+ + @if($product->quantities()->count()>0) + hasDiscount()) + :discount='@json($product->activeDiscounts()->first())' + @endif + > + @else + + + {{__("Add to card")}} + + @endif +
+
+
+
+ {{__("Description")}} +
+ @if($product->table != null || trim($product->table) != '') +
+ {{__("Product table")}} +
+ @endif +
+ {{__("Information")}} +
+
+
+
+ {!! $product->description !!} +
+
+ {!! $product->table !!} +
+
+ + + + + + @foreach($product->fullMeta() as $meta) + + + + + @endforeach +
+ {{__("Item")}} + + {{__("Value")}} +
+ +   + {{$meta['data']->label}} + + {!! $meta['human_value'] !!} +
+
+

+ {{__("Related products")}} +

+
+ @foreach($product->category->products()->where('status',1)->limit(10)->get() as $p) +
+
+ + {{$p->name}} +
+ {{$p->name}} +
+ +
+
+ @endforeach +
+
+
+ @foreach($product->getMedia() as $k => $media) + + {{$product->name}} + + @endforeach +
+
diff --git a/resources/views/segments/product/ProductKaren/ProductKaren.js b/resources/views/segments/product/ProductKaren/ProductKaren.js new file mode 100644 index 0000000..b99def1 --- /dev/null +++ b/resources/views/segments/product/ProductKaren/ProductKaren.js @@ -0,0 +1,93 @@ +import Lightbox from 'bs5-lightbox' ; +import {tns} from "tiny-slider/src/tiny-slider"; + +var karenImgSlider, karenRelativeSlider; +document.addEventListener('DOMContentLoaded',function () { + + for (const el of document.querySelectorAll('.light-box')) { + el.addEventListener('click', Lightbox.initialize); + } + karenImgSlider = tns({ + container: '#karen-img-slider', + items: 3, + autoplay: true, + autoplayButton: false, + // nextButton: false, + controls: false, + autoplayHoverPause: true, + mouseDrag: true, + gutter: 5, + slideBy: 1, + autoplayTimeout: 5000, + // speed:10000, + }); + karenRelativeSlider = tns({ + container: '#rel-products', + items: 3, + autoplay: true, + autoplayButton: false, + // nextButton: false, + controls: false, + autoplayHoverPause: true, + mouseDrag: true, + gutter: 5, + slideBy: 1, + autoplayTimeout: 5000, + responsive:{ + 560:{ + items: 1, + }, + 768:{ + items: 2, + }, + 1000:{ + items: 4, + }, + 1400:{ + items: 5, + }, + + } + // speed:10000, + }); + + document.querySelectorAll('#karen-img-slider a')?.forEach(function (el) { + el.addEventListener('click',function (e) { + e.preventDefault(); + document.querySelector('#karen-main-img').setAttribute('href',el.getAttribute('href')); + document.querySelector('#karen-main-img img').setAttribute('src',el.querySelector('img').getAttribute('src')); + }) + }); + + + // tabs + const tabs = document.querySelectorAll('.navtab'); + const contents = document.querySelectorAll('.tab-content'); + const underline = document.querySelector('.underline'); + + function updateUnderline() { + const activeTab = document.querySelector('.navtab.active'); + underline.style.width = `${activeTab.offsetWidth}px`; + underline.style.left = `${activeTab.offsetLeft}px`; + } + + tabs.forEach(tab => { + tab.addEventListener('click', () => { + tabs.forEach(t => t.classList.remove('active')); + tab.classList.add('active'); + const target = tab.getAttribute('data-target'); + contents.forEach(content => { + if (content.id === target) { + content.classList.add('active'); + } else { + content.classList.remove('active'); + } + }); + updateUnderline(); + }); + }); + + window.addEventListener('resize', updateUnderline); + updateUnderline(); + +}); diff --git a/resources/views/segments/product/ProductKaren/ProductKaren.json b/resources/views/segments/product/ProductKaren/ProductKaren.json new file mode 100644 index 0000000..5f889fe --- /dev/null +++ b/resources/views/segments/product/ProductKaren/ProductKaren.json @@ -0,0 +1,10 @@ +{ + "name": "ProductKaren", + "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": [] +} \ No newline at end of file diff --git a/resources/views/segments/product/ProductKaren/ProductKaren.php b/resources/views/segments/product/ProductKaren/ProductKaren.php new file mode 100644 index 0000000..bfe4c29 --- /dev/null +++ b/resources/views/segments/product/ProductKaren/ProductKaren.php @@ -0,0 +1,30 @@ +section = 'theme'; + $setting->key = $part->area->name . '_' . $part->part.'_bg'; + $setting->value = '#ffffff'; + $setting->type = 'COLOR'; + $setting->data = json_encode(['name' => 'karen-tab-bg-color']); + $setting->size = 12; + $setting->title = $part->area->name . ' ' . $part->part .' tab background color'; + $setting->save(); + } + public static function onRemove(Part $part = null) + { + Setting::where('key',$part->area->name . '_' . $part->part.'_bg')->first()?->delete(); + } + public static function onMount(Part $part = null) + { + return $part; + } +} diff --git a/resources/views/segments/product/ProductKaren/ProductKaren.scss b/resources/views/segments/product/ProductKaren/ProductKaren.scss new file mode 100644 index 0000000..d8b261e --- /dev/null +++ b/resources/views/segments/product/ProductKaren/ProductKaren.scss @@ -0,0 +1,172 @@ +#ProductKaren { + padding: 1rem 0; + + + #preview{ + position: relative; + } + + #karen-product-detail{ + position: relative; + overflow: hidden; + + .description{ + //border: 1px solid var(--xshop-primary); + //border-radius: var(--xshop-border-radius); + padding: 1rem 0; + p{ + padding: 0; + margin: 0; + } + + margin-bottom: 1rem; + margin-top: 1rem; + } + + h1{ + font-size: 32px; + font-weight: 200; + } + + #price{ + color: var(--xshop-primary); + font-size: 27px; + margin-bottom: .7rem; + text-align: center; + } + + #price-old{ + text-align: center; + text-decoration: line-through red; + font-size: 27px; + color: gray; + font-weight: 200; + } + + .fav-btn, .compare-btn { + + height: 40px; + background: #ffffff55; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--xshop-border-radius); + z-index: 4; + cursor: pointer; + transition: .4s; + padding:7px 1rem; + border: 1px solid var(--xshop-primary); + i{ + font-size: 25px; + } + + &: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; + } + } + } + } + p{ + text-align: justify; + color: gray; + line-height: 2em; + } + + + #karen-main-img{ + img{ + height: 50vh; + object-fit: cover; + width: 100%; + border-radius: var(--xshop-border-radius); + } + } + + #karen-img-slider{ + margin-top: 5px; + img{ + width: 100%; + height: 150px; + object-fit: cover; + border-radius: var(--xshop-border-radius); + } + + } + + .karen-product-data{ + padding: 5px; + } + + .karen-product-list{ + padding: 5px; + img{ + height: 20vh; + width: 100%; + object-fit: cover; + border-radius: var(--xshop-border-radius); + } + h5{ + text-align: center; + padding: .5rem 0; + } + } + + + + .navtabs { + display: flex; + justify-content: center; + margin-top: 20px; + background: var(--karen-tab-bg-color,#ffffff); + box-shadow: var(--xshop-shadow); + border-radius: var(--xshop-border-radius); + padding: 10px 20px; + position: relative; + } + .navtab { + margin: 0 10px; + padding: 5px 20px; + cursor: pointer; + transition: color 0.3s; + &:hover { + color: var(--xshop-secondary); + } + } + .navtab.active { + color: var(--xshop-primary); + font-weight: 600; + } + .underline { + position: absolute; + bottom: 0; + height: 2px; + background: var(--xshop-primary); + transition: left 0.3s ease, width 0.3s ease; + } + .tab-content { + display: none; + padding: 1rem; + background: var(--karen-tab-bg-color,#ffffff); + } + .tab-content.active { + display: block; + } + +}