{% extends "base.html" %} {% load static %} {% block additionnal_css %} <link rel="stylesheet" href="{% static 'css/reception_style.css' %}"> <link rel="stylesheet" href="{% static 'css/shop.css' %}"> <style type="text/css"> #password_change {display:none;} </style> {% endblock %} {% block additionnal_scripts %} <script src="{% static "js/fp.js" %}"></script> {% endblock %} {% block content %} <header class="flex-container"> <div class="w20 arrow-block txtcenter step_zero_active" id="header_step_zero"> <h4 id="header_step_zero_content">Initialisation</h4> </div> <div class="w20 arrow-block txtcenter" id="header_step_one"> <h4 id="header_step_one_content">Sélection des produits</h4> </div> <div class="w20 arrow-block txtcenter" id="header_step_two"> <h4>Validation du panier</h4> </div> <div class="item-fluid arrow-block txtcenter" id="header_step_three"> <h4>Enregistré</h4> </div> <nav role="navigation" class="nav dropdown item-fluid"> <h4 class="dropbtn">Menu</h4> <ul class="nav-list dropdown-content"> {% if SHOP_CAN_BUY != False %} <li class="nav-item"> <span class="new-order">Nouvelle commande</span> </li> {% elif DELIVERY_CAN_BUY != False %} <li class="nav-item"> <span class="new-order">Nouvelle commande</span> </li> {%endif%} <li class="nav-item"> <span class="my-orders">Commande(s) envoyée(s)</span> </li> <li class="nav-item"> <span class="visit">Parcourir le "magasin"</span> </li> {%if extra_menus %} {% for exm in extra_menus %} {% include exm %} {% endfor %} {%endif%} <li class="nav-item"> <span id="deconnect">Déconnecter</span> </li> </ul> </nav> </header> {% if capital_message and capital_message|length > 0 %} <p style="font-size: xx-large; text-align:center;"> {{capital_message|safe}} </p> {%endif%} <section class="content" id="main-content" style="display:none;"> <h1>{{COMPANY_NAME}} : Commande en ligne <span>Attention ! Pour les produits au kg, <strong>1 = 1kg , 200 = 200 kg, 0.2 = 200g</strong></span> </h1> <section class="shop"> <div class="grid-5"> <div class="col-4"> <ul class="tabs"> <li class="tab promote"> <input type="radio" name="tabs" id="tab0" /> <label for="tab0">Propositions</label> <div id="tab-content0" class="content"> <strong>Voici une sélection de produits que nos salariés veulent mettre en avant !</strong> <div class="products_sort_container psc_align_bottom" style="display:none;"> <span>Trier les produits par : </span> <select class="products_sort"> <option value="name_asc" selected="selected">Nom croissant</option> <option value="name_desc">Nom décroissant</option> <option value="price_unit_asc">Prix unitaire croissant</option> <option value="price_unit_desc">Prix unitaire décroissant</option> <option value="price_uom_asc">Prix au kg/L croissant</option> <option value="price_uom_desc">Prix au kg/L décroissant</option> </select> </div> <section class="grid-3 has-gutter"></section> </div> </li> <li class="tab discount"> <input type="radio" name="tabs" id="tab-1" /> <label for="tab-1">Promo -20%</label> <div id="tab-content-1" class="content"> <strong>Voici une sélection de produits qui doivent partir au plus vite !</strong><br/> Les prix affichés ne tiennent pas compte de la réduction de -20% <div class="products_sort_container psc_align_bottom" style="display:none;"> <span>Trier les produits par : </span> <select class="products_sort"> <option value="name_asc" selected="selected">Nom croissant</option> <option value="name_desc">Nom décroissant</option> <option value="price_unit_asc">Prix unitaire croissant</option> <option value="price_unit_desc">Prix unitaire décroissant</option> <option value="price_uom_asc">Prix au kg/L croissant</option> <option value="price_uom_desc">Prix au kg/L décroissant</option> </select> </div> <section class="grid-3 has-gutter"></section> </div> </li> <li class="tab"> <input type="radio" name="tabs" checked="checked" id="tab1" /> <label for="tab1">Les produits que j'ai déjà achetés</label> <div id="tab-content1" class="content"> <p id="content1_msg"> Vous pouvez récupérer la liste des produits que vous avez déjà achetés en cliquant sur le bouton ci-dessous.<br /> <button id="get_my_bought_products" type="button" class="btn--primary"> Récupérer la liste </button> </p> <div class="products_sort_container psc_align_bottom" style="display:none;"> <span>Trier les produits par : </span> <select class="products_sort"> <option value="name_asc" selected="selected">Nom croissant</option> <option value="name_desc">Nom décroissant</option> <option value="price_unit_asc">Prix unitaire croissant</option> <option value="price_unit_desc">Prix unitaire décroissant</option> <option value="price_uom_asc">Prix au kg/L croissant</option> <option value="price_uom_desc">Prix au kg/L décroissant</option> </select> </div> <section class="grid-3 has-gutter"></section> </div> </li> <li class="tab alim"> <input type="radio" name="tabs" id="tab2" /> <label for="tab2">Alimentaire</label> <div id="tab-content2" class="content"> <div class="grid has-gutter" id="alim_categ"></div> <div class="products_sort_container psc_align_top" style="display:none;"> <span>Trier les produits par : </span> <select class="products_sort"> <option value="name_asc" selected="selected">Nom croissant</option> <option value="name_desc">Nom décroissant</option> <option value="price_unit_asc">Prix unitaire croissant</option> <option value="price_unit_desc">Prix unitaire décroissant</option> <option value="price_uom_asc">Prix au kg/L croissant</option> <option value="price_uom_desc">Prix au kg/L décroissant</option> </select> </div> <p class="msg"></p> <section class="grid-3 has-gutter"></section> </div> </li> <li class="tab nonalim"> <input type="radio" name="tabs" id="tab3" /> <label for="tab3">Non alimentaire</label> <div id="tab-content3" class="content"> <div class="grid has-gutter" id="non_alim_categ"></div> <div class="products_sort_container psc_align_top" style="display:none;"> <span>Trier les produits par : </span> <select class="products_sort"> <option value="name_asc" selected="selected">Nom croissant</option> <option value="name_desc">Nom décroissant</option> <option value="price_unit_asc">Prix unitaire croissant</option> <option value="price_unit_desc">Prix unitaire décroissant</option> <option value="price_uom_asc">Prix au kg/L croissant</option> <option value="price_uom_desc">Prix au kg/L décroissant</option> </select> </div> <p class="msg"></p> <section class="grid-3 has-gutter"></section> </div> </li> <li class="tab"> <input type="radio" name="tabs" id="tab4" /> <label for="tab4">Recherche libre</label> <div id="tab-content4" class="content"> <div> <div class="fl search-bar"> <form onsubmit="return search_product();"> <input type="text" placeholder="Recherche" id="search-input"> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> <div class="fr products_sort_container" style="display:none;"> <span>Trier les produits par : </span> <select class="products_sort"> <option value="name_asc" selected="selected">Nom croissant</option> <option value="name_desc">Nom décroissant</option> <option value="price_unit_asc">Prix unitaire croissant</option> <option value="price_unit_desc">Prix unitaire décroissant</option> <option value="price_uom_asc">Prix au kg/L croissant</option> <option value="price_uom_desc">Prix au kg/L décroissant</option> </select> </div> </div> <p class="msg" style="clear:both;"></p> <section class="grid-3 has-gutter"></section> </div> </li> </ul> <!--<div class="fl tip">Astuce : Utilisez <strong>Ctrl + F</strong> pour rechercher dans la liste</div>--> </div> <div class="col-1" > <div id="right-column"> <div id="cart-header"> <h3>Panier</h3> <div id="valid-wrapper"> <button id="valid-cart" type="button" class="btn--primary">Valider</button> </div> <div class="cart-total"><span></span></div> </div> <div id="cart-wrapper"> <div id="cart"> <div class="msg">vide</div> </div> <div class="cart-total"><span></span></div> </div> <div id="current_order_bdate"></div> {%if HOURS_FOR_VALIDATION > 0 %} <div id="countdown_wrapper"> <em>Temps restant pour valider</em> <div id="countdown"></div> </div> {% endif %} <div class="to_top_wrapper"> <button id="go_to_top" type="button">Retourner en haut</button> </div> </div> </div> </div> </section> <!-- end of shop --> <section class="orders" style="display:none;"> <div class="waiting_msg"> </div> <div id="my-orders-sumup" style="display:none;"> <h3>Mes commandes enregistrées</h3> <table border=1> <thead> <tr> <th class="date">Date création</th><th class="date">Date récupération</th><th>Nb articles</th><th>Montant</th><th class="actions">Actions</th> </tr> </thead> <tbody> </tbody> </table> <p class="no-action-available-msg" style="display:none;"> Si les icônes <i class="fas fa-edit"></i> (Modifier) et <i class="fas fa-trash"></i> (Poubelle) n'apparaissent pas dans une ligne du tableau, <br />cela signifie que la commande a déjà été imprimée en magasin pour être préparée. <br/>Dans ce cas, merci de remplir le formulaire <a href="https://docs.google.com/forms/d/e/1FAIpQLSd_wH-p3Uz0-a5hR4_j8RlNWx13CHhS9BJbZP4Wi8-fMy7VJw/viewform">Aide à la pré-commande</a>. </p> <p>Pour fusionner deux commandes, cliquez sur la commande qui doit être "déplacée" et glissez-là sur la commande "principale"</p> <p>Note : <strong>La fusion de commandes ne fonctionne pas en utilisant Chrome avec un Mac</strong></p> <p> <button type="button" class="btn--primary back-to-home">Retour</button> </p> </div> </section> </section> <section id="main-waiting-zone"> <p class="msg"> </p> <p class="loader"> <img src="/static/img/Pedro_luis_romani_ruiz.gif" id="rotating_loader"/> </p> </section> <div id="templates" style="display:none;"> <div class="product"> <h6 class="name"></h6> <img src="" alt="Image" /> <div class="price"> Prix : <span class="price"></span> € / <span class="unit"></span> </div> <div class="uom_price" style="display:none;"> Prix au kg/L : <span class="uom_price"></span> </div> <div class="availability"> <div class="fl mrm av_qty">Disponible <i>(indicatif)</i> : <span class="available_qty"></span></div> <div class="fl in_qty">A venir <i>(indicatif)</i> : <span class="incoming_qty"></span></div> </div> <div class="choice clear"> <input type="number" name="qty" /> <button type="button" class="btn--primary">Ajouter</button> </div> </div> <div class="cart-elt"> <img src="/static/img/Delete-Button.svg" alt="Suppr." /> <h7 class="name"></h7> <br /> <div class="price-row"> <span class="qty"></span> x <span class="price"></span> = <span class="total"></span> </div> </div> <div role="navigation" class="dropdown category-menu"> <h4 class="dropbtn"></h4> <ul class="dropdown-content"> </ul> </div> <p id="loading_bought_products_msg"> Nous récupérons la liste des produits que vous avez déjà achetés depuis que vous faites vos courses à la coopérative.<br /> Cela prend un peu de temps.<br/> Pensez à utiliser <strong>Ctrl + F</strong> pour rechercher un article dans la liste affichée. </p> <p id="loading_categ_products_msg"> Nous récupérons la liste des produits disponibles de la catégorie <span class="category"></span>. </p> <div id="cart_creation_form"> <p> <h2>Initialisation de la commande</h2> {% if mode == 'shop' %} <span class="ask-day"> Merci d'indiquer ci-dessous quand vous viendrez récupérer la commande au magasin </span><br/> <select name="bday"> </select> <select name="bhour"> <option value="">---> Heure</option> <option value="10:00">10:00</option> <option value="10:30">10:30</option> <option value="11:00">11:00</option> <option value="11:30">11:30</option> <option value="12:00">12:00</option> <option value="12:30">12:30</option> <option value="13:00">13:00</option> <option value="13:30">13:30</option> <option value="14:00">14:00</option> <option value="14:30">14:30</option> <option value="15:00">15:00</option> <option value="15:30">15:30</option> <option value="16:00">16:00</option> <option value="16:30">16:30</option> <option value="17:00">17:00</option> <option value="17:30">17:30</option> </select> {% elif mode == 'delivery' %} <span class="ask-day"> Merci d'indiquer ci-dessous un jour et une heure de livraison suggérés.<br> Le jour et l'heure de la livraison seront choisis en direct avec le/la livreur.se en fonction de ses disponibilités. </span><br/> <select name="bday"> <option value="">---> Jour</option> <option value="lundi">lundi</option> <option value="mardi">mardi</option> <option value="mercredi">mercredi</option> <option value="jeudi">jeudi</option> <option value="vendredi">vendredi</option> <option value="samedi">samedi</option> <option value="dimanche">dimanche</option> </select> <select name="bhour"> <option value="">---> Heure</option> <option value="01:00">00:00</option> <option value="01:00">01:00</option> <option value="02:00">02:00</option> <option value="03:00">03:00</option> <option value="04:00">04:00</option> <option value="05:00">05:00</option> <option value="06:00">06:00</option> <option value="07:00">07:00</option> <option value="08:00">08:00</option> <option value="09:00">09:00</option> <option value="10:00">10:00</option> <option value="11:00">11:00</option> <option value="12:00">12:00</option> <option value="13:00">13:00</option> <option value="14:00">14:00</option> <option value="15:00">15:00</option> <option value="16:00">16:00</option> <option value="17:00">17:00</option> <option value="18:00">18:00</option> <option value="19:00">19:00</option> <option value="20:00">20:00</option> <option value="21:00">21:00</option> <option value="22:00">22:00</option> <option value="23:00">23:00</option> </select> {% endif %} <div class="slots-constraints" style="display: none;"> <span class="delay24h"><strong>avec un délai de {{MIN_DELAY_FOR_SLOT}}h minimum</strong></span> <!--<input type="text" placeholder="Exemple: mardi 24 mars à 10h30" name="best_date" style="width: 350px;"/>--><br/> <!--Horaires : <strong>10h - 17h30 du mardi au samedi</strong>--> <div class="forbidden-slots" style="display: none;"> Listes des créneaux <strong>déjà remplis</strong>, en choisir <strong>un autre</strong> <i class="far fa-window-close fs-close fr"></i> <ul style="list-style: none; margin-top: 2px;"></ul> <span style="font-size: smaller; font-style: italic;">format date : AAAA-MM-JJ hh:mm</span> </div> </div> {%if HOURS_FOR_VALIDATION > 0 %} <div class="tv-msg" style="display: none;"> <strong> Vous aurez <span class="time-given-for-validation">{{HOURS_FOR_VALIDATION}} heure(s)</span> pour valider votre commande.<br/> Passé ce temps, la {% if mode == 'shop' %}réservation du créneau horaire{% elif mode == 'delivery' %}commande{% endif %} sera annulée.<br/> Vous devrez rechoisir un horaire (le panier sera mémorisé). </strong> </div> {%endif%} </p> <p class="no-accept-reason" style="display: none; font-weight: bold; color: red;"> Si votre commande n'est pas validée , c'est que vous n'avez pas choisi un horaire possible <p> </div> <div id="cart_validation_form"> <h2>Validation de la commande</h2> <p class="pickup_date"> {% if mode == 'shop' %}Récupération au magasin{% elif mode == 'delivery' %}Date et heure de livraison{%endif%} : <span></span> </p> {%if SHOW_SUBSTITUTION_OPTION %} <p class="accept_substitution"> <i class="fas fa-arrow-right"></i> <label style="display:inline-flex;background:#efeeaa;">Pour accepter les substitutions pour les produits manquants, cocher ici : <input name="accept_substitution" type="checkbox" /></label> </p> {%endif%} <p class="comment"> <textarea name="cart_comment" cols="50"></textarea><br/> <em>Laissez ci-dessus votre commentaire.</em> {%if SHOW_SUBSTITUTION_OPTION %} <em> Par exemple :<br/>"je suis végétarienne, je suis allergique au gluten, s'il n'y a pas de mouton, je veux bien du boeuf..."</em> {%endif%} </p> <p> {% if mode == 'shop' %} <strong><i>{{SHOP_BOTTOM_VALIDATION_MSG}}</i></strong> {%endif%} </p> <p> {{CART_VALIDATION_BOTTOM_MSG}} </p> </div> <div class="destroy-cart-msg"> <h2>Commande du <span class="date"></span></h2> (Récupération le <span class="bdate" style="font-weight: bold;"></span>)<br/> Vous avez demandé de détruire l'enregistrement de la commande.<br/> Si vous le confirmez, l'action sera irreversible. </div> <div class="modify-best-date-msg"> <p class="ask-day">Remplacer la date de récupération (actuellement <span class="current-bdate"></span>)</p> <select name="bday-change"></select> <select name="bhour-change"></select> <div class="slots-constraints"></div> </div> <div class="after-login-msg"> <h2>Bienvenue sur le site de commande en ligne !</h2> <p style="text-align: center;"> <div style="width:640px;margin:auto;text-align: left;"> Vous voulez : <ul style="list-style-type: none;padding:0;"> {%if survey_link %} <li class="survey" style="display: none;"><a id="survey_link" href="{{survey_link}}" class="btn--success" target="_blank">Répondre au questionnaire d'amélioration</a></li> {%endif%} {% if SHOP_CAN_BUY != False %} <li><button type="button" class="new-order btn--primary">Passer une nouvelle commande</button></li> {%endif%} {% if DELIVERY_CAN_BUY != False %} <li><button type="button" class="new-order btn--primary">Passer une nouvelle commande</button></li> {%endif%} <li><button type="button" class="my-orders btn--primary">Gérer mes commandes (*)</button></li> <li><button type="button" class="visit btn--primary">Parcourir le "magasin"</button></li> </ul> <p> Vous pouvez également lancer ces actions en utilisant le menu (en haut à droite). </p> <p> (*) Supprimer, modifier la date, fusionner </p> </div> </p> </div> </div> <script type="text/javascript"> const shop_mode = '{{ mode|safe }}' var categories = {{SHOP_CATEGORIES|safe}} var min_delay = {{MIN_DELAY_FOR_SLOT}} var hours_for_validation = {{HOURS_FOR_VALIDATION}} var excluded_cat = {{EXCLUDE_SHOP_CATEGORIES|safe}} var promoted_pdts = {{promoted_pdts|safe}} var discounted_pdts = {{discounted_pdts|safe}} {%if SHOP_OPENING%} const slot_size = {{SHOP_SLOT_SIZE}} const opening = {{SHOP_OPENING|safe}} {%endif%} {%if SHOP_OPENING_START_DATE%} const opening_start_date = new Date('{{SHOP_OPENING_START_DATE}}') {%endif%} {%if cat_nb_pdts%} const cat_nb_pdts = {{cat_nb_pdts|safe}} {%endif%} const stock_warning = {{SHOP_STOCK_WARNING|safe}} </script> <script src="{% static 'js/all_common.js' %}?v=1651853225"></script> <script type="text/javascript" src="{% static 'js/shop.js' %}?v=1651853225"></script> {% endblock %}