templates/front-office/sewing/read.html.twig line 1

{% extends "front-office/_base.html.twig" %}


{% block link %}
    <link rel="stylesheet" href="{{ asset('owlcarousel/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('owlcarousel/owl.theme.default.min.css') }}">
{% endblock %}

{% block script %}


    <script
            src="https://code.jquery.com/jquery-3.6.1.js"
            integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
            crossorigin="anonymous"></script>
    <script defer src="{{ asset('owlcarousel/owl.carousel.min.js') }}"></script>

    <script defer src="{{ asset('assets/js/carousel.js') }}"></script>
    <script defer src="{{ asset('assets/js/sewing.js') }}"></script>
    <script defer src="{{ asset('assets/js/command/basket.js') }}"></script>
{% endblock %}

{% block modal %}

    {% include "front-office/partials/_basket-aside.html.twig" %}
    {% include "front-office/partials/sewing/_product-picture.html.twig" %}

{% endblock %}

{% block content %}

    <section class="sewing-read meli-section-90">

        <div class="back-box">
            <a href="{{ path('sewing_list') }}">
                <span class="">
                    <span class="back-icon"></span>
                    <span class="txt-century txt-regular txt-size15 txt-red">
                        Retour à la liste
                    </span>
                </span>

            </a>
        </div>


        <article class="sewing-box meli-section-75 meli-between-start">

            <div class="img-container meli-width-45">
                <div class="img-main" id="js-sewing-bigimg">
                    {% set withoutFilter = true %}
                    {% set showBig = true %}
                    {% include "front-office/partials/sewing/_item_picture.html.twig" %}
                </div>

                <p class="info txt-center txt-century txt-regular txt-size12 txt-orange">
                    Cliquez sur l'image pour zoomer
                </p>


                <div class="img-mini meli-start-start">
                    <div class="img-box meli-width-30 space-right js-sewing-img-btn"
                    data-target="{{ asset('uploads/sewings/sewing-'~sewing.id~'/'~sewing.picture) }}">
                        <img src="{{ asset('uploads/sewings/sewing-'~sewing.id~'/mini/'~sewing.picture) }}"
                             alt="{{ sewing.pictureAlt }}">
                    </div>
                    {% set key = 2 %}
                    {% for p in sewing.gallery %}
                        <div class="img-box meli-width-30 {% if key%3 != 0 %}space-right{% endif %} js-sewing-img-btn"
                            data-target="{{ asset('uploads/sewings/sewing-'~sewing.id~'/gallery-'~p.id~'/'~p.picture) }}"
                        >
                            <img src="{{ asset('uploads/sewings/sewing-'~sewing.id~'/gallery-'~p.id~'/mini/'~p.picture) }}"
                                 alt="{{ p.pictureAlt }}"
                            >
                        </div>
                        {% set key = key+1 %}
                    {% endfor %}
                </div>
            </div>

            <div class="text-container meli-width-45">
                <h1 class="title txt-dancing txt-orange txt-bold txt-size40">{{ sewing.name }}</h1>

                {# RESPONSIVE CAROUSEL #}
                <div class="resp-carousel owl-carousel">
                    <div class="img-box item">
                        {% set showBig = false %}
                        {% include "front-office/partials/sewing/_item_picture.html.twig" %}
                    </div>
                    {% for p in sewing.gallery %}
                        <div class="img-box item">
                            <img src="{{ asset('uploads/sewings/sewing-'~sewing.id~'/gallery-'~p.id~'/mini/'~p.picture) }}"
                                 alt="{{ p.pictureAlt }}"
                            >
                        </div>
                        {% set key = key+1 %}
                    {% endfor %}
                </div>

                {# END - CAROUSEL #}


                <p class="price txt-century txt-orange txt-bold txt-size25"
                >{{ (sewing.priceHt*(1+sewing.tva))|number_format(2,","," ") }} € TTC</p>

                {% if sewing.level == 1 %}
                    {% set level = "débutant" %}
                {% elseif sewing.level == 2 %}
                    {% set level = "intermédiaire" %}
                {% elseif sewing.level == 3 %}
                    {% set level = "difficile" %}
                {% else %}
                    {% set level = null %}
                {% endif %}
                {% if level is not null %}
                    <p class="level txt-century txt-bold txt-size15 txt-green">
                        Niveau {{ level }}</p>
                {% endif %}

                <div class="description-box">
                    {{ sewing.description|raw }}
                </div>

                {% if sewing.isQuantity %}
                    <div class="quantity-box meli-start-center" id="js-quantity-box">
                        <button class="btn-base-little bgc-green" id="js-quantity-less"><span>-</span></button>
                        <div class="txt-century txt-size25 txt-bold txt-green" id="js-quantity-view">1</div>
                        <button class="btn-base-little bgc-green" id="js-quantity-more"><span>+</span></button>
                    </div>
                {% endif %}


                <div class="button-box">
                    <a  id="js-add-basket-btn"
                        data-url="{{ path('ajax_basket_generate_view') }}"
                        data-quantity="1"
                            href="{{ path('ajax_add_basket',{'id':sewing.id,'type':'sewing'}) }}">
                        <button class="btn-base bgc-red">
                            <span>Ajouter au panier</span>
                        </button>
                    </a>
                </div>
            </div>

        </article>

        {% if sewing.willAlsoLike|length > 0 %}

            <div class="will-also-like-box">
                <p class="title txt-dancing txt-size40 txt-bold txt-red txt-center">Vous aimerez aussi</p>

                <div class="meli-section-70">
                    {% set partialSewings = sewing.willAlsoLike %}
                    {% set articleHeight = "200px" %}
                    {% include "front-office/partials/sewing/_list.html.twig" %}
                </div>
            </div>

        {% endif %}


        <div class="line-orange meli-section-45"></div>

        <div class="share-creation">
            <p class="title txt-dancing txt-size40 txt-bold txt-red txt-center">
                Partagez vos créations !
            </p>

            <p class="txt-center txt-century txt-bold txt-size25 txt-green">
                Avec le #sewing_so_
            </p>

        </div>


    </section>

{% endblock %}