src/DcSiteBundle/Resources/views/Modules/car/equipment-comparing.html.twig line 1

Open in your IDE?
  1. <section id="compare" class="complectation-prices section-padding pb-0" >
  2.     <div style="overflow: hidden;" >
  3.         <div class="container">
  4.             <div class="row">
  5.                 <div class="col-md-12 title" style="margin-bottom: 10px">
  6.                     <span>{{ 'pages.car_card.compare_equipment_title'|trans({}, 'dc_base') }} {{ model.fullName }} <small v-if="compared.length > 1">({% verbatim %}{{compared.length}}{% endverbatim %} в {{ 'car_page.new.compare'|trans({}, 'dc_base') }})</small></span>
  7.                 </div>
  8.                 <div class="col-12">
  9.                     <div id="equipment">
  10.                         <div class="comparing__error hidden-xs" style="margin-bottom: 20px" v-if="equipments.length > maxCompare && maxCompare > 1">
  11.                             <span>{{ 'car_page.compare.select_max_first'|trans({}, 'dc_base')|raw }}{% verbatim %} {{maxCompare}} {% endverbatim %}{{ 'car_page.compare.select_max_end'|trans({}, 'dc_base')|raw }}</span>
  12.                         </div>
  13.                         <div class="comparing__variations variations product-scroll">
  14.                             <div class="complectations group center complectation-slider" :style="equipments.length > 4 ? 'justify-content: space-between' : ''" id="scroll-content">
  15.                                 <div v-for="equipment in equipments">
  16.                                     <div class="variations__equipment equipment complectation" :class="{selected:inCompare(equipment.id), disabled: !allowedInCompare}" :data-id="equipment.id" :key="equipment.id" @click="onOffCompare">
  17.                                         <div class="variations__name" :title="equipment.title" v-html="equipment.title"></div>
  18.                                         <div class="variation_added-icon">
  20.                                             <svg class="added" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  21.                                                 <rect x="0.7" y="0.7" width="22.6" height="22.6" rx="11.3" fill="white" stroke="#CC0033" stroke-width="1.4"/>
  22.                                                 <path d="M17.25 12.75H6.75C6.336 12.75 6 12.414 6 12C6 11.586 6.336 11.25 6.75 11.25H17.25C17.664 11.25 18 11.586 18 12C18 12.414 17.664 12.75 17.25 12.75Z" fill="#CC0033"/>
  23.                                                 <path d="M12 18C11.586 18 11.25 17.664 11.25 17.25V6.75C11.25 6.336 11.586 6 12 6C12.414 6 12.75 6.336 12.75 6.75V17.25C12.75 17.664 12.414 18 12 18Z" fill="#CC0033"/>
  24.                                             </svg>
  26.                                             <svg class="add" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  27.                                                 <path d="M17.9923 8.05543C17.6229 7.6659 17.007 7.64874 16.6169 8.0191L10.4054 13.9098L7.44275 10.868C7.06751 10.483 6.45228 10.4746 6.06697 10.8498C5.68198 11.2247 5.67387 11.8406 6.04878 12.2256L9.68122 15.955C9.87158 16.1506 10.1246 16.2492 10.3782 16.2492C10.6189 16.2492 10.8595 16.1603 11.048 15.9823L17.9561 9.43093C18.3459 9.06118 18.3624 8.44529 17.9923 8.05543Z" fill="#CC0033"/>
  28.                                                 <path d="M12 0C5.38312 0 0 5.38312 0 12C0 18.6169 5.38312 24 12 24C18.6169 24 24 18.6169 24 12C24 5.38312 18.6169 0 12 0ZM12 22.0541C6.45633 22.0541 1.94592 17.544 1.94592 12C1.94592 6.45633 6.45628 1.94592 12 1.94592C17.544 1.94592 22.0541 6.45628 22.0541 12C22.0541 17.544 17.544 22.0541 12 22.0541Z" fill="#CC0033"/>
  29.                                             </svg>
  30.                                             <div class="variation_added-icon-h">
  31.                                                 <svg width="126" height="24" viewBox="0 0 126 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  32.                                                     <rect x="0.7" y="0.7" width="124.6" height="22.6" rx="11.3" fill="white" stroke="#CC0033" stroke-width="1.4"/>
  33.                                                     <path d="M119.25 12.75H108.75C108.336 12.75 108 12.414 108 12C108 11.586 108.336 11.25 108.75 11.25H119.25C119.664 11.25 120 11.586 120 12C120 12.414 119.664 12.75 119.25 12.75Z" fill="#CC0033"/>
  34.                                                     <path d="M114 18C113.586 18 113.25 17.664 113.25 17.25V6.75C113.25 6.336 113.586 6 114 6C114.414 6 114.75 6.336 114.75 6.75V17.25C114.75 17.664 114.414 18 114 18Z" fill="#CC0033"/>
  35.                                                 </svg>
  36.                                                 <span>{{ 'car.to_comapre'|trans({}, 'dc_base') }}  </span>
  37.                                             </div>
  38.                                         </div>
  39.                                         <div class="variations__price" v-if="equipment.minPrice != 0">
  40.                                             <span v-if="equipment.price > 0" class="new_price">
  41.                                                 {{ 'base.from'|trans({}, 'dc_toyota') }} <span v-html="equipment.price.toLocaleString()"></span> грн
  42.                                             </span>
  43.                                             <span v-else>{{ 'pages.base.no-price'|trans({},'dc_toyota') }}</span>
  44.                                             <span class="old_price" v-if="equipment.fullPrice > equipment.price"><span v-html="equipment.fullPrice.toLocaleString()"></span> грн</span>
  45.                                         </div>
  46.                                     </div>
  47.                                 </div>
  48.                             </div>
  49.                         </div>
  51.                         <div class="d-none d-md-flex variations__options">
  52.                             <div class="variations__options-descriptions">
  53.                                 <span><i class="standard"></i>Доступно</span>
  54.                                 <span><i class="unavailable"></i>{{ 'car_page.compare.no_avail'|trans({}, 'dc_base') }}</span>
  55.                                 <span><i class="optional"></i>{{ 'car_page.compare.avail'|trans({}, 'dc_base') }}</span>
  56.                             </div>
  57.                             <label class="checkbox" v-if="compared.length > 1">
  58.                                 <input type="checkbox" v-model="diffOnly" value="1">
  59.                                 <span>{{ 'car_page.compare.show_diff'|trans({}, 'dc_base') }}</span>
  60.                             </label>
  61.                         </div>
  62.                     </div>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.     </div>
  68.     <div class="comparing pb-5">
  69.         <div class="container">
  70.             <div class="row">
  71.                 <div class="col-md-12 comparing-table-no-padd">
  72.                     <div class="comparing__sticky-wrapper">
  73.                         <div class="comparing__table comparing__table-head comparing__sticky-elem">
  74.                             <table class="table table-bordered" :class="'table-var-cols-'+comparedCount">
  75.                                 <thead>
  76.                                 <tr>
  77.                                     <th class="vertical-middle">{{ 'car_page.compare.equipment'|trans({}, 'dc_base') }}</th>
  78.                                     <th class="text-center" v-for="equipment in compared" v-html="equipment.title"></th>
  79.                                 </tr>
  80.                                 </thead>
  81.                             </table>
  82.                         </div>
  83.                         <div :id="'pricelist-options-'+group.id" v-for="group, key, index in modelOptions" :class="index == 0 ? 'h-100 overflow-auto' : ''" style="overflow: hidden; height: 63px">
  84.                             <a @click="showPanel" ref="options" :href="'#pricelist-options-'+group.id" :class="index !== 0 ? 'closed ' : ''" class="border-top-0 table-subtitle pricelist-table-collapse ico-arrow" v-html="group.title"></a>
  85.                             <table class="table table-bordered mb-0" :class="'table-var-cols-'+comparedCount">
  86.                                 <tr v-for="option in group.options">
  87.                                     <td v-html="option.title"></td>
  88.                                     <td class="text-center" v-for="equipment in compared">
  89.                                         <span class="unavailable" v-if="!option.values[equipment.id]"></span>
  90.                                         <span v-if="option.values[equipment.id] && !option.values[equipment.id].value">
  91.                                             <span :class="!option.values[equipment.id].optional ? 'standard' : 'optional'" v-if="option.values[equipment.id] && !option.values[equipment.id].price"></span>
  92.                                             <span v-if="option.values[equipment.id] && option.values[equipment.id].price" style="display: flex;justify-content: center;align-items: center;">
  93.                                                 <span v-html="option.values[equipment.id].price.toLocaleString()"></span> грн
  94.                                             </span>
  95.                                         </span>
  96.                                         <span v-if="option.values[equipment.id] && option.values[equipment.id].value" v-html="option.values[equipment.id].value"></span>
  97.                                         <span v-if="option.values[equipment.id] && option.values[equipment.id].value && option.values[equipment.id].price">
  98.                                             <span style="display: flex;justify-content: center;align-items: center;">
  99.                                                 <span v-html="option.values[equipment.id].price.toLocaleString()"></span> грн
  100.                                             </span>
  101.                                         </span>
  102.                                     </td>
  103.                                 </tr>
  104.                             </table>
  105.                         </div>
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.         </div>
  110.     </div>
  111. </section>