| Current File : /home/n742ef5/royalanteam.com/wp-content/themes/myhome/templates/partials/compare_preview.php |
<div class="myhome-app myhome-compare-preview-wrapper">
<div class="myhome-compare-preview-wrapper__container">
<template>
<mh-compare-preview
class="myhome-compare-preview"
prefix="myhome"
:swiper-config="<?php echo htmlspecialchars(json_encode([
'loop' => false,
'spaceBetween' => 15,
'slidesPerView' => 3,
])); ?>"
compare-page-url="<?php echo esc_url(tdf_settings()->getComparePageUrl()); ?>"
>
<div
slot-scope="props"
class="myhome-compare-preview"
:class="{
'myhome-compare-preview--hidden': props.count === 0,
'myhome-compare-preview--open': props.open && props.count > 0
}"
>
<div class="myhome-compare-preview__button">
<div @click.prevent="props.onOpen" class="myhome-compare-button">
<div class="myhome-compare-button__inner">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M320 488c0 9.5-5.6 18.1-14.2 21.9s-18.8 2.3-25.8-4.1l-80-72c-5.1-4.6-7.9-11-7.9-17.8s2.9-13.3 7.9-17.8l80-72c7-6.3 17.2-7.9 25.8-4.1s14.2 12.4 14.2 21.9v40h16c35.3 0 64-28.7 64-64V153.3C371.7 141 352 112.8 352 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V320c0 70.7-57.3 128-128 128H320v40zM456 80a24 24 0 1 0 -48 0 24 24 0 1 0 48 0zM192 24c0-9.5 5.6-18.1 14.2-21.9s18.8-2.3 25.8 4.1l80 72c5.1 4.6 7.9 11 7.9 17.8s-2.9 13.3-7.9 17.8l-80 72c-7 6.3-17.2 7.9-25.8 4.1s-14.2-12.4-14.2-21.9V128H176c-35.3 0-64 28.7-64 64V358.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3V192c0-70.7 57.3-128 128-128h16V24zM56 432a24 24 0 1 0 48 0 24 24 0 1 0 -48 0z"/>
</svg>
<?php echo esc_html(tdf_string('compare')); ?>
<div class="myhome-compare-button__count">{{ props.count }}</div>
</div>
</div>
</div>
<div class="myhome-compare-preview__content">
<div class="myhome-compare-preview__list">
<div class="myhome-swiper-container">
<div class="myhome-swiper-wrapper">
<div
v-for="model in props.models"
:key="model.id"
class="myhome-swiper-slide"
>
<a
class="myhome-compare-preview-card"
:key="'myhome-compare-model-' + model.id"
:href="model.url"
>
<div class="myhome-compare-preview-card__image">
<img :src="model.image" :alt="model.name">
<div
class="myhome-compare-preview-card__remove"
@click.prevent="props.removeModel(model.id)"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
</svg>
</div>
</div>
<h3 class="myhome-compare-preview-card__label" v-html="model.name"></h3>
</a>
</div>
<div
v-for="index in props.placeholderNumber"
class="myhome-swiper-slide"
:key="index"
>
<div class="myhome-compare-preview-card">
<div class="myhome-compare-preview-card__image myhome-compare-preview-card__image--placeholer">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII="
alt="placeholder"
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="myhome-compare-preview__bottom">
<div>
<div
class="myhome-compare-preview__compare-button"
:class="{'myhome-compare-preview__compare-button--visible': props.models.length > 1}"
>
<a
class="myhome-button myhome-button--primary-1"
href="<?php echo esc_url(tdf_settings()->getComparePageUrl()); ?>"
>
<?php echo esc_html(tdf_string('compare')); ?>
</a>
</div>
<div
v-if="props.count === 1"
class="myhome-compare-preview__info"
>
<div class="myhome-compare-preview__info-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
</div>
<?php echo tdf_string('compare_info_text'); ?>
</div>
</div>
<div class="myhome-compare-preview__nav myhome-box-arrows">
<div
class="myhome-box-arrow"
:class="{'myhome-box-arrow--disabled': props.swiper.isBeginning}"
@click="props.prevSlide"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
</svg>
</div>
<div
class="myhome-box-arrow"
:class="{'myhome-box-arrow--disabled': props.swiper.isEnd}"
@click="props.nextSlide"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</mh-compare-preview>
</template>
</div>
</div>