144 lines
7.8 KiB
PHP
144 lines
7.8 KiB
PHP
@extends('public.layout')
|
|
|
|
@section('title', trans('storefront::compare.compare'))
|
|
|
|
@section('content')
|
|
<compare-index :compare="{{ $compare }}" inline-template>
|
|
<div>
|
|
<section class="compare-wrap">
|
|
<div class="container" v-cloak>
|
|
<div class="table-responsive" v-if="hasAnyProduct">
|
|
<table class="table table-bordered compare-table">
|
|
<tbody>
|
|
<tr>
|
|
<td>{{ trans('storefront::compare.product_overview') }}</td>
|
|
|
|
<td v-for="product in products">
|
|
<a :href="productUrl(product)" class="product-image">
|
|
<img :src="baseImage(product)" :class="{ 'image-placeholder': !hasBaseImage(product) }" :alt="product.name">
|
|
</a>
|
|
|
|
<a :href="productUrl(product)" v-text="product.name" class="product-name"></a>
|
|
|
|
<button class="btn btn-remove" @click="remove(product)">
|
|
<i class="las la-times"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ trans('storefront::compare.description') }}</td>
|
|
|
|
<td v-for="product in products" v-text="product.short_description || '-'"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ trans('storefront::compare.rating') }}</td>
|
|
|
|
<td v-for="product in products">
|
|
<product-rating
|
|
:rating-percent="product.rating_percent"
|
|
:review-count="product.reviews.length"
|
|
>
|
|
</product-rating>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ trans('storefront::compare.price') }}</td>
|
|
|
|
<td v-for="product in products">
|
|
<span class="product-price" v-html="productPrice(product)"></span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ trans('storefront::compare.availability') }}</td>
|
|
|
|
<td v-for="product in products">
|
|
<span class="badge badge-success" v-if="productIsInStock(product)">
|
|
{{ trans('storefront::compare.in_stock') }}
|
|
</span>
|
|
|
|
<span class="badge badge-danger" v-else>
|
|
{{ trans('storefront::compare.out_of_stock') }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr v-for="attribute in attributes">
|
|
<td v-text="attribute.name"></td>
|
|
|
|
<td v-for="product in products">
|
|
<template v-if="hasAttribute(product, attribute)">
|
|
@{{ attributeValues(product, attribute) }}
|
|
</template>
|
|
|
|
<template v-else>
|
|
–
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ trans('storefront::compare.actions') }}</td>
|
|
|
|
<td v-for="product in products">
|
|
<button
|
|
title="{{ trans('storefront::product_card.wishlist') }}"
|
|
class="btn btn-wishlist"
|
|
:class="{ 'added': inWishlist(product) }"
|
|
@click="syncWishlist(product)"
|
|
>
|
|
<i class="la-heart" :class="inWishlist(product) ? 'las' : 'lar'"></i>
|
|
</button>
|
|
|
|
<button
|
|
title="{{ trans('storefront::compare.add_to_cart') }}"
|
|
class="btn btn-add-to-cart"
|
|
:disabled="!productIsInStock(product)"
|
|
@click="addToCart(product)"
|
|
>
|
|
<i class="las la-shopping-cart"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="empty-message" v-else>
|
|
<svg version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 500 500"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
<g>
|
|
<path d="M250,26.72c-74.8,0-135.42,60.62-135.42,135.42c0,33.9,12.44,64.84,33.01,88.56c16.47,19.06,38.19,33.49,62.92,40.97
|
|
c12.47,3.85,25.76,5.88,39.49,5.88c13.73,0,27.02-2.04,39.49-5.88c24.72-7.48,46.45-21.91,62.92-40.97
|
|
c20.58-23.72,33.01-54.66,33.01-88.56C385.41,87.34,324.79,26.72,250,26.72z M308.73,202.41c1.52,1.52,1.52,4,0,5.51l-12.92,12.92
|
|
c-1.55,1.55-4.03,1.55-5.55,0L250,180.57l-40.27,40.27c-1.52,1.55-4,1.55-5.51,0l-12.95-12.92c-1.52-1.52-1.52-4,0-5.51
|
|
l40.27-40.27l-40.27-40.27c-1.52-1.52-1.52-4,0-5.55l12.95-12.92c1.52-1.52,4-1.52,5.51,0L250,143.67l40.27-40.27
|
|
c1.52-1.52,4-1.52,5.55,0l12.92,12.92c1.52,1.55,1.52,4.03,0,5.55l-40.27,40.27L308.73,202.41z"/>
|
|
<path d="M68.59,491.26H5.68V209.21c0-1.1,0.89-1.99,1.99-1.99H66.6c1.1,0,1.99,0.89,1.99,1.99V491.26z"/>
|
|
<path d="M147.6,291.47c18.25,14.47,39.64,25.17,62.92,30.9v168.88H147.6V291.47z"/>
|
|
<path d="M289.49,322.38c23.28-5.74,44.67-16.43,62.92-30.9v199.78h-62.92V322.38z"/>
|
|
<path d="M494.32,491.26h-62.92V10.75c0-1.11,0.9-2.01,2.01-2.01h58.89c1.11,0,2.01,0.9,2.01,2.01V491.26z"/>
|
|
</g>
|
|
</svg>
|
|
|
|
<h3>{{ trans('storefront::compare.no_product') }}</h3>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<landscape-products
|
|
title="{{ trans('storefront::product.related_products') }}"
|
|
v-if="hasAnyRelatedProduct"
|
|
:products="relatedProducts"
|
|
:class="{ loading: fetchingRelatedProducts }"
|
|
>
|
|
</landscape-products>
|
|
</div>
|
|
</compare-index>
|
|
@endsection
|