Add variations, slider, fix cart ...

This commit is contained in:
Ludovic CANDELLIER
2022-03-21 21:52:12 +01:00
parent 0eaa11b2a9
commit ddc5f2664c
27 changed files with 438 additions and 81 deletions

View File

@@ -1,7 +1,7 @@
<div class="row">
<div class="col-9">
<div class="row mb-3">
<div class="col-6">
<div class="col-5">
{{ Form::label('name', 'Nom') }}
@include('components.form.input', ['name' => 'name', 'value' => $category['name'] ?? null, 'required' => true])
</div>
@@ -16,6 +16,10 @@
'class' => 'select2',
])
</div>
<div class="col-1 text-center">
{{ Form::label('homepage', 'Accueil') }}<br/>
@include('components.form.toggle', ['name' => 'homepage', 'value' => $category['homepage'] ?? null])
</div>
<div class="col-1 text-right">
{{ Form::label('visible', 'Visible') }}<br/>
@include('components.form.toggle', ['name' => 'visible', 'value' => $category['visible'] ?? null])

View File

@@ -0,0 +1,57 @@
@if ($article['offers']['semences'] ?? false)
@include('Shop.Articles.partials.addBasket', [
'data' => $article['offers']['semences'],
'title' => 'Semence',
'model' => 'semences',
])
@endif
@if ($article['offers']['plants'] ?? false)
@include('Shop.Articles.partials.addBasket', [
'data' => $article['offers']['plants'],
'title' => 'Plant',
'model' => 'plants',
])
@endif
@if ($article['offers']['legumes'] ?? false)
@include('Shop.Articles.partials.addBasket', [
'data' => $article['offers']['legumes'],
'title' => 'Légume',
'model' => 'legumes',
])
@endif
@push('js')
<script>
$('.basket').click(function() {
var type = $(this).data('type');
var offer_id = $('#' + type + '-offer_id').find('option:selected').val();
var quantity = $('#' + type + '-quantity').val();
var data = {
'offer_id': offer_id,
'quantity': quantity,
};
$.post('{{ route("Shop.Basket.addBasket") }}', data, function() {
console.log('ici');
});
console.log(type);
console.log(offer_id);
console.log(quantity);
console.log(data);
});
function setPrice(model) {
var offer_id = $('#' + model + '-offer_id').find('option:selected').val();
var quantity = $('#' + model + '-quantity').val();
var data = {
'offer_id': offer_id,
'quantity': quantity,
};
$.post('{{ route("Shop.Basket.getPrice") }}', data, function(data) {
$('#' + model + '-price').html(data);
});
}
</script>
@endpush

View File

@@ -0,0 +1,51 @@
@component('components.card', [
'id_card' => $model . '-basket',
'title' => $title,
'class' => 'mb-3',
])
@include('components.form.select', [
'name' => 'offer_id',
'id_name' => $model . '-offer_id',
'list' => collect($data)->pluck('name', 'id')->toArray(),
'class' => 'select2 mb-2',
])
<div class="row">
<div class="col-4">
@include('components.form.inputs.number', [
'name' => 'quantity',
'id_name' => $model . '-quantity',
'value' => 1,
])
</div>
<div class="col-8 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>
@endpush

View File

@@ -4,56 +4,19 @@
@section('content')
<div class="row">
<div class="col-1">
<div class="col-12">
<h1>{{ $article['name'] }}</h1>
</div>
<div class="col-4">
</div>
<div class="row">
<div class="col-5">
{!! $article['image_big'] !!}
</div>
<div class="col-4">
<h1>{{ $article['name'] }}</h1>
{!! $article['description'] !!}
</div>
<div class="col-3">
@if ($article['offers']['semences'] ?? false)
@component('components.card', [
'title' => 'Semence',
'class' => 'mb-3',
])
{{ $article['offers']['semences']['name'] }}<br>
{{ $article['offers']['semences']['prices'][0]['price_taxed'] }}<br>
@include('components.form.button', [
'class' => 'btn-success basket semences',
'txt' => 'Ajouter au panier',
])
@endcomponent
@endif
@if ($article['offers']['plants'] ?? false)
@component('components.card', [
'title' => 'Plant',
'class' => 'mb-3',
])
{{ $article['offers']['plants']['name'] }}<br>
{{ $article['offers']['plants']['prices'][0]['price_taxed'] }}<br>
@include('components.form.button', [
'class' => 'btn-success basket plants',
'txt' => 'Ajouter au panier',
])
@endcomponent
@endif
@if ($article['offers']['legumes'] ?? false)
@component('components.card', [
'title' => 'Légume',
'class' => 'mb-3',
])
@include('components.form.button', [
'class' => 'btn-success basket legumes',
'txt' => 'Ajouter au panier',
])
@endcomponent
@endif
@include('Shop.Articles.partials.ArticleAddBasket')
</div>
</div>
@endsection

View File

@@ -0,0 +1,31 @@
<div class="mb-3 bg-light">
<div class="row">
<div class="col-6">
<h1 style="font-size: 2em;">{{ $shelve['name'] }}</h1>
</div>
<div class="col-6 text-right">
<a href="">Découvrir la sélection</a>
<a href="">Tout voir</a>
</div>
</div>
<div class="row shelve_slider_{{ $shelve['id'] }}">
@foreach ($shelve['articles'] as $name => $article)
<div class="text-center pr-2 pl-2">
<a href="{{ route('Shop.Articles.show', ['id' => $article['id']]) }}">
<img data-lazy="{{ App\Repositories\Shop\Articles::getPreviewSrc($article['image'] ?? false) }}" class="d-block w-100" alt="{{ $name }}"/>
{{ $name }}
</a>
</div>
@endforeach
</div>
</div>
@push('js')
<script>
$('.shelve_slider_{{ $shelve['id'] }}').slick({
lazyLoad: 'ondemand',
slidesToShow: 6,
slidesToScroll: 1
});
</script>
@endpush

View File

@@ -0,0 +1,18 @@
<div id="carousel_shelve_{{ $shelve['id'] ?? false }}" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@foreach ($shelve['articles'] as $article)
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
{{ $article['name'] }}
</div>
@endforeach
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

View File

@@ -6,11 +6,11 @@
@include('Shop.Tags.partials.filter')
<div class="row">
<div class="col-12">
@if ($display_by_rows ?? false)
@include('Shop.layout.partials.category_articles_rows')
@else
@include('Shop.layout.partials.category_articles')
@endif
@foreach ($shelves as $shelve)
@include('Shop.Homepage.partials.sliderByShelve')
@endforeach
</div>
</div>
@endsection
@endsection
@include('load.slick')

View File

@@ -1,4 +1,4 @@
<div class="card {{ $class ?? 'mb-0' }} {{ isset($tabs) ? ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'card-outline-tabs' : 'card-tabs' : ''}} {{ ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'card-outline' : '' }} card-{{ $color ?? config('boilerplate.theme.card.default_color', 'info') }}">
<div @isset($id_card) id="{{ $id_card }}" @endisset class="card {{ $class ?? 'mb-0' }} {{ isset($tabs) ? ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'card-outline-tabs' : 'card-tabs' : ''}} {{ ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'card-outline' : '' }} card-{{ $color ?? config('boilerplate.theme.card.default_color', 'info') }}">
@if($title ?? $header ?? false)
<div class="card-header {{ isset($tabs) ? ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'p-0' : 'p-0 pt-1' : '' }} border-bottom-0">
@isset($header)

View File

@@ -1,4 +1,8 @@
<button type="{{ $type ?? 'button' }}" class="btn {{ $class ?? ''}}" @if (isset($id)) id="{{ $id }}"@endif>
<button type="{{ $type ?? 'button' }}" class="btn {{ $class ?? ''}}"
@if (isset($id)) id="{{ $id }}"@endif
@if (isset($data_id)) data-id="{{ $data_id }}"@endif
{{ $metadata ?? null }}
>
@if ($icon ?? false)<i class="fa fa-fw {{ $icon ?? '' }}"></i>@endif
{{ $txt ?? '' }}
</button>

View File

@@ -1,10 +1,10 @@
@if(!defined('LOAD_SLICKJS'))
@push('css')
<link rel="stylesheet" type="text/css" href="{{ asset('/assets/plugins/slick/slick.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('/assets/plugins/slick/slick-theme.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('/assets/plugins/slick/slick.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{ asset('/assets/plugins/slick/slick-theme.css') }}"/>
@endpush
@push('scripts')
<script type="text/javascript" src="{{ asset('/assets/plugins/slick/slick.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/assets/plugins/slick/slick.min.js') }}"></script>
@endpush
@php(define('LOAD_SLICKJS', true))
@endif