{% extends base ~"/base.html.twig" %}
{% if app.request.session.get('shipping') %}
{% set delivery = app.request.session.get('shipping') %}
{% endif %}
{% block title %}{{'Cart'|trans}}
{% endblock %}
{% block main %}
<main class="main">
<!-- End .page-header -->
<nav aria-label="breadcrumb" class="breadcrumb-nav">
<div class="container">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{{ path('home') }}">{{'Home'|trans}}</a>
</li>
<li class="breadcrumb-item">
<a href="{{ path('articles') }}">{{'Shop'|trans}}</a>
</li>
<li class="breadcrumb-item active" aria-current="page">{{'Shopping Cart'|trans}}</li>
</ol>
</div>
<!-- End .container -->
</nav>
<!-- End .breadcrumb-nav -->
<div class="page-content">
<div class="cart">
<div class="container">
{% include "includes/_alerte.html.twig" %}
{# {% if app.request.session.get('panier') %} #}
<div class="row">
<div class="col-lg-9">
{% if app.request.session.get('panier') %}
<form class="form-row" action="" method="post">
<table class="table table-cart table-mobile">
<thead>
<tr>
<th>{{'Product'|trans}}</th>
{# <th>{{'Price'|trans}}</th> #}
<th>{{'Quantity'|trans}}</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td class="product-col" style="width:45%">
<div class="product">
<figure class="product-media">
<a href="#">
{% for img in item.article.images|slice(0,1) %}
<img src="{{ asset('img/article/' ~ img.name) }}" alt="{{ item.article.title }}">
{% else %}
<img src="{{ asset('img/vide.png') }}"
alt="{{ item.article.title }}">
{% endfor %}
</a>
</figure>
<h3 class="product-title">
<a href="#">{{ item.article.title }}</a> <br>
{% if item.article.reduction > 0 %}
<span class="new-price">{{ item.article.newPrice| number_format(0,'.','
') ~ ' ' ~ site.current_name }}
</span>
{# <span class="old-price">{{ item.article.formatterPrice }}</span> #}
{% else %}
<span class="new-price">{{ item.article.newPrice| number_format(0,'.','
') ~ ' ' ~ site.current_name }}
</span>
{% endif %}
</h3>
<!-- End .product-title -->
</div>
<!-- End .product -->
<small id="helpId" class="text-muted">En Stock:
{{ item.article.quantity }}
</small>
</td>
{# <td class="price-col">
{% if item.article.reduction > 0 %}
<span class="new-price">{{ item.article.newPrice| number_format(0,'.',' ') }}
</span>
<span class="old-price">{{ item.article.formatterPrice }}</span>
{% else %}
<span class="new-price">{{ item.article.newPrice| number_format(0,'.',' ') }}
</span>
{% endif %}
{{ site.current}}
</td> #}
<td class="quantity-col">
{# <form class="form-row" action="" method="post"> #}
<div class="form-group col-md-12">
<div class="row">
<div class="col-md-7 col-7">
<input type="hidden" name="article_id[]"
value="{{ item.article.id }}">
<input type="number" class="form-control" min="1"
max="{{ item.article.quantity }}" name="qty[]"
value="{{ item.quantite }}">
</div>
{# <div class="col-5 col-md-5">
<button type="submit" title="Appliquer"
class="text-center btn-success mt-1">
<i class="icon-refresh"></i>
</button>
</div> #}
</div>
</div>
{# </form> #}
</td>
<td class="total-col">{{ (item.article.newPrice * item.quantite) |
number_format(0,'.',' ') ~ ' ' ~ site.current_name}}
</td>
<td class="remove-col">
<a href="{{ path('cart_delete',{id:item.article.id}) }}" class="btn-remove">
<i class="icon-close text-danger"></i>
</a>
</td>
</tr>
</tbody>
</tr>
{% endfor %}
</tbody>
</table>
<div class="cart-bottom">
{# <div class="cart-discount">
<form action="#">
<div class="input-group">
<input type="text" class="form-control" required="" placeholder="coupon code">
<div class="input-group-append">
<button class="btn btn-outline-primary-2" type="submit"><i class="icon-long-arrow-right"></i></button>
</div><!-- .End .input-group-append -->
</div><!-- End .input-group -->
</form>
</div><!-- End .cart-discount --> #}
<button href="#" type="submit" class="btn btn-outline-dark-2"><span>Mettre à jour le panier</span><i class="icon-refresh"></i></button>
</div>
</form>
{% else %}
<div class="">
<div class="card-body text-center">
<span class="btn bg-primary btn-primary p-5 rounded-circle">
<i class="icon-shopping-cart" style="font-size:7rem"></i>
</span>
<h3>{{'Empty cart'|trans }}</h3>
<p>Ajouter au moins un article au panier</p>
<a href="{{ path('articles') }}" class="btn btn-primary mt-2 ">Tous nos
produits</a>
</div>
</div>
{% endif %}
</div>
<!-- End .col-lg-9 -->
{% if items|length > 0 %}
<aside class="col-lg-3">
<form action="{{ path('order_client_new') }}" id="form_order_client_new" method="post">
<div class="summary summary-cart">
<h3 class="summary-title">{{'Cart Total'|trans}}</h3>
<!-- End .summary-title -->
<div class="row">
<div class="col-md-12">
<p class="h6 mt-3">Lieu de livraison</p>
{# {% if is_granted('ROLE_CLIENT') %} #}
<div class="shipping_box">
{# Selection des pays #}
{# {% include base ~ '/cart/ajax/_select_country.html.twig' %} #}
{# Selection un pays #}
{% include base ~ '/cart/ajax/_select_city.html.twig' %}
{# Selection des ville en fonction des pays #}
{% include base ~ '/cart/ajax/_select_street.html.twig'%}
<div class="">
<div id="loader-street-amount" class="text-center loader">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
<div class="js-amount">
{# {% if delivery is defined %}
<p>Montant de la livraison:</p>
<p class="text-center">
<span class="text-danger font-weight-bold">
{{ (delivery is defined) ? delivery.shippingAmount.amount|number_format(2,'.',' ') : '' }}
{{ site.current_name }}
</span>
</p>
{% endif %} #}
</div>
</div>
</div>
{# {% else %} #}
{# {% endif %} #}
</div>
<div class="col-lg-12">
<p class="h6 mt-3">Payement à la livraison</p>
</div>
</div>
<table class="table table-summary">
<tbody>
<tr class="summary-subtotal">
<td>{{'Subtotal'|trans}}:</td>
<td style="min-width:max-content">
{{ total|price_format ~ ' ' ~ site.current_name }}
</td>
</tr>
<tr class="summary-subtotal">
<td style="min-width:max-content">Livraison:</td>
<td><span class="montant-livraison">Non définie</span></td>
</tr>
<!-- End .summary-shipping-estimate -->
<tr class="summary-total">
<td>Total:</td>
<td>
<span class="text-danger total">
{{ (total)|price_format ~ site.current_name }}
</span>
</td>
</tr>
<!-- End .summary-total -->
</tbody>
</table>
<!-- End .table table-summary -->
{% if app.request.session.get('panier') %}
<button type="submit" id="btn-submit-order"
class="btn btn-outline-primary-2 btn-order btn-block">COMMANDER</button>
{% endif %}
{# <a href="{{ path('client_payment_stripe') }}"
class="btn btn-outline-primary-2 btn-order btn-block">PAYER</a> #}
</div>
<!-- End .summary -->
</form>
<a href="{{ path('articles') }}" class="btn btn-outline-dark-2 btn-block mb-3">
<span>CONTINUEZ VOS COURSES</span>
<i class="icon-refresh"></i>
</a>
</aside>
<!-- End .col-lg-3 -->
{% endif %}
</div>
<!-- End .row -->
{# {% endif %} #}
</div>
<!-- End .container -->
</div>
<!-- End .cart -->
</div><!-- End .page-content -->
</main>{% endblock %}
{% block javascripts %}
{% if not is_granted('ROLE_CLIENT') %}
<script>
$(document).ready(function () {
$(document).on('click', '#btn-submit-order', function (e) {
e.preventDefault()
Swal.fire({
title: 'Oups !',
text: 'Veillez vous connecter ou creer un compte.',
icon: 'info',
confirmButtonText: 'Se connecter ou creer un compte',
}).then((result) => {
$('#signin-modal').modal('show')
})
})
})
</script>
{% else %}
<script>
$(document).ready(function () {
$(document).on('click', '#btn-submit-order', function (e) {
e.preventDefault()
if ($('#streets').val() == '0') {
Swal.fire(
'Oups !',
'Choississez un lieu de livraison',
'warning'
)
return
}
Swal.fire({
title: 'Etes vous sur ?',
text: 'Vous etes sur le point de confirmer une commande.',
icon: 'question',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: 'Non',
confirmButtonText: 'CONFIRMER',
}).then((result) => {
if (result.isConfirmed) {
$('#form_order_client_new').submit()
}
})
})
})
</script>
{% endif %}
<script>
$(document).ready(function () {
function total(val = 0) {
let total = "{{ total }}" + val;
return total
}
// $('#js-select-city').hide()
// $('#js-select-street').hide()
$(document).on('change','#select-country',function(){
//on recupere l'id de la ville
let value = $(this).val()
// alert(value)
$.ajax({
url: "{{ path('client_shipping') }}",
method: 'POST',
dataType: 'json',
data: {
id_country: value,
},
beforeSend: function () {
// $('#loader-select-country').show()
// $('#js-select-country').hide()
$('#js-select-street').hide()
$('#js-select-city').hide()
$('.js-amount').hide()
},
success: function (data) {
console.log(data)
// $('#loader-select-country').hide()
// $('.select-country').remove()
$('#js-select-city').html(data.response);
// $('#js-select-country').show()
$('#js-select-city').show()
$('#loader-select-city').hide()
}
}) // ./ajax
})
$(document).on('change', '#select-city', function () {
//on recupere l'id de la ville
let value = $(this).val()
// on envoie avec post
$.ajax({
url: "{{ path('client_shipping') }}",
method: 'POST',
dataType: 'json',
data: {
id_city: value,
},
beforeSend: function () {
$('#loader-select-city').show()
$('#js-select-city').hide()
$('.js-amount').hide()
},
success: function (data) {
$('#loader-select-city').hide()
// $('.select-street').remove()
$('#js-select-street').html(data.response);
$('#js-select-city').show()
$('#js-select-street').show()
}
}) // ./ajax
})
$(document).on('change', '#streets', function () {
let id = $(this).val()
$.ajax({
url: "{{ path('client_shipping_amount') }}",
method: "POST",
dataType: 'json',
data: {
id_street: id,
total: "{{ total }}"
},
beforeSend: function () {
$('#loader-street-amount').show()
$('.js-amount').hide()
},
success: function (data) {
$('.js-amount').html(data.response).show()
$('.montant-livraison').text(data.amount)
$('.total').text(data.total)
$('#loader-street-amount').hide()
$('.total').text(data.total)
$('.js-show-amount').text(data.amount2)
console.log(data);
}
})
})
})
</script>
{% endblock %}