411 lines
14 KiB
PHP
Executable File
411 lines
14 KiB
PHP
Executable File
@extends('merchbay_main')
|
|
@section('main-content')
|
|
@if ($store_array[0]->IsHibernated)
|
|
<script>
|
|
window.location = "../";
|
|
</script>
|
|
@endif
|
|
|
|
<style>
|
|
.carousel-item img {
|
|
/* width: 100%; */
|
|
/* height: 100%; */
|
|
object-fit: contain !important;
|
|
width: 100% !important;
|
|
max-height: 100% !important;
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.carousel-indicators {
|
|
display: inline-block !important;
|
|
height: 400px !important;
|
|
overflow-y: scroll !important;
|
|
overflow-x: hidden !important;
|
|
position: static !important;
|
|
direction: rtl !important;
|
|
}
|
|
|
|
.carousel-inner,
|
|
.carousel-item {
|
|
height: 100%;
|
|
}
|
|
|
|
@media screen and (max-width: 992px) {
|
|
.carousel-indicators {
|
|
display: inline-flex !important;
|
|
direction: inherit !important;
|
|
height: auto !important;
|
|
width: 100% !important;
|
|
max-width: 800px !important;
|
|
overflow-x: auto !important;
|
|
position: relative !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
overflow-y: hidden !important;
|
|
justify-content: normal !important;
|
|
margin-top: 20px !important;
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
.carousel-inner {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* width */
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
}
|
|
|
|
/* Handle on hover */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
|
|
.item {
|
|
margin-bottom: 10px !important;
|
|
margin-left: 10px !important;
|
|
cursor: pointer !important;
|
|
height: 100px !important;
|
|
width: 100px !important;
|
|
border: solid 1px #e2e2e2 !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.item.active img {
|
|
/* border:1px solid #000000; */
|
|
opacity: 1;
|
|
padding: 5px;
|
|
}
|
|
|
|
.item.active {
|
|
border: 1px solid #000000 !important;
|
|
}
|
|
|
|
.item img {
|
|
border: 1px solid transparent !important;
|
|
opacity: 0.5;
|
|
transition: 0.5s !important;
|
|
height: inherit !important;
|
|
padding: 5px !important;
|
|
display: block !important;
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
.item:hover {
|
|
border: 1px solid #000000 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
/* Black background with transparency */
|
|
color: #f1f1f1;
|
|
width: 100%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.content p {
|
|
font-size: 15px;
|
|
}
|
|
|
|
@media screen and (max-width: 992px) {
|
|
.content {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1440px) {
|
|
/* .carousel-inner{
|
|
margin-left: -60px;
|
|
} */
|
|
}
|
|
|
|
@media screen and (min-width: 1200px) and (max-width: 1439px) {
|
|
.carousel-inner {
|
|
margin-left: -20px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 880px) and (max-width: 1199px) {
|
|
.carousel-inner {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.content {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 576px) and (max-width: 879px) {
|
|
.carousel-inner {
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.content {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<style>
|
|
.custom-chevron-left,
|
|
.custom-chevron-right {
|
|
color: grey;
|
|
}
|
|
|
|
/* end single carousel*/
|
|
|
|
.hide-bullets {
|
|
list-style: none;
|
|
margin-left: -40px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.spacer-top {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.roster-input {
|
|
border-radius: 0px;
|
|
border-right: none;
|
|
border-top: none;
|
|
}
|
|
|
|
.table-bordered>thead>tr>td,
|
|
.table-bordered>thead>tr>th {
|
|
border-bottom-width: 0px;
|
|
}
|
|
|
|
/* .btn-roster-action { */
|
|
/* width: 20px;
|
|
height: 20px;
|
|
border-radius: 10px; */
|
|
/* } */
|
|
|
|
.btn-group-sm>.btn {
|
|
padding: 0px 0px;
|
|
}
|
|
|
|
.table>tbody>tr>td,
|
|
.table>tbody>tr>th,
|
|
.table>tfoot>tr>td,
|
|
.table>tfoot>tr>th,
|
|
.table>thead>tr>td,
|
|
.table>thead>tr>th {
|
|
vertical-align: unset;
|
|
}
|
|
|
|
.table>tbody>tr>td,
|
|
.table>tbody>tr>th,
|
|
.table>tfoot>tr>td,
|
|
.table>tfoot>tr>th,
|
|
.table>thead>tr>td,
|
|
.table>thead>tr>th {
|
|
border: none;
|
|
}
|
|
|
|
.table>thead>tr>th {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.carousel-control.right {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.carousel-control.left {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
/* .edge-text { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;} */
|
|
|
|
/* these styles are for the demo, but are not required for the plugin */
|
|
.zoom {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
/* magnifying glass icon */
|
|
.zoom:after {
|
|
content: '';
|
|
display: block;
|
|
width: 33px;
|
|
height: 33px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
/* background:url("{{ asset('public/images/icon.png') }}"); */
|
|
}
|
|
|
|
|
|
tbody#orderTableBody>tr>td {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.panel-design-details {
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<div class="wrapper bg-white pb-5">
|
|
<div class="main__banner">
|
|
<div class="row">
|
|
<div class="col-lg-12 text-center">
|
|
<div class="store-banner border-top">
|
|
<img src="{{ config('site_config.uploads') .'teamstore/' .$store_array[0]->ImageFolder .'/' .$store_array[0]->StoreBanner }}"
|
|
id="storeBanner" class="shadow-sm img-fluid w-100" alt="..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main__content">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="py-4">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a
|
|
href="{{ url('store') }}/{{ $store_array[0]->StoreUrl }}">{{ $store_array[0]->StoreName }}</a>
|
|
</li>
|
|
<li class="breadcrumb-item active" aria-current="page">
|
|
{{ $product_array[0]->ProductName }}
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row pb-5">
|
|
<div class="col-lg-6">
|
|
<div id="demo" class="carousel slide vert" data-bs-interval="false" data-bs-ride="carousel">
|
|
<div class="row no-gutters">
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
|
|
<div class="carousel-indicators">
|
|
@define $i = 0
|
|
@foreach ($thumbnails_array as $thumbnail)
|
|
@if ($thumbnail->ImageClass == 'active')
|
|
<div data-bs-target="#demo" data-bs-slide-to="{{ $i }}"
|
|
class="item active">
|
|
<img
|
|
src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image }}" />
|
|
</div>
|
|
@else
|
|
<div data-bs-target="#demo" data-bs-slide-to="{{ $i }}"
|
|
class="item">
|
|
<img
|
|
src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image }}" />
|
|
</div>
|
|
@endif
|
|
@define $i++
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<!-- col-sm-4 Indicators -->
|
|
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-9 col-xl-9 order-first order-lg-last">
|
|
<div class="border text-center p-1 product-active-thumbnail">
|
|
<div class="carousel-inner align-self-center">
|
|
@define $j = 0
|
|
@foreach ($thumbnails_array as $thumbnail)
|
|
@if ($j == 0)
|
|
<div class="carousel-item active">
|
|
<img src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image }}"
|
|
class="img-fluid" />
|
|
</div>
|
|
@else
|
|
<div class="carousel-item">
|
|
<img src="{{ config('site_config.images_url') }}/{{ $thumbnail->Image }}"
|
|
class="img-fluid" />
|
|
</div>
|
|
@endif
|
|
@define $j++
|
|
@endforeach
|
|
</div>
|
|
<!--inner-->
|
|
</div>
|
|
</div>
|
|
<!-- col-sm-6 -->
|
|
</div>
|
|
<!--row-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="product-name-display">
|
|
<h3>{{ $product_array[0]->ProductName }}</h3>
|
|
</div>
|
|
<div class="d-flex product-price-display">
|
|
<div class="currency">{{ $store_array[0]->StoreCurrency }} </div>
|
|
<div class="price-display">{{ $product_array[0]->ProductPrice }}</div>
|
|
</div>
|
|
<form id="frm-order-list">
|
|
<input type="hidden" value="{{ md5($product_array[0]->Id) }}" name="p_id" id="p_id" />
|
|
@include(
|
|
'teamstore-sublayouts.forms.' . $product_array[0]->ProductForm
|
|
)
|
|
|
|
@if ($product_array[0]->ProductPrice > 0)
|
|
{{-- @if ($available_qty !== null) --}}
|
|
@if ($available_qty > 0 || $available_qty === null)
|
|
<div class="py-3">
|
|
<button class="btn btn-black" type="submit" id="btn-add-to-cart">Add
|
|
to Cart</button>
|
|
</div>
|
|
@endif
|
|
{{-- @endif --}}
|
|
@endif
|
|
</form>
|
|
<hr>
|
|
<p>{{ $product_array[0]->ProductDescription }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row py-5">
|
|
<div class="col-lg-12">
|
|
<h4>From the same Store</h4>
|
|
</div>
|
|
{{-- <div class="col-md-12">
|
|
<p>...</p>
|
|
</div> --}}
|
|
@foreach ($store_products as $product)
|
|
<div class="col-lg-2 col-md-3 col-6" v-for="index in 6" :key="index">
|
|
<div class="text-center p-3">
|
|
<a
|
|
href="{{ url('store') . '/' . $product->StoreUrl . '/product/' . $product->ProductURL }}">
|
|
<div class="store-logo">
|
|
<img src="{{ config('site_config.images_url') . '/' . $product->Image }}"
|
|
alt="{{ $product->ProductName }}" class="d-block border shadow-sm">
|
|
</div>
|
|
<div class="store-name text-truncate">{{ $product->ProductName }}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|