ok
Mini Shell
@extends('layouts.front-end.app')
@section('title',$product['name'])
@push('css_or_js')
<meta name="description" content="{{$product->slug}}">
<meta name="keywords" content="@foreach(explode(' ',$product['name']) as $keyword) {{$keyword.' , '}} @endforeach">
@if($product->added_by=='seller')
<meta name="author" content="{{ $product->seller->shop?$product->seller->shop->name:$product->seller->f_name}}">
@elseif($product->added_by=='admin')
<meta name="author" content="{{$web_config['name']->value}}">
@endif
<!-- Viewport-->
@if($product['meta_image']!=null)
<meta property="og:image" content="{{asset("storage/app/public/product/meta")}}/{{$product->meta_image}}"/>
<meta property="twitter:card"
content="{{asset("storage/app/public/product/meta")}}/{{$product->meta_image}}"/>
@else
<meta property="og:image" content="{{asset("storage/app/public/product/thumbnail")}}/{{$product->thumbnail}}"/>
<meta property="twitter:card"
content="{{asset("storage/app/public/product/thumbnail/")}}/{{$product->thumbnail}}"/>
@endif
@if($product['meta_title']!=null)
<meta property="og:title" content="{{$product->meta_title}}"/>
<meta property="twitter:title" content="{{$product->meta_title}}"/>
@else
<meta property="og:title" content="{{$product->name}}"/>
<meta property="twitter:title" content="{{$product->name}}"/>
@endif
<meta property="og:url" content="{{route('product',[$product->slug])}}">
@if($product['meta_description']!=null)
<meta property="twitter:description" content="{!! $product['meta_description'] !!}">
<meta property="og:description" content="{!! $product['meta_description'] !!}">
@else
<meta property="og:description"
content="@foreach(explode(' ',$product['name']) as $keyword) {{$keyword.' , '}} @endforeach">
<meta property="twitter:description"
content="@foreach(explode(' ',$product['name']) as $keyword) {{$keyword.' , '}} @endforeach">
@endif
<meta property="twitter:url" content="{{route('product',[$product->slug])}}">
<link rel="stylesheet" href="{{asset('public/assets/front-end/css/product-details.css')}}"/>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
@media (min-width: 768px) {
.carousel-control-prev {
left: 0px !important;
}
}
@media (min-width: 768px) {
.carousel-control-next {
right: 0px !important;
}
}
</style>
<style>
.btn-number:hover {
color: {{$web_config['secondary_color']}};
}
.for-total-price {
margin- {{Session::get('direction') === "rtl" ? 'right' : 'left'}}: -30%;
}
.feature_header span {
padding- {{Session::get('direction') === "rtl" ? 'right' : 'left'}}: 15px;
}
.flash-deals-background-image{
background: {{$web_config['primary_color']}}10;
}
@media (max-width: 768px) {
.for-total-price {
padding- {{Session::get('direction') === "rtl" ? 'right' : 'left'}}: 30%;
}
.product-quantity {
padding- {{Session::get('direction') === "rtl" ? 'right' : 'left'}}: 4%;
}
.for-margin-bnt-mobile {
margin- {{Session::get('direction') === "rtl" ? 'left' : 'right'}}: 7px;
}
}
@media (max-width: 375px) {
.for-margin-bnt-mobile {
margin- {{Session::get('direction') === "rtl" ? 'left' : 'right'}}: 3px;
}
.for-discount {
margin- {{Session::get('direction') === "rtl" ? 'right' : 'left'}}: 10% !important;
}
.for-dicount-div {
margin-top: -5%;
margin- {{Session::get('direction') === "rtl" ? 'left' : 'right'}}: -7%;
}
.product-quantity {
margin- {{Session::get('direction') === "rtl" ? 'right' : 'left'}}: 4%;
}
}
@media (max-width: 500px) {
.for-dicount-div {
margin- {{Session::get('direction') === "rtl" ? 'left' : 'right'}}: -5%;
}
.for-total-price {
margin- {{Session::get('direction') === "rtl" ? 'right' : 'left'}}: -20%;
}
.view-btn-div {
float: {{Session::get('direction') === "rtl" ? 'left' : 'right'}};
}
.for-discount {
margin- {{Session::get('direction') === "rtl" ? 'right' : 'left'}}: 7%;
}
.for-mobile-capacity {
margin- {{Session::get('direction') === "rtl" ? 'right' : 'left'}}: 7%;
}
}
</style>
<style>
thead {
background: {{$web_config['primary_color']}} !important;
}
.sl-wrapperZ
background: #000000b5;
}
</style>
@endpush
@section('content')
<?php
$overallRating = \App\CPU\ProductManager::get_overall_rating($product->reviews);
$rating = \App\CPU\ProductManager::get_rating($product->reviews);
$decimal_point_settings = \App\CPU\Helpers::get_business_settings('decimal_point_settings');
?>
<div class="__inline-23">
<!-- Page Content-->
<div class="container mt-4 rtl" style="text-align: {{Session::get('direction') === "rtl" ? 'right' : 'left'}};">
<!-- General info tab-->
<div class="row {{Session::get('direction') === "rtl" ? '__dir-rtl' : ''}}">
<!-- Product gallery-->
<div class="col-lg-9 col-12">
<div class="row">
<div class="col-lg-5 col-md-4 col-12">
<div class="cz-product-gallery">
<div class="cz-preview">
<div class="col-xl-12 col-md-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@foreach (json_decode($product->images) as $key => $photo)
<li data-target="#carouselExampleIndicators" data-slide-to="{{$key}}"
class="{{$key==0?'active':''}}">
</li>
@endforeach
</ol>
<div class="carousel-inner">
@foreach (json_decode($product->images) as $key => $photo)
<div class="carousel-item {{$key==0?'active':''}}">
<a>
<img class="d-block w-100 __slide-img" onClick="Slice({{$key}})"
onerror="this.src='{{asset("storage/app/public/product/$photo")}}'"
src="{{asset("storage/app/public/product/$photo")}}"
alt="">
</a>
</div>
@endforeach
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true" ></span>
<span class="sr-only">{{\App\CPU\translate('Previous')}}</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">{{\App\CPU\translate('Next')}}</span>
</a>
</div>
</div>
</div>
<!--<div class="cz-preview">
@if($product->images!=null && json_decode($product->images)>0)
@if(json_decode($product->colors) && $product->color_image)
@foreach (json_decode($product->color_image) as $key => $photo)
@if($photo->color != null)
<div class="cz-preview-item d-flex align-items-center justify-content-center {{$key==0?'active':''}}"
id="image{{$photo->color}}" onClick="Slice({{$key}})">
<img class="img-responsive w-100 __max-h-323px"
onerror="this.src='{{asset('public/assets/front-end/img/image-place-holder.png')}}'"
src="{{asset("storage/app/public/product/$photo->image_name")}}"
data-zoom="{{asset("storage/app/public/product/$photo->image_name")}}"
alt="Product image" width="">
<div class="cz-image-zoom-pane"></div>
</div>
@else
<div class="cz-preview-item d-flex align-items-center justify-content-center {{$key==0?'active':''}}"
id="image{{$key}}" onClick="Slice({{$key}})">
<img class="img-responsive w-100 __max-h-323px"
onerror="this.src='{{asset('public/assets/front-end/img/image-place-holder.png')}}'"
src="{{asset("storage/app/public/product/$photo->image_name")}}"
data-zoom="{{asset("storage/app/public/product/$photo->image_name")}}"
alt="Product image" width="">
<div class="cz-image-zoom-pane"></div>
</div>
@endif
@endforeach
@else
@foreach (json_decode($product->images) as $key => $photo)
<div class="cz-preview-item d-flex align-items-center justify-content-center {{$key==0?'active':''}}"
id="image{{$key}}" onClick="Slice({{$key}})">
<img class="img-responsive image-link w-100 __max-h-323px"
onerror="this.src='{{asset('public/assets/front-end/img/image-place-holder.png')}}'"
src="{{asset("storage/app/public/product/$photo")}}"
data-zoom="{{asset("storage/app/public/product/$photo")}}"
alt="Product image" width="" >
<div class="cz-image-zoom-pane"></div>
</div>
@endforeach
@endif
@endif
</div>-->
<!--Image Silder Start-->
<link rel="stylesheet" href="https://selectionsilks.com/a/simple-lightbox.css?v2.14.0" />
<style>
body {
font-family: 'Raleway', sans-serif;
font-size: 20px;
line-height: 34px;
}
* {
box-sizing: border-box;
}
.container .gallery a img {
float: left;
width: 25%;
height: auto;
border: 2px solid #fff;
-webkit-transition: -webkit-transform .15s ease;
-moz-transition: -moz-transform .15s ease;
-o-transition: -o-transform .15s ease;
-ms-transition: -ms-transform .15s ease;
transition: transform .15s ease;
position: relative;
}
.clear {
clear: both;
}
a {
color: #009688;
text-decoration: none;
}
a:hover {
color: #01695f;
text-decoration: none;
}
@media (min-width: 768px) {
.carousel-inner {
position: relative;
width: 100% !important;
height: 350px;
overflow: hidden;
}
}
</style>
</head>
<body>
<div class="container" hidden>
<div class="gallery">
@foreach (json_decode($product->images) as $key => $photo)
<a href="{{asset("storage/app/public/product/$photo")}}" class="big"><img id="pop{{$key}}" src="{{asset("storage/app/public/product/$photo")}}" alt="" title="" /></a>
@endforeach
</div>
</div>
<script src="https://selectionsilks.com/a/simple-lightbox.js?v2.14.0"></script>
<script>
(function() {
var $gallery = new SimpleLightbox('.gallery a', {});
})();
function Slice(id){
console.log('ids:'+id);
$("#pop"+id).click();
}
</script>
<!--Image Slider End-->
<div class="cz">
<div class="table-responsive __max-h-515px" data-simplebar>
<div class="d-flex">
@if($product->images!=null && json_decode($product->images)>0)
@if(json_decode($product->colors) && $product->color_image)
@foreach (json_decode($product->color_image) as $key => $photo)
@if($photo->color != null)
<div class="cz-thumblist">
<a class="cz-thumblist-item {{$key==0?'active':''}} d-flex align-items-center justify-content-center"
id="preview-img{{$photo->color}}" href="#image{{$photo->color}}" onClick="Slice({{$key}})">
<img
onerror="this.src='{{asset('public/assets/front-end/img/image-place-holder.png')}}'"
src="{{asset("storage/app/public/product/$photo->image_name")}}"
alt="Product thumb">
</a>
</div>
@else
<div class="cz-thumblist">
<a class="cz-thumblist-item {{$key==0?'active':''}} d-flex align-items-center justify-content-center"
id="preview-img{{$key}}" href="#image{{$key}}" onClick="Slice({{$key}})">
<img
onerror="this.src='{{asset('public/assets/front-end/img/image-place-holder.png')}}'"
src="{{asset("storage/app/public/product/$photo->image_name")}}"
alt="Product thumb">
</a>
</div>
@endif
@endforeach
@else
@foreach (json_decode($product->images) as $key => $photo)
<div class="cz-thumblist">
<a class="cz-thumblist-item {{$key==0?'active':''}} d-flex align-items-center justify-content-center"
id="preview-img{{$key}}" href="#image{{$key}}" onClick="Slice({{$key}})">
<img
onerror="this.src='{{asset('public/assets/front-end/img/image-place-holder.png')}}'"
src="{{asset("storage/app/public/product/$photo")}}"
alt="Product thumb">
</a>
</div>
@endforeach
@endif
@endif
</div>
</div>
</div>
</div>
</div>
<!-- Product details-->
<div class="col-lg-7 col-md-8 col-12 mt-md-0 mt-sm-3" style="direction: {{ Session::get('direction') }}">
<div class="details __h-100">
<span class="mb-2 __inline-24">{{$product->name}}</span>
<div class="d-flex flex-wrap align-items-center mb-2 pro">
<span
class="d-inline-block align-middle mt-1 {{Session::get('direction') === "rtl" ? 'ml-md-2 ml-sm-0 pl-2' : 'mr-md-2 mr-sm-0 pr-2'}} __color-FE961C">{{$overallRating[0]}}</span>
<div class="star-rating" style="{{Session::get('direction') === "rtl" ? 'margin-left: 25px;' : 'margin-right: 25px;'}}">
@for($inc=0;$inc<5;$inc++)
@if($inc<$overallRating[0])
<i class="sr-star czi-star-filled active"></i>
@else
<i class="sr-star czi-star"></i>
@endif
@endfor
</div>
<span class="font-regular font-for-tab d-inline-block font-size-sm text-body align-middle mt-1 {{Session::get('direction') === "rtl" ? 'mr-1 ml-md-2 ml-1 pr-md-2 pr-sm-1 pl-md-2 pl-sm-1' : 'ml-1 mr-md-2 mr-1 pl-md-2 pl-sm-1 pr-md-2 pr-sm-1'}}">{{$overallRating[1]}} {{\App\CPU\translate('Reviews')}}</span>
<span class="__inline-25"></span>
<span class="font-regular font-for-tab d-inline-block font-size-sm text-body align-middle mt-1 {{Session::get('direction') === "rtl" ? 'mr-1 ml-md-2 ml-1 pr-md-2 pr-sm-1 pl-md-2 pl-sm-1' : 'ml-1 mr-md-2 mr-1 pl-md-2 pl-sm-1 pr-md-2 pr-sm-1'}}">{{$countOrder}} {{\App\CPU\translate('orders')}} </span>
<span class="__inline-25"> </span>
<span class="font-regular font-for-tab d-inline-block font-size-sm text-body align-middle mt-1 {{Session::get('direction') === "rtl" ? 'mr-1 ml-md-2 ml-0 pr-md-2 pr-sm-1 pl-md-2 pl-sm-1' : 'ml-1 mr-md-2 mr-0 pl-md-2 pl-sm-1 pr-md-2 pr-sm-1'}} text-capitalize"> {{$countWishlist}} {{\App\CPU\translate('wish_listed')}} </span>
</div>
<div class="mb-3">
@if($product->discount > 0)
<strike style="color: #E96A6A;" class="{{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-3'}}">
{{\App\CPU\Helpers::currency_converter($product->unit_price)}}
</strike>
@endif
<span class="h3 font-weight-normal text-accent ">
{{\App\CPU\Helpers::get_price_range($product) }}
</span>
<span class="{{Session::get('direction') === "rtl" ? 'mr-2' : 'ml-2'}} __text-12px font-regular">
(<span>{{\App\CPU\translate('tax')}} : </span>
<span id="set-tax-amount"></span>)
</span>
</div>
<form id="add-to-cart-form" class="mb-2">
@csrf
<input type="hidden" name="id" value="{{ $product->id }}">
<div class="position-relative {{Session::get('direction') === "rtl" ? 'ml-n4' : 'mr-n4'}} mb-2">
@if (count(json_decode($product->colors)) > 0)
<div class="flex-start">
<div class="product-description-label mt-2 text-body">{{\App\CPU\translate('color')}}:
</div>
<div>
<ul class="list-inline checkbox-color mb-1 flex-start {{Session::get('direction') === "rtl" ? 'mr-2' : 'ml-2'}}"
style="padding-{{Session::get('direction') === "rtl" ? 'right' : 'left'}}: 0;">
@foreach (json_decode($product->colors) as $key => $color)
<div>
<li>
<input type="radio"
id="{{ $product->id }}-color-{{ str_replace('#','',$color) }}"
name="color" value="{{ $color }}"
@if($key == 0) checked @endif>
<label style="background: {{ $color }};"
for="{{ $product->id }}-color-{{ str_replace('#','',$color) }}"
data-toggle="tooltip" onclick="focus_preview_image_by_color('{{ str_replace('#','',$color) }}')">
<span class="outline"></span></label>
</li>
</div>
@endforeach
</ul>
</div>
</div>
@endif
@php
$qty = 0;
if(!empty($product->variation)){
foreach (json_decode($product->variation) as $key => $variation) {
$qty += $variation->qty;
}
}
@endphp
</div>
@foreach (json_decode($product->choice_options) as $key => $choice)
<div class="row flex-start mx-0">
<div
class="product-description-label text-body mt-2 {{Session::get('direction') === "rtl" ? 'pl-2' : 'pr-2'}}">{{ $choice->title }}
:
</div>
<div>
<ul class="list-inline checkbox-alphanumeric checkbox-alphanumeric--style-1 mb-2 mx-1 flex-start row"
style="padding-{{Session::get('direction') === "rtl" ? 'right' : 'left'}}: 0;">
@foreach ($choice->options as $key => $option)
<div>
<li class="for-mobile-capacity">
<input type="radio"
id="{{ $choice->name }}-{{ $option }}"
name="{{ $choice->name }}" value="{{ $option }}"
@if($key == 0) checked @endif >
<label class="__text-12px"
for="{{ $choice->name }}-{{ $option }}">{{ $option }}</label>
</li>
</div>
@endforeach
</ul>
</div>
</div>
@endforeach
<!-- Quantity + Add to cart -->
<div class="mt-2">
<div class="product-quantity d-flex flex-wrap align-items-center __gap-15">
<div class="d-flex align-items-center">
<div class="product-description-label text-body mt-2">{{\App\CPU\translate('Quantity')}}:</div>
<div
class="d-flex justify-content-center align-items-center __w-160px"
style="color: {{$web_config['primary_color']}}">
<span class="input-group-btn">
<button class="btn btn-number __p-10" type="button"
data-type="minus" data-field="quantity"
disabled="disabled" style="font-size: 26px;font-weight: 900; color: {{$web_config['primary_color']}}">
-
</button>
</span>
<input type="text" name="quantity" style="border: 1px solid #448aff;"
class="form-control input-number text-center cart-qty-field __inline-29"
placeholder="1" value="{{ $product->minimum_order_qty ?? 1 }}" product-type="{{ $product->product_type }}" min="{{ $product->minimum_order_qty ?? 1 }}" max="100">
<span class="input-group-btn">
<button class="btn btn-number __p-10" type="button" product-type="{{ $product->product_type }}" data-type="plus"
data-field="quantity" style="font-size: 26px;font-weight: 900; color: {{$web_config['primary_color']}}">
+
</button>
</span>
</div>
</div>
<div id="chosen_price_div">
<div class="d-flex justify-content-center align-items-center {{Session::get('direction') === "rtl" ? 'ml-2' : 'mr-2'}}">
<div class="product-description-label"><strong>{{\App\CPU\translate('total_price')}}</strong> : </div>
<strong id="chosen_price"></strong>
</div>
</div>
</div>
</div>
<div class="row no-gutters d-none mt-2 flex-start d-flex">
<div class="col-12">
@if(($product['product_type'] == 'physical') && ($product['current_stock']<=0))
<h5 class="mt-3 text-danger">{{\App\CPU\translate('out_of_stock')}}</h5>
@endif
</div>
</div>
<div class="__btn-grp mt-2 mb-3">
@if(($product->added_by == 'seller' && ($seller_temporary_close || (isset($product->seller->shop) && $product->seller->shop->vacation_status && $current_date >= $seller_vacation_start_date && $current_date <= $seller_vacation_end_date))) ||
($product->added_by == 'admin' && ($inhouse_temporary_close || ($inhouse_vacation_status && $current_date >= $inhouse_vacation_start_date && $current_date <= $inhouse_vacation_end_date))))
<button class="btn btn-secondary" type="button" disabled>
{{\App\CPU\translate('buy_now')}}
</button>
<button class="btn btn--primary string-limit" type="button" disabled>
{{\App\CPU\translate('add_to_cart')}}
</button>
@else
<button style="background-color: #3d2b99 !important; border-color: #3d2b99 !important;"
class="btn btn-primary element-center btn-gap-{{Session::get('direction') === "rtl" ? 'left' : 'right'}}"
onclick="addToCart()" type="button">
<span class="string-limit">{{\App\CPU\translate('add_to_cart')}}</span>
</button>
<button style="background-color: #048b23 !important; border-color: #048b23 !important; width: 119px;" class="btn btn-secondary element-center __iniline-26 btn-gap-{{Session::get('direction') === "rtl" ? 'left' : 'right'}}" onclick="buy_now()" type="button">
<span class="string-limit">{{\App\CPU\translate('buy_now')}}</span>
</button>
@endif
<button class="btn btn-secondary element-center __iniline-26 btn-gap-{{Session::get('direction') === "rtl" ? 'left' : 'right'}}" type="button" onclick="addWishlist('{{$product['id']}}')"
class="btn __text-18px text-danger">
<i class="fa fa-heart-o "
aria-hidden="true"></i>
<span class="countWishlist-{{$product['id']}}">{{$countWishlist}}</span>
</button>
@if(($product->added_by == 'seller' && ($seller_temporary_close || (isset($product->seller->shop) && $product->seller->shop->vacation_status && $current_date >= $seller_vacation_start_date && $current_date <= $seller_vacation_end_date))) ||
($product->added_by == 'admin' && ($inhouse_temporary_close || ($inhouse_vacation_status && $current_date >= $inhouse_vacation_start_date && $current_date <= $inhouse_vacation_end_date))))
<div class="alert alert-danger" role="alert">
{{\App\CPU\translate('this_shop_is_temporary_closed_or_on_vacation._You_cannot_add_product_to_cart_from_this_shop_for_now')}}
</div>
@endif
</div>
</form>
<div style="text-align:{{Session::get('direction') === "rtl" ? 'right' : 'left'}};"
class="sharethis-inline-share-buttons"></div>
</div>
</div>
</div>
<div class="row">
<div class="mt-4 rtl col-12" style="text-align: {{Session::get('direction') === "rtl" ? 'right' : 'left'}};">
<div class="row" >
<div class="col-12">
<div class=" mt-1">
<!-- Tabs-->
<ul class="nav nav-tabs d-flex justify-content-center __mt-35" role="tablist">
<li class="nav-item">
<a class="nav-link __inline-27 active " href="#overview" data-toggle="tab" role="tab">
{{\App\CPU\translate('overview')}}
</a>
</li>
<li class="nav-item">
<a class="nav-link __inline-27" href="#reviews" data-toggle="tab" role="tab">
{{\App\CPU\translate('reviews')}}
</a>
</li>
</ul>
<div class="px-4 pt-lg-3 pb-3 mb-3 mr-0 mr-md-2 bg-white __review-overview __rounded-10">
<div class="tab-content px-lg-3">
<!-- Tech specs tab-->
<div class="tab-pane fade show active" id="overview" role="tabpanel">
<div class="row pt-2 specification">
@if($product->video_url!=null)
<div class="col-12 mb-4">
<iframe width="420" height="315"
src="{{$product->video_url}}">
</iframe>
</div>
@endif
<div class="text-body col-lg-12 col-md-12 overflow-scroll">
{!! $product['details'] !!}
</div>
</div>
</div>
@php($reviews_of_product = App\Model\Review::where('product_id',$product->id)->paginate(2))
<!-- Reviews tab-->
<div class="tab-pane fade" id="reviews" role="tabpanel">
<div class="row pt-2 pb-3">
<div class="col-lg-4 col-md-5 ">
<div class=" row d-flex justify-content-center align-items-center">
<div class="col-12 d-flex justify-content-center align-items-center">
<h2 class="overall_review mb-2 __inline-28">
{{$overallRating[1]}}
</h2>
</div>
<div
class="d-flex justify-content-center align-items-center star-rating ">
@if (round($overallRating[0])==5)
@for ($i = 0; $i < 5; $i++)
<i class="czi-star-filled font-size-sm text-accent {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endfor
@endif
@if (round($overallRating[0])==4)
@for ($i = 0; $i < 4; $i++)
<i class="czi-star-filled font-size-sm text-accent {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endfor
<i class="czi-star font-size-sm text-muted {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endif
@if (round($overallRating[0])==3)
@for ($i = 0; $i < 3; $i++)
<i class="czi-star-filled font-size-sm text-accent {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endfor
@for ($j = 0; $j < 2; $j++)
<i class="czi-star font-size-sm text-accent {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endfor
@endif
@if (round($overallRating[0])==2)
@for ($i = 0; $i < 2; $i++)
<i class="czi-star-filled font-size-sm text-accent {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endfor
@for ($j = 0; $j < 3; $j++)
<i class="czi-star font-size-sm text-accent {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endfor
@endif
@if (round($overallRating[0])==1)
@for ($i = 0; $i < 4; $i++)
<i class="czi-star font-size-sm text-accent {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endfor
<i class="czi-star-filled font-size-sm text-accent {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endif
@if (round($overallRating[0])==0)
@for ($i = 0; $i < 5; $i++)
<i class="czi-star font-size-sm text-muted {{Session::get('direction') === "rtl" ? 'ml-1' : 'mr-1'}}"></i>
@endfor
@endif
</div>
<div class="col-12 d-flex justify-content-center align-items-center mt-2">
<span class="text-center">
{{$reviews_of_product->total()}} {{\App\CPU\translate('ratings')}}
</span>
</div>
</div>
</div>
<div class="col-lg-8 col-md-7 pt-sm-3 pt-md-0" >
<div class="d-flex align-items-center mb-2 font-size-sm">
<div
class="__rev-txt"><span
class="d-inline-block align-middle text-body">{{\App\CPU\translate('Excellent')}}</span>
</div>
<div class="w-0 flex-grow">
<div class="progress text-body __h-5px">
<div class="progress-bar " role="progressbar"
style="background-color: {{$web_config['primary_color']}} !important;width: <?php echo $widthRating = ($rating[0] != 0) ? ($rating[0] / $overallRating[1]) * 100 : (0); ?>%;"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-1 text-body">
<span
class=" {{Session::get('direction') === "rtl" ? 'mr-3 float-left' : 'ml-3 float-right'}} ">
{{$rating[0]}}
</span>
</div>
</div>
<div class="d-flex align-items-center mb-2 text-body font-size-sm">
<div
class="__rev-txt"><span
class="d-inline-block align-middle ">{{\App\CPU\translate('Good')}}</span>
</div>
<div class="w-0 flex-grow">
<div class="progress __h-5px">
<div class="progress-bar" role="progressbar"
style="background-color: {{$web_config['primary_color']}} !important;width: <?php echo $widthRating = ($rating[1] != 0) ? ($rating[1] / $overallRating[1]) * 100 : (0); ?>%; background-color: #a7e453;"
aria-valuenow="27" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-1">
<span
class="{{Session::get('direction') === "rtl" ? 'mr-3 float-left' : 'ml-3 float-right'}}">
{{$rating[1]}}
</span>
</div>
</div>
<div class="d-flex align-items-center mb-2 text-body font-size-sm">
<div
class="__rev-txt"><span
class="d-inline-block align-middle ">{{\App\CPU\translate('Average')}}</span>
</div>
<div class="w-0 flex-grow">
<div class="progress __h-5px">
<div class="progress-bar" role="progressbar"
style="background-color: {{$web_config['primary_color']}} !important;width: <?php echo $widthRating = ($rating[2] != 0) ? ($rating[2] / $overallRating[1]) * 100 : (0); ?>%; background-color: #ffda75;"
aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-1">
<span
class="{{Session::get('direction') === "rtl" ? 'mr-3 float-left' : 'ml-3 float-right'}}">
{{$rating[2]}}
</span>
</div>
</div>
<div class="d-flex align-items-center mb-2 text-body font-size-sm">
<div
class="__rev-txt "><span
class="d-inline-block align-middle">{{\App\CPU\translate('Below Average')}}</span>
</div>
<div class="w-0 flex-grow">
<div class="progress __h-5px">
<div class="progress-bar" role="progressbar"
style="background-color: {{$web_config['primary_color']}} !important;width: <?php echo $widthRating = ($rating[3] != 0) ? ($rating[3] / $overallRating[1]) * 100 : (0); ?>%; background-color: #fea569;"
aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-1">
<span
class="{{Session::get('direction') === "rtl" ? 'mr-3 float-left' : 'ml-3 float-right'}}">
{{$rating[3]}}
</span>
</div>
</div>
<div class="d-flex align-items-center text-body font-size-sm">
<div
class="__rev-txt"><span
class="d-inline-block align-middle ">{{\App\CPU\translate('Poor')}}</span>
</div>
<div class="w-0 flex-grow">
<div class="progress __h-5px">
<div class="progress-bar" role="progressbar"
style="background-color: {{$web_config['primary_color']}} !important;backbround-color:{{$web_config['primary_color']}};width: <?php echo $widthRating = ($rating[4] != 0) ? ($rating[4] / $overallRating[1]) * 100 : (0); ?>%;"
aria-valuenow="4" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-1">
<span
class="{{Session::get('direction') === "rtl" ? 'mr-3 float-left' : 'ml-3 float-right'}}">
{{$rating[4]}}
</span>
</div>
</div>
</div>
</div>
<div class="row pb-4 mb-3">
<div class="__inline-30">
<span class="text-capitalize">{{\App\CPU\translate('Product Review')}}</span>
</div>
</div>
<div class="row pb-4">
<div class="col-12" id="product-review-list">
{{-- @foreach($reviews_of_product as $productReview) --}}
{{-- @include('web-views.partials.product-reviews',['productRevie'=>$productRevie]) --}}
{{-- @endforeach --}}
@if(count($product->reviews)==0)
<div class="card">
<div class="card-body">
<h6 class="text-danger text-center m-0">{{\App\CPU\translate('product_review_not_available')}}</h6>
</div>
</div>
@endif
</div>
@if(count($product->reviews) > 2)
<div class="col-12">
<div class="card-footer d-flex justify-content-center align-items-center">
<button class="btn text-white" style="background: {{$web_config['primary_color']}};" onclick="load_review()">{{\App\CPU\translate('view more')}}</button>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="product-details-shipping-details">
<div class="shipping-details-bottom-border">
<div class="px-3 py-3">
<img class="{{Session::get('direction') === "rtl" ? 'float-right ml-2' : 'mr-2'}} __img-20" src="{{asset("public/assets/front-end/png/Payment.png")}}"
alt="">
<span>{{\App\CPU\translate('Safe Payment')}}</span>
</div>
</div>
<div class="shipping-details-bottom-border">
<div class="px-3 py-3">
<img class="{{Session::get('direction') === "rtl" ? 'float-right ml-2' : 'mr-2'}} __img-20"
src="{{asset("public/assets/front-end/png/money.png")}}"
alt="">
<span>{{ \App\CPU\translate('7 Days Return Policy')}}</span>
</div>
</div>
<div class="shipping-details-bottom-border">
<div class="px-3 py-3">
<img class="{{Session::get('direction') === "rtl" ? 'float-right ml-2' : 'mr-2'}} __img-20"
src="{{asset("public/assets/front-end/png/Genuine.png")}}"
alt="">
<span>{{ \App\CPU\translate('100% Authentic Products')}}</span>
</div>
</div>
</div>
<div class="__inline-31">
{{--seller section--}}
@if($product->added_by=='seller')
@if(isset($product->seller->shop))
<div class="row">
<div class="col-12 position-relative">
<div class="d-flex __seller-author align-items-center">
<div>
<img class="__img-60 img-circle" src="{{asset('storage/app/public/shop')}}/{{$product->seller->shop->image}}"
onerror="this.src='{{asset('public/assets/front-end/img/image-place-holder.png')}}'"
alt="">
</div>
<div class="{{Session::get('direction') === "rtl" ? 'mr-2' : 'ml-2'}} w-0 flex-grow">
<h6>
{{$product->seller->shop->name}}
</h6>
<span>{{\App\CPU\translate('Seller_info')}}</span>
</div>
</div>
<div class="d-flex align-items-center">
@if (auth('customer')->id() == '')
<a href="{{route('customer.auth.login')}}">
<div class="__chat-seller-btn" style="color:{{$web_config['primary_color']}};">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.25 0.875C12.4821 0.875 12.7046 0.967187 12.8687 1.13128C13.0328 1.29538 13.125 1.51794 13.125 1.75V8.75C13.125 8.98206 13.0328 9.20462 12.8687 9.36872C12.7046 9.53281 12.4821 9.625 12.25 9.625H3.86225C3.39816 9.6251 2.95311 9.80954 2.625 10.1378L0.875 11.8878V1.75C0.875 1.51794 0.967187 1.29538 1.13128 1.13128C1.29538 0.967187 1.51794 0.875 1.75 0.875H12.25ZM1.75 0C1.28587 0 0.840752 0.184374 0.512563 0.512563C0.184374 0.840752 0 1.28587 0 1.75L0 12.9439C1.8388e-05 13.0304 0.0257185 13.1151 0.0738476 13.187C0.121977 13.259 0.190371 13.315 0.270374 13.3481C0.350378 13.3812 0.438393 13.3898 0.523282 13.3728C0.60817 13.3558 0.686114 13.314 0.74725 13.2528L3.24362 10.7564C3.40768 10.5923 3.6302 10.5 3.86225 10.5H12.25C12.7141 10.5 13.1592 10.3156 13.4874 9.98744C13.8156 9.65925 14 9.21413 14 8.75V1.75C14 1.28587 13.8156 0.840752 13.4874 0.512563C13.1592 0.184374 12.7141 0 12.25 0L1.75 0Z" fill="{{$web_config['primary_color']}}"/>
<path d="M4.375 5.25C4.375 5.48206 4.28281 5.70462 4.11872 5.86872C3.95462 6.03281 3.73206 6.125 3.5 6.125C3.26794 6.125 3.04538 6.03281 2.88128 5.86872C2.71719 5.70462 2.625 5.48206 2.625 5.25C2.625 5.01794 2.71719 4.79538 2.88128 4.63128C3.04538 4.46719 3.26794 4.375 3.5 4.375C3.73206 4.375 3.95462 4.46719 4.11872 4.63128C4.28281 4.79538 4.375 5.01794 4.375 5.25ZM7.875 5.25C7.875 5.48206 7.78281 5.70462 7.61872 5.86872C7.45462 6.03281 7.23206 6.125 7 6.125C6.76794 6.125 6.54538 6.03281 6.38128 5.86872C6.21719 5.70462 6.125 5.48206 6.125 5.25C6.125 5.01794 6.21719 4.79538 6.38128 4.63128C6.54538 4.46719 6.76794 4.375 7 4.375C7.23206 4.375 7.45462 4.46719 7.61872 4.63128C7.78281 4.79538 7.875 5.01794 7.875 5.25ZM11.375 5.25C11.375 5.48206 11.2828 5.70462 11.1187 5.86872C10.9546 6.03281 10.7321 6.125 10.5 6.125C10.2679 6.125 10.0454 6.03281 9.88128 5.86872C9.71719 5.70462 9.625 5.48206 9.625 5.25C9.625 5.01794 9.71719 4.79538 9.88128 4.63128C10.0454 4.46719 10.2679 4.375 10.5 4.375C10.7321 4.375 10.9546 4.46719 11.1187 4.63128C11.2828 4.79538 11.375 5.01794 11.375 5.25Z" fill="{{$web_config['primary_color']}}"/>
</svg>
<span>{{\App\CPU\translate('chat')}}</span>
</div>
</a>
@else
<div class="__chat-seller-btn cursor-pointer" id="{{ ($product->added_by == 'seller' && ($seller_temporary_close || ($product->seller->shop->vacation_status && $current_date >= $seller_vacation_start_date && $current_date <= $seller_vacation_end_date))) ? '' : 'contact-seller' }}" style="color:{{$web_config['primary_color']}};">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.25 0.875C12.4821 0.875 12.7046 0.967187 12.8687 1.13128C13.0328 1.29538 13.125 1.51794 13.125 1.75V8.75C13.125 8.98206 13.0328 9.20462 12.8687 9.36872C12.7046 9.53281 12.4821 9.625 12.25 9.625H3.86225C3.39816 9.6251 2.95311 9.80954 2.625 10.1378L0.875 11.8878V1.75C0.875 1.51794 0.967187 1.29538 1.13128 1.13128C1.29538 0.967187 1.51794 0.875 1.75 0.875H12.25ZM1.75 0C1.28587 0 0.840752 0.184374 0.512563 0.512563C0.184374 0.840752 0 1.28587 0 1.75L0 12.9439C1.8388e-05 13.0304 0.0257185 13.1151 0.0738476 13.187C0.121977 13.259 0.190371 13.315 0.270374 13.3481C0.350378 13.3812 0.438393 13.3898 0.523282 13.3728C0.60817 13.3558 0.686114 13.314 0.74725 13.2528L3.24362 10.7564C3.40768 10.5923 3.6302 10.5 3.86225 10.5H12.25C12.7141 10.5 13.1592 10.3156 13.4874 9.98744C13.8156 9.65925 14 9.21413 14 8.75V1.75C14 1.28587 13.8156 0.840752 13.4874 0.512563C13.1592 0.184374 12.7141 0 12.25 0L1.75 0Z" fill="{{$web_config['primary_color']}}"/>
<path d="M4.375 5.25C4.375 5.48206 4.28281 5.70462 4.11872 5.86872C3.95462 6.03281 3.73206 6.125 3.5 6.125C3.26794 6.125 3.04538 6.03281 2.88128 5.86872C2.71719 5.70462 2.625 5.48206 2.625 5.25C2.625 5.01794 2.71719 4.79538 2.88128 4.63128C3.04538 4.46719 3.26794 4.375 3.5 4.375C3.73206 4.375 3.95462 4.46719 4.11872 4.63128C4.28281 4.79538 4.375 5.01794 4.375 5.25ZM7.875 5.25C7.875 5.48206 7.78281 5.70462 7.61872 5.86872C7.45462 6.03281 7.23206 6.125 7 6.125C6.76794 6.125 6.54538 6.03281 6.38128 5.86872C6.21719 5.70462 6.125 5.48206 6.125 5.25C6.125 5.01794 6.21719 4.79538 6.38128 4.63128C6.54538 4.46719 6.76794 4.375 7 4.375C7.23206 4.375 7.45462 4.46719 7.61872 4.63128C7.78281 4.79538 7.875 5.01794 7.875 5.25ZM11.375 5.25C11.375 5.48206 11.2828 5.70462 11.1187 5.86872C10.9546 6.03281 10.7321 6.125 10.5 6.125C10.2679 6.125 10.0454 6.03281 9.88128 5.86872C9.71719 5.70462 9.625 5.48206 9.625 5.25C9.625 5.01794 9.71719 4.79538 9.88128 4.63128C10.0454 4.46719 10.2679 4.375 10.5 4.375C10.7321 4.375 10.9546 4.46719 11.1187 4.63128C11.2828 4.79538 11.375 5.01794 11.375 5.25Z" fill="{{$web_config['primary_color']}}"/>
</svg>
<span>{{\App\CPU\translate('chat')}}</span>
</div>
@endif
@if(($product->added_by == 'seller' && ($seller_temporary_close || ($product->seller->shop->vacation_status && $current_date >= $seller_vacation_start_date && $current_date <= $seller_vacation_end_date))))
<span class="chat-seller-info" style="position: absolute; inset-inline-end: 24px; inset-block-start: -4px" data-toggle="tooltip" title="{{\App\CPU\translate('this_shop_is_temporary_closed_or_on_vacation._You_cannot_add_product_to_cart_from_this_shop_for_now')}}">
<img src="{{asset('/public/assets/front-end/img/info.png')}}" alt="i">
</span>
@endif
</div>
</div>
<div class="col-12 msg-option mt-2" id="msg-option">
<form action="">
<input type="text" class="seller_id" hidden seller-id="{{$product->seller->id }}">
<textarea shop-id="{{$product->seller->shop->id}}" class="chatInputBox form-control"
id="chatInputBox" rows="5"> </textarea>
<div class="d-flex mt-2 __gap-15">
<button class="btn btn-secondary text-white d-block w-47" id="cancelBtn">{{\App\CPU\translate('cancel')}}
</button>
<button class="btn btn-success text-white d-block w-47" id="sendBtn">{{\App\CPU\translate('send')}}</button>
</div>
</form>
</div>
@php($products_for_review = App\Model\Product::active()->where('added_by',$product->added_by)->where('user_id',$product->user_id)->withCount('reviews')->get())
<?php
$total_reviews = 0;
foreach ($products_for_review as $item)
{ $total_reviews += $item->reviews_count;
}
?>
<div class="col-12 mt-2">
<div class="row d-flex justify-content-between">
<div class="col-6 ">
<div class="d-flex justify-content-center align-items-center rounded __h-79px" style="background:{{$web_config['primary_color']}}10;">
<div class="text-center">
<span style="color: {{$web_config['primary_color']}};font-weight: 700;
font-size: 26px;">
{{$total_reviews}}
</span><br>
<span class="__text-12px">
{{\App\CPU\translate('reviews')}}
</span>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex justify-content-center align-items-center rounded __h-79px" style="background:{{$web_config['primary_color']}}10;">
<div class="text-center">
<span style="color: {{$web_config['primary_color']}};font-weight: 700;
font-size: 26px;">
{{$products_for_review->count()}}
</span><br>
<span class="__text-12px">
{{\App\CPU\translate('products')}}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 mt-3">
<div>
<a href="{{ route('shopView',[$product->seller->id]) }}" class="w-100 d-block text-center">
<button class="btn w-100 d-block text-center" style="background: {{$web_config['primary_color']}};color:#ffffff">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
{{\App\CPU\translate('Visit Store')}}
</button>
</a>
</div>
</div>
</div>
@endif
@else
<div class="row d-flex justify-content-between">
<div class="col-9 ">
<div class="row d-flex ">
<div>
<img class="__inline-32"
src="{{asset("storage/app/public/company")}}/{{$web_config['fav_icon']->value}}"
onerror="this.src='{{asset('public/assets/front-end/img/image-place-holder.png')}}'"
alt="">
</div>
<div class="{{Session::get('direction') === "rtl" ? 'right' : 'ml-3'}}">
<span class="font-bold __text-16px">
{{$web_config['name']->value}}
</span><br>
</div>
@if($product->added_by == 'admin' && ($inhouse_temporary_close || ($inhouse_vacation_status && $current_date >= $inhouse_vacation_start_date && $current_date <= $inhouse_vacation_end_date)))
<div class="{{Session::get('direction') === "rtl" ? 'right' : 'ml-3'}}">
<span class="chat-seller-info" data-toggle="tooltip" title="{{\App\CPU\translate('this_shop_is_temporary_closed_or_on_vacation._You_cannot_add_product_to_cart_from_this_shop_for_now')}}">
<img src="{{asset('/public/assets/front-end/img/info.png')}}" alt="i">
</span>
</div>
@endif
</div>
</div>
@php($products_for_review = App\Model\Product::where('added_by','admin')->where('user_id',$product->user_id)->withCount('reviews')->get())
<?php
$total_reviews = 0;
foreach ($products_for_review as $item)
{ $total_reviews += $item->reviews_count;
}
?>
<div class="col-12 mt-2">
<div class="row d-flex justify-content-between">
<div class="col-6 ">
<div class="d-flex justify-content-center align-items-center rounded __h-79px" style="background:{{$web_config['primary_color']}}10;">
<div class="text-center">
<span class="font-bold __text-26px" style="color: {{$web_config['primary_color']}};">
{{$total_reviews}}
</span><br>
<span class="__text-12px">
{{\App\CPU\translate('reviews')}}
</span>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex justify-content-center align-items-center rounded __h-79px" style="background:{{$web_config['primary_color']}}10;">
<div class="text-center">
<span class="font-bold __text-26px" style="color: {{$web_config['primary_color']}};">
{{$products_for_review->count()}}
</span><br>
<span class="__text-12px">
{{\App\CPU\translate('products')}}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row">
<a href="{{ route('shopView',[0]) }}" class="text-center d-block w-100">
<button class="btn text-center d-block w-100" style="background: {{$web_config['primary_color']}};color:#ffffff">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
{{\App\CPU\translate('Visit Store')}}
</button>
</a>
</div>
</div>
</div>
@endif
</div>
@php($more_product_from_seller = App\Model\Product::active()->where('added_by',$product->added_by)->where('user_id',$product->user_id)->latest()->take(5)->get())
<div class="px-3 py-3">
<div class="row d-flex justify-content-center">
<span class="text-center __text-16px font-bold">
{{ \App\CPU\translate('More From The Store')}}
</span>
</div>
</div>
<div>
@foreach($more_product_from_seller as $item)
@include('web-views.partials.seller-products-product-details',['product'=>$item,'decimal_point_settings'=>$decimal_point_settings])
@endforeach
</div>
</div>
</div>
</div>
<!-- Product carousel (You may also like)-->
<div class="container mb-3 rtl" style="text-align: {{Session::get('direction') === "rtl" ? 'right' : 'left'}};">
<div class="row flex-between">
<div class="text-capitalize font-bold __text-30px" style="{{Session::get('direction') === "rtl" ? 'margin-right: 5px;' : 'margin-left: 5px;'}}">
<span>{{ \App\CPU\translate('similar_products')}}</span>
</div>
<div class="view_all d-flex justify-content-center align-items-center">
<div>
@php($category=json_decode($product['category_ids']))
@if($category)
<a class="text-capitalize view-all-text" style="color:{{$web_config['primary_color']}} !important;{{Session::get('direction') === "rtl" ? 'margin-left:10px;' : 'margin-right: 8px;'}}"
href="{{route('products',['id'=> $category[0]->id,'data_from'=>'category','page'=>1])}}">{{ \App\CPU\translate('view_all')}}
<i class="czi-arrow-{{Session::get('direction') === "rtl" ? 'left mr-1 ml-n1 mt-1 ' : 'right ml-1 mr-n1'}}"></i>
</a>
@endif
</div>
</div>
</div>
<!-- Grid-->
<!-- Product-->
<div class="row mt-4">
@if (count($relatedProducts)>0)
@foreach($relatedProducts as $key => $relatedProduct)
<div class="col-xl-2 col-sm-3 col-6 mb-4">
@include('web-views.partials._single-product',['product'=>$relatedProduct,'decimal_point_settings'=>$decimal_point_settings])
</div>
@endforeach
@else
<div class="col-12">
<div class="card">
<div class="card-body">
<h6 >{{\App\CPU\translate('similar')}} {{\App\CPU\translate('product_not_available')}}</h6>
</div>
</div>
</div>
@endif
</div>
</div>
<div class="modal fade rtl" id="show-modal-view" tabindex="-1" role="dialog" aria-labelledby="show-modal-image"
aria-hidden="true" style="text-align: {{Session::get('direction') === "rtl" ? 'right' : 'left'}};">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body flex justify-content-center">
<button class="btn btn-default __inline-33" style="{{Session::get('direction') === "rtl" ? 'left' : 'right'}}: -7px;"
data-dismiss="modal">
<i class="fa fa-close"></i>
</button>
<img class="element-center" id="attachment-view" src="">
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script')
<script type="text/javascript">
cartQuantityInitialize();
getVariantPrice();
$('#add-to-cart-form input').on('change', function () {
getVariantPrice();
});
function showInstaImage(link) {
$("#attachment-view").attr("src", link);
$('#show-modal-view').modal('toggle')
}
function focus_preview_image_by_color(key){
$('a[href="#image'+key+'"]')[0].click();
}
</script>
<script>
$( document ).ready(function() {
load_review();
});
let load_review_count = 1;
function load_review()
{
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
$.ajax({
type: "post",
url: '{{route('review-list-product')}}',
data:{
product_id:{{$product->id}},
offset:load_review_count
},
success: function (data) {
$('#product-review-list').append(data.productReview)
if(data.not_empty == 0 && load_review_count>2){
toastr.info('{{\App\CPU\translate('no more review remain to load')}}', {
CloseButton: true,
ProgressBar: true
});
console.log('iff');
}
}
});
load_review_count++
}
</script>
<script>
$(document).ready(function(){
// Target all images with a class name (replace '.image-link' with your actual class name)
/* $('.image-link').on('click', function(){
var imageUrl = $(this).attr('src');
// Open the image in a new tab
window.open(imageUrl, '_blank');
});*/
});
</script>
{{-- Messaging with shop seller --}}
<script>
$('#contact-seller').on('click', function (e) {
// $('#seller_details').css('height', '200px');
$('#seller_details').animate({'height': '276px'});
$('#msg-option').css('display', 'block');
});
$('#sendBtn').on('click', function (e) {
e.preventDefault();
let msgValue = $('#msg-option').find('textarea').val();
let data = {
message: msgValue,
shop_id: $('#msg-option').find('textarea').attr('shop-id'),
seller_id: $('.msg-option').find('.seller_id').attr('seller-id'),
}
if (msgValue != '') {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
$.ajax({
type: "post",
url: '{{route('messages_store')}}',
data: data,
success: function (respons) {
console.log('send successfully');
}
});
$('#chatInputBox').val('');
$('#msg-option').css('display', 'none');
$('#contact-seller').find('.contact').attr('disabled', '');
$('#seller_details').animate({'height': '125px'});
$('#go_to_chatbox').css('display', 'block');
} else {
console.log('say something');
}
});
$('#cancelBtn').on('click', function (e) {
e.preventDefault();
$('#seller_details').animate({'height': '114px'});
$('#msg-option').css('display', 'none');
});
</script>
<script type="text/javascript"
src="https://platform-api.sharethis.com/js/sharethis.js#property=64992e877674a90012611597&product=sticky-share-buttons"
async="async"></script>
<script>
/*! Magnific Popup - v1.1.0 - 2016-02-20
* http://dimsemenov.com/plugins/magnific-popup/
* Copyright (c) 2016 Dmitry Semenov; */
;(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(window.jQuery || window.Zepto);
}
}(function($) {
/*>>core*/
/**
*
* Magnific Popup Core JS file
*
*/
/**
* Private static constants
*/
var CLOSE_EVENT = 'Close',
BEFORE_CLOSE_EVENT = 'BeforeClose',
AFTER_CLOSE_EVENT = 'AfterClose',
BEFORE_APPEND_EVENT = 'BeforeAppend',
MARKUP_PARSE_EVENT = 'MarkupParse',
OPEN_EVENT = 'Open',
CHANGE_EVENT = 'Change',
NS = 'mfp',
EVENT_NS = '.' + NS,
READY_CLASS = 'mfp-ready',
REMOVING_CLASS = 'mfp-removing',
PREVENT_CLOSE_CLASS = 'mfp-prevent-close';
/**
* Private vars
*/
/*jshint -W079 */
var mfp, // As we have only one instance of MagnificPopup object, we define it locally to not to use 'this'
MagnificPopup = function(){},
_isJQ = !!(window.jQuery),
_prevStatus,
_window = $(window),
_document,
_prevContentType,
_wrapClasses,
_currPopupType;
/**
* Private functions
*/
var _mfpOn = function(name, f) {
mfp.ev.on(NS + name + EVENT_NS, f);
},
_getEl = function(className, appendTo, html, raw) {
var el = document.createElement('div');
el.className = 'mfp-'+className;
if(html) {
el.innerHTML = html;
}
if(!raw) {
el = $(el);
if(appendTo) {
el.appendTo(appendTo);
}
} else if(appendTo) {
appendTo.appendChild(el);
}
return el;
},
_mfpTrigger = function(e, data) {
mfp.ev.triggerHandler(NS + e, data);
if(mfp.st.callbacks) {
// converts "mfpEventName" to "eventName" callback and triggers it if it's present
e = e.charAt(0).toLowerCase() + e.slice(1);
if(mfp.st.callbacks[e]) {
mfp.st.callbacks[e].apply(mfp, $.isArray(data) ? data : [data]);
}
}
},
_getCloseBtn = function(type) {
if(type !== _currPopupType || !mfp.currTemplate.closeBtn) {
mfp.currTemplate.closeBtn = $( mfp.st.closeMarkup.replace('%title%', mfp.st.tClose ) );
_currPopupType = type;
}
return mfp.currTemplate.closeBtn;
},
// Initialize Magnific Popup only when called at least once
_checkInstance = function() {
if(!$.magnificPopup.instance) {
/*jshint -W020 */
mfp = new MagnificPopup();
mfp.init();
$.magnificPopup.instance = mfp;
}
},
// CSS transition detection, http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr
supportsTransitions = function() {
var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
v = ['ms','O','Moz','Webkit']; // 'v' for vendor
if( s['transition'] !== undefined ) {
return true;
}
while( v.length ) {
if( v.pop() + 'Transition' in s ) {
return true;
}
}
return false;
};
/**
* Public functions
*/
MagnificPopup.prototype = {
constructor: MagnificPopup,
/**
* Initializes Magnific Popup plugin.
* This function is triggered only once when $.fn.magnificPopup or $.magnificPopup is executed
*/
init: function() {
var appVersion = navigator.appVersion;
mfp.isLowIE = mfp.isIE8 = document.all && !document.addEventListener;
mfp.isAndroid = (/android/gi).test(appVersion);
mfp.isIOS = (/iphone|ipad|ipod/gi).test(appVersion);
mfp.supportsTransition = supportsTransitions();
// We disable fixed positioned lightbox on devices that don't handle it nicely.
// If you know a better way of detecting this - let me know.
mfp.probablyMobile = (mfp.isAndroid || mfp.isIOS || /(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent) );
_document = $(document);
mfp.popupsCache = {};
},
/**
* Opens popup
* @param data [description]
*/
open: function(data) {
var i;
if(data.isObj === false) {
// convert jQuery collection to array to avoid conflicts later
mfp.items = data.items.toArray();
mfp.index = 0;
var items = data.items,
item;
for(i = 0; i < items.length; i++) {
item = items[i];
if(item.parsed) {
item = item.el[0];
}
if(item === data.el[0]) {
mfp.index = i;
break;
}
}
} else {
mfp.items = $.isArray(data.items) ? data.items : [data.items];
mfp.index = data.index || 0;
}
// if popup is already opened - we just update the content
if(mfp.isOpen) {
mfp.updateItemHTML();
return;
}
mfp.types = [];
_wrapClasses = '';
if(data.mainEl && data.mainEl.length) {
mfp.ev = data.mainEl.eq(0);
} else {
mfp.ev = _document;
}
if(data.key) {
if(!mfp.popupsCache[data.key]) {
mfp.popupsCache[data.key] = {};
}
mfp.currTemplate = mfp.popupsCache[data.key];
} else {
mfp.currTemplate = {};
}
mfp.st = $.extend(true, {}, $.magnificPopup.defaults, data );
mfp.fixedContentPos = mfp.st.fixedContentPos === 'auto' ? !mfp.probablyMobile : mfp.st.fixedContentPos;
if(mfp.st.modal) {
mfp.st.closeOnContentClick = false;
mfp.st.closeOnBgClick = false;
mfp.st.showCloseBtn = false;
mfp.st.enableEscapeKey = false;
}
// Building markup
// main containers are created only once
if(!mfp.bgOverlay) {
// Dark overlay
mfp.bgOverlay = _getEl('bg').on('click'+EVENT_NS, function() {
mfp.close();
});
mfp.wrap = _getEl('wrap').attr('tabindex', -1).on('click'+EVENT_NS, function(e) {
if(mfp._checkIfClose(e.target)) {
mfp.close();
}
});
mfp.container = _getEl('container', mfp.wrap);
}
mfp.contentContainer = _getEl('content');
if(mfp.st.preloader) {
mfp.preloader = _getEl('preloader', mfp.container, mfp.st.tLoading);
}
// Initializing modules
var modules = $.magnificPopup.modules;
for(i = 0; i < modules.length; i++) {
var n = modules[i];
n = n.charAt(0).toUpperCase() + n.slice(1);
mfp['init'+n].call(mfp);
}
_mfpTrigger('BeforeOpen');
if(mfp.st.showCloseBtn) {
// Close button
if(!mfp.st.closeBtnInside) {
mfp.wrap.append( _getCloseBtn() );
} else {
_mfpOn(MARKUP_PARSE_EVENT, function(e, template, values, item) {
values.close_replaceWith = _getCloseBtn(item.type);
});
_wrapClasses += ' mfp-close-btn-in';
}
}
if(mfp.st.alignTop) {
_wrapClasses += ' mfp-align-top';
}
if(mfp.fixedContentPos) {
mfp.wrap.css({
overflow: mfp.st.overflowY,
overflowX: 'hidden',
overflowY: mfp.st.overflowY
});
} else {
mfp.wrap.css({
top: _window.scrollTop(),
position: 'absolute'
});
}
if( mfp.st.fixedBgPos === false || (mfp.st.fixedBgPos === 'auto' && !mfp.fixedContentPos) ) {
mfp.bgOverlay.css({
height: _document.height(),
position: 'absolute'
});
}
if(mfp.st.enableEscapeKey) {
// Close on ESC key
_document.on('keyup' + EVENT_NS, function(e) {
if(e.keyCode === 27) {
mfp.close();
}
});
}
_window.on('resize' + EVENT_NS, function() {
mfp.updateSize();
});
if(!mfp.st.closeOnContentClick) {
_wrapClasses += ' mfp-auto-cursor';
}
if(_wrapClasses)
mfp.wrap.addClass(_wrapClasses);
// this triggers recalculation of layout, so we get it once to not to trigger twice
var windowHeight = mfp.wH = _window.height();
var windowStyles = {};
if( mfp.fixedContentPos ) {
if(mfp._hasScrollBar(windowHeight)){
var s = mfp._getScrollbarSize();
if(s) {
windowStyles.marginRight = s;
}
}
}
if(mfp.fixedContentPos) {
if(!mfp.isIE7) {
windowStyles.overflow = 'hidden';
} else {
// ie7 double-scroll bug
$('body, html').css('overflow', 'hidden');
}
}
var classesToadd = mfp.st.mainClass;
if(mfp.isIE7) {
classesToadd += ' mfp-ie7';
}
if(classesToadd) {
mfp._addClassToMFP( classesToadd );
}
// add content
mfp.updateItemHTML();
_mfpTrigger('BuildControls');
// remove scrollbar, add margin e.t.c
$('html').css(windowStyles);
// add everything to DOM
mfp.bgOverlay.add(mfp.wrap).prependTo( mfp.st.prependTo || $(document.body) );
// Save last focused element
mfp._lastFocusedEl = document.activeElement;
// Wait for next cycle to allow CSS transition
setTimeout(function() {
if(mfp.content) {
mfp._addClassToMFP(READY_CLASS);
mfp._setFocus();
} else {
// if content is not defined (not loaded e.t.c) we add class only for BG
mfp.bgOverlay.addClass(READY_CLASS);
}
// Trap the focus in popup
_document.on('focusin' + EVENT_NS, mfp._onFocusIn);
}, 16);
mfp.isOpen = true;
mfp.updateSize(windowHeight);
_mfpTrigger(OPEN_EVENT);
return data;
},
/**
* Closes the popup
*/
close: function() {
if(!mfp.isOpen) return;
_mfpTrigger(BEFORE_CLOSE_EVENT);
mfp.isOpen = false;
// for CSS3 animation
if(mfp.st.removalDelay && !mfp.isLowIE && mfp.supportsTransition ) {
mfp._addClassToMFP(REMOVING_CLASS);
setTimeout(function() {
mfp._close();
}, mfp.st.removalDelay);
} else {
mfp._close();
}
},
/**
* Helper for close() function
*/
_close: function() {
_mfpTrigger(CLOSE_EVENT);
var classesToRemove = REMOVING_CLASS + ' ' + READY_CLASS + ' ';
mfp.bgOverlay.detach();
mfp.wrap.detach();
mfp.container.empty();
if(mfp.st.mainClass) {
classesToRemove += mfp.st.mainClass + ' ';
}
mfp._removeClassFromMFP(classesToRemove);
if(mfp.fixedContentPos) {
var windowStyles = {marginRight: ''};
if(mfp.isIE7) {
$('body, html').css('overflow', '');
} else {
windowStyles.overflow = '';
}
$('html').css(windowStyles);
}
_document.off('keyup' + EVENT_NS + ' focusin' + EVENT_NS);
mfp.ev.off(EVENT_NS);
// clean up DOM elements that aren't removed
mfp.wrap.attr('class', 'mfp-wrap').removeAttr('style');
mfp.bgOverlay.attr('class', 'mfp-bg');
mfp.container.attr('class', 'mfp-container');
// remove close button from target element
if(mfp.st.showCloseBtn &&
(!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) {
if(mfp.currTemplate.closeBtn)
mfp.currTemplate.closeBtn.detach();
}
if(mfp.st.autoFocusLast && mfp._lastFocusedEl) {
$(mfp._lastFocusedEl).focus(); // put tab focus back
}
mfp.currItem = null;
mfp.content = null;
mfp.currTemplate = null;
mfp.prevHeight = 0;
_mfpTrigger(AFTER_CLOSE_EVENT);
},
updateSize: function(winHeight) {
if(mfp.isIOS) {
// fixes iOS nav bars https://github.com/dimsemenov/Magnific-Popup/issues/2
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
var height = window.innerHeight * zoomLevel;
mfp.wrap.css('height', height);
mfp.wH = height;
} else {
mfp.wH = winHeight || _window.height();
}
// Fixes #84: popup incorrectly positioned with position:relative on body
if(!mfp.fixedContentPos) {
mfp.wrap.css('height', mfp.wH);
}
_mfpTrigger('Resize');
},
/**
* Set content of popup based on current index
*/
updateItemHTML: function() {
var item = mfp.items[mfp.index];
// Detach and perform modifications
mfp.contentContainer.detach();
if(mfp.content)
mfp.content.detach();
if(!item.parsed) {
item = mfp.parseEl( mfp.index );
}
var type = item.type;
_mfpTrigger('BeforeChange', [mfp.currItem ? mfp.currItem.type : '', type]);
// BeforeChange event works like so:
// _mfpOn('BeforeChange', function(e, prevType, newType) { });
mfp.currItem = item;
if(!mfp.currTemplate[type]) {
var markup = mfp.st[type] ? mfp.st[type].markup : false;
// allows to modify markup
_mfpTrigger('FirstMarkupParse', markup);
if(markup) {
mfp.currTemplate[type] = $(markup);
} else {
// if there is no markup found we just define that template is parsed
mfp.currTemplate[type] = true;
}
}
if(_prevContentType && _prevContentType !== item.type) {
mfp.container.removeClass('mfp-'+_prevContentType+'-holder');
}
var newContent = mfp['get' + type.charAt(0).toUpperCase() + type.slice(1)](item, mfp.currTemplate[type]);
mfp.appendContent(newContent, type);
item.preloaded = true;
_mfpTrigger(CHANGE_EVENT, item);
_prevContentType = item.type;
// Append container back after its content changed
mfp.container.prepend(mfp.contentContainer);
_mfpTrigger('AfterChange');
},
/**
* Set HTML content of popup
*/
appendContent: function(newContent, type) {
mfp.content = newContent;
if(newContent) {
if(mfp.st.showCloseBtn && mfp.st.closeBtnInside &&
mfp.currTemplate[type] === true) {
// if there is no markup, we just append close button element inside
if(!mfp.content.find('.mfp-close').length) {
mfp.content.append(_getCloseBtn());
}
} else {
mfp.content = newContent;
}
} else {
mfp.content = '';
}
_mfpTrigger(BEFORE_APPEND_EVENT);
mfp.container.addClass('mfp-'+type+'-holder');
mfp.contentContainer.append(mfp.content);
},
/**
* Creates Magnific Popup data object based on given data
* @param {int} index Index of item to parse
*/
parseEl: function(index) {
var item = mfp.items[index],
type;
if(item.tagName) {
item = { el: $(item) };
} else {
type = item.type;
item = { data: item, src: item.src };
}
if(item.el) {
var types = mfp.types;
// check for 'mfp-TYPE' class
for(var i = 0; i < types.length; i++) {
if( item.el.hasClass('mfp-'+types[i]) ) {
type = types[i];
break;
}
}
item.src = item.el.attr('data-mfp-src');
if(!item.src) {
item.src = item.el.attr('href');
}
}
item.type = type || mfp.st.type || 'inline';
item.index = index;
item.parsed = true;
mfp.items[index] = item;
_mfpTrigger('ElementParse', item);
return mfp.items[index];
},
/**
* Initializes single popup or a group of popups
*/
addGroup: function(el, options) {
var eHandler = function(e) {
e.mfpEl = this;
mfp._openClick(e, el, options);
};
if(!options) {
options = {};
}
var eName = 'click.magnificPopup';
options.mainEl = el;
if(options.items) {
options.isObj = true;
el.off(eName).on(eName, eHandler);
} else {
options.isObj = false;
if(options.delegate) {
el.off(eName).on(eName, options.delegate , eHandler);
} else {
options.items = el;
el.off(eName).on(eName, eHandler);
}
}
},
_openClick: function(e, el, options) {
var midClick = options.midClick !== undefined ? options.midClick : $.magnificPopup.defaults.midClick;
if(!midClick && ( e.which === 2 || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey ) ) {
return;
}
var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;
if(disableOn) {
if($.isFunction(disableOn)) {
if( !disableOn.call(mfp) ) {
return true;
}
} else { // else it's number
if( _window.width() < disableOn ) {
return true;
}
}
}
if(e.type) {
e.preventDefault();
// This will prevent popup from closing if element is inside and popup is already opened
if(mfp.isOpen) {
e.stopPropagation();
}
}
options.el = $(e.mfpEl);
if(options.delegate) {
options.items = el.find(options.delegate);
}
mfp.open(options);
},
/**
* Updates text on preloader
*/
updateStatus: function(status, text) {
if(mfp.preloader) {
if(_prevStatus !== status) {
mfp.container.removeClass('mfp-s-'+_prevStatus);
}
if(!text && status === 'loading') {
text = mfp.st.tLoading;
}
var data = {
status: status,
text: text
};
// allows to modify status
_mfpTrigger('UpdateStatus', data);
status = data.status;
text = data.text;
mfp.preloader.html(text);
mfp.preloader.find('a').on('click', function(e) {
e.stopImmediatePropagation();
});
mfp.container.addClass('mfp-s-'+status);
_prevStatus = status;
}
},
/*
"Private" helpers that aren't private at all
*/
// Check to close popup or not
// "target" is an element that was clicked
_checkIfClose: function(target) {
if($(target).hasClass(PREVENT_CLOSE_CLASS)) {
return;
}
var closeOnContent = mfp.st.closeOnContentClick;
var closeOnBg = mfp.st.closeOnBgClick;
if(closeOnContent && closeOnBg) {
return true;
} else {
// We close the popup if click is on close button or on preloader. Or if there is no content.
if(!mfp.content || $(target).hasClass('mfp-close') || (mfp.preloader && target === mfp.preloader[0]) ) {
return true;
}
// if click is outside the content
if( (target !== mfp.content[0] && !$.contains(mfp.content[0], target)) ) {
if(closeOnBg) {
// last check, if the clicked element is in DOM, (in case it's removed onclick)
if( $.contains(document, target) ) {
return true;
}
}
} else if(closeOnContent) {
return true;
}
}
return false;
},
_addClassToMFP: function(cName) {
mfp.bgOverlay.addClass(cName);
mfp.wrap.addClass(cName);
},
_removeClassFromMFP: function(cName) {
this.bgOverlay.removeClass(cName);
mfp.wrap.removeClass(cName);
},
_hasScrollBar: function(winHeight) {
return ( (mfp.isIE7 ? _document.height() : document.body.scrollHeight) > (winHeight || _window.height()) );
},
_setFocus: function() {
(mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).focus();
},
_onFocusIn: function(e) {
if( e.target !== mfp.wrap[0] && !$.contains(mfp.wrap[0], e.target) ) {
mfp._setFocus();
return false;
}
},
_parseMarkup: function(template, values, item) {
var arr;
if(item.data) {
values = $.extend(item.data, values);
}
_mfpTrigger(MARKUP_PARSE_EVENT, [template, values, item] );
$.each(values, function(key, value) {
if(value === undefined || value === false) {
return true;
}
arr = key.split('_');
if(arr.length > 1) {
var el = template.find(EVENT_NS + '-'+arr[0]);
if(el.length > 0) {
var attr = arr[1];
if(attr === 'replaceWith') {
if(el[0] !== value[0]) {
el.replaceWith(value);
}
} else if(attr === 'img') {
if(el.is('img')) {
el.attr('src', value);
} else {
el.replaceWith( $('<img>').attr('src', value).attr('class', el.attr('class')) );
}
} else {
el.attr(arr[1], value);
}
}
} else {
template.find(EVENT_NS + '-'+key).html(value);
}
});
},
_getScrollbarSize: function() {
// thx David
if(mfp.scrollbarSize === undefined) {
var scrollDiv = document.createElement("div");
scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
document.body.appendChild(scrollDiv);
mfp.scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
}
return mfp.scrollbarSize;
}
}; /* MagnificPopup core prototype end */
/**
* Public static functions
*/
$.magnificPopup = {
instance: null,
proto: MagnificPopup.prototype,
modules: [],
open: function(options, index) {
_checkInstance();
if(!options) {
options = {};
} else {
options = $.extend(true, {}, options);
}
options.isObj = true;
options.index = index || 0;
return this.instance.open(options);
},
close: function() {
return $.magnificPopup.instance && $.magnificPopup.instance.close();
},
registerModule: function(name, module) {
if(module.options) {
$.magnificPopup.defaults[name] = module.options;
}
$.extend(this.proto, module.proto);
this.modules.push(name);
},
defaults: {
// Info about options is in docs:
// http://dimsemenov.com/plugins/magnific-popup/documentation.html#options
disableOn: 0,
key: null,
midClick: false,
mainClass: '',
preloader: true,
focus: '', // CSS selector of input to focus after popup is opened
closeOnContentClick: false,
closeOnBgClick: true,
closeBtnInside: true,
showCloseBtn: true,
enableEscapeKey: true,
modal: false,
alignTop: false,
removalDelay: 0,
prependTo: null,
fixedContentPos: 'auto',
fixedBgPos: 'auto',
overflowY: 'auto',
closeMarkup: '<button title="%title%" type="button" class="mfp-close">×</button>',
tClose: 'Close (Esc)',
tLoading: 'Loading...',
autoFocusLast: true
}
};
$.fn.magnificPopup = function(options) {
_checkInstance();
var jqEl = $(this);
// We call some API method of first param is a string
if (typeof options === "string" ) {
if(options === 'open') {
var items,
itemOpts = _isJQ ? jqEl.data('magnificPopup') : jqEl[0].magnificPopup,
index = parseInt(arguments[1], 10) || 0;
if(itemOpts.items) {
items = itemOpts.items[index];
} else {
items = jqEl;
if(itemOpts.delegate) {
items = items.find(itemOpts.delegate);
}
items = items.eq( index );
}
mfp._openClick({mfpEl:items}, jqEl, itemOpts);
} else {
if(mfp.isOpen)
mfp[options].apply(mfp, Array.prototype.slice.call(arguments, 1));
}
} else {
// clone options obj
options = $.extend(true, {}, options);
/*
* As Zepto doesn't support .data() method for objects
* and it works only in normal browsers
* we assign "options" object directly to the DOM element. FTW!
*/
if(_isJQ) {
jqEl.data('magnificPopup', options);
} else {
jqEl[0].magnificPopup = options;
}
mfp.addGroup(jqEl, options);
}
return jqEl;
};
/*>>core*/
/*>>inline*/
var INLINE_NS = 'inline',
_hiddenClass,
_inlinePlaceholder,
_lastInlineElement,
_putInlineElementsBack = function() {
if(_lastInlineElement) {
_inlinePlaceholder.after( _lastInlineElement.addClass(_hiddenClass) ).detach();
_lastInlineElement = null;
}
};
$.magnificPopup.registerModule(INLINE_NS, {
options: {
hiddenClass: 'hide', // will be appended with `mfp-` prefix
markup: '',
tNotFound: 'Content not found'
},
proto: {
initInline: function() {
mfp.types.push(INLINE_NS);
_mfpOn(CLOSE_EVENT+'.'+INLINE_NS, function() {
_putInlineElementsBack();
});
},
getInline: function(item, template) {
_putInlineElementsBack();
if(item.src) {
var inlineSt = mfp.st.inline,
el = $(item.src);
if(el.length) {
// If target element has parent - we replace it with placeholder and put it back after popup is closed
var parent = el[0].parentNode;
if(parent && parent.tagName) {
if(!_inlinePlaceholder) {
_hiddenClass = inlineSt.hiddenClass;
_inlinePlaceholder = _getEl(_hiddenClass);
_hiddenClass = 'mfp-'+_hiddenClass;
}
// replace target inline element with placeholder
_lastInlineElement = el.after(_inlinePlaceholder).detach().removeClass(_hiddenClass);
}
mfp.updateStatus('ready');
} else {
mfp.updateStatus('error', inlineSt.tNotFound);
el = $('<div>');
}
item.inlineElement = el;
return el;
}
mfp.updateStatus('ready');
mfp._parseMarkup(template, {}, item);
return template;
}
}
});
/*>>inline*/
/*>>ajax*/
var AJAX_NS = 'ajax',
_ajaxCur,
_removeAjaxCursor = function() {
if(_ajaxCur) {
$(document.body).removeClass(_ajaxCur);
}
},
_destroyAjaxRequest = function() {
_removeAjaxCursor();
if(mfp.req) {
mfp.req.abort();
}
};
$.magnificPopup.registerModule(AJAX_NS, {
options: {
settings: null,
cursor: 'mfp-ajax-cur',
tError: '<a href="%url%">The content</a> could not be loaded.'
},
proto: {
initAjax: function() {
mfp.types.push(AJAX_NS);
_ajaxCur = mfp.st.ajax.cursor;
_mfpOn(CLOSE_EVENT+'.'+AJAX_NS, _destroyAjaxRequest);
_mfpOn('BeforeChange.' + AJAX_NS, _destroyAjaxRequest);
},
getAjax: function(item) {
if(_ajaxCur) {
$(document.body).addClass(_ajaxCur);
}
mfp.updateStatus('loading');
var opts = $.extend({
url: item.src,
success: function(data, textStatus, jqXHR) {
var temp = {
data:data,
xhr:jqXHR
};
_mfpTrigger('ParseAjax', temp);
mfp.appendContent( $(temp.data), AJAX_NS );
item.finished = true;
_removeAjaxCursor();
mfp._setFocus();
setTimeout(function() {
mfp.wrap.addClass(READY_CLASS);
}, 16);
mfp.updateStatus('ready');
_mfpTrigger('AjaxContentAdded');
},
error: function() {
_removeAjaxCursor();
item.finished = item.loadError = true;
mfp.updateStatus('error', mfp.st.ajax.tError.replace('%url%', item.src));
}
}, mfp.st.ajax.settings);
mfp.req = $.ajax(opts);
return '';
}
}
});
/*>>ajax*/
/*>>image*/
var _imgInterval,
_getTitle = function(item) {
if(item.data && item.data.title !== undefined)
return item.data.title;
var src = mfp.st.image.titleSrc;
if(src) {
if($.isFunction(src)) {
return src.call(mfp, item);
} else if(item.el) {
return item.el.attr(src) || '';
}
}
return '';
};
$.magnificPopup.registerModule('image', {
options: {
markup: '<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<figure>'+
'<div class="mfp-img"></div>'+
'<figcaption>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-title"></div>'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</figcaption>'+
'</figure>'+
'</div>',
cursor: 'mfp-zoom-out-cur',
titleSrc: 'title',
verticalFit: true,
tError: '<a href="%url%">The image</a> could not be loaded.'
},
proto: {
initImage: function() {
var imgSt = mfp.st.image,
ns = '.image';
mfp.types.push('image');
_mfpOn(OPEN_EVENT+ns, function() {
if(mfp.currItem.type === 'image' && imgSt.cursor) {
$(document.body).addClass(imgSt.cursor);
}
});
_mfpOn(CLOSE_EVENT+ns, function() {
if(imgSt.cursor) {
$(document.body).removeClass(imgSt.cursor);
}
_window.off('resize' + EVENT_NS);
});
_mfpOn('Resize'+ns, mfp.resizeImage);
if(mfp.isLowIE) {
_mfpOn('AfterChange', mfp.resizeImage);
}
},
resizeImage: function() {
var item = mfp.currItem;
if(!item || !item.img) return;
if(mfp.st.image.verticalFit) {
var decr = 0;
// fix box-sizing in ie7/8
if(mfp.isLowIE) {
decr = parseInt(item.img.css('padding-top'), 10) + parseInt(item.img.css('padding-bottom'),10);
}
item.img.css('max-height', mfp.wH-decr);
}
},
_onImageHasSize: function(item) {
if(item.img) {
item.hasSize = true;
if(_imgInterval) {
clearInterval(_imgInterval);
}
item.isCheckingImgSize = false;
_mfpTrigger('ImageHasSize', item);
if(item.imgHidden) {
if(mfp.content)
mfp.content.removeClass('mfp-loading');
item.imgHidden = false;
}
}
},
/**
* Function that loops until the image has size to display elements that rely on it asap
*/
findImageSize: function(item) {
var counter = 0,
img = item.img[0],
mfpSetInterval = function(delay) {
if(_imgInterval) {
clearInterval(_imgInterval);
}
// decelerating interval that checks for size of an image
_imgInterval = setInterval(function() {
if(img.naturalWidth > 0) {
mfp._onImageHasSize(item);
return;
}
if(counter > 200) {
clearInterval(_imgInterval);
}
counter++;
if(counter === 3) {
mfpSetInterval(10);
} else if(counter === 40) {
mfpSetInterval(50);
} else if(counter === 100) {
mfpSetInterval(500);
}
}, delay);
};
mfpSetInterval(1);
},
getImage: function(item, template) {
var guard = 0,
// image load complete handler
onLoadComplete = function() {
if(item) {
if (item.img[0].complete) {
item.img.off('.mfploader');
if(item === mfp.currItem){
mfp._onImageHasSize(item);
mfp.updateStatus('ready');
}
item.hasSize = true;
item.loaded = true;
_mfpTrigger('ImageLoadComplete');
}
else {
// if image complete check fails 200 times (20 sec), we assume that there was an error.
guard++;
if(guard < 200) {
setTimeout(onLoadComplete,100);
} else {
onLoadError();
}
}
}
},
// image error handler
onLoadError = function() {
if(item) {
item.img.off('.mfploader');
if(item === mfp.currItem){
mfp._onImageHasSize(item);
mfp.updateStatus('error', imgSt.tError.replace('%url%', item.src) );
}
item.hasSize = true;
item.loaded = true;
item.loadError = true;
}
},
imgSt = mfp.st.image;
var el = template.find('.mfp-img');
if(el.length) {
var img = document.createElement('img');
img.className = 'mfp-img';
if(item.el && item.el.find('img').length) {
img.alt = item.el.find('img').attr('alt');
}
item.img = $(img).on('load.mfploader', onLoadComplete).on('error.mfploader', onLoadError);
img.src = item.src;
// without clone() "error" event is not firing when IMG is replaced by new IMG
// TODO: find a way to avoid such cloning
if(el.is('img')) {
item.img = item.img.clone();
}
img = item.img[0];
if(img.naturalWidth > 0) {
item.hasSize = true;
} else if(!img.width) {
item.hasSize = false;
}
}
mfp._parseMarkup(template, {
title: _getTitle(item),
img_replaceWith: item.img
}, item);
mfp.resizeImage();
if(item.hasSize) {
if(_imgInterval) clearInterval(_imgInterval);
if(item.loadError) {
template.addClass('mfp-loading');
mfp.updateStatus('error', imgSt.tError.replace('%url%', item.src) );
} else {
template.removeClass('mfp-loading');
mfp.updateStatus('ready');
}
return template;
}
mfp.updateStatus('loading');
item.loading = true;
if(!item.hasSize) {
item.imgHidden = true;
template.addClass('mfp-loading');
mfp.findImageSize(item);
}
return template;
}
}
});
/*>>image*/
/*>>zoom*/
var hasMozTransform,
getHasMozTransform = function() {
if(hasMozTransform === undefined) {
hasMozTransform = document.createElement('p').style.MozTransform !== undefined;
}
return hasMozTransform;
};
$.magnificPopup.registerModule('zoom', {
options: {
enabled: false,
easing: 'ease-in-out',
duration: 300,
opener: function(element) {
return element.is('img') ? element : element.find('img');
}
},
proto: {
initZoom: function() {
var zoomSt = mfp.st.zoom,
ns = '.zoom',
image;
if(!zoomSt.enabled || !mfp.supportsTransition) {
return;
}
var duration = zoomSt.duration,
getElToAnimate = function(image) {
var newImg = image.clone().removeAttr('style').removeAttr('class').addClass('mfp-animated-image'),
transition = 'all '+(zoomSt.duration/1000)+'s ' + zoomSt.easing,
cssObj = {
position: 'fixed',
zIndex: 9999,
left: 0,
top: 0,
'-webkit-backface-visibility': 'hidden'
},
t = 'transition';
cssObj['-webkit-'+t] = cssObj['-moz-'+t] = cssObj['-o-'+t] = cssObj[t] = transition;
newImg.css(cssObj);
return newImg;
},
showMainContent = function() {
mfp.content.css('visibility', 'visible');
},
openTimeout,
animatedImg;
_mfpOn('BuildControls'+ns, function() {
if(mfp._allowZoom()) {
clearTimeout(openTimeout);
mfp.content.css('visibility', 'hidden');
// Basically, all code below does is clones existing image, puts in on top of the current one and animated it
image = mfp._getItemToZoom();
if(!image) {
showMainContent();
return;
}
animatedImg = getElToAnimate(image);
animatedImg.css( mfp._getOffset() );
mfp.wrap.append(animatedImg);
openTimeout = setTimeout(function() {
animatedImg.css( mfp._getOffset( true ) );
openTimeout = setTimeout(function() {
showMainContent();
setTimeout(function() {
animatedImg.remove();
image = animatedImg = null;
_mfpTrigger('ZoomAnimationEnded');
}, 16); // avoid blink when switching images
}, duration); // this timeout equals animation duration
}, 16); // by adding this timeout we avoid short glitch at the beginning of animation
// Lots of timeouts...
}
});
_mfpOn(BEFORE_CLOSE_EVENT+ns, function() {
if(mfp._allowZoom()) {
clearTimeout(openTimeout);
mfp.st.removalDelay = duration;
if(!image) {
image = mfp._getItemToZoom();
if(!image) {
return;
}
animatedImg = getElToAnimate(image);
}
animatedImg.css( mfp._getOffset(true) );
mfp.wrap.append(animatedImg);
mfp.content.css('visibility', 'hidden');
setTimeout(function() {
animatedImg.css( mfp._getOffset() );
}, 16);
}
});
_mfpOn(CLOSE_EVENT+ns, function() {
if(mfp._allowZoom()) {
showMainContent();
if(animatedImg) {
animatedImg.remove();
}
image = null;
}
});
},
_allowZoom: function() {
return mfp.currItem.type === 'image';
},
_getItemToZoom: function() {
if(mfp.currItem.hasSize) {
return mfp.currItem.img;
} else {
return false;
}
},
// Get element postion relative to viewport
_getOffset: function(isLarge) {
var el;
if(isLarge) {
el = mfp.currItem.img;
} else {
el = mfp.st.zoom.opener(mfp.currItem.el || mfp.currItem);
}
var offset = el.offset();
var paddingTop = parseInt(el.css('padding-top'),10);
var paddingBottom = parseInt(el.css('padding-bottom'),10);
offset.top -= ( $(window).scrollTop() - paddingTop );
/*
Animating left + top + width/height looks glitchy in Firefox, but perfect in Chrome. And vice-versa.
*/
var obj = {
width: el.width(),
// fix Zepto height+padding issue
height: (_isJQ ? el.innerHeight() : el[0].offsetHeight) - paddingBottom - paddingTop
};
// I hate to do this, but there is no another option
if( getHasMozTransform() ) {
obj['-moz-transform'] = obj['transform'] = 'translate(' + offset.left + 'px,' + offset.top + 'px)';
} else {
obj.left = offset.left;
obj.top = offset.top;
}
return obj;
}
}
});
/*>>zoom*/
/*>>iframe*/
var IFRAME_NS = 'iframe',
_emptyPage = '//about:blank',
_fixIframeBugs = function(isShowing) {
if(mfp.currTemplate[IFRAME_NS]) {
var el = mfp.currTemplate[IFRAME_NS].find('iframe');
if(el.length) {
// reset src after the popup is closed to avoid "video keeps playing after popup is closed" bug
if(!isShowing) {
el[0].src = _emptyPage;
}
// IE8 black screen bug fix
if(mfp.isIE8) {
el.css('display', isShowing ? 'block' : 'none');
}
}
}
};
$.magnificPopup.registerModule(IFRAME_NS, {
options: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" src="//about:blank" frameborder="0" allowfullscreen></iframe>'+
'</div>',
srcAction: 'iframe_src',
// we don't care and support only one default type of URL by default
patterns: {
youtube: {
index: 'youtube.com',
id: 'v=',
src: '//www.youtube.com/embed/%id%?autoplay=1'
},
vimeo: {
index: 'vimeo.com/',
id: '/',
src: '//player.vimeo.com/video/%id%?autoplay=1'
},
gmaps: {
index: '//maps.google.',
src: '%id%&output=embed'
}
}
},
proto: {
initIframe: function() {
mfp.types.push(IFRAME_NS);
_mfpOn('BeforeChange', function(e, prevType, newType) {
if(prevType !== newType) {
if(prevType === IFRAME_NS) {
_fixIframeBugs(); // iframe if removed
} else if(newType === IFRAME_NS) {
_fixIframeBugs(true); // iframe is showing
}
}// else {
// iframe source is switched, don't do anything
//}
});
_mfpOn(CLOSE_EVENT + '.' + IFRAME_NS, function() {
_fixIframeBugs();
});
},
getIframe: function(item, template) {
var embedSrc = item.src;
var iframeSt = mfp.st.iframe;
$.each(iframeSt.patterns, function() {
if(embedSrc.indexOf( this.index ) > -1) {
if(this.id) {
if(typeof this.id === 'string') {
embedSrc = embedSrc.substr(embedSrc.lastIndexOf(this.id)+this.id.length, embedSrc.length);
} else {
embedSrc = this.id.call( this, embedSrc );
}
}
embedSrc = this.src.replace('%id%', embedSrc );
return false; // break;
}
});
var dataObj = {};
if(iframeSt.srcAction) {
dataObj[iframeSt.srcAction] = embedSrc;
}
mfp._parseMarkup(template, dataObj, item);
mfp.updateStatus('ready');
return template;
}
}
});
/*>>iframe*/
/*>>gallery*/
/**
* Get looped index depending on number of slides
*/
var _getLoopedId = function(index) {
var numSlides = mfp.items.length;
if(index > numSlides - 1) {
return index - numSlides;
} else if(index < 0) {
return numSlides + index;
}
return index;
},
_replaceCurrTotal = function(text, curr, total) {
return text.replace(/%curr%/gi, curr + 1).replace(/%total%/gi, total);
};
$.magnificPopup.registerModule('gallery', {
options: {
enabled: false,
arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
preload: [0,2],
navigateByImgClick: true,
arrows: true,
tPrev: 'Previous (Left arrow key)',
tNext: 'Next (Right arrow key)',
tCounter: '%curr% of %total%'
},
proto: {
initGallery: function() {
var gSt = mfp.st.gallery,
ns = '.mfp-gallery';
mfp.direction = true; // true - next, false - prev
if(!gSt || !gSt.enabled ) return false;
_wrapClasses += ' mfp-gallery';
_mfpOn(OPEN_EVENT+ns, function() {
if(gSt.navigateByImgClick) {
mfp.wrap.on('click'+ns, '.mfp-img', function() {
if(mfp.items.length > 1) {
mfp.next();
return false;
}
});
}
_document.on('keydown'+ns, function(e) {
if (e.keyCode === 37) {
mfp.prev();
} else if (e.keyCode === 39) {
mfp.next();
}
});
});
_mfpOn('UpdateStatus'+ns, function(e, data) {
if(data.text) {
data.text = _replaceCurrTotal(data.text, mfp.currItem.index, mfp.items.length);
}
});
_mfpOn(MARKUP_PARSE_EVENT+ns, function(e, element, values, item) {
var l = mfp.items.length;
values.counter = l > 1 ? _replaceCurrTotal(gSt.tCounter, item.index, l) : '';
});
_mfpOn('BuildControls' + ns, function() {
if(mfp.items.length > 1 && gSt.arrows && !mfp.arrowLeft) {
var markup = gSt.arrowMarkup,
arrowLeft = mfp.arrowLeft = $( markup.replace(/%title%/gi, gSt.tPrev).replace(/%dir%/gi, 'left') ).addClass(PREVENT_CLOSE_CLASS),
arrowRight = mfp.arrowRight = $( markup.replace(/%title%/gi, gSt.tNext).replace(/%dir%/gi, 'right') ).addClass(PREVENT_CLOSE_CLASS);
arrowLeft.click(function() {
mfp.prev();
});
arrowRight.click(function() {
mfp.next();
});
mfp.container.append(arrowLeft.add(arrowRight));
}
});
_mfpOn(CHANGE_EVENT+ns, function() {
if(mfp._preloadTimeout) clearTimeout(mfp._preloadTimeout);
mfp._preloadTimeout = setTimeout(function() {
mfp.preloadNearbyImages();
mfp._preloadTimeout = null;
}, 16);
});
_mfpOn(CLOSE_EVENT+ns, function() {
_document.off(ns);
mfp.wrap.off('click'+ns);
mfp.arrowRight = mfp.arrowLeft = null;
});
},
next: function() {
mfp.direction = true;
mfp.index = _getLoopedId(mfp.index + 1);
mfp.updateItemHTML();
},
prev: function() {
mfp.direction = false;
mfp.index = _getLoopedId(mfp.index - 1);
mfp.updateItemHTML();
},
goTo: function(newIndex) {
mfp.direction = (newIndex >= mfp.index);
mfp.index = newIndex;
mfp.updateItemHTML();
},
preloadNearbyImages: function() {
var p = mfp.st.gallery.preload,
preloadBefore = Math.min(p[0], mfp.items.length),
preloadAfter = Math.min(p[1], mfp.items.length),
i;
for(i = 1; i <= (mfp.direction ? preloadAfter : preloadBefore); i++) {
mfp._preloadItem(mfp.index+i);
}
for(i = 1; i <= (mfp.direction ? preloadBefore : preloadAfter); i++) {
mfp._preloadItem(mfp.index-i);
}
},
_preloadItem: function(index) {
index = _getLoopedId(index);
if(mfp.items[index].preloaded) {
return;
}
var item = mfp.items[index];
if(!item.parsed) {
item = mfp.parseEl( index );
}
_mfpTrigger('LazyLoad', item);
if(item.type === 'image') {
item.img = $('<img class="mfp-img" />').on('load.mfploader', function() {
item.hasSize = true;
}).on('error.mfploader', function() {
item.hasSize = true;
item.loadError = true;
_mfpTrigger('LazyLoadError', item);
}).attr('src', item.src);
}
item.preloaded = true;
}
}
});
/*>>gallery*/
/*>>retina*/
var RETINA_NS = 'retina';
$.magnificPopup.registerModule(RETINA_NS, {
options: {
replaceSrc: function(item) {
return item.src.replace(/\.\w+$/, function(m) { return '@2x' + m; });
},
ratio: 1 // Function or number. Set to 1 to disable.
},
proto: {
initRetina: function() {
if(window.devicePixelRatio > 1) {
var st = mfp.st.retina,
ratio = st.ratio;
ratio = !isNaN(ratio) ? ratio : ratio();
if(ratio > 1) {
_mfpOn('ImageHasSize' + '.' + RETINA_NS, function(e, item) {
item.img.css({
'max-width': item.img[0].naturalWidth / ratio,
'width': '100%'
});
});
_mfpOn('ElementParse' + '.' + RETINA_NS, function(e, item) {
item.src = st.replaceSrc(item, ratio);
});
}
}
}
}
});
/*>>retina*/
_checkInstance(); }));
</script>
@endpush
Zerion Mini Shell 1.0