Download raw (8.9 KB)

{% extends "subscribe/base_forms.html" %}
{% load i18n %}

{% block head %}
{{ wizard.form.media }}
{% endblock %}
{% block id %}subscribing{% endblock %}

{% block content %}
    <div id="foo">
<span class="arrow-money">
                                    <span class="inner">je m’abonne<br><span class="price">60<sup>€</sup></span></span>
                                </span>

        <div id="steps">
            <div class="active">Prendre un abonnement</div>
            <p>Pour 60 euros vous recevez Médor quatre fois par an dans votre boîte aux lettres. Les abonnements payés après la sortie d’un numéro démarreront au numéro suivant. Pour des livraisons à l’étranger les frais de port s’élèvent à 20 euros, le prix total sera donc de 80 euros.</p>
        </div>


    <form id="souscription" action="" method="post" class="step-{{ wizard.steps.step1 }}">
        {% csrf_token %}
        {{ wizard.management_form }}


        {% if wizard.form.forms %}
            {{ wizard.form.management_form }}
            {% for form in wizard.form.forms %}
                {{ form }}
            {% endfor %}
        {% else %}
            {{ form.non_field_errors }} 

            <div class="form-wrapper">
                <div class="form-chunk">
                    <div class="box table">
                        <div class="table-row required">
                            {{ form.title.label_tag }}
                            <div class="table-cell">
                            {{ form.title }}
                            {{ form.title.errors }}
                            </div>
                        </div>
                        <div class="required table-row">
                            {{ form.first_name.label_tag }}
                            <div class="table-cell">
                            {{ form.first_name }}
                            {{ form.first_name.errors }}
                            </div>
                        </div>
                        <div class="required table-row">
                            {{ form.last_name.label_tag }}
                            <div class="table-cell">
                            {{ form.last_name }}
                            {{ form.last_name.errors }}
                            </div>
                        </div>
                        <div class="required table-row">
                            {{ form.email.label_tag }}
                            <div class="table-cell">
                            {{ form.email }}
                            {{ form.email.errors }}
                            </div>
                        </div>
                        </div>
                        
                        
                        <div style="margin-top:30px;">
                        <img style="float: left; width:120px; margin-top:30px; margin-right:30px;" src="{{ STATIC_URL }}img/paquet-abonnement-cadeau.png">
                        </div>    
                        <div class="required table-row" style="margin-top: 30px;">
                            {{ form.is_gift.label_tag }}
                            <div class="table-cell" style="margin-top:30px !important; width: 50%;">
                            {{ form.is_gift }}
                            {{ form.is_gift.errors }}
                            </div>
                        </div>
                        <div>
                        <p class="text-cadeau" style="line-height: 1.1;">Offrez un abonnement et remettez au nouvel abonné notre jolie carte à plier illustrée par 20|20!
                        </p>
                        </div>
                        
                        <div style="margin-top:15px">
                        <a href="https://medor.coop/media/filer_public/e7/b5/e7b538fc-ee0d-4a22-9ce4-c0e274bbe9b2/medor-cadeau.pdf"><img src="https://medor.coop/media/filer_public/bf/06/bf068058-bcad-4c01-bc38-0282c5b85603/medor-cadeau.png"></a>
                        <img style="width:70px;" src="{{ STATIC_URL }}img/pli-cadeau2.png">
                        </div>
                        
                        
                    <p style="visibility: hidden;">.</p>
                </div>
                <div class="form-chunk">
                        <p id="address-header">Adresse de livraison&thinsp;:</p>
                    <div class="box table">

                        <div class="required additional table-row">
                            <label for="id_0-recipient_title_0">Civilité</label>
                            <div class="table-cell">
                            {{ form.recipient_title }}
                            {{ form.recipient_title.errors }}
                            </div>
                        </div>
                        <div class="required additional table-row">
                            <label for="id_0-recipient_first_name">Prénom</label>
                            <div class="table-cell">
                            {{ form.recipient_first_name }}
                            {{ form.recipient_first_name.errors }}
                            </div>
                        </div>
                        <div class="required additional table-row">
                            <label for="id_0-recipient_last_name">Nom</label>
                            <div class="table-cell">
                            {{ form.recipient_last_name }}
                            {{ form.recipient_last_name.errors }}
                            </div>
                        </div>
                        <div class="additional table-row">
                            <label for="id_0-recipient_email">Courriel</label>
                            <div class="table-cell">
                            {{ form.recipient_email }}
                            {{ form.recipient_email.errors }}
                            </div>
                        </div>
                        <div class="required table-row">
                            {{ form.street.label_tag }}
                            <div class="table-cell">
                            {{ form.street }}
                            {{ form.street.errors }}
                            </div>
                        </div>
                        <div class="required table-row">
                            {{ form.number.label_tag }}
                            <div class="table-cell">
                            {{ form.number }}
                            {{ form.number.errors }}
                            </div>
                        </div>
                        <div class="table-row">
                            {{ form.letterbox.label_tag }}
                            <div class="table-cell">
                            {{ form.letterbox }}
                            {{ form.letterbox.errors }}
                            </div>
                        </div>
                        <div class="required table-row">
                            {{ form.city.label_tag }}
                            <div class="table-cell">
                            {{ form.city }}
                            {{ form.city.errors }}
                            </div>
                        </div>
                        <div class="required table-row">
                            {{ form.zip_code.label_tag }}
                            <div class="table-cell">
                            {{ form.zip_code }}
                            {{ form.zip_code.errors }}
                            </div>
                        </div>
                        <div class="required table-row">
                            {{ form.country.label_tag }}
                            <div class="table-cell">
                            {{ form.country }}
                            {{ form.country.errors }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}


        <div id="confirm">
            {% if wizard.steps.prev %}
            <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">Corriger</button>
            {% endif %}
            <input id="prendre-part" type="submit" value="S’abonner"/>
        </div>
    </form>
    </div>
{% endblock %}

{% block js %}
<script src="{{ STATIC_URL }}components/jquery/jquery.min.js"></script>
<script>
$(function() {
    var $is_gift = $('#id_0-is_gift');
    var $additional = $('.additional');
    var $header = $('#address-header');

    $is_gift.on('change', function(event) {
        if ($(this).prop("checked")) {
            $additional.show();  
            $header.text('Coordonnées du bénéficiaire :')
        } else {
            $additional.hide();  
            $header.text('Adresse de livraison :')
        };
    });

    if ($is_gift.prop("checked")) {
        $additional.show();  
        $header.text('Coordonnées du bénéficiaire :')
    } else {
        $additional.hide();  
        $header.text('Adresse de livraison :')
    };
});
</script>
{% endblock %}