{% extends 'base.html.twig' %}
{% block title %}
{{ parent() }} | {{ product.nom }}
{% endblock title %}
{% block stylesheets %}
<meta name="keywords" content="{{ product.nom }}">
<meta content="" name="keywords">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ company_name }}">
<link rel="icon" type="image/png" href="{{ asset('image/favicon.ico') }}">
{#<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">#}
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
{#<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> #}
<link rel="manifest" href="{{ asset('ecommerce/site.webmanifest') }}">
<link rel="mask-icon" color="#fe6a6a" href="safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<!-- Vendor Styles including: Font Icons, Plugins, etc.-->
<link rel="stylesheet" media="screen" href="{{ asset('ecommerce/css/simplebar.min.css') }}"/>
<link rel="stylesheet" media="screen" href="{{ asset('ecommerce/css/tiny-slider.css') }}"/>
<link rel="stylesheet" media="screen" href="{{ asset('ecommerce/css/drift-basic.min.css') }}"/>
<link rel="stylesheet" media="screen" href="{{ asset('ecommerce/css/lightgallery.min.css') }}"/>
<!-- Main Theme Styles + Bootstrap-->
<link rel="stylesheet" media="screen" href="{{ asset('ecommerce/css/theme.min.css') }}">
<link href="{{ asset('framework/slick/slick.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('framework/slick/slick-theme.css') }}" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.css" integrity="sha512-oe8OpYjBaDWPt2VmSFR+qYOdnTjeV9QPLJUeqZyprDEQvQLJ9C5PCFclxwNuvb/GQgQngdCXzKSFltuHD3eCxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="{{ asset('css/slide.css') }}" />
<style>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text-avis{
font-size: 15px;
padding: 8px 12px;
bottom: 8px;
height: 300px;
width: 80%;
margin: auto;
text-align: center;
vertical-align: center;
border: solid 2px #FFDF52 ;
border-radius:10px;
background: rgba(254, 242, 180, 0.5);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.image-slide{
display: block;
margin-left: auto;
margin-right: auto;
}
.btn-voir-plus{
display: block;
margin-left: auto;
margin-right: auto;
width: 10%;
}
.btn-voir-tous-avis{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/* Style the Image Used to Trigger the Modal */
.myImg {
display: inline;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
width: 300px;
height: 150px;
}
.bloc-image {
float: left;
padding: 5px;
margin: 10px;
}
/* Clear floats after image containers */
.row-image::after {
content: "";
clear: both;
display: table;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.treize{
font-size: 15px;
color: #000;
}
.autoplay-slide {
}
.slick-prev:before,
.slick-next:before {
color: black;
}
</style>
{% endblock stylesheets %}
{% block body %}
{% block property_search %}
{% endblock property_search %}
<div class="page-title-overlap bg-dark pt-4">
<div class="container d-lg-flex justify-content-between py-2 py-lg-3">
<div class="order-lg-2 mb-3 mb-lg-0 pt-lg-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-light flex-lg-nowrap justify-content-center justify-content-lg-start">
<li class="breadcrumb-item"><a class="text-nowrap" href="{{ path('home') }}"><i class="czi-home"></i>Home</a></li>
<li class="breadcrumb-item text-nowrap"><a href="#">Shop</a>
</li>
<li class="breadcrumb-item text-nowrap active" aria-current="page">{{ product.nom }}</li>
</ol>
</nav>
</div>
<div class="order-lg-1 pr-lg-4 text-center text-lg-left">
<h1 class="h3 text-light mb-0">{{ product.nom }}</h1>
</div>
</div>
</div>
<div class="container">
<!-- Gallery + details-->
<div class="bg-light box-shadow-lg rounded-lg px-4 py-3 mb-5">
<div class="px-lg-3">
<div class="row">
<!-- Product gallery-->
<div class="col-lg-7 pr-lg-0 pt-lg-4">
<div class="cz-product-gallery">
<div class="cz-preview order-sm-2">
<div class="cz-preview-item active" id="first"><img class="cz-image-zoom" src="{{ asset(product.imagePrincipale.url) }}" data-zoom="{{ product.imagePrincipale.url }}" alt="{{ product.nom }}">
<div class="cz-image-zoom-pane"></div>
</div>
{% if product.photos is not empty %}
{% for photo in product.photos %}
<div class="cz-preview-item" id="second{{ photo.id }}"><img class="cz-image-zoom" src="{{ asset(photo.url) }}" data-zoom="{{ photo.url }}" alt="{{ product.nom }}">
<div class="cz-image-zoom-pane"></div>
</div>
{% endfor %}
{% endif %}
</div>
<div class="cz-thumblist order-sm-1">
{% if product.imagePrincipale is not null %}
<a class="cz-thumblist-item active" href="#first">
<img src="{{ asset(product.imagePrincipale.url) }}" alt="{{ product.nom }}"></a>
{% endif %}
{% if product.photos is not empty %}
{% for photo in product.photos %}
<a class="cz-thumblist-item" href="#second{{ photo.id }}"><img src="{{ asset(photo.url) }}" alt="{{ product.nom }}"></a>
{% endfor %}
{% endif %}
</div>
</div>
</div>
<!-- Product details-->
<div class="col-lg-5 pt-4 pt-lg-0">
<div class="product-details ml-auto pb-3">
<div class="d-flex justify-content-between align-items-center mb-2"><a href="#reviews" data-scroll>
<div class="star-rating"><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star"></i>
</div><span class="d-inline-block font-size-sm text-body align-middle mt-1 ml-1">{{ reviewNumber}} Avis</span></a>
<button class="btn-wishlist mr-0 mr-lg-n3" type="button" data-toggle="tooltip" title="Add to wishlist"><i class="czi-heart"></i></button>
</div>
<div class="mb-3"><span class="h3 font-weight-normal text-accent formated-number mr-1">{{ product.price }}</span>{{ devise }}
<del class="text-muted text-accent formated-number font-size-lg mr-3">{{ product.oldPrice }}</del>{{ devise }}<span class="badge badge-danger badge-shadow align-middle mt-n2">Sale</span>
</div>
<div class="position-relative mr-n4 mb-3">
{% if product.stockDisponible > 0 %}
<div class="product-badge product-available mt-n1"><i class="czi-security-check"></i>Produit disponible</div>
{% else %}
<div class="card-body card-body-hidden"><a class="btn btn-secondary btn-sm btn-block mb-2">En rupture de stock</a>
</div>
{% endif %}
</div>
{% if product.stockDisponible > 0 %}
<form action="{{ path('add_to_cart') }}" class="mb-grid-gutter" method="post">
<div class="form-group">
<div class="d-flex justify-content-between align-items-center pb-1">
</div>
</div>
<div class="form-group d-flex align-items-center">
<select name="quantity" class="custom-select mr-3" style="width: 5rem;">
{% for i in range(1, product.stockDisponible) %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
<input type="hidden" name="product" value="{{ product.id }}" />
</div>
<button class="btnAddToCart btn btn-primary btn-shadow btn-block" type="submit"><i class="czi-cart font-size-lg mr-2"></i>Ajouter au panier</button>
</form>
{% endif %}
<!-- Product panels-->
<div class="accordion mb-4" id="productPanels">
<div class="card">
<div class="card-header">
<h3 class="accordion-heading"><a href="#productInfo" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="productInfo"><i class="czi-announcement text-muted font-size-lg align-middle mt-n1 mr-2"></i>Product info<span class="accordion-indicator"></span></a></h3>
</div>
<div class="collapse show" id="productInfo" data-parent="#productPanels">
<div class="card-body">
<h6 class="font-size-sm mb-2">Petite info</h6>
{{ product.petiteInfo }}
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="accordion-heading"><a class="collapsed" href="#shippingOptions" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="shippingOptions"><i class="czi-delivery text-muted lead align-middle mt-n1 mr-2"></i>Option de transport<span class="accordion-indicator"></span></a></h3>
</div>
<div class="collapse" id="shippingOptions" data-parent="#productPanels">
<div class="card-body font-size-sm">
{% for shippingMethod in shippingMethods %}
<div class="d-flex justify-content-between border-bottom pb-2">
<div>
<div class="font-weight-semibold text-dark">{{ shippingMethod.nom }}</div>
<div class="font-size-sm text-muted">{{ shippingMethod.tempsDeLivraison }}</div>
</div>
<div>{{ shippingMethod.fraisDeLivraison }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<!-- Sharing-->
<h6 class="d-inline-block align-middle font-size-base my-2 mr-2">Share:</h6><a class="share-btn sb-twitter mr-2 my-2" href="#"><i class="czi-twitter"></i>Twitter</a><a class="share-btn sb-instagram mr-2 my-2" href="#"><i class="czi-instagram"></i>Instagram</a><a class="share-btn sb-facebook my-2" href="#"><i class="czi-facebook"></i>Facebook</a>
</div>
</div>
</div>
</div>
</div>
<!-- Product description section 1-->
<div class="row align-items-center py-md-3">
<div class="col-md-8">
{{ product.description | raw }}
</div>
</div>
<!-- Reviews-->
<div class="border-top border-bottom my-lg-3 py-5">
<div class="container pt-md-2" id="reviews">
<div class="assie-card">
<div class="assie-card-body">
<div class="row pb-3">
<div class="col-lg-4 col-md-5">
<h2 class="h3 mb-4">{{ reviewNumber }} Avis</h2>
<div class="star-rating mr-2">
{% for i in range(1, 5) %}
{% if i <= moyenneRating %}
<i class="czi-star-filled font-size-sm text-accent mr-1"></i>
{% else %}
<i class="czi-star font-size-sm text-muted mr-1"></i>
{% endif %}
{% endfor %}
</div><span class="d-inline-block align-middle">{{ moyenneRating }} Overall rating</span>
<p class="pt-3 font-size-sm text-muted">{{ recommandationNumber }} sur {{ reviewNumber }}<br>Client(s) recommand ce produit</p>
</div>
<div class="col-lg-8 col-md-7">
<div class="d-flex align-items-center mb-2">
<div class="text-nowrap mr-3"><span class="d-inline-block align-middle text-muted">5</span><i class="czi-star-filled font-size-xs ml-1"></i></div>
<div class="w-100">
<div class="progress" style="height: 4px;">
<div class="progress-bar bg-success" role="progressbar" style="width: {{ fiveStar.pourcentage }}%;" aria-valuenow="{{ fiveStar.pourcentage }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div><span class="text-muted ml-3">{{ fiveStar.number }}</span>
</div>
<div class="d-flex align-items-center mb-2">
<div class="text-nowrap mr-3"><span class="d-inline-block align-middle text-muted">4</span><i class="czi-star-filled font-size-xs ml-1"></i></div>
<div class="w-100">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: {{ fourStar.pourcentage }}%; background-color: #a7e453;" aria-valuenow="{{ fourStar.pourcentage }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div><span class="text-muted ml-3">{{ fourStar.number }}</span>
</div>
<div class="d-flex align-items-center mb-2">
<div class="text-nowrap mr-3"><span class="d-inline-block align-middle text-muted">3</span><i class="czi-star-filled font-size-xs ml-1"></i></div>
<div class="w-100">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: {{ threeStar.pourcentage }}%; background-color: #ffda75;" aria-valuenow="{{ threeStar.pourcentage }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div><span class="text-muted ml-3">{{ threeStar.number }}</span>
</div>
<div class="d-flex align-items-center mb-2">
<div class="text-nowrap mr-3"><span class="d-inline-block align-middle text-muted">2</span><i class="czi-star-filled font-size-xs ml-1"></i></div>
<div class="w-100">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: {{ twoStar.pourcentage }}%; background-color: #fea569;" aria-valuenow="{{ twoStar.pourcentage }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div><span class="text-muted ml-3">{{ twoStar.number }}</span>
</div>
<div class="d-flex align-items-center">
<div class="text-nowrap mr-3"><span class="d-inline-block align-middle text-muted">1</span><i class="czi-star-filled font-size-xs ml-1"></i></div>
<div class="w-100">
<div class="progress" style="height: 4px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: {{ oneStar.number }}%;" aria-valuenow="{{ oneStar.number }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div><span class="text-muted ml-3">{{ oneStar.number }}</span>
</div>
</div>
</div>
</div>
</div>
<hr class="mt-4 pb-4 mb-3">
<div class="row">
<!-- Reviews list-->
<div class="col-md-7">
<div class="assie-card">
<div class="assie-card-body">
<div class="d-flex justify-content-end pb-4">
<div class="form-inline flex-nowrap">
<label class="text-muted text-nowrap mr-2 d-none d-sm-block" for="sort-reviews">Sort by:</label>
<select class="custom-select custom-select-sm" id="sort-reviews">
<option>Newest</option>
<option>Oldest</option>
<option>Popular</option>
<option>High rating</option>
<option>Low rating</option>
</select>
</div>
</div>
{% for review in reviews %}
<div class="product-review pb-4 mb-4 border-bottom">
<div class="d-flex mb-3">
<div class="media media-ie-fix align-items-center mr-4 pr-2"><img class="rounded-circle" width="50" src="img/shop/reviews/01.jpg" alt="Rafael Marquez"/>
<div class="media-body pl-3">
<h6 class="font-size-sm mb-0">{{ review.user.username }}</h6><span class="font-size-ms text-muted">June 28, 2019</span>
</div>
</div>
<div>
<div class="star-rating"><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star-filled active"></i><i class="sr-star czi-star"></i>
</div>
</div>
</div>
<p class="font-size-md mb-2">{{ review.review }}</p>
</div>
{% endfor %}
<div class="text-center">
<button class="btn btn-outline-accent" type="button"><i class="czi-reload mr-2"></i>Charger plus d'avis</button>
</div>
</div>
</div>
</div>
<!-- Leave review form-->
<div class="col-md-5 mt-2 pt-4 mt-md-0 pt-md-0">
<div class="assie-card">
<div class="assie-card-body">
<div class="bg-secondary py-grid-gutter px-grid-gutter rounded-lg">
{% if ok_submission != '' %}
<div class="alert alert-success">
{{ ok_submission }}
</div>
{% endif %}
<h3 class="h4 pb-2">Ecrire un avis</h3>
<form class="needs-validation" method="post" novalidate>
<div class="form-group">
<label for="review-rating">Note<span class="text-danger">*</span></label>
<select name="rating" class="custom-select" required id="review-rating">
<option value="">Chosir note</option>
<option value="5">5 etoiles</option>
<option value="4">4 etoiles</option>
<option value="3">3 etoiles</option>
<option value="2">2 etoiles</option>
<option value="1">1 étoile</option>
</select>
<div class="invalid-feedback">Choisir la note</div>
</div>
<div class="form-group">
<label for="review-text">Avis<span class="text-danger">*</span></label>
<textarea name="review" class="form-control" rows="6" required id="review-text"></textarea>
<div class="invalid-feedback">Ecrire un avis</div><small class="form-text text-muted">Votre avis ne dois depasser 50 caractères.</small>
</div>
<button class="btn btn-primary btn-shadow btn-block" type="submit">Soumettre avis</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{# End main #}
{% endblock body %}
{% block javascripts %}
<!-- Vendor scrits: js libraries and plugins-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ asset('ecommerce/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('ecommerce/js/bs-custom-file-input.min.js') }}"></script>
<script src="{{ asset('ecommerce/js/simplebar.min.js') }}"></script>
<script src="{{ asset('ecommerce/js/tiny-slider.js') }}"></script>
<script src="{{ asset('ecommerce/js/smooth-scroll.polyfills.min.js') }}"></script>
<script src="{{ asset('ecommerce/js/Drift.min.js') }}"></script>
<script src="{{ asset('ecommerce/js/lightgallery.min.js') }}"></script>
{#<script src="{{ asset('ecommerce/js/lg-video.min.js') }}"></script>#}
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('ecommerce/js/chartist.min.js') }}"></script>
<!-- Main theme script-->
<script src="{{ asset('ecommerce/js/theme.min.js') }}"></script>
{#Slick Slide #}
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js" integrity="sha512-lbwH47l/tPXJYG9AcFNoJaTMhGvYWhVM9YI43CT+uteTRRaiLCui8snIgyAN8XWgNjNhCqlAUdzZptso6OCoFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ asset('js/general.js') }}"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/23.1.0/classic/ckeditor.js"></script>
{#<script type="module" src="{{ asset('js/assieckadapter.js') }}">#}
{% endblock javascripts %}