mirror of https://github.com/4xmen/xshop.git
added theme part ns card
added CardController added transport seeder fixed meta input ui bugpull/49/head
parent
148880a754
commit
01ae09b208
@ -0,0 +1,168 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\Discount;
|
||||
use App\Models\Invoice;
|
||||
use App\Models\Order;
|
||||
use App\Models\Product;
|
||||
use App\Models\Quantity;
|
||||
use App\Models\Transport;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class CardController extends Controller
|
||||
{
|
||||
public function productCardToggle(Product $product)
|
||||
{
|
||||
|
||||
$quantity = \request()->input('quantity', null);
|
||||
if (\Cookie::has('card')) {
|
||||
$cards = json_decode(\Cookie::get('card'), true);
|
||||
$qs = json_decode(\Cookie::get('q'), true);
|
||||
if (in_array($product->id, $cards)) {
|
||||
$found = false;
|
||||
foreach ($cards as $i => $card) {
|
||||
if ($card == $product->id && $qs[$i] == $quantity) {
|
||||
$found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if ($found) {
|
||||
$msg = "Product removed from card";
|
||||
unset($cards[$i]);
|
||||
unset($qs[$i]);
|
||||
} else {
|
||||
$cards[] = $product->id;
|
||||
$qs[] = $quantity;
|
||||
$msg = "Product added to card";
|
||||
}
|
||||
} else {
|
||||
$cards[] = $product->id;
|
||||
$qs[] = $quantity;
|
||||
$msg = "Product added to card";
|
||||
}
|
||||
$count = count($cards);
|
||||
\Cookie::queue('card', json_encode($cards), 2000);
|
||||
\Cookie::queue('q', json_encode($qs), 2000);
|
||||
} else {
|
||||
$count = 1;
|
||||
$msg = "Product added to card";
|
||||
\Cookie::queue('card', "[$product->id]", 2000);
|
||||
\Cookie::queue('q', "[$quantity]", 2000);
|
||||
$qs = [$quantity];
|
||||
$cards = [$product->id];
|
||||
}
|
||||
|
||||
if ($count > 0 && auth('customer')->check()) {
|
||||
$customer = auth('customer')->user();
|
||||
$customer->card = json_encode(['cards' => $cards, 'quantities' => $qs]);
|
||||
$customer->save();
|
||||
}
|
||||
|
||||
if (\request()->ajax()) {
|
||||
return success(['count' => $count], $msg);
|
||||
} else {
|
||||
return redirect()->back()->with(['message' => $msg]);
|
||||
}
|
||||
}
|
||||
|
||||
public function index()
|
||||
{
|
||||
$area = 'card';
|
||||
$title = __("Shopping card");
|
||||
$subtitle = '';
|
||||
return view('client.default-list', compact('area', 'title', 'subtitle'));
|
||||
}
|
||||
|
||||
public function check(Request $request)
|
||||
{
|
||||
|
||||
$request->validate([
|
||||
'product_id' => ['required', 'array'],
|
||||
'count' => ['required', 'array'],
|
||||
'address_id' => ['required', 'exists:addresses,id'],
|
||||
'desc' => ['nullable', 'string']
|
||||
]);
|
||||
$total = 0;
|
||||
// return $request->all();
|
||||
$inv = new Invoice();
|
||||
$inv->customer_id = auth('customer')->user()->id;
|
||||
$inv->count = array_sum($request->count);
|
||||
$inv->address_id = $request->address_id;
|
||||
$inv->desc = $request->desc;
|
||||
if ($request->has('transport_id')) {
|
||||
$request->transport_id = $request->input('transport_id');
|
||||
$t = Transport::find($request->input('transport_id'));
|
||||
$inv->transport_price = $t->price;
|
||||
$total += $t->price;
|
||||
}
|
||||
if ($request->has('discount_id')) {
|
||||
$request->discount_id = $request->input('discount_id');
|
||||
}
|
||||
|
||||
$inv->save();
|
||||
|
||||
foreach ($request->product_id as $i => $product) {
|
||||
$order = new Order();
|
||||
$order->product_id = $product;
|
||||
$order->invoice_id = $inv->id;
|
||||
$order->count = $request->count[$i];
|
||||
if ($request->quantity_id[$i] != '') {
|
||||
$order->quantity_id = $request->quantity_id[$i];
|
||||
$q = Quantity::find($request->quantity_id[$i]);
|
||||
$order->price_total = $q->price * $request->count[$i];
|
||||
$order->data = $q->data;
|
||||
|
||||
} else {
|
||||
$p = Product::find($request->product_id[$i]);
|
||||
$order->price_total = $p->price * $request->count[$i];
|
||||
}
|
||||
$total += $order->price_total;
|
||||
$order->save();
|
||||
}
|
||||
|
||||
$inv->total_price = $total;
|
||||
$inv->save();
|
||||
return [$inv,$inv->orders];
|
||||
}
|
||||
|
||||
|
||||
public static function clear()
|
||||
{
|
||||
\Cookie::expire('card');
|
||||
\Cookie::expire('q');
|
||||
return true;
|
||||
}
|
||||
|
||||
public function clearing()
|
||||
{
|
||||
self::clear();
|
||||
return __("Card cleared");
|
||||
}
|
||||
|
||||
public function discount($code)
|
||||
{
|
||||
$discount = Discount::where('code', trim($code))->where(function ($query) {
|
||||
$query->where('expire', '>=', date('Y-m-d'))
|
||||
->orWhereNull('expire');
|
||||
})->first();
|
||||
if ($discount == null) {
|
||||
return [
|
||||
'OK' => false,
|
||||
'err' => __("Discount code isn't valid."),
|
||||
];
|
||||
} else {
|
||||
if ($discount->type == 'PERCENT') {
|
||||
$human = $discount->title . '( ' . $discount->amount . '%' . ' )';
|
||||
} else {
|
||||
$human = '- ' . $discount->title . '( ' . $discount->amount . config('app.currency.symbol') . ' )';
|
||||
}
|
||||
return [
|
||||
'OK' => true,
|
||||
'msg' => __("Discount code is valid."),
|
||||
'data' => $discount,
|
||||
'human' => $human,
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Resources;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
use Illuminate\Http\Resources\Json\ResourceCollection;
|
||||
|
||||
class ProductCardCollection extends JsonResource
|
||||
{
|
||||
/**
|
||||
* Transform the resource collection into an array.
|
||||
*
|
||||
* @return array<int|string, mixed>
|
||||
*/
|
||||
public function toArray(Request $request): array
|
||||
{
|
||||
return [
|
||||
|
||||
'id'=> $this->id,
|
||||
'slug' => $this->slug,
|
||||
'name' => $this->name,
|
||||
'price' => $this->price,
|
||||
'image' => $this->imgUrl(),
|
||||
'meta' => $this->fullMeta(),
|
||||
'max' => $this->stock_quantity,
|
||||
'qz' => QunatityCollection::collection($this->quantities),
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Resources;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
use Illuminate\Http\Resources\Json\ResourceCollection;
|
||||
|
||||
class QunatityCollection extends JsonResource
|
||||
{
|
||||
/**
|
||||
* Transform the resource collection into an array.
|
||||
*
|
||||
* @return array<int|string, mixed>
|
||||
*/
|
||||
public function toArray(Request $request): array
|
||||
{
|
||||
return [
|
||||
'id' => $this->id,
|
||||
'product_name' => $this->product->name,
|
||||
'count' => $this->count,
|
||||
'data'=> json_decode($this->data),
|
||||
'meta' => $this->meta,
|
||||
'price'=> $this->price,
|
||||
'image' => $this->image,
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Resources;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Http\Resources\Json\JsonResource;
|
||||
use Illuminate\Http\Resources\Json\ResourceCollection;
|
||||
|
||||
class TransportCollection extends JsonResource
|
||||
{
|
||||
/**
|
||||
* Transform the resource collection into an array.
|
||||
*
|
||||
* @return array<int|string, mixed>
|
||||
*/
|
||||
public function toArray(Request $request): array
|
||||
{
|
||||
return [
|
||||
'id' => $this->id,
|
||||
'title' => $this->title,
|
||||
'description' => $this->description,
|
||||
'price' => $this->price,
|
||||
'is_default' => $this->is_default,
|
||||
'icon' => $this->icon,
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,555 @@
|
||||
<template>
|
||||
<div id="card">
|
||||
<ul class="steps">
|
||||
<li class="active">
|
||||
<div class="circle" @click="changeIndex(0)">
|
||||
<i class="ri-vip-diamond-line"></i>
|
||||
</div>
|
||||
Shopping card
|
||||
</li>
|
||||
<li :class="index > 0 ?'active':''">
|
||||
<div class="circle" @click="changeIndex(1)">
|
||||
<i class="ri-truck-line"></i>
|
||||
</div>
|
||||
Transport
|
||||
</li>
|
||||
<li :class="index > 1 ?'active':''">
|
||||
<div class="circle" @click="changeIndex(2)">
|
||||
<i class="ri-bank-card-2-line"></i>
|
||||
</div>
|
||||
Payment & discount
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<aside>
|
||||
<h6 class="text-center">
|
||||
Totol price:
|
||||
</h6>
|
||||
<h2 class="text-center" v-if="index == 0">
|
||||
{{ priceing(total) }}
|
||||
</h2>
|
||||
<h2 class="text-center" v-if="index == 1">
|
||||
{{ priceing(totalWithTransport) }}
|
||||
</h2>
|
||||
<h2 class="text-center" v-if="index == 2">
|
||||
{{ priceing(totalWithTransportDiscount) }}
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
<i class="ri-user-line icon"></i>
|
||||
<slot></slot>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div :class="'tab' + (index == 0?'':' hide')">
|
||||
<table class="table">
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
<th>
|
||||
#
|
||||
</th>
|
||||
<th>
|
||||
Image
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th class="text-center" style="width: 400px">
|
||||
Quantity
|
||||
</th>
|
||||
<th>
|
||||
Price
|
||||
</th>
|
||||
<th>
|
||||
Count
|
||||
</th>
|
||||
<th>
|
||||
-
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr v-for="(item,i) in items">
|
||||
<td>
|
||||
<input type="hidden" :name="`product_id[${i}]`" :value="item.id">
|
||||
{{ i + 1 }}
|
||||
</td>
|
||||
<td>
|
||||
<img :src="item.image" :alt="item.name">
|
||||
</td>
|
||||
<td>
|
||||
<a :href="this.productLink + item.slug">
|
||||
{{ item.name }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<template v-if="item.qz.length != 0">
|
||||
<template v-if="qz[i] == null">
|
||||
<q-index :i="i" :qz="item.qz" :base-price="item.price"
|
||||
:symbol="symbol"
|
||||
:on-change="changeQ" :xname="`quantity_id[${i}]`"></q-index>
|
||||
</template>
|
||||
<template v-else>
|
||||
<input type="hidden" :name="`quantity_id[${i}]`" :value="item.q.id">
|
||||
<q-preview :q="item.q"></q-preview>
|
||||
</template>
|
||||
</template>
|
||||
<span v-else>
|
||||
-
|
||||
<input type="hidden" :name="`quantity_id[${i}]`">
|
||||
</span>
|
||||
</td>
|
||||
<th>
|
||||
{{ priceing(pricez[i]) }}
|
||||
</th>
|
||||
<td>
|
||||
<quantity :max="maxz[i]" :xname="`count[${i}]`" v-model="countz[i]"></quantity>
|
||||
</td>
|
||||
<td>
|
||||
<a type="button" class="btn btn-danger btn-sm text-light"
|
||||
:href="this.cardLink + item.slug">
|
||||
<i class="ri-close-line"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="4">
|
||||
Total
|
||||
</th>
|
||||
<th colspan="4">
|
||||
{{ priceing(total) }}
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div :class="'tab' + (index == 1?'':' hide')">
|
||||
<div>
|
||||
<h5>
|
||||
Sent to:
|
||||
</h5>
|
||||
<div v-for="(adr,j) in addresses" class="addr">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" :value="adr.id" :checked="j == 0"
|
||||
name="address_id" :id="'adr'+j">
|
||||
<label class="form-check-label" :for="'adr'+j">
|
||||
{{ adr.address }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="transports.length > 0">
|
||||
<h5 class="mt-3">
|
||||
Transport:
|
||||
</h5>
|
||||
<div v-for="(trs,j) in transports" class="addr">
|
||||
<span class="float-end p-2 badge bg-primary m-2">
|
||||
{{ priceing(trs.price) }}
|
||||
</span>
|
||||
|
||||
<i :class="'float-start '+trs.icon"></i>
|
||||
<div class="form-check">
|
||||
|
||||
<input class="form-check-input" :value="trs.id" type="radio"
|
||||
v-model="transport_index" name="transport_id" :id="'t'+j">
|
||||
<label class="form-check-label" :for="'t'+j">
|
||||
{{ trs.title }}
|
||||
</label>
|
||||
<p>
|
||||
{{ trs.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="'tab' + (index == 2?'':' hide')">
|
||||
|
||||
<!-- WIP translate & discount check -->
|
||||
<h5 class="mt-1">
|
||||
Check discount
|
||||
</h5>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text"><i class="ri-percent-line"></i></span>
|
||||
<input type="text" class="form-control text-center" placeholder="Discount code" :readonly="discount != null" v-model="code">
|
||||
<button type="button" class="input-group-text btn btn-primary" @click="discountCheck">
|
||||
Check
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="discount_id != null">
|
||||
<input type="hidden" name="discount_id" :value="discount_id">
|
||||
<div class="alert alert-success">
|
||||
{{ discount_human }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>
|
||||
Extra description
|
||||
</h4>
|
||||
<textarea rows="4" class="form-control" name="desc" placeholder="Your message for this order..."></textarea>
|
||||
<hr>
|
||||
<button v-if="canPay" class="btn btn-outline-primary w-100 btn-lg">
|
||||
<i class="ri-bank-card-2-line"></i>
|
||||
Pay now
|
||||
</button>
|
||||
<div v-else class="alert alert-danger">
|
||||
Please, Login or complete information to pay
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import QIndex from "./Qindex.vue";
|
||||
import QPreview from "./Qpreview.vue";
|
||||
import quantity from "./Quantity.vue";
|
||||
|
||||
function commafy(num) {
|
||||
if (typeof num !== 'string') {
|
||||
return '';
|
||||
}
|
||||
let str = uncommafy(num.toString()).split('.');
|
||||
if (str[0].length >= 4) {
|
||||
str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
|
||||
}
|
||||
if (str[1] && str[1].length >= 4) {
|
||||
str[1] = str[1].replace(/(\d{3})/g, '$1 ');
|
||||
}
|
||||
return str.join('.');
|
||||
}
|
||||
|
||||
function uncommafy(txt) {
|
||||
return txt.split(',').join('');
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "card",
|
||||
components: {quantity, QPreview, QIndex},
|
||||
data: () => {
|
||||
return {
|
||||
countz: [], // counts
|
||||
qz: [], // qunatities
|
||||
itemz: [], // card items
|
||||
pricez: [], // price
|
||||
maxz: [],
|
||||
index: 0,
|
||||
transport_index: null,
|
||||
code: '',
|
||||
discount_id: null,
|
||||
discount_human: '',
|
||||
discount: null,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
productLink: {
|
||||
required: true,
|
||||
},
|
||||
cardLink: {
|
||||
required: true,
|
||||
},
|
||||
discountLink: {
|
||||
required: true,
|
||||
},
|
||||
items: {
|
||||
default: [],
|
||||
},
|
||||
qs: {
|
||||
default: [],
|
||||
},
|
||||
symbol: {
|
||||
default: '$',
|
||||
},
|
||||
addresses: {
|
||||
default: []
|
||||
},
|
||||
transports: {
|
||||
default: [],
|
||||
},
|
||||
canPay: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
defTransport: {
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.qz = this.qs;
|
||||
this.transport_index = this.defTransport;
|
||||
for (const item of this.items) {
|
||||
this.countz.push(1);
|
||||
this.pricez.push(item.price);
|
||||
this.itemz.push(item);
|
||||
this.maxz.push(item.max);
|
||||
}
|
||||
|
||||
// fixed price by quantity
|
||||
for (const i in this.itemz) {
|
||||
if (this.qz[i] != null) {
|
||||
for (const q of this.itemz[i].qz) {
|
||||
if (q.id == this.qz[i]) {
|
||||
this.pricez[i] = q.price;
|
||||
// fixed max for selected quantity
|
||||
this.maxz[i] = q.count;
|
||||
try {
|
||||
this.itemz[i].q = q;
|
||||
} catch (e) {
|
||||
this.itemz[i].q = {};
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
computed: {
|
||||
total() {
|
||||
let sum = 0;
|
||||
for (const i in this.pricez) {
|
||||
sum += this.pricez[i] * this.countz[i];
|
||||
}
|
||||
|
||||
return sum;
|
||||
},
|
||||
totalWithTransport() {
|
||||
let sum = 0;
|
||||
for (const i in this.pricez) {
|
||||
sum += this.pricez[i] * this.countz[i];
|
||||
}
|
||||
|
||||
let t = 0;
|
||||
for (const trs of this.transports) {
|
||||
if (trs.id == this.transport_index) {
|
||||
t = trs.price;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return sum + t;
|
||||
},
|
||||
totalWithTransportDiscount() {
|
||||
let sum = 0;
|
||||
for (const i in this.pricez) {
|
||||
sum += this.pricez[i] * this.countz[i];
|
||||
}
|
||||
|
||||
let t = 0;
|
||||
for (const trs of this.transports) {
|
||||
if (trs.id == this.transport_index) {
|
||||
t = trs.price;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (this.discount != null){
|
||||
if (this.discount.type == 'PERCENT'){
|
||||
sum = (( 100 - this.discount.amount ) * sum ) / 100;
|
||||
}else{
|
||||
sum -= this.discount.amount;
|
||||
}
|
||||
}
|
||||
return sum + t;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async discountCheck() {
|
||||
const url = this.discountLink + this.code;
|
||||
try {
|
||||
|
||||
let resp = await axios.get(url);
|
||||
|
||||
if (!resp.data.OK) {
|
||||
window.$toast.error(resp.data.err);
|
||||
} else {
|
||||
window.$toast.success(resp.data.msg);
|
||||
this.discount_id = resp.data.data.id;
|
||||
this.discount_human = resp.data.human;
|
||||
this.discount = resp.data.data;
|
||||
}
|
||||
} catch (e) {
|
||||
window.$toast.error(e.message);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
changeIndex(i) {
|
||||
this.index = i;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
changeQ(i, q) {
|
||||
// console.log(i,q,'iq');
|
||||
this.maxz[i] = q.count;
|
||||
this.pricez[i] = q.price;
|
||||
if (this.maxz[i] < this.countz[i]) {
|
||||
this.countz[i] = this.maxz[i];
|
||||
}
|
||||
},
|
||||
priceing(p) {
|
||||
if (p == null || p == undefined) {
|
||||
return '';
|
||||
}
|
||||
return commafy(p.toString()) + ' ' + this.symbol;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#card {
|
||||
|
||||
table {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--xshop-border-radius);
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
padding: 1rem;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child, &:last-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
text-align: center;
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.circle {
|
||||
transition: 500ms;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--xshop-secondary);
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
text-align: center;
|
||||
margin: 0 auto 1rem;
|
||||
background: var(--xshop-secondary);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 55px;
|
||||
color: var(--xshop-diff2);
|
||||
-webkit-text-stroke: 2px var(--xshop-secondary);
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
top: 35%;
|
||||
inset-inline-start: 0;
|
||||
height: 1px;
|
||||
background: var(--xshop-secondary);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: ' ';
|
||||
top: 35%;
|
||||
inset-inline-start: 0;
|
||||
height: 1px;
|
||||
background: var(--xshop-primary);
|
||||
position: absolute;
|
||||
width: 0;
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--xshop-primary);
|
||||
|
||||
.circle {
|
||||
background: var(--xshop-primary);
|
||||
color: var(--xshop-diff);
|
||||
border-color: var(--xshop-primary);
|
||||
|
||||
i {
|
||||
-webkit-text-stroke: 2px var(--xshop-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
background: var(--xshop-primary);
|
||||
color: var(--xshop-diff2);
|
||||
border-radius: var(--xshop-border-radius);
|
||||
padding: 1rem;
|
||||
min-height: 98%;
|
||||
text-align: center;
|
||||
|
||||
.icon {
|
||||
font-size: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.addr {
|
||||
border-radius: var(--xshop-border-radius);
|
||||
border: var(--xshop-primary) 1px solid;
|
||||
margin-bottom: 7px;
|
||||
|
||||
label {
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 45px;
|
||||
color: var(--xshop-secondary);
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
max-height: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab {
|
||||
max-height: 3000px;
|
||||
overflow-y: auto;
|
||||
transition: 300ms;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div id="qIndex">
|
||||
<button type="button" v-for="(q,i) in qz" :class="getClass(i)" @click="changeIndex(i)">
|
||||
<q-preview :q="q"></q-preview>
|
||||
{{priceing(q.price)}}
|
||||
</button>
|
||||
<input type="hidden" :name="xname" v-if="xname != null" :value="id">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QPreview from "./Qpreview.vue";
|
||||
|
||||
function commafy(num) {
|
||||
if (typeof num !== 'string') {
|
||||
return '';
|
||||
}
|
||||
let str = uncommafy(num.toString()).split('.');
|
||||
if (str[0].length >= 4) {
|
||||
str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
|
||||
}
|
||||
if (str[1] && str[1].length >= 4) {
|
||||
str[1] = str[1].replace(/(\d{3})/g, '$1 ');
|
||||
}
|
||||
return str.join('.');
|
||||
}
|
||||
|
||||
function uncommafy(txt) {
|
||||
return txt.split(',').join('');
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "qIndex",
|
||||
components: {QPreview},
|
||||
data: () => {
|
||||
return {
|
||||
index:0,
|
||||
id: null,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
qz:{
|
||||
required:[],
|
||||
},
|
||||
basePrice:{
|
||||
default:0,
|
||||
},
|
||||
symbol:{
|
||||
required: true,
|
||||
},
|
||||
onChange:{
|
||||
type: Function,
|
||||
default: function (i,q){},
|
||||
},
|
||||
i:{
|
||||
default: 0,
|
||||
type: Number,
|
||||
},
|
||||
xname:{
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
for( const i in this.qz) {
|
||||
const q = this.qz[i];
|
||||
if (q.price == this.basePrice){
|
||||
this.index = i;
|
||||
this.id = q.id;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
changeIndex(i){
|
||||
this.index = i;
|
||||
this.onChange(this.i, this.qz[i]);
|
||||
this.id = this.qz[i].id;
|
||||
},
|
||||
priceing(p) {
|
||||
if (p == null || p == undefined) {
|
||||
return '';
|
||||
}
|
||||
return commafy(p.toString()) + ' ' + this.symbol;
|
||||
},
|
||||
getClass(i){
|
||||
let cls = 'q';
|
||||
if (i == this.index){
|
||||
cls += ' selected';
|
||||
}
|
||||
|
||||
return cls;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#qIndex {
|
||||
}
|
||||
.q{
|
||||
border: 1px solid var(--xshop-secondary);
|
||||
border-radius: var(--xshop-border-radius);
|
||||
margin-bottom: 4px;
|
||||
background: transparent;
|
||||
display: block;
|
||||
color: var(--xshop-text);
|
||||
width: 100%;
|
||||
div{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
&.selected{
|
||||
background: var(--xshop-primary);
|
||||
color: var(--xshop-diff);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div id="qPreview" >
|
||||
<div v-for="meta in q.meta" class="meta" >
|
||||
<span v-if="meta.type != 'color'" class="ms-2">
|
||||
{{meta.label}}
|
||||
</span>
|
||||
<div v-html="meta.human_value" class="ms-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "qPreview",
|
||||
components: {},
|
||||
data: () => {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
q:{
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#qPreview {
|
||||
}
|
||||
|
||||
.meta{
|
||||
display: inline-flex;
|
||||
div{
|
||||
display: inline-block;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
span{
|
||||
background: var(--xshop-secondary);
|
||||
color: var(--xshop-diff2);
|
||||
border-radius: var(--xshop-border-radius) ;
|
||||
display: inline-block;
|
||||
padding: 2px 3px;
|
||||
height: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<section class='NsCard'>
|
||||
<div class="container-fluid">
|
||||
@include('components.err')
|
||||
@if(cardCount() == 0 )
|
||||
<div class="alert alert-info">
|
||||
{{__("There is nothing added to card!")}}
|
||||
</div>
|
||||
@else {{-- count 0--}}
|
||||
<form method="post" class="safe-from" >
|
||||
|
||||
<input type="hidden" class="safe-url" data-url="{{route('client.card.check')}}">
|
||||
@csrf
|
||||
<ns-card
|
||||
:items='@json(cardItems())'
|
||||
:qs='{{\Cookie::get("q")}}'
|
||||
symbol="{{config('app.currency.symbol')}}"
|
||||
@if(auth('customer')->check())
|
||||
:addresses='@json(auth('customer')->user()->addresses)'
|
||||
@endif
|
||||
card-link="{{route('client.product-card-toggle','')}}/"
|
||||
discount-link="{{route('client.card.discount','')}}/"
|
||||
product-link="{{route('client.product','')}}/"
|
||||
:transports='@json(transports())'
|
||||
:def-transport="{{defTrannsport()}}"
|
||||
:can-pay="{{!auth('customer')->check() || auth('customer')->user()->mobile == null || auth('customer')->user()->mobile == '' || auth('customer')->user()->addresses()->count() == 0?'false':'true'}}"
|
||||
>
|
||||
<br>
|
||||
@if(!auth('customer')->check())
|
||||
<a href="{{ route('client.sign-in') }}" class="btn btn-danger text-light btn-lg w-100">
|
||||
{{__("You need to sign in/up to continue")}}
|
||||
</a>
|
||||
@else
|
||||
{{__("Welcome back")}}: <strong> {{auth('customer')->user()->name}} </strong>
|
||||
@if(auth('customer')->user()->mobile == null || auth('customer')->user()->mobile == '' || auth('customer')->user()->addresses()->count() == 0)
|
||||
<a href="{{ route('client.profile') }}" class="btn btn-danger text-light btn-lg w-100">
|
||||
{{__("You need complete your information")}}
|
||||
</a>
|
||||
@endif
|
||||
@endif
|
||||
</ns-card>
|
||||
@endif {{-- count 0--}}
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "NsCard",
|
||||
"version": "1.0",
|
||||
"author": "xStack",
|
||||
"email": "xshop@xstack.ir",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"url": "https:\/\/xstack.ir",
|
||||
"author_url": "https:\/\/4xmen.ir",
|
||||
"packages": []
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
namespace Resources\Views\Segments;
|
||||
|
||||
use App\Models\Part;
|
||||
|
||||
class NsCard
|
||||
{
|
||||
public static function onAdd(Part $part = null)
|
||||
{
|
||||
|
||||
}
|
||||
public static function onRemove(Part $part = null)
|
||||
{
|
||||
|
||||
}
|
||||
public static function onMount(Part $part = null)
|
||||
{
|
||||
return $part;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
.NsCard {
|
||||
padding: 2rem 0;
|
||||
|
||||
.ri-checkbox-circle-line{
|
||||
color: green;
|
||||
}
|
||||
.ri-close-circle-line{
|
||||
color: red;
|
||||
}
|
||||
.ri-checkbox-circle-line, .ri-close-circle-line{
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Loading…
Reference in New Issue