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

Open in your IDE?
  1. <div vehicleId="" class="cursor-pointer card__box car__box__moto__water" @click="transitionToCarPage(item.vehicle.href)" v-for="(item, index) in vehicles" v-if="index !== 5">
  3.     {% include '@Portal/Catalog/catalog-card-preview-vue.html.twig' %}
  5.     <div class="card__car__info__wrapper">
  6.         <a class="card__car__title" :href="item.vehicle.href" v-html="item.vehicle.fullName"></a>
  7.         <div class="card__car__power__box">
  8.             <a class="card__car__power" :href="item.vehicle.href">{% verbatim %}{{ item.vehicle.equipmentTitle }} {{ item.vehicle.enginePower }}{% endverbatim %} {{ 'catalog.k_s'|trans({}, 'portal_base') }}</a>
  9.             <span class="card__car__year" v-html="item.vehicle.year"></span>
  10.         </div>
  13.          <div class="card__car__characteristics card__car__characteristics-wrap" v-if="item.vehicle.isUsed">
  14.             <div class="car__characteristics__box">
  15.                 <img class="car__characteristics__icon"
  16.                      src="{{ asset('/bundles/portal/img/icon-svg/transm-n-red.svg') }}" alt="">
  17.                 <span class="car__charact__name" v-html="item.vehicle.transmissionTypeName"></span>
  18.             </div>
  19.             <div class="car__characteristics__box">
  20.                 <img class="car__characteristics__icon"
  21.                      src="{{ asset('/bundles/portal/img/icon-svg/wh-drive-red.svg') }}" alt="">
  22.                 <span class="car__charact__name" v-html="item.vehicle.driveUnitTypeName"></span>
  23.             </div>
  24.             <div class="car__characteristics__box">
  25.                 <img class="car__characteristics__icon"
  26.                      src="{{ asset('/bundles/portal/img/icon-svg/engine-n-red.svg') }}" alt="">
  27.                 <span class="car__charact__name">{% verbatim %}{{ item.vehicle.fuelTypeName }}, {{ item.vehicle.engineVolume }}{% endverbatim %} л</span>
  28.             </div>
  29.             <div class="car__characteristics__box">
  30.                 <img class="car__characteristics__icon"
  31.                      src="{{ asset('/bundles/portal/img/icon-svg/used-n-red.svg') }}" alt="">
  32.                 <span class="car__charact__name"  v-html="item.vehicle.mileage + ' тис.км'" ></span>
  33.             </div>
  34.         </div>
  36.          <div class="card__car__characteristics" v-else>
  37.             <div class="car__characteristics__box">
  38.                 <img class="car__characteristics__icon"
  39.                      src="{{ asset('/bundles/portal/img/icon-svg/transm-n-red.svg') }}" alt="">
  40.                 <span class="car__charact__name" v-html="item.vehicle.transmissionTypeName"></span>
  41.             </div>
  42.             <div class="car__characteristics__box">
  43.                 <img class="car__characteristics__icon"
  44.                      src="{{ asset('/bundles/portal/img/icon-svg/wh-drive-red.svg') }}" alt="">
  45.                 <span class="car__charact__name" v-html="item.vehicle.driveUnitTypeName"></span>
  46.             </div>
  47.             <div class="car__characteristics__box">
  48.                 <img class="car__characteristics__icon"
  49.                      src="{{ asset('/bundles/portal/img/icon-svg/engine-n-red.svg') }}" alt="">
  50.                 <span class="car__charact__name">{% verbatim %}{{ item.vehicle.fuelTypeName }}, {{ item.vehicle.engineVolume }}{% endverbatim %} л</span>
  51.             </div>
  52.         </div>
  55.             <div class="card__car__credit__info__box">
  56.                 <template v-if="item.creditPayment != null && !selected.credit">
  57.                 <span class="credit__info__title">Авто в кредит за {% verbatim %}{{ item.creditPayment }}{% endverbatim %} грн/{{ 'catalog.month'|trans({}, 'portal_base') }}</span>
  58.                 <div class="credit__info__hover" @click="infoActive(item.vehicle.vehicleItemId)">
  59.                     <svg width="12" height="12" viewBox="0 0 12 12" fill="inherit"
  60.                          xmlns="http://www.w3.org/2000/svg">
  61.                         <path fill-rule="evenodd" clip-rule="evenodd"
  62.                               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"
  63.                               fill="#9C9C9C"/>
  64.                     </svg>
  65.                 </div>
  66.                 <div class="card__car__info__box" :class="{ active: isActiveInfo == item.vehicle.vehicleItemId }">
  67.                     <span class="card_car_info_close" @click="infoClose($event)">
  68.                         <svg width="9" height="9" viewbox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
  69.                             <path d="M8 1L1 8M1 1L8 8" stroke="#9C9C9C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  70.                         </svg>
  71.                     </span>
  72.                     <p class="card__car__info__text">{{ 'catalog.calculation_preliminary'|trans({}, 'portal_base') }}</p>
  73.                 </div>
  74.                 </template>
  75.             </div>
  76.         <div class="card__car__color__box" v-if="!item.vehicle.isUsed">
  77.             <template v-if="Object.keys(item.vehicleColors).length > 1">
  78.                 <div v-for="(color, index) in item.vehicleColors" class="car__color" :class="{ active: index === 0 }"
  79.                      @click="setColorVehicle($event, color.imageVehicle, color.imageWebpVehicle)"
  80.                      :style="{ 'background-image': 'url(' + color.imageColor + ')' }"></div>
  81.             </template>
  82.         </div>
  83.         <div class="card__car__power__box card_car_power_box_wrap">
  84.             <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>
  85.             <span class="card__car__price__second" v-else>{% verbatim %}{{ item.vehicle.price }}{% endverbatim %} грн</span>
  86.             <span v-if="item.vehicle.fullPrice > item.vehicle.price && !(item.vehicle.isUsed && (item.vehicle.isReserved || item.vehicle.deposit))" class="card__car__price__old">{% verbatim %}{{ item.vehicle.fullPrice }}{% endverbatim %} грн</span>
  87.         </div>
  88.     </div>
  89.     <div class="add__comparison__like__box">
  91.         <button class="comparison__like add__comparison" :class="{ active:!!item.vehicle.comparedId }" :featuredId="item.vehicle.comparedId" @click="toggleCompare(item.vehicle.vehicleItemId)"></button>
  92.         <button class="comparison__like add__like" :class="{ active:!!item.vehicle.featuredId }" :featuredId="item.vehicle.featuredId" @click="toggleFavorite('vehicle',item.vehicle.featuredData)"></button>
  94.     </div>
  96.     <div class="location__box" v-if="!item.vehicle.isUsed && item.vehicle.brand.dealerCount > 1">
  97.             <img src="{{ asset('/bundles/portal/img/icon-svg/location-marker.svg') }}" alt="">
  98.             <span class="location__text" v-html="item.vehicle.dealerName"></span>
  99.     </div>
  100.     <div class="card__car__learn__more__box" :class="{ hideme: isActiveInfo == item.vehicle.vehicleItemId }">
  101.         <a class="car__learn__more__btn" @click="transitionToCarPage(item.vehicle.href)">{{ 'catalog.more_detail'|trans({}, 'portal_base') }}</a>
  103.             {# <div class="car__learn__more__info__wrapper" v-if="item.vehicle.optionsByEquipment.count > 0">
  104.                 <div class="car__learn__more" v-for="(group, id) in item.vehicle.optionsByEquipment">
  105.                     <div v-for="option in group.options">
  106.                         <img src="{{ asset('/bundles/portal/img/icon-svg/green-ok.svg') }}" alt="">
  107.                         <span class="car__learn__more__text" v-html="option"></span>
  108.                     </div>
  109.                 </div>
  110.             </div> #}
  111.     </div>
  113.     <div class="additional__information__box">
  114.             <img src="{{ asset('/bundles/portal/img/icon-svg/pdf-icon.svg') }}" alt="" v-if="item.vehicle.isUsed && item.hasNds">
  115.             <img src="{{ asset('/bundles/portal/img/icon-svg/select-icon.svg') }}" alt="" v-if="item.vehicle.isUsed && item.isSelect">
  116.     </div>
  117. </div>
  119. <div class="support__box-vue" v-else>
  120.     {% include '@Portal/Catalog/catalog-support-box.html.twig' %}
  121. </div>