better management of shipping and basket summary display

This commit is contained in:
ludo
2023-12-03 00:40:47 +01:00
parent 4bcfc7bc6d
commit ec509df665
26 changed files with 317 additions and 477 deletions

View File

@@ -1,6 +1,6 @@
<div class="row">
<div class="col-6">
@include('components.form.select', [
@include('components.form.select', [
'label' => 'Règlement',
'name' => 'payment_type',
'list' => $payment_types ?? [],

View File

@@ -1,54 +1,54 @@
@component('components.card', [
'id_card' => $model . '-basket',
'id_card' => $model . '-basket',
'title' => $title,
'class' => 'mb-3 addBasket ' . ($bgClass ?? null),
'classTitle' => 'mb-0',
'outline' => false,
'class' => 'mb-3 addBasket ' . ($bgClass ?? null),
'classTitle' => 'mb-0',
'outline' => false,
])
@include('components.form.select', [
'name' => 'offer_id',
'id_name' => $model . '-offer_id',
'list' => collect($data)->pluck('name', 'id')->toArray(),
'class' => 'select2 mb-2 offer_id',
])
@include('components.form.select', [
'name' => 'offer_id',
'id_name' => $model . '-offer_id',
'list' => collect($data)->pluck('name', 'id')->toArray(),
'class' => 'select2 mb-2 offer_id',
])
<div class="row">
<div class="col-5">
@include('components.form.inputs.number', [
'name' => 'quantity',
'class' => 'quantity',
'id_name' => $model . '-quantity',
'value' => 1,
])
</div>
<div class="col-7 text-right">
<span id="{{ $model }}-price" style="font-size:2em; font-weight: 600;">
{{ $data[0]['prices'][0]['price_taxed'] }}
</span>
TTC
</div>
</div>
<div class="row">
<div class="col-12">
@include('components.form.button', [
'metadata' => 'data-type=' . $model,
'class' => 'btn-success basket w-100 ' . $model,
'txt' => 'Ajouter au panier',
])
</div>
</div>
<div class="row">
<div class="col-5">
@include('components.form.inputs.number', [
'name' => 'quantity',
'class' => 'quantity',
'id_name' => $model . '-quantity',
'value' => (int) $data[0]['prices'][0]['quantity'],
'min' => $data[0]['prices'][0]['quantity'],
'step' => 1,
])
</div>
<div class="col-7 text-right">
<span id="{{ $model }}-price" style="font-size:2em; font-weight: 600;">
{{ $data[0]['prices'][0]['price_taxed'] }}
</span>
TTC
</div>
</div>
<div class="row">
<div class="col-12">
@include('components.form.button', [
'metadata' => 'data-type=' . $model,
'class' => 'btn-success basket w-100 ' . $model,
'txt' => 'Ajouter au panier',
])
</div>
</div>
@endcomponent
@push('js')
<script>
$('#{{ $model }}-quantity').change(function() {
setPrice('{{ $model }}');
});
$('#{{ $model }}-offer_id').change(function() {
setPrice('{{ $model }}');
});
</script>
<script>
$('#{{ $model }}-quantity').change(function() {
setPrice('{{ $model }}');
});
$('#{{ $model }}-offer_id').change(function() {
setPrice('{{ $model }}');
});
</script>
@endpush

View File

@@ -1,121 +1,126 @@
@extends('Shop.layout.layout', [
'title' => __('Panier'),
'title' => __('Panier'),
])
@section('content')
@if ($basket)
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="row mb-3">
<div class="col-4">
<h1>Panier</h1>
</div>
<div class="col-8">
Livraison à domicile ...<br>
Commande en ligne et livraison par voie postale. Attention certains produits ne sont pas disponibles en livraison.
Les sachets disponibles en lignes sont disponibles à la livraison et uniquement quelques plants.
</div>
</div>
@foreach ($basket as $nature => $items)
<div class="row ml-1 mb-3 p-2 bg-green-light border rounded-lg">
<div class="col-12">
<h2 style="font-size: 1.6em;" class="text-uppercase">{{ $nature }}</h2>
@foreach ($items as $item)
@include('Shop.Baskets.partials.article')
@endforeach
</div>
</div>
@endforeach
</div>
<div class="col-lg-4 col-md-12">
<x-card class='shadow'>
@include('Shop.Baskets.partials.basketTotal')
<div class="row m-3">
<div class="col-12 text-center">
<a href="{{ route('Shop.Orders.order') }}" class="btn btn-green-dark">COMMANDER</a>
</div>
</div>
</x-card>
</div>
</div>
@else
<div class="row">
<div class="col-8">
<h1>Panier</h1>
Votre panier est vide
</div>
</div>
@endif
@if ($basket)
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="row mb-3">
<div class="col-4">
<h1>Panier</h1>
</div>
<div class="col-8">
Livraison à domicile ...<br>
Commande en ligne et livraison par voie postale. Attention certains produits ne sont pas disponibles
en livraison.
Les sachets disponibles en lignes sont disponibles à la livraison et uniquement quelques plants.
</div>
</div>
@foreach ($basket as $nature => $items)
<div class="row ml-1 mb-3 p-2 bg-green-light border rounded-lg">
<div class="col-12">
<h2 style="font-size: 1.6em;" class="text-uppercase">{{ $nature }}</h2>
@foreach ($items as $item)
@include('Shop.Baskets.partials.article')
@endforeach
</div>
</div>
@endforeach
</div>
<div class="col-lg-4 col-md-12">
<x-card class='shadow'>
@include('Shop.Baskets.partials.basketTotal')
<div class="row m-3">
<div class="col-12 text-center">
<a href="{{ route('Shop.Orders.order') }}" class="btn btn-green-dark">COMMANDER</a>
</div>
</div>
</x-card>
</div>
</div>
@else
<div class="row">
<div class="col-8">
<h1>Panier</h1>
Votre panier est vide
</div>
</div>
@endif
@endsection
@push('js')
<script>
function handleBasket() {
calculateTotal();
<script>
function handleBasket() {
calculateTotal();
$('.basket-quantity').change(function() {
var offer_id = $(this).data('id');
var quantity = $(this).val();
var $row = $(this).closest('.row');
updateBasket(offer_id, quantity, function() {
calculatePrice($row);
calculateTotal();
});
});
$('.basket-quantity').change(function() {
var offer_id = $(this).data('id');
var quantity = $(this).val();
var $row = $(this).closest('.row');
updateBasket(offer_id, quantity, function() {
calculatePrice($row);
calculateTotal();
});
});
$('.basket-delete').click(function() {
var offer_id = $(this).data('id');
updateBasket(offer_id, 0, function() {
$('#basket_offer-' + offer_id).remove();
calculateTotal();
});
});
}
$('.basket-delete').click(function() {
var offer_id = $(this).data('id');
updateBasket(offer_id, 0, function() {
$('#basket_offer-' + offer_id).remove();
calculateTotal();
});
});
}
function updateBasket(offer_id, quantity, callback) {
var data = {offer_id: offer_id, quantity: quantity, update: true};
$.post("{{ route('Shop.Basket.addBasket') }}", data, callback);
}
function updateBasket(offer_id, quantity, callback) {
var data = {
offer_id: offer_id,
quantity: quantity,
update: true
};
$.post("{{ route('Shop.Basket.addBasket') }}", data, callback);
}
function calculatePrice($that) {
var quantity = $that.find('.basket-quantity').val();
var price = $that.find('.basket-price').text();
var total_price = fixNumber(quantity * price);
$that.find('.basket-total-row').html(total_price);
calculateTotal();
return total_price;
}
function calculatePrice($that) {
var quantity = $that.find('.basket-quantity').val();
var price = $that.find('.basket-price').text();
var total_price = fixNumber(quantity * price);
$that.find('.basket-total-row').html(total_price);
calculateTotal();
return total_price;
}
function calculateTotal() {
countBasket();
var total = 0;
$('.basket-total-row').each(function() {
total += parseFloat($(this).text());
});
$('#basket-total').html(fixNumber(total));
calculateTotalShipped();
refreshBasketTop();
return total;
}
function calculateTotal() {
countBasket();
var total = 0;
$('.basket-total-row').each(function() {
total += parseFloat($(this).text());
});
$('#basket-total').html(fixNumber(total));
calculateTotalShipped();
refreshBasketTop();
return total;
}
function countBasket() {
var count = 0;
$('.basket-quantity').each(function() {
count += parseInt($(this).val());
});
$('#basket-count').html(count);
return count;
}
function countBasket() {
var count = 0;
$('.basket-quantity').each(function() {
count += parseInt($(this).val());
});
$('#basket-count').html(count);
return count;
}
function calculateTotalShipped() {
var total_shipped = parseFloat($('#basket-total').html());
$('#basket-total-shipped').html(fixNumber(total_shipped));
}
function calculateTotalShipped() {
var total_shipped = parseFloat($('#basket-total').html());
$('#basket-total-shipped').html(fixNumber(total_shipped));
}
function fixNumber(value) {
return parseFloat(value).toFixed(2);
}
function fixNumber(value) {
return parseFloat(value).toFixed(2);
}
handleBasket();
</script>
@endpush
handleBasket();
</script>
@endpush

View File

@@ -4,7 +4,7 @@
</div>
<div class="col-6 text-right font-weight-bold">
<span id="basket_sale_channel">
{{ $sale_channel['name'] ?? null }}
{{ $basket['sale_channel']['name'] ?? null }}
</span>
</div>
</div>
@@ -18,7 +18,7 @@
</span>
</div>
</div>
@if ($basket['shipping'])
@if ($basket['shipping'] ?? false)
<div class="row mb-3">
<div class="col-6">
LIVRAISON

View File

@@ -54,15 +54,6 @@
$('#personal_data').collapse('show');
});
$('#delivery_mode .delivery_mode').click(function() {
var test = $(this).hasClass('at_house');
if ($(this).hasClass('at_house')) {
$('#delivery_addresses').closest('.card').removeClass('d-none');
} else {
$('#delivery_addresses').closest('.card').addClass('d-none');
}
});
function refreshBasketTotal(deliveryId, deliveryTypeId) {
options = deliveryId + '/' + deliveryTypeId;
$.get("{{ Route('Shop.Basket.getBasketTotal') }}/" + options, function(data) {

View File

@@ -3,10 +3,10 @@
<div class="row mb-3">
<div class="col-1">
@include('components.form.radios.icheck', [
'name' => 'address_id',
'name' => $prefix . '_address_id',
'val' => $address['id'],
'id' => 'address_' . $address['id'],
'value' => count($addresses) === 1 ? $address['id'] : false,
'id' => $prefix . '_address_' . $address['id'],
'value' => $address['priority'] || count($addresses) === 1 ? $address['id'] : false,
])
</div>
<div class="col-11">

View File

@@ -24,12 +24,21 @@ ci-contre
@push('js')
<script>
$('.delivery_mode').click(function() {
var deliveryTypeId = $(this).val();
var deliveryId = $('input[name=delivery_id]').val()
console.log(deliveryId);
console.log(deliveryTypeId);
refreshBasketTotal(deliveryId, deliveryTypeId)
});
function handleDeliveries() {
$('#delivery_mode input.delivery_mode').change(function() {
if ($(this).hasClass('at_house')) {
$('#delivery_addresses').closest('.card').removeClass('d-none');
var deliveryTypeId = $('input[name=delivery_type_id]:checked').val()
} else {
$('#delivery_addresses').closest('.card').addClass('d-none');
}
var deliveryId = $(this).val();
console.log(deliveryId);
console.log(deliveryTypeId);
refreshBasketTotal(deliveryId, deliveryTypeId);
});
}
handleDeliveries();
</script>
@endpush

View File

@@ -2,6 +2,7 @@
<x-layout.collapse id="invoice_addresses" title="Adresse de facturation" class="rounded-lg mb-3" uncollapsed=true>
@include('Shop.Orders.partials.addresses', [
'addresses' => $customer['invoice_addresses'] ?? false,
'prefix' => 'invoice',
])
</x-layout.collapse>
@@ -13,6 +14,7 @@
uncollapsed=true>
@include('Shop.Orders.partials.addresses', [
'addresses' => $customer['delivery_addresses'] ?? false,
'prefix' => 'delivery',
])
@include('Shop.Orders.partials.shipping')
</x-layout.collapse>

View File

@@ -30,12 +30,15 @@
@push('js')
<script>
$('.delivery_type').click(function() {
var deliveryId = $(this).val();
var deliveryTypeId = $('input[name=delivery_type_id]').val()
console.log(deliveryId);
console.log(deliveryTypeId);
refreshBasketTotal(deliveryId, deliveryTypeId);
});
function handleDeliveryTypes() {
$('input.delivery_type').change(function() {
var deliveryTypeId = $(this).val();
var deliveryId = $('input[name=delivery_id]').val()
console.log(deliveryId);
console.log(deliveryTypeId);
refreshBasketTotal(deliveryId, deliveryTypeId);
});
}
handleDeliveryTypes();
</script>
@endpush

View File

@@ -1,4 +1,4 @@
<div class="icheck-{{ $color ?? 'success' }} {{ $class ?? '' }}">
@include('components.form.radio')
<label class="control-label light" for="{{ $id_name ?? $id ?? $name }}">{{ $label ?? '' }}</label>
</div>
<label class="control-label light" for="{{ $id_name ?? ($id ?? $name) }}">{{ $label ?? '' }}</label>
</div>