src/DcSiteBundle/Resources/views/Modules/car/card-in-stock-block_v3.html.twig line 1

Open in your IDE?
  1. <section class="car-instock-section" id="car-in-stock">
  2.     <div class="container">
  4.         <div class="car-instock-nav mobile-scroll">
  5.             {% if dealer.id == 38 and model.showDisabled == 1 %}
  7.             {% else %}
  8.                 <button
  9.                     :class="{'--active': activeTab === 1}"
  10.                     class="car-instock-nav__btn"
  11.                     type="button"
  12.                     @click="activeTab = 1">
  13.                     {{ 'base.instock'|trans({}, 'dc_toyota') }}
  14.                 </button>
  15.             {% endif %}
  16.                 <button
  17.                     :class="{'--active': activeTab === 2}"
  18.                     class="car-instock-nav__btn"
  19.                     type="button"
  20.                     @click="activeTab = 2">
  21.                     {{ 'base.secondhand' |trans({}, 'dc_toyota') }}
  22.                 </button>
  23.         </div>
  25.         <div class="car-instock-section__tabs">
  27.             <div :class="{'--active': activeTab === 1}" class="car-instock-section__tab">
  28.                 <div class="row mobile-scroll">
  29.                     <div v-for="inStock in vehicles"
  30.                         class="col-9 col-sm-5 col-md-4 col-lg-3"
  31.                     >
  32.                         <div class="car-in-stock-card">
  33.                             <a v-if="!options.withoutCard"
  34.                                 :href="inStock.url"
  35.                                 class="car-in-stock-card__pic"
  36.                             >
  37.                                 <img :src="inStock.image" :alt="inStock.name">
  38.                             </a>
  40.                             <div class="car-in-stock-card__content">
  41.                                 <div class="car-in-stock-card__head">
  42.                                     <span class="car-in-stock-card__title">
  43.                                         <a href="#" v-html="inStock.name"></a>
  44.                                     </span>
  45.                                     <span class="car-in-stock-card__year">
  46.                                         (<span v-html="inStock.year"></span>{{ 'car_in_stock_module.year' |trans({}, 'dc_base') }})
  47.                                     </span>
  48.                                 </div>
  49.                                 <div class="car-details">
  50.                                     <div class="car-details__item">
  51.                                         <span class="car-details__icon">
  52.                                             <svg class="svg-icon" role="presentation"><use xlink:href="#icon-car-details-fuel"></use></svg>
  53.                                         </span>
  54.                                         <span class="car-details__title" v-html="inStock.fuelType.name"></span>
  55.                                     </div>
  56.                                     <div class="car-details__item">
  57.                                         <span class="car-details__icon">
  58.                                             <svg class="svg-icon" role="presentation"><use xlink:href="#icon-car-details-power"></use></svg>
  59.                                         </span>
  60.                                         <span class="car-details__title">
  61.                                             <span v-html="inStock.power"></span> к.с.
  62.                                         </span>
  63.                                     </div>
  64.                                     <div class="car-details__item">
  65.                                         <span class="car-details__icon">
  66.                                             <svg class="svg-icon" role="presentation"><use xlink:href="#icon-car-details-drive"></use></svg>
  67.                                         </span>
  68.                                         <span class="car-details__title" v-html="inStock.driveUnit.name"></span>
  69.                                     </div>
  70.                                     <div class="car-details__item">
  71.                                         <span class="car-details__icon">
  72.                                             <svg class="svg-icon" role="presentation"><use xlink:href="#icon-car-details-transmission"></use></svg>
  73.                                         </span>
  74.                                         <span class="car-details__title" v-html="inStock.transmissionType.name"></span>
  75.                                     </div>
  76.                                 </div>
  78.                                 <div class="car-in-stock-card__price">
  79.                                     <span v-if="inStock.inDelivery" class="car-in-stock-card__price-new">
  80.                                         {{ 'car_in_stock_module.in_delivery'|trans({}, 'dc_base') }}
  81.                                     </span>
  82.                                     <span v-else class="car-in-stock-card__price-new">
  83.                                         <span v-html="inStock.price.toLocaleString()"></span>
  84.                                         грн*
  85.                                     </span>
  87.                                     <span v-if="inStock.fullPrice > inStock.price" class="car-in-stock-card__price-old">
  88.                                         <span v-html="inStock.fullPrice.toLocaleString()"></span>
  89.                                         грн*
  90.                                     </span>
  91.                                 </div>
  92.                             </div>
  94.                             <a v-if="!options.withoutCard"
  95.                                 :href="inStock.url"
  96.                                 class="car-in-stock-card__btn"
  97.                             >
  98.                                 {{ 'pages.buttons.details'|trans({}, 'dc_base') }}
  99.                             </a>
  100.                             <a v-else
  101.                                 href="#"
  102.                                 class="car-in-stock-card__btn"
  103.                                 @click.stop.prevent="openPopUp(inStock.id)"
  104.                             >
  105.                                 {{ 'catalog.get_offer'|trans({}, 'dc_landrover') }}
  106.                             </a>
  107.                         </div>
  108.                     </div>
  109.                 </div>
  111.                 {% if model.showDisabled == 1 and urlCatalog is defined and urlCatalog is not null %}
  112.                     <div class="text-center">
  113.                         <a href="{{ urlCatalog }}" class="btn btn-outline-primary w-50 mb20">{{ 'pages.base.see_all_alt'|trans({}, 'dc_base') }}</a>
  114.                     </div>
  115.                 {% endif %}
  116.             </div>
  118.             <div :class="{'--active': activeTab === 2}" class="car-instock-section__tab">
  120.                 <div class="row mobile-scroll">
  121.                     <div v-for="usedVehicle in usedVehicles"
  122.                         class="col-9 col-sm-5 col-md-4 col-lg-3"
  123.                     >
  124.                         <div class="car-in-stock-card">
  125.                             <div v-if="!options.withoutCard"
  126.                                 class="car-in-stock-card__pic"
  127.                             >
  128.                                 <img :src="usedVehicle.image" :alt="usedVehicle.name">
  129.                             </div>
  131.                             <div class="car-in-stock-card__content">
  132.                                 <div class="car-in-stock-card__head">
  133.                                     <span class="car-in-stock-card__title">
  134.                                         <span v-html="usedVehicle.name"></span>
  135.                                     </span>
  136.                                     <span class="car-in-stock-card__year">
  137.                                         (<span v-html="usedVehicle.year"></span>{{ 'car_in_stock_module.year' |trans({}, 'dc_base') }})
  138.                                     </span>
  139.                                 </div>
  140.                                 <div class="car-details">
  141.                                     <div class="car-details__item">
  142.                                         <span class="car-details__icon">
  143.                                             <svg class="svg-icon" role="presentation"><use xlink:href="#icon-car-details-fuel"></use></svg>
  144.                                         </span>
  145.                                         <span class="car-details__title" v-html="usedVehicle.engine"></span>
  146.                                     </div>
  147.                                     <div class="car-details__item">
  148.                                         <span class="car-details__icon">
  149.                                             <svg class="svg-icon" role="presentation"><use xlink:href="#icon-car-details-power"></use></svg>
  150.                                         </span>
  151.                                         <span class="car-details__title">
  152.                                             <span v-html="Math.round(usedVehicle.mileage / 100)"></span> {{ 'car_in_stock_module.mileage' |trans({}, 'dc_base') }}
  153.                                         </span>
  154.                                     </div>
  155.                                     <div class="car-details__item">
  156.                                         <span class="car-details__icon">
  157.                                             <svg class="svg-icon" role="presentation"><use xlink:href="#icon-car-details-drive"></use></svg>
  158.                                         </span>
  159.                                         <span class="car-details__title" v-html="usedVehicle.drive"></span>
  160.                                     </div>
  161.                                     <div class="car-details__item">
  162.                                         <span class="car-details__icon">
  163.                                             <svg class="svg-icon" role="presentation"><use xlink:href="#icon-car-details-transmission"></use></svg>
  164.                                         </span>
  165.                                         <span class="car-details__title" v-html="usedVehicle.transmission"></span>
  166.                                     </div>
  167.                                 </div>
  169.                                 <div class="car-in-stock-card__price">
  170.                                     <span class="car-in-stock-card__price-new">
  171.                                         <span v-html="usedVehicle.price.toLocaleString()"></span>
  172.                                         грн*
  173.                                     </span>
  174.                                 </div>
  175.                             </div>
  176.                         </div>
  177.                     </div>
  178.                 </div>
  180.                 {% if urlUsedCatalog is defined and urlUsedCatalog is not null %}
  181.                 <div class="text-center">
  182.                     <a href="{{ urlUsedCatalog }}" class="btn btn-outline-primary w-50 mb20">{{ 'pages.base.see_all_alt'|trans({}, 'dc_base') }}</a>
  183.                 </div>
  184.                 {% endif %}
  186.             </div>
  187.         </div>
  189.     </div>
  190. </section>
  192. <svg width="0" height="0" class="hidden">
  193.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 15" id="icon-car-details-fuel">
  194.         <path d="M25.5867 4.83373H23.6372C23.4091 4.83373 23.2239 5.01673 23.2239 5.24281V8.1124H21.4767L18.8742 4.98945C18.7957 4.89536 18.6789 4.84082 18.5554 4.84082H14.3942V2.68986C14.3942 2.46377 14.2091 2.28078 13.9809 2.28078H10.2077V0.818167H14.0074C14.2355 0.818167 14.4207 0.63517 14.4207 0.409083C14.4207 0.182997 14.2355 0 14.0074 0H5.58135C5.35292 0 5.16804 0.182997 5.16804 0.409083C5.16804 0.63517 5.35292 0.818167 5.58135 0.818167H9.38105V2.28078H5.58135C5.35292 2.28078 5.16804 2.46377 5.16804 2.68986V4.84082H2.99485C2.76643 4.84082 2.58154 5.02382 2.58154 5.2499V8.24903H0.826621V5.80626C0.826621 5.58017 0.641734 5.39717 0.413311 5.39717C0.184888 5.39717 0 5.58017 0 5.80626V11.51C0 11.7358 0.184888 11.9191 0.413311 11.9191C0.641734 11.9191 0.826621 11.7358 0.826621 11.51V9.0672H2.58154V12.4953C2.58154 12.7211 2.76643 12.9044 2.99485 12.9044H5.42539L6.87143 14.8347C6.94941 14.9386 7.07257 15 7.20345 15H21.2819C21.5101 15 21.6952 14.8167 21.6952 14.5909V10.8083H23.2239V13.6345C23.2239 13.8603 23.4091 14.0436 23.6372 14.0436H25.5867C25.8148 14.0436 26 13.8603 26 13.6345V5.24281C26 5.017 25.8148 4.83373 25.5867 4.83373ZM21.2819 9.99009C21.0538 9.99009 20.8686 10.1734 20.8686 10.3992V14.1818H7.41149L5.96545 12.2515C5.88747 12.1473 5.76431 12.0862 5.63342 12.0862H3.40816V5.65899H5.58135C5.80977 5.65899 5.99466 5.47599 5.99466 5.2499V3.09894H13.5676V5.2499C13.5676 5.47599 13.7528 5.65899 13.9809 5.65899H18.3606L20.9631 8.78193C21.0416 8.87629 21.1585 8.93084 21.2819 8.93084H23.2239V9.99036H21.2819V9.99009ZM25.1734 13.2254H24.0505V5.6519H25.1734V13.2254Z" fill="currentColor"/>
  195.     </symbol>
  196.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 17" id="icon-car-details-drive">
  197.         <path d="M23.7199 1.06178H22.1621V1.0529C22.1621 0.47226 21.7007 0 21.1335 0H17.4448C16.8776 0 16.4163 0.47226 16.4163 1.0529V1.06178H10.0629V1.0529C10.0629 0.47226 9.60157 0 9.03437 0H5.34538C4.77819 0 4.31687 0.47226 4.31687 1.0529V1.06178H2.27981C1.02273 1.06178 0 2.29299 0 3.80632V13.1937C0 14.707 1.02273 15.9382 2.27981 15.9382H4.31687V15.9471C4.31687 16.5277 4.77819 17 5.34538 17H9.03437C9.60157 17 10.0629 16.5277 10.0629 15.9471V15.9382H16.4163V15.9471C16.4163 16.5277 16.8776 17 17.4448 17H21.1341C21.701 17 22.1623 16.5277 22.1623 15.9471V15.9382H23.7202C24.9773 15.9382 26 14.707 26 13.1937V3.80632C25.9997 2.29299 24.9773 1.06178 23.7199 1.06178ZM17.2044 1.0529C17.2044 0.917356 17.3121 0.806822 17.4448 0.806822H21.1338C21.2665 0.806822 21.3742 0.917356 21.3742 1.0529V1.87747C21.3742 2.01302 21.2665 2.12355 21.1341 2.12355H17.4448C17.3121 2.12355 17.2044 2.01302 17.2044 1.87747V1.0529ZM19.2896 9.15258C18.8905 9.15258 18.5661 8.82044 18.5661 8.41192C18.5661 8.0034 18.8905 7.67126 19.2896 7.67126C19.6886 7.67126 20.0131 8.0034 20.0131 8.41192C20.0131 8.82044 19.6886 9.15258 19.2896 9.15258ZM16.4163 1.8686V1.87747C16.4163 2.45812 16.8776 2.93038 17.4448 2.93038H18.8955V6.91957C18.3787 7.06292 17.9718 7.47924 17.8318 8.00851H9.17913V6.77918C9.17913 6.55623 9.00285 6.37577 8.78506 6.37577H7.58395V2.93038H9.03437C9.60157 2.93038 10.0629 2.45812 10.0629 1.87747V1.8686H16.4163ZM5.98903 9.64152V7.18259H8.391V8.40923C8.391 8.41004 8.39073 8.41085 8.39073 8.41192C8.39073 8.413 8.391 8.41354 8.391 8.41461V9.64179H5.98903V9.64152ZM5.105 1.0529C5.105 0.917356 5.21298 0.806822 5.34538 0.806822H9.03437C9.16678 0.806822 9.27475 0.917356 9.27475 1.0529V1.87747C9.27475 2.01302 9.16678 2.12355 9.03437 2.12355H5.34538C5.21298 2.12355 5.105 2.01302 5.105 1.87747V1.0529ZM2.27981 15.1314C1.45726 15.1314 0.788134 14.2622 0.788134 13.1937V3.80632C0.788134 2.73781 1.45726 1.8686 2.27981 1.8686H4.31687V1.87747C4.31687 2.45812 4.77819 2.93038 5.34538 2.93038H6.79581V6.37577H5.59496C5.37717 6.37577 5.20089 6.55623 5.20089 6.77918V10.0449C5.20089 10.2676 5.37717 10.4483 5.59496 10.4483H6.79581V14.0696H5.34538C4.77819 14.0696 4.31687 14.5419 4.31687 15.1225V15.1314H2.27981ZM9.27475 15.9471C9.27475 16.0829 9.16678 16.1932 9.03437 16.1932H5.34538C5.21298 16.1932 5.105 16.0829 5.105 15.9471V15.1225C5.105 14.9867 5.21298 14.8764 5.34538 14.8764H9.03437C9.16678 14.8764 9.27475 14.9867 9.27475 15.1225V15.9471ZM10.0629 15.1314V15.1225C10.0629 14.5419 9.60157 14.0696 9.03437 14.0696H7.58395V10.4483H8.78506C9.00285 10.4483 9.17913 10.2676 9.17913 10.0449V8.81533H17.832C17.9721 9.34434 18.3787 9.76093 18.8958 9.90427V14.0696H17.4451C16.8779 14.0696 16.4166 14.5419 16.4166 15.1225V15.1314H10.0629ZM21.3742 15.9471C21.3742 16.0829 21.2665 16.1932 21.1341 16.1932H17.4448C17.3121 16.1932 17.2044 16.0829 17.2044 15.9471V15.1225C17.2044 14.9867 17.3121 14.8764 17.4448 14.8764H21.1338C21.2665 14.8764 21.3742 14.9867 21.3742 15.1225V15.9471ZM25.2116 13.1937C25.2116 14.2622 24.5425 15.1314 23.7199 15.1314H22.1621V15.1225C22.1621 14.5419 21.7007 14.0696 21.1335 14.0696H19.6834V9.90427C20.3262 9.72623 20.8009 9.12569 20.8009 8.41192C20.8009 7.69815 20.3262 7.09788 19.6834 6.91957V2.93038H21.1338C21.7007 2.93038 22.1621 2.45812 22.1621 1.87747V1.8686H23.7199C24.5425 1.8686 25.2116 2.73781 25.2116 3.80632V13.1937Z" fill="currentColor"/>
  198.     </symbol>
  199.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 18" id="icon-car-details-transmission">
  200.         <path d="M21 2.95335C21 1.325 19.7188 0 18.1444 0C16.5699 0 15.2888 1.325 15.2888 2.95335C15.2888 4.45313 16.3763 5.69276 17.7778 5.87967V8.62127H10.8663V5.87967C12.2681 5.69276 13.3556 4.45313 13.3556 2.95335C13.3556 1.325 12.0744 0 10.5 0C8.92555 0 7.6444 1.325 7.6444 2.95335C7.6444 4.45313 8.73189 5.69276 10.1337 5.87967V8.62127H3.22192V5.87967C4.62371 5.69276 5.7112 4.45313 5.7112 2.95335C5.7112 1.325 4.43005 0 2.8556 0C1.2809 0 0 1.325 0 2.95335C0 4.45313 1.08749 5.69276 2.48928 5.87967V12.1206C1.08749 12.3075 0 13.5469 0 15.0467C0 16.675 1.28115 18 2.8556 18C4.43005 18 5.7112 16.675 5.7112 15.0467C5.7112 13.5469 4.62371 12.3075 3.22192 12.1206V9.37899H10.1337V12.1206C8.73189 12.3075 7.6444 13.5469 7.6444 15.0467C7.6444 16.675 8.92555 18 10.5 18C12.0744 18 13.3556 16.675 13.3556 15.0467C13.3556 13.5469 12.2681 12.3075 10.8663 12.1206V9.37899H18.1444C18.3466 9.37899 18.5107 9.20926 18.5107 9.00013V5.87967C19.9125 5.69276 21 4.45313 21 2.95335ZM8.37704 2.95335C8.37704 1.74276 9.32923 0.757722 10.5 0.757722C11.6708 0.757722 12.623 1.74251 12.623 2.95335C12.623 4.16419 11.6708 5.14897 10.5 5.14897C9.32948 5.14897 8.37704 4.16393 8.37704 2.95335ZM0.732643 2.95335C0.732643 1.74276 1.68508 0.757722 2.8556 0.757722C4.02612 0.757722 4.97856 1.74251 4.97856 2.95335C4.97856 4.16419 4.02636 5.14897 2.8556 5.14897C1.68484 5.14897 0.732643 4.16393 0.732643 2.95335ZM4.97856 15.0467C4.97856 16.2575 4.02636 17.2423 2.8556 17.2423C1.68484 17.2423 0.732643 16.2575 0.732643 15.0467C0.732643 13.8361 1.68508 12.8513 2.8556 12.8513C4.02612 12.8513 4.97856 13.8361 4.97856 15.0467ZM12.623 15.0467C12.623 16.2575 11.6708 17.2423 10.5 17.2423C9.32948 17.2423 8.37704 16.2575 8.37704 15.0467C8.37704 13.8361 9.32923 12.8513 10.5 12.8513C11.6708 12.851 12.623 13.8361 12.623 15.0467ZM18.1444 5.14897C16.9739 5.14897 16.0217 4.16393 16.0217 2.95335C16.0217 1.74276 16.9739 0.757722 18.1444 0.757722C19.3152 0.757722 20.2674 1.74251 20.2674 2.95335C20.2674 4.16419 19.3152 5.14897 18.1444 5.14897Z" fill="currentColor"/>
  201.     </symbol>
  202.     <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 20" id="icon-car-details-power">
  203.         <path d="M17.3153 2.59084C15.4882 0.979464 13.113 0 10.5246 0C9.73283 0 8.97154 0.0947867 8.24069 0.252765C5.79306 1.08541 4.23736 1.90572 3.03344 3.25435C2.40999 3.95272 1.73731 4.91286 1.20633 5.84518C0.749549 6.88783 0.431502 7.63071 0.140512 9.09952C-0.128092 10.4553 0.0494248 11.8964 0.170965 12.6698C0.627742 15.5766 2.21124 18.1991 4.61693 19.9052C4.67783 19.9684 4.76919 20 4.86054 20H16.1886C16.3104 20 16.4322 19.9368 16.5236 19.842C19.3252 17.7883 21 14.4708 21 10.9005C21 7.93049 19.8428 5.21327 17.9548 3.22275L17.3153 2.59084ZM16.0364 19.0205H5.0128C2.51575 17.188 1.02362 14.2496 0.93226 11.09H2.72892C2.97253 11.09 3.18569 10.8689 3.18569 10.6161C3.18569 10.3633 2.97253 10.1422 2.72892 10.1422H0.962712C1.11497 7.93049 1.99807 5.90837 3.33795 4.32859L4.67783 5.7188C4.76919 5.81358 4.891 5.84518 5.0128 5.84518C5.13461 5.84518 5.25642 5.81358 5.34777 5.7188C5.53048 5.52922 5.53048 5.24486 5.34777 5.05529L3.97744 3.63349C5.59139 2.05371 7.72301 1.07425 10.0678 0.947867V2.96998C10.0678 3.22275 10.281 3.44392 10.5246 3.44392C10.7682 3.44392 10.9814 3.22275 10.9814 2.96998V0.947867C13.1434 1.04265 15.0924 1.89574 16.6454 3.25435L14.9705 4.9921C14.7878 5.18167 14.7878 5.46603 14.9705 5.65561C15.0619 5.75039 15.1837 5.78199 15.3055 5.78199C15.4273 5.78199 15.5491 5.75039 15.6405 5.65561L17.3458 3.88626C18.6857 5.27646 19.6297 7.109 19.9646 9.13112C19.9646 9.16271 20.056 10.079 20.056 10.1106H18.3202C18.0766 10.1106 17.8635 10.3317 17.8635 10.5845C17.8635 10.8373 18.0766 11.0584 18.3202 11.0584H20.1169C20.1473 11.3112 20.1169 10.6477 20.1169 10.9005C20.1169 14.1232 18.5943 17.1564 16.0364 19.0205Z" fill="currentColor"/>
  204.         <path d="M17.1628 10.7741H13.1127C12.8995 9.76308 12.0469 9.03638 11.0115 9.03638C9.82389 9.03638 8.87988 10.0474 8.87988 11.2481C8.87988 12.4487 9.85434 13.4598 11.0115 13.4598C12.0469 13.4598 12.8995 12.7015 13.1127 11.722H17.1932C17.4368 11.722 17.65 11.5008 17.65 11.2481C17.65 10.9953 17.4064 10.7741 17.1628 10.7741ZM11.0115 12.5119C10.3416 12.5119 9.79344 11.9432 9.79344 11.2481C9.79344 10.553 10.3416 9.98424 11.0115 9.98424C11.6814 9.98424 12.26 10.553 12.26 11.2481C12.26 11.9432 11.6814 12.5119 11.0115 12.5119Z" fill="currentColor"/>
  205.     </symbol>
  206. </svg>