src/DcSiteBundle/Resources/views/Modules/basket/basket_v2.html.twig line 1

Open in your IDE?
  1. <section class="section__basket">
  2.     <div class="container">
  3.         <h1 class="basket__title">{{ 'accessories.basket'|trans({}, 'dc_base') }}</h1>
  4.     </div>
  5. </section>
  7. <section id="basketWidget" class="section__basket">
  8.     <div class="container">
  9.       <div class="basket__item__wrapper">
  11.         <template v-if="accessories.length > 0">
  12.           <div v-for="accessory in accessories" class="basket__item__box">
  13.           <div class="basket__item-img-wrapper">
  14.             <img class="basket__item-img" :src="accessory.image && accessory.image.length > 0 ? accessory.image[0] : ''" alt="">
  15.             <p class="item__info__header-title info__header-title-desc-none"><span v-html="accessory.title"></span> (<span v-html="accessory.partNumber">(KP254-11156-00, KP254-11150-00)</span>)</p>
  16.           </div>
  17.           <div class="basket__item__info__wrapper">
  18.             <div class="basket__item__info__header">
  19.               <p class="item__info__header-title info__header-title-mob-none"><span v-html="accessory.title"></span> (<span v-html="accessory.partNumber">(KP254-11156-00, KP254-11150-00)</span>)</p>
  20.               <div class="item__info__header__del">
  21.                 <p class="info__header__code">{{ 'accessories.article'|trans({}, 'dc_base') }}:<span v-html="accessory.vendorCode"></span></p>
  22.                 <button class="info__header___delete" @click.stop.prevent="removeItem(accessory)">
  23.                   <p class="info__header___delete-text delete-text-n">{{ 'accessories.remove'|trans({}, 'dc_base') }}</p>
  24.                   <svg class="info__header___delete-text" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
  25.                     viewBox="0 0 24 24" fill="none">
  26.                     <path
  27.                       d="M20.2952 6.51925H3.71342C3.45916 6.5181 3.21565 6.41659 3.03586 6.2368C2.85608 6.05701 2.75457 5.8135 2.75342 5.55925V4.17161C2.75457 3.91735 2.85608 3.67384 3.03586 3.49405C3.21565 3.31427 3.45916 3.21276 3.71342 3.21161H20.2952C20.5495 3.21276 20.793 3.31427 20.9728 3.49405C21.1526 3.67384 21.2541 3.91735 21.2552 4.17161V5.55925C21.2541 5.8135 21.1526 6.05701 20.9728 6.2368C20.793 6.41659 20.5495 6.5181 20.2952 6.51925ZM3.71342 3.86615C3.63241 3.86615 3.55471 3.89834 3.49743 3.95562C3.44015 4.0129 3.40796 4.0906 3.40796 4.17161V5.55925C3.40796 5.64026 3.44015 5.71795 3.49743 5.77523C3.55471 5.83252 3.63241 5.8647 3.71342 5.8647H20.2952C20.3353 5.8647 20.3751 5.8568 20.4121 5.84145C20.4492 5.8261 20.4829 5.8036 20.5112 5.77523C20.5396 5.74687 20.5621 5.7132 20.5774 5.67614C20.5928 5.63908 20.6007 5.59936 20.6007 5.55925V4.17161C20.6007 4.1315 20.5928 4.09178 20.5774 4.05472C20.5621 4.01766 20.5396 3.98398 20.5112 3.95562C20.4829 3.92726 20.4492 3.90476 20.4121 3.88941C20.3751 3.87406 20.3353 3.86615 20.2952 3.86615H3.71342Z"
  28.                       fill="inherit" />
  29.                     <path
  30.                       d="M17.1142 22.8H6.88585C6.48077 22.8015 6.08993 22.6507 5.79085 22.3775C5.49178 22.1043 5.30633 21.7287 5.2713 21.3251L3.84875 6.22256C3.84401 6.17726 3.84852 6.13146 3.86202 6.08795C3.87553 6.04444 3.89773 6.00413 3.9273 5.96947C3.9581 5.93664 3.99526 5.91042 4.03653 5.89242C4.07779 5.87441 4.12228 5.865 4.1673 5.86475H19.8284C19.8734 5.865 19.9179 5.87441 19.9592 5.89242C20.0004 5.91042 20.0376 5.93664 20.0684 5.96947C20.0987 6.00378 20.1217 6.04393 20.136 6.08745C20.1503 6.13098 20.1555 6.17696 20.1513 6.22256L18.7288 21.3251C18.6937 21.7287 18.5083 22.1043 18.2092 22.3775C17.9101 22.6507 17.5193 22.8015 17.1142 22.8ZM4.53385 6.51929L5.92148 21.264C5.9453 21.5032 6.0572 21.725 6.23542 21.8863C6.41365 22.0476 6.64547 22.1368 6.88585 22.1367H17.1142C17.3546 22.1368 17.5864 22.0476 17.7646 21.8863C17.9429 21.725 18.0548 21.5032 18.0786 21.264L19.4662 6.51929H4.53385Z"
  31.                       fill="inherit" />
  32.                     <path
  33.                       d="M15.5782 3.86619H8.42184C8.36252 3.86593 8.30439 3.84955 8.25366 3.81881C8.20294 3.78806 8.16152 3.74411 8.13384 3.69165C8.10391 3.64072 8.08813 3.58272 8.08813 3.52365C8.08813 3.46458 8.10391 3.40658 8.13384 3.35565L9.21602 1.77165C9.33535 1.59663 9.49536 1.45317 9.68233 1.35361C9.86931 1.25404 10.0776 1.20133 10.2895 1.20001H13.6757C13.8875 1.20133 14.0958 1.25404 14.2828 1.35361C14.4698 1.45317 14.6298 1.59663 14.7491 1.77165L15.8313 3.35565C15.8612 3.40658 15.877 3.46458 15.877 3.52365C15.877 3.58272 15.8612 3.64072 15.8313 3.69165C15.8066 3.73925 15.7706 3.78006 15.7265 3.81049C15.6824 3.84092 15.6315 3.86005 15.5782 3.86619ZM9.03275 3.21165H14.9586L14.2255 2.13819C14.1671 2.05062 14.0879 1.97887 13.995 1.92938C13.9021 1.87988 13.7984 1.85418 13.6931 1.85456H10.3069C10.2017 1.85418 10.0979 1.87988 10.005 1.92938C9.91215 1.97887 9.83296 2.05062 9.77456 2.13819L9.03275 3.21165Z"
  34.                       fill="inherit" />
  35.                     <path
  36.                       d="M8.77523 20.3738C8.6949 20.3732 8.61761 20.3431 8.55807 20.2892C8.49852 20.2352 8.46088 20.1613 8.45232 20.0815L7.26104 8.60073C7.25746 8.51725 7.28593 8.43557 7.34063 8.37242C7.39532 8.30926 7.47211 8.26941 7.55523 8.26105C7.63836 8.25268 7.72154 8.27642 7.78773 8.3274C7.85392 8.37839 7.8981 8.45276 7.91123 8.53527L9.1025 20.0116C9.11103 20.0978 9.08505 20.1839 9.03025 20.251C8.97545 20.318 8.8963 20.3606 8.81014 20.3695L8.77523 20.3738Z"
  37.                       fill="inherit" />
  38.                     <path
  39.                       d="M11.9999 20.3738C11.9134 20.3727 11.8308 20.3378 11.7697 20.2767C11.7086 20.2156 11.6737 20.133 11.6726 20.0465V8.5658C11.6726 8.479 11.7071 8.39576 11.7685 8.33438C11.8298 8.27301 11.9131 8.23853 11.9999 8.23853C12.0867 8.23853 12.1699 8.27301 12.2313 8.33438C12.2927 8.39576 12.3272 8.479 12.3272 8.5658V20.0465C12.326 20.133 12.2912 20.2156 12.23 20.2767C12.1689 20.3378 12.0863 20.3727 11.9999 20.3738Z"
  40.                       fill="inherit" />
  41.                     <path
  42.                       d="M15.2246 20.3738H15.1897C15.1035 20.365 15.0244 20.3224 14.9696 20.2553C14.9148 20.1883 14.8888 20.1022 14.8973 20.016L16.0886 8.53966C16.0905 8.49514 16.1015 8.45148 16.1209 8.41136C16.1403 8.37124 16.1676 8.3355 16.2013 8.30632C16.235 8.27715 16.2743 8.25517 16.3168 8.24171C16.3593 8.22826 16.404 8.22362 16.4484 8.22809C16.4927 8.23255 16.5357 8.24602 16.5746 8.26767C16.6136 8.28932 16.6477 8.3187 16.6749 8.354C16.7021 8.3893 16.7217 8.42978 16.7327 8.47296C16.7437 8.51614 16.7458 8.56111 16.7388 8.60511L15.5475 20.0728C15.541 20.1542 15.5042 20.2302 15.4445 20.2859C15.3847 20.3417 15.3063 20.373 15.2246 20.3738Z"
  43.                       fill="inherit" />
  44.                   </svg>
  45.                 </button>
  46.               </div>
  47.             </div>
  48.             <div class="basket__item__suitable">
  49.               <p v-if="Object.keys(accessory.models).length > 0" class="item__suitable-name">{{ 'accessories.suitable_for_1'|trans({}, 'dc_base') }} :</p>
  50.               <span v-for="model in accessory.models" class="item__suitable-item" v-html="model+';'"></span>
  51.             </div>
  53.               <div class="basket__item__price__wrapper">
  54.                 <div class="basket__item__price__row item__price__row-top">
  55.                   <p class="basket__item__price__name">{{ 'accessories.price_accessory'|trans({}, 'dc_base') }}</p>
  56.                   <div class="item__counter__row">
  58.                     <div class="item__counter__wrapper">
  59.                       <div class="item__counter-btn counter-btn-left" @click="changeCountAccessory(accessory, accessory.count-1, false)">-</div>
  60.                       <input class="item__counter-input" type="text" :value="accessory.count" autocomplete="off" disabled>
  61.                       <div class="item__counter-btn counter-btn counter-btn-right" @click="changeCountAccessory(accessory, accessory.count+1, true)">+</div>
  62.                     </div>
  64.                     <div class="basket__item__price__box">
  65.                       <input class="basket__item__price-input" type="radio" @click.stop.prevent="toggleInstall(accessory, false, $event)" :name="'install-'+accessory.id" :id="'install-'+accessory.id+'-false'" :checked="!accessory.data.withJob"/>
  66.                       <label class="basket__item__price-label" :for="'install-'+accessory.id+'-false'" v-html="priceFormat(accessory.price*accessory.count)"></label>
  67.                     </div>
  68.                   </div>
  69.                 </div>
  71.               <div v-if="accessory.priceJob > 0" class="basket__item__price__row">
  72.                 <div class="basket__item__price__card__parent">
  73.                   <p class="basket__item__price__name">{{ 'accessories.price_installation'|trans({}, 'dc_base') }}</p>
  74.                   <svg class="basket__item__price__card-icon" xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11"
  75.                     fill="none">
  76.                     <path fill-rule="evenodd" clip-rule="evenodd"
  77.                       d="M4.99953 0.5C6.38053 0.5 7.63041 1.05938 8.53504 1.96401C9.43968 2.86959 10 4.11947 10 5.49953C10 6.88053 9.43968 8.13041 8.53504 9.03504C7.63041 9.93968 6.38053 10.5 4.99953 10.5C3.61947 10.5 2.36959 9.93968 1.46401 9.03504C0.559381 8.13041 0 6.88053 0 5.49953C0 4.11947 0.559381 2.86864 1.46401 1.96401C2.36864 1.05938 3.61947 0.5 4.99953 0.5ZM7.98321 2.51585C7.22007 1.75271 6.16451 1.28012 4.99953 1.28012C3.83454 1.28012 2.77993 1.75271 2.01585 2.51585C1.25271 3.27993 0.780115 4.33454 0.780115 5.49953C0.780115 6.66451 1.25271 7.72007 2.01585 8.48321C2.77993 9.24634 3.83454 9.71894 4.99953 9.71894C6.16451 9.71894 7.22007 9.24634 7.98321 8.48321C8.74634 7.72007 9.21894 6.66451 9.21894 5.49953C9.21894 4.33454 8.74634 3.27993 7.98321 2.51585ZM4.95614 3.6714C4.74106 3.6714 4.56655 3.49689 4.56655 3.28181C4.56655 3.0658 4.74106 2.89128 4.95614 2.89128H5.04292C5.25894 2.89128 5.43345 3.0658 5.43345 3.28181C5.43345 3.49689 5.25894 3.6714 5.04292 3.6714H4.95614ZM4.60617 4.5732C4.60617 4.35813 4.78068 4.18361 4.9967 4.18361C5.21177 4.18361 5.38628 4.35813 5.38628 4.5732V7.71819C5.38628 7.93326 5.21177 8.10872 4.9967 8.10872C4.78068 8.10872 4.60617 7.93326 4.60617 7.71819V4.5732Z"
  78.                       fill="#9C9C9C" />
  79.                   </svg>
  80.                   <div class="basket__price__card__info__box">
  81.                     <p>{{ 'accessories.price_accessory'|trans({}, 'dc_base') }} <span v-html="priceFormat(accessory.price)"></span></p>
  82.                     <p>{{ 'accessories.installation_price'|trans({}, 'dc_base') }} <span v-html="priceFormat(accessory.priceJob)"></span></p>
  83.                     <p>{{ 'accessories.total_price'|trans({}, 'dc_base') }} <span v-html="priceFormat(accessory.price + accessory.priceJob)"></span></p>
  84.                   </div>
  85.                 </div>
  87.                 <div class="basket__item__price__box">
  88.                   <input class="basket__item__price-input" type="radio" @click.stop.prevent="toggleInstall(accessory, true, $event)" :name="'install-'+accessory.id" :id="'install-'+accessory.id+'-true'" :checked="accessory.data.withJob" />
  89.                   <label class="basket__item__price-label" :for="'install-'+accessory.id+'-true'" v-html="priceFormat((accessory.price + accessory.priceJob)*accessory.count)">
  90.                   </label>
  91.                 </div>
  92.               </div>
  93.             </div>
  94.           </div>
  95.         </div>
  96.         </template>
  97.       </div>
  99.       <div class="basket__checkout__wrapper">
  100.         <a class="basket__checkout__continue" :href="options.shopCatalogUrl">{{ 'accessories.continue_shopping'|trans({}, 'dc_base') }}</a>
  101. {#        <div v-if="options.userId" class="basket__checkout__box">#}
  102.         <div class="basket__checkout__box">
  103.           <p class="basket__checkout__result__price">
  104.             <span v-html="priceFormat(sumPrice)"></span> грн
  105.           </p>
  106.           <a class="basket__checkout__buy-btn" @click="sendEcommerce">{{ 'accessories.to_order'|trans({}, 'dc_base') }}</a>
  107.         </div>
  108.       </div>
  109.     </div>
  111. </section>