themes/BootstrapTheme/templates/bundles/SyliusShopBundle/Product/Show/_addToCart.html.twig line 27

Open in your IDE?
  1. {% import "@SyliusShop/Common/Macro/icons.html.twig" as icons %}
  3. {% set block = app_get_blocks('texteperso_article', sylius.channel.code ) %}
  5. {% import "@SyliusShop/Common/Macro/money.html.twig" as money %}
  7. {% set product = order_item.variant.product %}
  9. {% form_theme form '@SyliusShop/Form/theme.html.twig' %}
  11. {# INIT CONFIGURATOR #}
  12. {% set configurator = false %}
  13. {% set configuratorSimple = false %}
  15. {% if product.variants|length > 0 %}
  16.     {% for variant in product.variants %}
  17.         {% if variant.model %}
  18.             {% set configurator = true %}
  19.             {% if not variant.model.advanced %}
  20.                 {% set configuratorSimple = true %}
  21.             {% endif %}
  22.         {% endif %}
  23.     {% endfor %}
  24. {% endif %}
  26. <div id="availability-notifier" {% if sylius_inventory_is_available(order_item.variant) %} class="d-none" {% endif %} >
  27.     {{ render(path('app_shop_partial_availability_notifier_create', { 'productVariantId' : product.variants.first.id, 'template' : '@SyliusShop/Product/Show/_availability_notifier.html.twig' })) }}
  28. </div>
  30. {{ form_start(form, {'action': path('sylius_shop_ajax_cart_add_item', {'productId': product.id}), 'attr': {'id': 'sylius-product-adding-to-cart', 'data-product-id': product.id, 'data-js-add-to-cart': 'form', 'class': 'loadable', 'novalidate': 'novalidate', 'data-redirect': path(configuration.getRedirectRoute('summary'))}}) }}
  31.         {% include '@SyliusShop/Product/Show/_seeNumericalOrPhysicalVersion.html.twig' with {product: product} %}
  32.         {{ form_errors(form) }}
  34. <!-- error message -->
  35. <div class="alert alert-danger d-none" data-js-add-to-cart="error"
  36.      id="sylius-cart-validation-error" {{ sylius_test_html_attribute('cart-validation-error') }}></div>
  38. <!-- select variant -->
  39. <div id="sylius-product-selecting-variant" {{ sylius_test_html_attribute('product-selecting-variant') }}>
  40.     <div id="first_div"></div>
  42.     {% if not product.simple %}
  43.         <div class="caractistique-article pt-md-2 pt-3">
  44.             {% include '@SyliusShop/Product/Show/_options.html.twig' %}
  45.         </div>
  46.     {% endif %}
  47.     {{ sylius_template_event('sylius.shop.product.show.before_add_to_cart', {'product': product, 'order_item': order_item}) }}
  49. </div>
  50. <!-- end select variant -->
  52. <div class="etat-article d-none">
  53.     <div id="enStock"
  54.          class="etatbit-art color-vert  {% if not sylius_inventory_is_available(order_item.variant) %} d-none {% endif %}">{{ 'app.product.en_stock' | trans }}</div>
  55.     <div id="horsStock"
  56.          class="etatbit-art text-danger {% if sylius_inventory_is_available(order_item.variant) %} d-none {% endif %}">{{ 'app.product.en_rupture' | trans }}</div>
  57. </div>
  59. <!-- configurator -->
  60. {% if configurator %}
  61.     {% include '@SyliusShop/Product/Show/Configurator/_configurator.html.twig' %}
  62. {% endif %}
  63. <!-- end configurator -->
  65. <!-- quantity / price -->
  66. <div class="py-2 row no-gutters align-items-center mobile-column-reverse-save">
  67.     <!-- price -->
  68.     <div class="pl-3 pt-2 pt-sm-0 art-price">
  69.         <div class="prix-art-panier text-sm-right text-left pt-sm-0 pt-3">
  70.             {% include '@SyliusShop/Product/Show/_priceWidget.html.twig' %}
  71.         </div>
  72.     </div>
  73.     <!-- quantity -->
  74.     <div class="quantity-container">
  75.         <div class="d-block d-md-none font-seize col-12">{{ 'sylius.ui.quantity' |trans }} :</div>
  76.         <div class="col-sm-auto">
  77.             <div class="art-qte px-0 fiche-art-qty">
  78.                 <div class="contenu-qte-art qte-article-fiche">
  79.                     <div class="qte-panier sylius-quantity d-flex no-gutters align-items-center">
  80.                         <a role="button" class="qte-moins-art col-auto" title="{{'app.product.decrease_quantity'|trans}}"><img src="{{asset('images/moins.svg')}}" class="d-block" alt="-"></a>
  81.                         <div class="d-flex no-gutters col align-items-center px-2 bg-white">
  82.                             <div class="col-auto mb-0 label-qte">{{ 'sylius.ui.quantity' |trans }} :</div>
  83.                             <div class="col form-group-nomarg pl-1">{{ form_row(form.cartItem.quantity, sylius_test_form_attribute('quantity')) }}</div>
  84.                         </div>
  85.                         <a role="button" class="qte-plus-art  col-auto"  title="{{'app.product.increase_quantity'|trans}}"><img src="{{asset('images/plus.svg')}}" class="d-block" alt="+"></a>
  86.                         {{ sylius_template_event('sylius.shop.product.show.add_to_cart_form', {'product': product, 'order_item': order_item}) }}
  87.                     </div>
  88.                 </div>
  89.             </div>
  90.         </div>
  91.     </div>
  92.     <!-- end quantity -->
  95.     <!-- configurator -->
  96.     {% if configurator %}
  97.         {% include '@SyliusShop/Product/Show/Configurator/_wrap_configurator.html.twig' %}
  98.     {% endif %}
  99.     <!-- end configurator -->
  101.     <!-- messages infos -->
  102.     <div class="widgets-not-valid" style="visibility: hidden;">
  103.         {{ "app.configurator.error.widgets_not_valid"|trans }}
  104.     </div>
  105. </div>
  106. <!-- end quantity / price -->
  108. <!-- messages infos -->
  109. <div class="widgets-not-valid" style="visibility: hidden;">
  110.     {{ "app.configurator.error.widgets_not_valid"|trans }}
  111. </div>
  112. <div id="choose-your-option-info-msg" class="add-to-cart-error-msg d-none">
  113.     {{ "app.ui.choose_your_option_before_adding_to_cart"|trans }}
  114. </div>
  115. <div id="step-by-step-info-msg" class="color-pink-s font-weight-bold font-12" style="display: none;">{{ "app.product.fill_option_before_adding_to_cart"|trans }}</div>
  116. <!-- end messages infos -->
  118. {{ form_row(form._token) }}
  120. <!-- add to cart button -->
  121. {#        <div {% if configurator is defined and configurator == true %}class="btn-panier-content pt-2 pb-2 d-none"{% else %}class="btn-panier-content pt-2 pb-2"{% endif %}>#}
  122. <div {% if configurator is defined and configurator == true and not configuratorSimple and order_item.variant.model is not null %}class="btn-panier-content pt-2 pb-2 d-none"{% else %}class="btn-panier-content pt-2 pb-2"{% endif %}>
  123.     <button type="submit" id="add-to-cart-btn" class="btn-panier btn-add-panier transition-bgcolor" {{ sylius_test_html_attribute('add-to-cart-button') }}> <span>{{ 'sylius.ui.add_to_cart' |trans }}</span></button>
  124. </div>
  125. <!-- end add to cart button -->
  126. {{ form_end(form, {'render_rest': false}) }}
  127. {#{% endif %}#}
  130. <!-- shipping info -->
  131. <div class="etat-article text-left  pt-2 pb-1">
  132.     <div class="py-1">
  133.         {% set missingAmountFranco = app_get_missing_franco_port() %}
  134.         {% if missingAmountFranco %}
  135.             {{'app.cart.missing_x_for_franco'|trans}} <span class="color-pink-s">{{ money.convertAndFormat(missingAmountFranco) }}</span> {{'app.cart.before_free_shipping'|trans}}
  136.         {% endif %}
  137.     </div>
  138.     {% if sylius.channel.displayDeliveryDate %}
  139. {#        {% set date = date('2026-01-21 10:00:00') %}#}
  140.         {% set date = null %}
  141.         {% set deliveryDate = app_get_delivery_date(null, date)  %}  {# estimation date de livraison #}
  143.         {% set dispatchDateEstimated = app_get_dispatch_date(date)  %}  {# date d'envoi #}
  144.         {% set deliveryDateEstimated = app_get_delivery_date_with_margin(null, date)  %}  {# estimation fourchette date de livraison #}
  146.         {% if deliveryDate is not null %}
  147.             <div class="py-1">{{'app.product.by_ordering_today'|trans}}, {{'app.shipping.date_estimated'|trans|lower }}<span class="color-pink-s">{{ deliveryDate|date("d/m/Y") }} </span></div>
  148.         {% endif %}
  149.     {% endif %}
  150. </div>
  151. <!-- end shipping info -->
  153. <!-- steps of shipping -->
  154. {% if sylius.channel.displayDeliveryDate %}
  155.     <div class="step-shipping pt-2 pb-4">
  156.         <div class="row no-gutters">
  157.             <div class="col">
  158.                 <div class="text-center">
  159.                     <div class="position-relative has-after-step"><img src="{{asset('images/step_livr1.svg')}}" alt="" class="position-relative z_index_m2"/></div>
  160.                     <div class="font-italic px-2 font-step">
  161.                         {% if date is defined %}
  162.                             {{ date|date("m/d/Y")|format_datetime(locale='fr',pattern="dd MMMM") }}
  163.                         {% else %}
  164.                             {{ "now"|date("m/d/Y")|format_datetime(locale='fr',pattern="dd MMMM") }}
  165.                         {% endif %}
  166.                         <span class="d-block line-height-normal">{{'app.product.passed_order'|trans}}</span>
  167.                     </div>
  169.                 </div>
  170.             </div>
  171.             <div class="col">
  172.                 <div class="text-center">
  173.                     <div class="position-relative has-after-step"><img src="{{asset('images/step_livr2.svg')}}" alt="" class="position-relative z_index_m2"/></div>
  174.                     <div class="font-italic px-2 font-step">
  175.                         {{ dispatchDateEstimated|date("m/d/Y")|format_datetime(locale='fr',pattern="dd MMMM") }}
  176.                         <span class="d-block line-height-normal">{{'app.product.order_sent'|trans}}</span>
  177.                     </div>
  178.                 </div>
  179.             </div>
  180.             <div class="col">
  181.                 <div class="text-center">
  182.                     <div class="position-relative"><img src="{{asset('images/step_livr3.svg')}}" alt="" class="position-relative z_index_m2"/></div>
  183.                     <div class="font-italic px-2 font-step">
  184.                         {{ deliveryDateEstimated['before']|date("m/d/Y")|format_datetime(locale='fr',pattern="dd MMMM") }} -
  185.                         {{ deliveryDateEstimated['after']|date("m/d/Y")|format_datetime(locale='fr',pattern="dd MMMM") }}
  186.                         <span class="d-block line-height-normal">{{'app.product.delivered'|trans}} !</span>
  187.                     </div>
  188.                 </div>
  189.             </div>
  190.         </div>
  191.     </div>
  192. {% endif %}
  193. <!-- end steps of shipping -->
  195. <!-- add to cart modal -->
  196. <div class="modal fade" id="addToCartModal" tabindex="-1" role="dialog" aria-labelledby="addToCartModal" aria-hidden="true">
  197.     <div class="modal-dialog modal-dialog-centered" role="document">
  198.         <div class="modal-content">
  199.             <div class="modal-header">
  200.                 <p class="modal-title" id="exampleModalLongTitle">{{'app.product.addCart'|trans}}</p>
  201.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  202.                     <span aria-hidden="true">&times;</span>
  203.                 </button>
  204.             </div>
  205.             <div class="modal-body">
  206.                 <div class="modal-product-name">{{ product.code }} <br> {{ product.name }}</div>
  207.             </div>
  208.             <div class="modal-footer row mx-n1">
  209.                 <div class="col-sm-6 col-12 mb-2 mx-0 px-1"><button type="button" class="btn-link bg-orange" data-dismiss="modal">{{'app.product.continue_my_purchases'|trans}}</button></div>
  210.                 <div class="col-sm-6 col-12 mb-2 mx-0 px-1"><a href="{{ path('sylius_shop_cart_summary') }}" type="button" class="btn-link opacity_hover" title="{{'app.product.proceed_to_payment'|trans}}">{{'app.product.proceed_to_payment'|trans}}</a></div>
  211.             </div>
  212.         </div>
  213.     </div>
  214. </div>
  215. <!-- end add to cart modal -->
  217. <!-- begin error modal -->
  218. {% include '@SyliusShop/Product/Show/_popupQuantityError.html.twig' with {'item': order_item} %}
  219. {% include '@SyliusShop/Product/Show/_popupAddToCartErrorModal.html.twig' with {'item': order_item} %}
  220. <!-- end error modal -->