Untitled
unknown
plain_text
a year ago
16 kB
5
Indexable
<div class="px-5 lg:px-36 sm:px-10">
<div class="flex w-full flex-col md:flex-row md:gap-5">
<div class="w-full">
<div class="h-full md:pl-6">
@if(count($product->thumbnails) === 1)
<div class="w-full aspect-square p-5 md:p-0 pb-5">
<img src="{{ $product->thumbnails[0] }}" alt="Product Thumbnail"
class="h-full w-full object-cover rounded-lg">
</div>
@else
<livewire:front.layouts.product-gallery :thumbnails="$product->thumbnails"/>
@endif
</div>
</div>
<div class="col-md-8 w-full px-6 md:px-0">
<h3 class="font-black text-2xl">{{ $product->name }}</h3>
<p class="text-sm mt-2">Artikelnr: {{ $product->article_number }}</p>
@if(auth()->check() && auth()->user()->canOrder())
@if(auth()->user()->client_type === 'silver')
<div class="flex gap-4 my-3">
@if($product->productPrice?->silver_discount_price < $product->productPrice?->silver_price)
<h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->silver_discount_price ? "$ ".$product->productPrice?->silver_discount_price : '' }}</h3>
<del
class="text-gray-300 text-2xl font-bold">{{ $product->productPrice?->silver_price ? "$ ".$product->productPrice?->silver_price : '' }}</del>
@else
<h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->silver_discount_price ? "$ ".$product->productPrice?->silver_discount_price : '' }}</h3>
@endif
</div>
@elseif(auth()->user()->client_type === 'gold')
<div class="flex gap-4 my-3">
@if($product->productPrice?->gold_discount_price < $product->productPrice?->gold_price)
<h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->gold_discount_price ? "$ ".$product->productPrice?->gold_discount_price : '' }}</h3>
<del
class="text-gray-300 text-2xl font-bold">{{ $product->productPrice?->gold_price ? "$ ".$product->productPrice?->gold_price : '' }}</del>
@else
<h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->gold_discount_price ? "$ ".$product->productPrice?->gold_discount_price : '' }}</h3>
@endif
</div>
@elseif(auth()->user()->client_type === 'export')
<div class="flex gap-4 my-3">
@if($product->productPrice?->export_discount_type < $product->productPrice?->export_price)
<h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->export_discount_price ? "$ ".$product->productPrice?->export_discount_price : '' }}</h3>
<del
class="text-gray-300 text-2xl font-bold">{{ $product->productPrice?->export_price ? "$ ".$product->productPrice?->export_price : '' }}</del>
@else
<h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->export_discount_price ? "$ ".$product->productPrice?->export_discount_price : '' }}</h3>
@endif
</div>
@else
<div class="flex gap-4 my-3">
@if($product->productPrice->default_discount_type < $product->productPrice?->default_price)
<h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->default_discount_type ? "$ ".$product->productPrice?->default_discount_type : '' }}</h3>
<del
class="text-gray-300 text-2xl font-bold">{{ $product->productPrice?->default_price ? "$ ".$product->productPrice?->default_price : '' }}</del>
@else
<h3 class="text-eco-600 text-2xl font-bold">{{ $product->productPrice?->default_discount_type ? "$ ".$product->productPrice?->default_discount_type : '' }}</h3>
@endif
</div>
@endif
@endif
<div>
<p class="text-xs font-normal leading-7 text-gray-400">{{ $product->description }}</p>
</div>
<div class="flex mt-4 gap-2 items-center">
<div class="flex">
@for($i = 0; $i<number_format(data_get($reviews,'overallPercentage'), 0); $i++)
<x-icons.star-icon class="w-6 h-6" color="#DEC8A2" stroke="#DEC8A2"/>
@endfor
@for($i = 0; $i<5-number_format(data_get($reviews,'overallPercentage'), 0); $i++)
<x-icons.star-icon class="w-6 h-6" color="none" stroke="#DEC8A2"/>
@endfor
</div>
<p class="text-gray-500 ">{{ data_get($reviews,'totalReviews') }} reviews</p>
</div>
<div>
<h1 class="mt-6">Product Colors</h1>
<div class="flex">
@if($product->productColors->isEmpty())
<div x-data="colorPicker()" class="space-y-2">
@if($this->customColor)
<div @click="colorPicker.show()" x-ref="colorPicker">
<span :style="'background-color: ' + hexaColor"
class="inline-block w-8 h-8 mt-0.5 border border-gray-300 cursor-pointer colorPicker"></span>
</div>
@endif
</div>
@elseif($product->productColors[0]->color == null)
<div x-data="colorPicker()" class="space-y-2">
@if($this->customColor)
<div @click="colorPicker.show()" x-ref="colorPicker">
<span :style="'background-color: ' + hexaColor"
class="inline-block w-8 h-8 mt-0.5 border border-gray-300 cursor-pointer colorPicker"></span>
</div>
@endif
</div>
@elseif($product->productColors->count() == 1)
<div class="border-2 p-0.5 rounded-md w-10 h-10 border-black cursor-pointer">
<div class="rounded w-8 h-8"
wire:click="selectColor('{{ $product->productColors[0]->color }}')"
style="background-color: {{ $product->productColors[0]->color }};">
</div>
</div>
@else
@foreach($product->productColors as $color)
<div class="flex">
<div
class="border-2 p-0.5 rounded-md w-10 h-10 @if($selectedColor === $color->color) border-black @else border-transparent @endif">
<div class="rounded w-8 h-8 cursor-pointer"
wire:click="selectColor('{{$color->color}}')"
style="background-color: {{$color->color}};">
</div>
</div>
</div>
@endforeach
@endif
</div>
</div>
<div class="flex mt-5 items-center gap-4 flex-wrap">
@if(auth()->check() && auth()->user()->canOrder())
<div class="flex">
<button class="flex justify-center items-center bg-gray-100 rounded-md w-9 h-9"
wire:click="decrementQuantity()">
<x-icons.minus-icon class="w-4"/>
</button>
<input type="number" wire:model="quantity" min="1" wire:change="checkQuantity"
class="flex justify-center text-center border border-gray-200 rounded-md w-12 h-9 ml-1 mr-1 number-input px-1">
<button class="flex justify-center items-center bg-gray-100 rounded-md w-9 h-9"
wire:click="incrementQuantity()">
<x-icons.plus-icon class="w-4"/>
</button>
</div>
<x-custom-button class="flex justify-center bg-eco-400 rounded-md text-white items-center"
wire:click="addProductToCart({{$product->id}})">Add to cart
</x-custom-button>
@endif
<div class="flex items-center">
@if(auth()->check())
@if($this->isWishlist && $product->wishlists->where('user_id', auth()->id())->isNotEmpty())
<button wire:click.stop="removeFromWishlist({{ $product->id }})">
<x-icons.heart-icon-fill
class="cursor-pointer relative w-5 h-5"></x-icons.heart-icon-fill>
</button>
@else
<button wire:click.stop="addToWishlist({{ $product->id }})">
<x-icons.heart-icon class="cursor-pointer relative w-5 h-5"></x-icons.heart-icon>
</button>
@endif
@endif
</div>
</div>
<div class="flex">
@foreach($product->offers as $offer)
<div class="flex items-center justify-center gap-2 border border-gray-200 mt-5 p-2 rounded-md mr-5">
<h1 class="text-md font-semibold">{{ $offer['price'] }}$</h1>
<div class="rounded w-1 h-1 bg-black"></div>
<h1 class="text-md font-normal">{{ $offer['quantity'] }} piece</h1>
</div>
@endforeach
</div>
<div class="flex gap-10 pt-4 flex-wrap">
@foreach ($product->pdfcertificates as $certificate)
<div class="w-16 items-center flex flex-col">
<a href="{{ $certificate->getUrl() }}" target="_blank">
<x-icons.pdf-icon class="w-6 h-6 text-notEco-500"/>
</a>
<p class="text-xs w-full truncate">{{ $certificate->name }}</p>
</div>
@endforeach
</div>
@livewire('front.product.partials.features', ['filterOptions' => $filterOptions])
</div>
</div>
<div class="mt-7">
@livewire('front.product.partials.characteristics', ['characteristics' => $characteristics])
<div class="text-center my-10 px-3 sm:px-10 lg:px-56">
<h1 class="font-semibold text-2xl m-5">Our Costumer's Opinion</h1>
<p class="text-xs mt-3 text-slate-500">Society has put up so many boundaries, so many limitations on what’s
right and wrong that it’s almost impossible to get a pure thought out.
Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost
impossible to get a pure thought out.</p>
</div>
@if(auth()->check() && auth()->user()->canOrder())
@livewire('front.product.partials.submitRating', ['productId' => $product->id])
@endif
<div class="flex mt-10 gap-10 md:flex-row flex-col">
<div class="md:w-2/5 w-full flex flex-col gap-4">
<h1 class="font-bold text-2xl">Client Reviews</h1>
<div>
<div class="flex items-center gap-2 flex-wrap">
<h1 class="text-slate-500 text-base font-extrabold">{{ number_format(data_get($reviews,'overallPercentage'), 2) }}</h1>
<div class="flex">
@for($i = 0; $i<number_format(data_get($reviews,'overallPercentage'), 0); $i++)
<x-icons.star-icon class="w-6 h-6" color="#DEC8A2" stroke="#DEC8A2"/>
@endfor
@for($i = 0; $i<5-number_format(data_get($reviews,'overallPercentage'), 0); $i++)
<x-icons.star-icon class="w-6 h-6" color="none" stroke="#DEC8A2"/>
@endfor
</div>
<p>Based on {{ data_get($reviews,'totalReviews') }} reviews</p>
</div>
@for($i=5; $i>0; $i--)
<div class="mt-5 flex items-center gap-2">
<h1>{{ $i }}</h1>
@if(data_get($reviews, 'starCountsAndPercentages.' . ($i) . '.percentage') > 0)
<x-icons.star-icon class="w-6 h-6" color="#DEC8A2" stroke="#DEC8A2"/>
@else
<x-icons.star-icon class="w-6 h-6" color="none" stroke="#DEC8A2"/>
@endif
<div class="w-full bg-gray-100 rounded-full h-2.5">
<div class="bg-notEco-500 h-2.5 rounded-full"
style="width: {{ round(data_get($reviews, 'starCountsAndPercentages.' . ($i) . '.percentage') ?? 0) }}%"></div>
</div>
<h1 class="w-6 mr-8 md:mr-3">{{ round(data_get($reviews, 'starCountsAndPercentages.' . ($i) . '.percentage') ?? 0) }}%</h1>
</div>
@endfor
</div>
<h1 class="font-semibold text-xl mt-5">We value your opinion</h1>
<p class="text-gray-400">The time is now for it to be okay to be great. People in this world shun people
for being great.</p>
</div>
@livewire('front.product.partials.ratings', ['id' => $product->id])
</div>
@if(count($products) > 0)
<div class="my-5">
<div class="flex justify-between">
<h1 class="font-semibold text-2xl">Similar Products</h1>
<p class="font-medium text-base flex items-center gap-1">See all
<x-icons.chevron-up class="h-4 w-4 rotate-90"/>
</p>
</div>
<hr class="mt-3">
<div class="grid grid-cols-4 w-full gap-5 mt-5">
@foreach ($products as $product)
<livewire:front.components.product-card :product="$product" :key="$product->id"/>
@endforeach
</div>
</div>
@endif
@livewire('front.layouts.main-banners', ['id' => $product->id])
</div>
</div>
Editor is loading...
Leave a Comment