395 lines
11 KiB
PHP
Executable File
395 lines
11 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)
|
|
<div class="py-3">
|
|
<button class="btn btn-black" type="submit" id="btn-add-to-cart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Add to Cart</button>
|
|
</div>
|
|
@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
|