added item quantity

This commit is contained in:
franknstayn
2021-08-24 22:33:11 +08:00
parent f1d656de5e
commit d4519faf2b
6 changed files with 404 additions and 372 deletions

View File

@@ -29,7 +29,7 @@ class PaypalController extends Controller
public function __construct() public function __construct()
{ {
$paypal_env = "live"; $paypal_env = "sandbox";
$paypal_apiUrl = 'https://api.paypal.com'; // default $paypal_apiUrl = 'https://api.paypal.com'; // default
if($paypal_env == 'live'){ if($paypal_env == 'live'){

View File

@@ -364,7 +364,8 @@ class UserController extends Controller {
'PrivacyStatus' => $post['item_privacy'], 'PrivacyStatus' => $post['item_privacy'],
'ProductForm' => $post['itemForm'], 'ProductForm' => $post['itemForm'],
'AvailableSizes' => implode(",", $post['available_size']), 'AvailableSizes' => implode(",", $post['available_size']),
'ShippingCostId' => $shipping_cost_id 'ShippingCostId' => $shipping_cost_id,
'ProductAvailableQty' => ($post['item_quantity'] == 0) ? null : $post['item_quantity']
); );

View File

@@ -3,25 +3,36 @@
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-btn"> <button class="btn btn-outline-secondary btn-number" disabled="disabled" data-type="minus" data-field="quantity" type="button" id="button-addon1"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quantity"> {{-- <input type="text" name="quantity" class="form-control input-number" value="1" min="1" max="100"> --}}
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
@if($product_array[0]->ProductAvailableQty == null) @if($product_array[0]->ProductAvailableQty == null)
<input type="text" name="quantity" class="form-control input-number" value="1" min="1" max="100"> <input type="text" name="quantity" class="form-control input-number" value="1" min="1" max="100">
@else @else
<input type="text" name="quantity" class="form-control input-number" value="1" min="1" max="{{ $available_qty }}"> <input type="text" name="quantity" class="form-control input-number" value="1" min="1" max="{{ $available_qty }}">
@endif @endif
<button class="btn btn-outline-secondary btn-number" data-type="plus" data-field="quantity" type="button" id="button-addon1"> <i class="fa fa-plus"></i> </button>
</div>
{{-- <div class="input-group">
<span class="input-group-btn"> <span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quantity"> <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quantity">
<span class="glyphicon glyphicon-plus"></span> <i class="fa fa-minus"></i>
</button> </button>
</span> </span>
</div>
@if($available_qty != null) <span class="input-group-btn">
<p>{{ $available_qty }} piece/s available</p> <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quantity">
<i class="fa fa-plus"></i>
</button>
</span>
</div> --}}
@if($available_qty !== null)
@if ($available_qty > 0)
<p>{{ $available_qty }} piece/s available</p>
@else
<p>Sold out</p>
@endif
@endif @endif
</div> </div>

View File

@@ -1,394 +1,409 @@
@extends('merchbay_main') @extends('merchbay_main')
@section('main-content') @section('main-content')
@if ($store_array[0]->IsHibernated) @if ($store_array[0]->IsHibernated)
<script> <script>
window.location = "../"; window.location = "../";
</script> </script>
@endif @endif
<style> <style>
.carousel-item img { .carousel-item img {
/* width: 100%; */ /* width: 100%; */
/* height: 100%; */ /* height: 100%; */
object-fit: contain !important; object-fit: contain !important;
width: 100% !important; width: 100% !important;
max-height: 100% !important; max-height: 100% !important;
padding: 5px !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-indicators {
.carousel-item { display: inline-block !important;
height: 100%; height: 400px !important;
} overflow-y: scroll !important;
overflow-x: hidden !important;
position: static !important;
direction: rtl !important;
}
@media screen and (max-width: 992px) { .carousel-inner,
.carousel-indicators { .carousel-item {
display: inline-flex !important; height: 100%;
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 */ @media screen and (max-width: 992px) {
::-webkit-scrollbar-track { .carousel-indicators {
background: #f1f1f1; 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;
}
/* Handle */ .carousel-inner {
::-webkit-scrollbar-thumb { margin-left: 0 !important;
background: #888; }
} }
/* Handle on hover */ /* width */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar {
background: #555; width: 5px;
} height: 5px;
.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 { /* Track */
border: 1px solid #000000 !important; ::-webkit-scrollbar-track {
} background: #f1f1f1;
}
.item img { /* Handle */
border: 1px solid transparent !important; ::-webkit-scrollbar-thumb {
opacity: 0.5; background: #888;
transition: 0.5s !important; }
height: inherit !important;
padding: 5px !important;
display: block !important;
margin: auto;
} /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.item:hover { .item {
border: 1px solid #000000 !important; margin-bottom: 10px !important;
opacity: 1 !important; margin-left: 10px !important;
} cursor: pointer !important;
.content { height: 100px !important;
position: absolute; width: 100px !important;
bottom: 0; border: solid 1px #e2e2e2 !important;
background: rgba(0, 0, 0, 0.5); /* Black background with transparency */ text-align: center !important;
color: #f1f1f1; }
width: 100%;
padding: 10px;
}
.content p {
font-size: 15px;
}
@media screen and (max-width: 992px) { .item.active img {
.content { /* border:1px solid #000000; */
position: static; opacity: 1;
} padding: 5px;
} }
@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> .item.active {
border: 1px solid #000000 !important;
}
.custom-chevron-left, .item img {
.custom-chevron-right { border: 1px solid transparent !important;
color: grey; opacity: 0.5;
} transition: 0.5s !important;
/* end single carousel*/ height: inherit !important;
padding: 5px !important;
display: block !important;
margin: auto;
.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{ .item:hover {
padding: 0px 0px; border: 1px solid #000000 !important;
} opacity: 1 !important;
.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{ .content {
border: none; position: absolute;
} bottom: 0;
background: rgba(0, 0, 0, 0.5);
/* Black background with transparency */
color: #f1f1f1;
width: 100%;
padding: 10px;
}
.table>thead>tr>th{ .content p {
border-bottom:none; font-size: 15px;
} }
.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 */ @media screen and (max-width: 992px) {
.zoom { .content {
display:inline-block; position: static;
position: relative; }
} }
/* magnifying glass icon */ @media screen and (min-width: 1440px) {
.zoom:after { /* .carousel-inner{
content:''; margin-left: -60px;
display:block; } */
width:33px; }
height:33px;
position:absolute; @media screen and (min-width: 1200px) and (max-width: 1439px) {
top:0; .carousel-inner {
right:0; margin-left: -20px;
/* background:url("{{asset('public/images/icon.png') }}"); */ }
} }
@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 { tbody#orderTableBody>tr>td {
padding: 0px !important; padding: 0px !important;
} }
.panel-design-details{
max-height: 300px;
overflow: auto;
}
</style> .panel-design-details {
max-height: 300px;
overflow: auto;
}
</style>
<div class="wrapper bg-white pb-5"> <div class="wrapper bg-white pb-5">
<div class="main__banner"> <div class="main__banner">
<div class="row"> <div class="row">
<div class="col-lg-12 text-center"> <div class="col-lg-12 text-center">
<div class="store-banner border-top"> <div class="store-banner border-top">
<img <img src="{{ config('site_config.uploads') . 'teamstore/' . $store_array[0]->ImageFolder . '/' . $store_array[0]->StoreBanner }}"
src="{{ config('site_config.uploads') . 'teamstore/' . $store_array[0]->ImageFolder . '/' . $store_array[0]->StoreBanner }}" id="storeBanner" class="shadow-sm img-fluid w-100" alt="..." />
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> </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>
<div class="col-lg-6">
<div class="product-name-display">
<h3>{{ $product_array[0]->ProductName }}</h3>
</div> </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>
<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 py-5"> <div class="row pb-5">
<div class="col-lg-12"> <div class="col-lg-6">
<h4>From the same Store</h4> <div id="demo" class="carousel slide vert" data-bs-interval="false" data-bs-ride="carousel">
</div> <div class="row no-gutters">
{{-- <div class="col-md-12"> <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> <p>...</p>
</div> --}} </div> --}}
@foreach ($store_products as $product) @foreach ($store_products as $product)
<div <div class="col-lg-2 col-md-3 col-6" v-for="index in 6" :key="index">
class="col-lg-2 col-md-3 col-6" <div class="text-center p-3">
v-for="index in 6" <a
:key="index" href="{{ url('store') . '/' . $product->StoreUrl . '/product/' . $product->ProductURL }}">
> <div class="store-logo">
<div class="text-center p-3"> <img src="{{ config('site_config.images_url') . '/' . $product->Image }}"
<a href="{{ url('store') . '/' . $product->StoreUrl . '/product/' . $product->ProductURL }}"> alt="{{ $product->ProductName }}" class="d-block border shadow-sm">
<div class="store-logo"> </div>
<img src="{{ config('site_config.images_url') . '/' . $product->Image }}" alt="{{ $product->ProductName }}" class="d-block border shadow-sm"> <div class="store-name text-truncate">{{ $product->ProductName }}</div>
</div> </a>
<div class="store-name text-truncate">{{ $product->ProductName }}</div> </div>
</a> </div>
@endforeach
</div>
</div> </div>
</div>
@endforeach
</div> </div>
</div>
</div> </div>
</div>
@endsection @endsection

View File

@@ -1952,7 +1952,7 @@
function submitFormItemDetails(){ function submitFormItemDetails(){
var data = $("#frm-item-details").serialize(); var data = $("#frm-item-details").serialize();
console.log(data) // console.log(data)
$.ajax({ $.ajax({
type : 'POST', type : 'POST',
url : "{{ url('user/store-items/update') }}", url : "{{ url('user/store-items/update') }}",

View File

@@ -144,6 +144,11 @@
</select> </select>
<span id="err_available_size"></span> <span id="err_available_size"></span>
</div> </div>
<div class="form-group">
<label>Item Quantity <small>(Optional)</small></label>
<input id="item_quantity" name="item_quantity" class="form-control" type="number" min="0" value="{{ $product_array[0]->ProductAvailableQty }}" data-error="#err-quantity" />
</div>
{{-- {{ var_dump($product_array[0]) }} --}}
<div class="form-group"> <div class="form-group">
<label>Item Privacy</label> <label>Item Privacy</label>
<select class="form-control" name="item_privacy"> <select class="form-control" name="item_privacy">