src/DcSiteBundle/Resources/views/Mazda/Service/tires-config.html.twig line 1

Open in your IDE?
  1. {% extends '@DcSite/Mazda/base.html.twig' %}
  3. {% block seo %}
  4.     <title>{{ 'seo.tire_config.title'|trans({}, 'dc_mazda') }}</title>
  5.     <meta name="description" content="{{ 'seo.tire_config.desc'|trans({}, 'dc_mazda') }}" />
  6. {% endblock seo %}
  8. {% block ogtagDynamic %}
  9.     <meta property="og:title" content="{{ 'seo.tire_config.title'|trans({}, 'dc_mazda') }}"/>
  10.     <meta property="og:description" content="{{ 'seo.tire_config.desc'|trans({}, 'dc_mazda') }}"/>
  11. {% endblock ogtagDynamic %}
  13. {% block css %}
  14.     <link rel="stylesheet" href="{{ asset('/bundles/dcsite/css/mazda/service.css') }}">
  15.     <link rel="stylesheet" href="{{ asset('/bundles/dcsite/css/mazda/tires-config.css') }}">
  16. {% endblock %}
  19. {% block content %}
  20.     <section class="breadcrumbs__new">
  21.         <div class="container">
  22.             <ol class="global_breadcrumbs__new" itemscope itemtype="https://schema.org/BreadcrumbList">
  23.                 <li class="marker__none" itemprop="itemListElement" itemscope
  24.                     itemtype="https://schema.org/ListItem">
  25.                     <a itemprop="item" href="{{ path('mazda_homepage') }}">
  26.                         <span class="breadcrumbs__link" itemprop="name">Mazda</span></a>
  27.                     <meta itemprop="position" content="1"/>
  28.                 </li>
  30.                 <div class="arrow-bcs"> ❯ </div>
  31.                 <li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
  32.                     itemtype="https://schema.org/ListItem">
  33.                     <span style="color: #ABABAB;" class="breadcrumbs__link" itemprop="name">{{ 'pages.service'|trans({}, 'dc_mazda') }}</span>
  34.                     <meta itemprop="position" content="2"/>
  35.                 </li>
  37.                 <div class="arrow-bcs"> ❯ </div>
  38.                 <li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
  39.                     itemtype="https://schema.org/ListItem">
  40.                     <span style="color: #ABABAB;" class="breadcrumbs__link" itemprop="name">{{ 'pages.service'|trans({}, 'dc_mazda') }}</span>
  41.                     <meta itemprop="position" content="3"/>
  42.                 </li>
  43.             </ol>
  44.         </div>
  45.     </section>
  47.     <section class="heading_bg">
  48.         <img src="{{ asset( '/bundles/dcsite/img/mazda/head/tires-head.png' ) }}" alt="">
  49.         <h1 class="section_head-title">{{ 'seo.tire_config.title'|trans({}, 'dc_mazda') }}</h1>
  50.     </section>
  52.     <section class="section_padd pb-0">
  53.         <div class="container">
  54.             <div class="row">
  55.                 <div class="col-md-12 section-title mb-4">
  56.                     <span>{{ 'pages.tire_config.text_head'|trans({}, 'dc_mazda') }}</span>
  57.                 </div>
  58.             </div>
  59.             <div class="row justify-content-center">
  60.                 <div class="col-sm-12 col-md-12 col-lg-10 col-xl-10 text-center">
  61.                     <p class="mb-0">{{ 'pages.tire_config.text_desc'|trans({}, 'dc_mazda') }}</p>
  62.                 </div>
  63.             </div>
  64.         </div>
  65.     </section>
  69.     <section class="tires_config section_padd">
  70.         <div class="container">
  71.             <div class="row justify-content-center">
  72.                 <div class="col-sm-12 col-md-12 col-lg-9 col-xl-8">
  73.                     {{ form_start(tireForm, { attr: { class: 'lead-form pop-up', action: path('form_tires_configurator') } }) }}
  74.                     <div class="tires_config-choose checkbox__btn row">
  75.                         <div class="col-md-6">
  76.                             <label class="checkbox__item active" id="change-winter">
  77.                                 <input type="radio" id="winter" name="{{ tireForm.tiresType.0.vars.full_name }}" value="{{ tireForm.tiresType.0.vars.value }}" checked>
  78.                                 <span class="checkbox__item-title">{{ tireForm.tiresType.0.vars.label }}</span>
  79.                                 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  80.                                     <path d="M29.457 22.5084L26.2068 20.6319L29.0234 18.971C29.5429 18.6647 29.7157 17.9952 29.4094 17.4757C29.103 16.9564 28.4337 16.7835 27.9141 17.0897L24.0341 19.3775L18.1841 15.9999L24.0331 12.6229L27.9142 14.9104C28.0882 15.0131 28.2792 15.0617 28.4676 15.0617C28.8415 15.0617 29.2057 14.8695 29.4094 14.524C29.7156 14.0045 29.5426 13.335 29.0231 13.0287L26.206 11.3684L29.457 9.49149C29.9793 9.18995 30.1582 8.52208 29.8567 7.99982C29.5551 7.47741 28.8873 7.29847 28.365 7.60015L25.1148 9.47678L25.0852 6.20647C25.0798 5.6034 24.5851 5.11607 23.9835 5.12437C23.3804 5.12976 22.8958 5.62305 22.9014 6.22613L22.942 10.7311L17.0922 14.1086V7.35423L21.0143 5.13762C21.5393 4.84089 21.7243 4.17477 21.4276 3.6496C21.1309 3.12456 20.4646 2.93936 19.9396 3.23624L17.0922 4.84555V1.092C17.0922 0.488923 16.6033 0 16.0002 0C15.3972 0 14.9083 0.488923 14.9083 1.092V4.84555L12.0609 3.23639C11.5356 2.93951 10.8698 3.12456 10.5729 3.64974C10.2762 4.17477 10.4612 4.84104 10.9862 5.13777L14.9081 7.35438V14.1086L9.05836 10.7311L9.09898 6.22613C9.10451 5.62305 8.61996 5.12976 8.01689 5.12437C8.01354 5.12437 8.01033 5.12437 8.00684 5.12437C7.40843 5.12437 6.92052 5.60674 6.91513 6.20661L6.88558 9.47678L3.63536 7.60015C3.1131 7.29847 2.44523 7.47755 2.14369 7.99982C1.84216 8.52208 2.0211 9.18995 2.54336 9.49149L5.79416 11.3684L2.97667 13.029C2.45717 13.3352 2.2842 14.0046 2.59039 14.5243C2.79409 14.8698 3.15823 15.062 3.53228 15.062C3.72068 15.062 3.91156 15.0132 4.0857 14.9107L7.96724 12.6232L13.8164 16.0002L7.96622 19.3778L4.0857 17.0896C3.56649 16.7834 2.89674 16.9561 2.59039 17.4756C2.28405 17.9951 2.45688 18.6645 2.97638 18.9707L5.79344 20.6317L2.54322 22.5082C2.02095 22.8098 1.84201 23.4776 2.14355 23.9999C2.34579 24.3502 2.71284 24.546 3.09024 24.546C3.27544 24.546 3.46326 24.4989 3.63522 24.3996L6.88543 22.5229L6.91499 25.7934C6.92038 26.3931 7.40828 26.8756 8.00669 26.8756C8.01004 26.8756 8.01339 26.8756 8.01674 26.8755C8.61981 26.8701 9.10437 26.3768 9.09884 25.7737L9.05821 21.2686L14.9081 17.8911V24.6456L10.9862 26.8622C10.4612 27.159 10.2762 27.8251 10.5729 28.3503C10.7737 28.7055 11.1436 28.9051 11.5245 28.9051C11.7065 28.9051 11.8911 28.8596 12.0609 28.7636L14.9083 27.1545V30.908C14.9083 31.5111 15.3972 32 16.0002 32C16.6033 32 17.0922 31.5111 17.0922 30.908V27.1545L19.9396 28.7636C20.1094 28.8596 20.2938 28.9051 20.476 28.9051C20.8569 28.9051 21.2268 28.7055 21.4276 28.3503C21.7243 27.8252 21.5393 27.159 21.0143 26.8622L17.0922 24.6456V17.8913L22.942 21.2686L22.9004 25.7736C22.8947 26.3767 23.3791 26.8701 23.9822 26.8756C23.9857 26.8758 23.989 26.8758 23.9925 26.8758C24.5908 26.8758 25.0787 26.3934 25.0842 25.7938L25.1145 22.5229L28.3651 24.3997C28.5371 24.499 28.7249 24.5462 28.9101 24.5462C29.2875 24.5462 29.6546 24.3502 29.8568 24C30.1583 23.4778 29.9794 22.8099 29.457 22.5084Z" fill="#B8B8B8"/>
  81.                                 </svg>
  82.                                 <span class="checkmark"></span>
  83.                             </label>
  84.                         </div>
  85.                         <div class="col-md-6">
  86.                             <label class="checkbox__item" id="change-summer">
  87.                                 <input type="radio" id="summer" name="{{ tireForm.tiresType.1.vars.full_name }}" value="{{ tireForm.tiresType.1.vars.value }}">
  88.                                 <span class="checkbox__item-title">{{ tireForm.tiresType.1.vars.label }}</span>
  89.                                 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
  90.                                     <path d="M15.9997 22.6667C19.6816 22.6667 22.6663 19.6819 22.6663 16C22.6663 12.3181 19.6816 9.33334 15.9997 9.33334C12.3178 9.33334 9.33301 12.3181 9.33301 16C9.33301 19.6819 12.3178 22.6667 15.9997 22.6667Z" stroke="#B8B8B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  91.                                     <path d="M16 1.33334V4.00001" stroke="#B8B8B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  92.                                     <path d="M16 28V30.6667" stroke="#B8B8B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  93.                                     <path d="M5.62695 5.62668L7.52029 7.52001" stroke="#B8B8B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  94.                                     <path d="M24.4805 24.48L26.3738 26.3733" stroke="#B8B8B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  95.                                     <path d="M1.33301 16H3.99967" stroke="#B8B8B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  96.                                     <path d="M28 16H30.6667" stroke="#B8B8B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  97.                                     <path d="M5.62695 26.3733L7.52029 24.48" stroke="#B8B8B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  98.                                     <path d="M24.4805 7.52001L26.3738 5.62668" stroke="#B8B8B8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  99.                                 </svg>
  100.                                 <span class="checkmark"></span>
  101.                             </label>
  102.                         </div>
  103.                     </div>
  107.                     <div class="site__form row">
  108.                         <div class="col-md-12">
  109.                             <div class="form-group" >
  110.                                 {{ form_row(tireForm.vin) }}
  111.                             </div>
  112.                         </div>
  113.                         <div class="col-md-12">
  114.                             <span class="tires_config-title"><span>{{ 'pages.tire_config.enter'|trans({}, 'dc_mazda') }}</span></span>
  115.                         </div>
  116.                         <div class="col-md-4">
  117.                             <div class="form-group">
  118.                                 {{ form_row(tireForm.diameter) }}
  119.                             </div>
  120.                         </div>
  121.                         <div class="col-md-4">
  122.                             <div class="form-group">
  123.                                 {{ form_row(tireForm.width) }}
  124.                             </div>
  125.                         </div>
  126.                         <div class="col-md-4">
  127.                             <div class="form-group">
  128.                                 {{ form_row(tireForm.profile) }}
  129.                             </div>
  130.                         </div>
  131.                         <div class="col-md-12">
  132.                             <hr class="mt-0 mb-4">
  133.                         </div>
  134.                         <div class="col-md-6">
  135.                             <div class="form-group" >
  136.                                 {{ form_row(tireForm.name) }}
  137.                             </div>
  138.                         </div>
  139.                         <div class="col-md-6">
  140.                             <div class="form-group" >
  141.                                 {{ form_row(tireForm.phone) }}
  142.                             </div>
  143.                         </div>
  144.                         <div class="col-md-12">
  145.                             <div class="form-group checkbox style-b js-form-privacy">
  146.                                 <label class="checkboxes__item-privacy">
  147.                                     <input type="checkbox" name="{{ tireForm.privacy.vars.full_name }}" value="{{ tireForm.privacy.vars.value }}" id="{{ tireForm.privacy.vars.id }}"/>
  148.                                     <div id="check_privacy" class="checkbox__checkmark form-control"></div>
  149.                                     <div class="checkbox__body">{{ 'callback_widget.privacy'|trans({}, 'dc_base') }} <a href="{{ privacyUrl }}" target="_blank">{{ 'callback_widget.privacy_link'|trans({}, 'dc_base') }}</a></div>
  150.                                 </label>
  151.                             </div>
  152.                         </div>
  153.                         <div style="display: none;">
  154.                             {{ form_rest(tireForm) }}
  155.                         </div>
  156.                         <div class="col-md-12 d-flex justify-content-center text-center">
  157.                             <button type="submit" class="btn btn-primary m-auto">{{ 'pages.tire_config.send'|trans({}, 'dc_mazda') }}</button>
  158.                         </div>
  160.                     {{ form_end(tireForm) }}
  162.                     </div>
  164.                 </div>
  165.             </div>
  166.         </div>
  167.     </section>
  170. {% endblock %}
  174. {% block pageJS %}
  175.     <script>
  176.         app.onCustomEvent('appInit', function () {
  177.             var summer = $('#change-summer');
  178.             var winter = $('#change-winter');
  179.             $("input[type='radio']").change(function () {
  180.                 if (this.id === 'winter') {
  181.                     winter.addClass('active');
  182.                     summer.removeClass('active');
  183.                 } else if (this.id === 'summer') {
  184.                     summer.addClass('active');
  185.                     winter.removeClass('active');
  186.                 }
  187.             });
  188.         });
  189.     </script>
  191. {% endblock %}