src/PortalBundle/Resources/views/Catalog/catalog-card-car-vue.html.twig line 1

Open in your IDE?
  1. <div vehicleId="" class="cursor-pointer card__box" @click="transitionToCarPage(item.vehicle.href)" :class="{ card_box_used: item.vehicle.isUsed }" v-for="(item, index) in vehicles" v-if="index !== 5">
  3.     <div v-if="item.vehicle.isSold" class="car__status__cover">
  4.         <span class="sold-car">Продано</span>
  5.     </div>
  7.     <div class="catalog-card-preview-wrap">
  8.         {% include '@Portal/Catalog/catalog-card-preview-vue.html.twig' %}
  9.         <div class="additional__information__box">
  10.             <img src="{{ asset('/bundles/portal/img/icon-svg/pdf-icon.svg') }}" alt="" v-if="(item.vehicle.isUsed || item.vehicle.isStock) && item.hasNds">
  11.             <img src="{{ asset('/bundles/portal/img/icon-svg/select-icon.svg') }}" alt="" v-if="(item.vehicle.isUsed || item.vehicle.isStock)  && item.isSelect">
  12.         </div>
  13.     </div>
  15.     <div class="card__car__info__wrapper">
  16.         <a class="card__car__title" :href="item.vehicle.href" v-html="item.vehicle.fullName"></a>
  17.         <div class="card__car__power__box">
  18.             <a class="card__car__power" :href="item.vehicle.href">{% verbatim %}{{ item.vehicle.equipmentTitle }} {{ item.vehicle.enginePower }}{% endverbatim %} {{ 'catalog.k_s'|trans({}, 'portal_base') }}</a>
  19.             <span class="card__car__year" v-html="item.vehicle.year"></span>
  20.         </div>
  23.          <div class="card__car__characteristics card__car__characteristics-wrap" v-if="item.vehicle.isUsed">
  24.             <div class="car__characteristics__box">
  25.                 <img class="car__characteristics__icon"
  26.                      src="{{ asset('/bundles/portal/img/icon-svg/transm-n-red.svg') }}" alt="">
  27.                 <span class="car__charact__name" v-html="item.vehicle.transmissionTypeName"></span>
  28.             </div>
  29.             <div class="car__characteristics__box">
  30.                 <img class="car__characteristics__icon"
  31.                      src="{{ asset('/bundles/portal/img/icon-svg/wh-drive-red.svg') }}" alt="">
  32.                 <span class="car__charact__name" v-html="item.vehicle.driveUnitTypeName"></span>
  33.             </div>
  34.             <div class="car__characteristics__box">
  35.                 <img class="car__characteristics__icon"
  36.                      src="{{ asset('/bundles/portal/img/icon-svg/engine-n-red.svg') }}" alt="">
  37.                 <span class="car__charact__name">{% verbatim %}{{ item.vehicle.fuelTypeName }}, {{ item.vehicle.engineVolume }}{% endverbatim %} л</span>
  38.             </div>
  39.             <div class="car__characteristics__box">
  40.                 <img class="car__characteristics__icon"
  41.                      src="{{ asset('/bundles/portal/img/icon-svg/used-n-red.svg') }}" alt="">
  42.                 <span class="car__charact__name"  v-html="item.vehicle.mileage + ' км'" ></span>
  43.             </div>
  44.         </div>
  46.         <div class="card__car__characteristics" v-else>
  47.             <div class="car__characteristics__box">
  48.                 <img class="car__characteristics__icon"
  49.                      src="{{ asset('/bundles/portal/img/icon-svg/transm-n-red.svg') }}" alt="">
  50.                 <span class="car__charact__name" v-html="item.vehicle.transmissionTypeName"></span>
  51.             </div>
  52.             <div class="car__characteristics__box">
  53.                 <img class="car__characteristics__icon"
  54.                      src="{{ asset('/bundles/portal/img/icon-svg/wh-drive-red.svg') }}" alt="">
  55.                 <span class="car__charact__name" v-html="item.vehicle.driveUnitTypeName"></span>
  56.             </div>
  57.             <div class="car__characteristics__box">
  58.                 <img class="car__characteristics__icon"
  59.                      src="{{ asset('/bundles/portal/img/icon-svg/engine-n-red.svg') }}" alt="">
  60.                 <span class="car__charact__name">{% verbatim %}{{ item.vehicle.fuelTypeName }}, {{ item.vehicle.engineVolume }}{% endverbatim %} л</span>
  61.             </div>
  62.         </div>
  65.             <div class="card__car__credit__info__box">
  66.                 <template v-if="item.creditPayment != null && !selected.credit">
  67.                 <span class="credit__info__title">Авто в кредит за {% verbatim %}{{ item.creditPayment }}{% endverbatim %} грн/{{ 'catalog.month'|trans({}, 'portal_base') }}</span>
  68.                 <div class="car_tooltip_icon" @click="infoActive($event)">
  69.                     <svg width="12" height="12" viewBox="0 0 12 12" fill="inherit"
  70.                          xmlns="http://www.w3.org/2000/svg">
  71.                         <path fill-rule="evenodd" clip-rule="evenodd"
  72.                               d="M5.99943 0C7.65664 0 9.1565 0.671257 10.2421 1.75682C11.3276 2.84351 12 4.34336 12 5.99943C12 7.65664 11.3276 9.1565 10.2421 10.2421C9.1565 11.3276 7.65664 12 5.99943 12C4.34336 12 2.84351 11.3276 1.75682 10.2421C0.671257 9.1565 0 7.65664 0 5.99943C0 4.34336 0.671257 2.84237 1.75682 1.75682C2.84237 0.671257 4.34336 0 5.99943 0ZM9.57985 2.41902C8.66409 1.50325 7.39742 0.936138 5.99943 0.936138C4.60145 0.936138 3.33591 1.50325 2.41902 2.41902C1.50325 3.33591 0.936138 4.60145 0.936138 5.99943C0.936138 7.39742 1.50325 8.66409 2.41902 9.57985C3.33591 10.4956 4.60145 11.0627 5.99943 11.0627C7.39742 11.0627 8.66409 10.4956 9.57985 9.57985C10.4956 8.66409 11.0627 7.39742 11.0627 5.99943C11.0627 4.60145 10.4956 3.33591 9.57985 2.41902ZM5.94736 3.80568C5.68927 3.80568 5.47986 3.59626 5.47986 3.33818C5.47986 3.07895 5.68927 2.86954 5.94736 2.86954H6.0515C6.31073 2.86954 6.52014 3.07895 6.52014 3.33818C6.52014 3.59626 6.31073 3.80568 6.0515 3.80568H5.94736ZM5.5274 4.88784C5.5274 4.62975 5.73682 4.42034 5.99604 4.42034C6.25413 4.42034 6.46354 4.62975 6.46354 4.88784V8.66182C6.46354 8.91991 6.25413 9.13046 5.99604 9.13046C5.73682 9.13046 5.5274 8.91991 5.5274 8.66182V4.88784Z"
  73.                               fill="#9C9C9C"/>
  74.                     </svg>
  75.                 </div>
  76.                 <div class="card__car__info__box" :class="{ active: isActiveInfo == item.vehicle.vehicleItemId }">
  77.                     <span class="card_car_info_close" @click="infoClose($event)">
  78.                         <svg width="9" height="9" viewbox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
  79.                             <path d="M8 1L1 8M1 1L8 8" stroke="#9C9C9C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  80.                         </svg>
  81.                     </span>
  82.                     <p class="card__car__info__text">{{ 'catalog.calculation_preliminary'|trans({}, 'portal_base') }}</p>
  83.                 </div>
  84.                 </template>
  85.             </div>
  86.         <div class="card__car__leasing__info__box" v-if="item.isStock">
  87.             <template>
  88.                 <span class="credit__info__title">{{ 'catalog.leasing.title'|trans({}, 'portal_base') }}</span>
  89.                 <div class="car_tooltip_icon" @click="infoActive($event)">
  90.                     <svg width="12" height="12" viewBox="0 0 12 12" fill="inherit"
  91.                          xmlns="http://www.w3.org/2000/svg">
  92.                         <path fill-rule="evenodd" clip-rule="evenodd"
  93.                               d="M5.99943 0C7.65664 0 9.1565 0.671257 10.2421 1.75682C11.3276 2.84351 12 4.34336 12 5.99943C12 7.65664 11.3276 9.1565 10.2421 10.2421C9.1565 11.3276 7.65664 12 5.99943 12C4.34336 12 2.84351 11.3276 1.75682 10.2421C0.671257 9.1565 0 7.65664 0 5.99943C0 4.34336 0.671257 2.84237 1.75682 1.75682C2.84237 0.671257 4.34336 0 5.99943 0ZM9.57985 2.41902C8.66409 1.50325 7.39742 0.936138 5.99943 0.936138C4.60145 0.936138 3.33591 1.50325 2.41902 2.41902C1.50325 3.33591 0.936138 4.60145 0.936138 5.99943C0.936138 7.39742 1.50325 8.66409 2.41902 9.57985C3.33591 10.4956 4.60145 11.0627 5.99943 11.0627C7.39742 11.0627 8.66409 10.4956 9.57985 9.57985C10.4956 8.66409 11.0627 7.39742 11.0627 5.99943C11.0627 4.60145 10.4956 3.33591 9.57985 2.41902ZM5.94736 3.80568C5.68927 3.80568 5.47986 3.59626 5.47986 3.33818C5.47986 3.07895 5.68927 2.86954 5.94736 2.86954H6.0515C6.31073 2.86954 6.52014 3.07895 6.52014 3.33818C6.52014 3.59626 6.31073 3.80568 6.0515 3.80568H5.94736ZM5.5274 4.88784C5.5274 4.62975 5.73682 4.42034 5.99604 4.42034C6.25413 4.42034 6.46354 4.62975 6.46354 4.88784V8.66182C6.46354 8.91991 6.25413 9.13046 5.99604 9.13046C5.73682 9.13046 5.5274 8.91991 5.5274 8.66182V4.88784Z"
  94.                               fill="#9C9C9C"/>
  95.                     </svg>
  96.                 </div>
  97.                 <div class="card__car__info__box card_car_info_pading" :class="{ active: isActiveInfo == item.vehicle.vehicleItemId }">
  98.                     <span class="card_car_info_close" @click="infoClose($event)">
  99.                         <svg width="9" height="9" viewbox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
  100.                             <path d="M8 1L1 8M1 1L8 8" stroke="#9C9C9C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  101.                         </svg>
  102.                     </span>
  103.                     <p class="card__car__info__text">{{ 'catalog.leasing.description'|trans({}, 'portal_base') }}</p>
  104.                 </div>
  105.             </template>
  106.         </div>
  107.         <div class="card__car__color__box" v-if="!item.vehicle.isUsed && !item.vehicle.isStock">
  108.             <template v-if="Object.keys(item.vehicleColors).length > 1">
  109.                     <div v-for="(color, index) in item.vehicleColors" class="car__color" :class="{ active: index === 0 }"
  110.                          @click="setColorVehicle($event, color.imageVehicle, color.imageWebpVehicle)"
  111.                          :style="{ 'background-image': 'url(' + color.imageColor + ')' }"></div>
  112.             </template>
  113.         </div>
  114.         <div class="card__car__power__box card_car_power_box_wrap">
  115.             <span class="card__car__price__new" v-if="item.creditPayment != null && selected.credit">
  116.                 {% verbatim %}
  117.                     {{ item.creditPayment }}
  118.                 {% endverbatim %}
  119.                 грн/{{ 'catalog.month'|trans({}, 'portal_base') }}</span>
  120.             <span class="card__car__price__new" v-if="item.vehicle.isUsed && (item.vehicle.isReserved || item.vehicle.deposit)">{{ 'car_in_stock_module.reserved'|trans({}, 'dc_base') }}</span>
  121.             <span class="card__car__price__second" v-else>
  122.                 {% verbatim %}
  123.                     {{ item.vehicle.price }}
  124.                 {% endverbatim %}
  125.                 грн</span>
  126.             <span v-if="!item.vehicle.isStock && parseFloat(item.vehicle.fullPrice.replace(/\s+/g, '')) > parseFloat(item.vehicle.price.replace(/\s+/g, ''))
  127.                                         && !(item.vehicle.isUsed && (item.vehicle.isReserved || item.vehicle.deposit))" class="card__car__price__second card__car__price__old">
  128.                 {% verbatim %}
  129.                     {{ item.vehicle.fullPrice }}
  130.                 {% endverbatim %}
  131.                 грн</span>
  132.             <span v-if="item.vehicle.isStock && item.vehicle.hasActionPrice && !(item.vehicle.isUsed && (item.vehicle.isReserved || item.vehicle.deposit))" class="card__car__price__old">
  133.                 {% verbatim %}
  134.                     {{ item.vehicle.fullPrice }}
  135.                 {% endverbatim %}
  136.                 грн</span>
  137.         </div>
  139.     </div>
  140.     <div class="add__comparison__like__box">
  142.         <button :key="item.vehicle.vehicleId" class="comparison__like add__comparison" :class="item.vehicle.comparedId ? 'active' : ''" :featuredId="item.vehicle.comparedId" @click="toggleCompare(item.vehicle.vehicleItemId)"></button>
  143.         <button class="comparison__like add__like" :class="{ active:!!item.vehicle.featuredId }" :featuredId="item.vehicle.featuredId" @click="toggleFavorite('vehicle',item.vehicle.featuredData)"></button>
  145.     </div>
  147.     <div class="location__box" v-if="!item.vehicle.isUsed && item.vehicle.brand.dealerCount > 1">
  148.             <img src="{{ asset('/bundles/portal/img/icon-svg/location-marker.svg') }}" alt="">
  149.             <span class="location__text" v-html="item.vehicle.dealerAddress"></span>
  150.     </div>
  151.     <div :class="['card__car__learn__more__box', {'bottom_style': item.vehicle.optionsByEquipment.count > 0}, {'is_stock': item.vehicle.isStock}, {'no_tesdrive': !item.vehicle.testDrive}, {'hideme': isActiveInfo == item.vehicle.vehicleItemId} ]">
  152.         <a class="car__learn__more__btn" @click="transitionToCarPage(item.vehicle.href)">{{ 'catalog.more_detail'|trans({}, 'portal_base') }}</a>
  153.             <div class="car__learn__more__info__wrapper" v-if="item.vehicle.optionsByEquipment.count > 0 && !item.vehicle.isUsed">
  154.                 <div class="car__learn__more" v-for="(group, id) in item.vehicle.optionsByEquipment">
  155.                     <div v-for="option in group.options">
  156.                         <img src="{{ asset('/bundles/portal/img/icon-svg/green-ok.svg') }}" alt="">
  157.                         <span class="car__learn__more__text" v-html="option"></span>
  158.                     </div>
  159.                 </div>
  160.             </div>
  161.         <div class="car__learn__more__info__wrapper" v-else-if="item.vehicle.isUsed">
  162.             <div class="car__learn__more" v-for="(option, id) in item.vehicle.options">
  163.                 <div>
  164.                     <img src="{{ asset('/bundles/portal/img/icon-svg/green-ok.svg') }}" alt="">
  165.                     <span class="car__learn__more__text" v-html="option"></span>
  166.                 </div>
  167.             </div>
  168.         </div>
  170.         <a class="car__test__drive__btn" :href="item.vehicle.testDriveHref" v-if="item.vehicle.testDrive && !item.vehicle.isUsed">{{ 'catalog.sign_test_drive'|trans({}, 'portal_base') }}</a>
  171.         <a class="car__test__drive__btn" href="{{ path('portal_service_testdrive_form') }}" v-else-if="!item.vehicle.isUsed && !item.vehicle.isStock ">{{ 'catalog.sign_test_drive'|trans({}, 'portal_base') }}</a>
  172.         <div class="car__test__drive__btn" v-else></div>
  173.     </div>
  176. </div>
  178. <div class="support__box-vue" v-else>
  179.     {% include '@Portal/Catalog/catalog-support-box.html.twig' %}
  180. </div>