Viewing file:  card-two.blade.php (8.68 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<div class="hover:shadow-md border bg-white rounded layout relative pb-10">
<div class="border-gray-600">
<div class="relative group">
<img src="{{ $item->fileUrl() }}" alt="{{ __('Image') }}" class="w-full h-44 sm:h-60" />
<div class="layout2">
@if ($item->discountPercent($item->id) > 0)
<div class="absolute left-2 top-2 item-percent">
<h4 class="px-3 py-1 rounded text-base font-medium text-green-500 bg-gray-200 shadow">
{{ $item->discountPercent($item->id) . '% ' . __('off') }}
</h4>
</div>
@endif
<div class="item-wishlist absolute inset-0 rounded opacity-0 group-hover:opacity-100 flex justify-end items-start bg-secondary bg-opacity-85 transition-opacity">
<div>
<div x-data="{ tooltip: false }" class="relative z-30 inline-flex wishlist bg-gray-100" data-id="{{ $item->id }}">
<div x-on:mouseover="tooltip = true" x-on:mouseleave="tooltip = false" class="cursor-pointer shadow px-4 py-1">
<i class="fa {{ $item->isWishlist($item->id, optional(auth()->user())->id) ? 'fa-heart text-green-500' : 'fa-heart-o' }}"></i>
</div>
<div x-on:mouseover="tooltip = true" class="relative d-none" x-show.transition.origin.top="tooltip">
<div class="absolute top-0 z-10 w-32 p-2 -mt-1 text-sm leading-tight text-white transform -translate-x-1/2 -translate-y-full bg-gray-500 rounded-lg shadow-lg">
<span>{{ $item->isWishlist($item->id, optional(auth()->user())->id) ? __('Remove from wishlist') : __('Add to wishlist') }}</span>
</div>
<svg class="absolute z-10 w-6 h-6 text-gray-500 transform -translate-x-12 -translate-y-3 fill-current stroke-current" width="8" height="8">
<rect x="12" y="-10" width="8" height="8" transform="rotate(45)"></rect>
</svg>
</div>
</div>
</div>
</div>
<div class="item-detail absolute inset-0 rounded opacity-0 group-hover:opacity-100 flex justify-center items-center bg-secondary bg-opacity-85 transition-opacity">
<div>
<a href="{{ route('site.productDetails', ['code' => $item->code, 'name' => cleanedUrl($item->name)]) }}" class="bg-white px-2 py-1 inline-block rounded-l-lg"><i class="fa fa-eye"></i></a>
<a href="javascript:void(0)" class="add-to-compare" data-itemId = {{ $item->id }}> <button class="bg-white px-2 py-1 rounded-r-lg"><i class="fa fa-random"></i></button></a>
</div>
</div>
</div>
</div>
<div class="px-4">
@if (isset($offerAvailable) && $offerAvailable == true)
<div class="mt-4 text-center timer">
<div data-offer_end="{{ strtotime($item->discount_to) - strtotime(now()) }}" class="offer border border-gray-200 p-0 sm:p-2 rounded-lg">
<svg class="-ml-10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="20px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="translate(100 50)">
<circle cx="0" cy="0" r="40" fill="#e15b64">
<animateTransform attributeName="transform" type="scale" begin="-0.375s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g><g transform="translate(200 50)">
<circle cx="0" cy="0" r="40" fill="#f8b26a">
<animateTransform attributeName="transform" type="scale" begin="-0.25s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g><g transform="translate(300 50)">
<circle cx="0" cy="0" r="40" fill="#abbd81">
<animateTransform attributeName="transform" type="scale" begin="-0.125s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g><g transform="translate(400 50)">
<circle cx="0" cy="0" r="40" fill="#81a3bd">
<animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
</circle>
</g>
</svg>
</div>
</div>
@endif
<a href="{{ route('site.productDetails', ['code' => $item->code, 'name' => cleanedUrl($item->name)]) }}">
<h4 class="text-center mt-2 text-lg text-gray-800">
{{ $item->name }}
</h4>
</a>
<div class="flex space-x-3 justify-center items-center">
<div class="self-top">
<h3 class="text-base {{ ($item->isDiscountable($item->id)) ? 'line-through text-gray-500' : 'font-semibold' }} ">
{{ currency()->symbol }}{{ formatCurrencyAmount($item->price) }}
</h3>
</div>
@if ($item->isDiscountable($item->id))
<div>
<h3 class="text-base font-semibold">
{{ currency()->symbol }}{{ formatCurrencyAmount($item->discounted_price) }}
</h3>
</div>
@endif
</div>
<div class="my-2 pb-2 flex justify-between absolute inset-x-2 bottom-0">
<div class="item-rating">
<div class="self-top">
<ul class="flex ">
<li class="mt-1">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 text-green-500" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
</li>
<li class="ml-1 text-gray-900">
{{ $item->rating($item->id) }} ({{ $item->reviewCount($item->id) }})</li>
</ul>
</div>
</div>
@if(!hasOption($item->id))
<a href="javascript:void(0)" class="add-to-cart" data-itemId={{ $item->id }}>
<div class="text-green-500 text-center underline text-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
</a>
@else
<a href="{{ route('site.productDetails', ['code' => $item->code, 'name' => cleanedUrl($item->name)]) }}">
<div class="text-green-500 text-center underline text-lg">
<i class="fa fa-eye"></i>
</div>
</a>
@endif
</div>
</div>
</div>
</div>
|