Source du gabarit : webshop/basket.html

{% extends "base.html" %}
{% load i18n static %}

{% block header %}
    {% include 'frags/header.html' %}
{% endblock%}

{% block content %}
<!--debut bloc content-->
{% include 'frags/search_full.html' %}

<section class="wrapper--full wrapper--centered">
    <h1 class="title__big">Mon panier</h1>
    <p>Afin de réserver vos articles dans les commerces sélectionné veillez à compléter corretement vos coordonées.</p>

    <div>

        {% csrf_token %}
        <div class="column">
            <div class="basket__articles">
                <div id="cart--react__summary" />
            </div>
        </div>

        <div class="basket__form">
            <h2 class="title__big text--center">Valider mon panier</h2>

            <form id='form_basket' method="post">
                {% csrf_token %}
                <div>
                    <label class="field__label" >Nom</label>
                    {% include "frags/form_inputs.html" with form_input=form.lastname input_placeholder=_("Votre nom") input_class="field field--full" %}
                </div>

                <div>
                    <label class="field__label">Prénom</label>
                    {% include "frags/form_inputs.html" with form_input=form.firstname input_placeholder=_("Votre prénom") input_class="field field--full" %}
                </div>

                <div>
                    <label class="field__label">Email</label>
                    {% include "frags/form_inputs.html" with form_input=form.mail input_placeholder=_("Votre adresse email") input_class="field field--full" %}
                </div>

                <div>
                    <label class="field__label">Téléphone</label>
                    {% include "frags/form_inputs.html" with form_input=form.phone input_placeholder=_("Votre n° de téléphone") input_class="field field--full" %}
                </div>

                <button id='btn_submit' type="submit" class="btn btn__new btn__basket" title="Valider mon panier">
                    <img src="{% static 'img/icon__shop.svg' %}" alt="Icône d'un sac de shopping">
    
                    <span class="link--white">Réserver mes produits</span>
                </button>
    
                <a title="" class="link link--underline text--color text--center" href="#how-to-buy">Comment se déroule une réservation ?</a>
            </form>

            <div class="remodal" data-remodal-id="how-to-buy">
                <button data-remodal-action="close" class="remodal-close"></button>
        
                <h3 class="title--modal">Comment se déroule une réservation ?</h3>
        
                <div class="modal__inner">
                  <p>Une fois tes produits sélectionnés, rends-toi dans ton panier et encode tes données personnelles.
                    Clique ensuite sur « Réserver mes produits » afin de valider ta commande.
                    Un e-mail est envoyé au(x) Commerçant(s), celui-ci s’occupera de votre commande et prendra contact avec vous.
                    C’est aussi simple que ça, alors n’hésite pas... Commande !</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!--fin bloc content-->
{% endblock %}


{% block footer %}
    {% include 'frags/footer.html' %}
    <script>
        var cart_pk = {{cart_pk}};
    </script>
{% endblock %}