<?php
/* @var \Vehica\Widgets\Car\Archive\SearchListingCarArchiveWidget $vehicaCurrentWidget */
global $vehicaCurrentWidget, $vehicaCarCard;
$vehicaCarCard = $vehicaCurrentWidget->getCarCard();
$vehicaSearchFields = $vehicaCurrentWidget->getSearchFields();
$vehicaCars = $vehicaCurrentWidget->getCars();
$vehicaInitialFilters = $vehicaCurrentWidget->getInitialFilters();
?>
<div class="vehica-app vehica-search-form-loading">
<vehica-query-cars
request-url="<?php echo esc_url(admin_url('admin-ajax.php?action=vehica_car_results')); ?>"
:limit="<?php echo esc_attr($vehicaCurrentWidget->getResultsLimit()); ?>"
sort-by-rewrite="<?php echo esc_html(vehicaApp('sort_by_rewrite')); ?>"
keyword-rewrite="<?php echo esc_html(vehicaApp('keyword_rewrite')); ?>"
initial-sort-by="<?php echo esc_attr($vehicaCurrentWidget->getInitialSortBy()); ?>"
default-sort-by="<?php echo esc_attr($vehicaCurrentWidget->getDefaultSortBy()); ?>"
:initial-results-count="<?php echo esc_attr($vehicaCurrentWidget->getCarsCount()); ?>"
initial-formatted-results-count="<?php echo esc_attr($vehicaCurrentWidget->getFormattedCarsCount()); ?>"
:initial-terms-count="<?php echo htmlspecialchars(json_encode($vehicaCurrentWidget->getTermsCount())); ?>"
:initial-filters="<?php echo htmlspecialchars(json_encode($vehicaInitialFilters)); ?>"
:additional-settings="<?php echo htmlspecialchars(json_encode($vehicaCurrentWidget->getAdditionalSettings())); ?>"
:card-config="<?php echo htmlspecialchars(json_encode($vehicaCurrentWidget->getCardConfig())) ?>"
:taxonomy-terms-count-ids="<?php echo htmlspecialchars(json_encode($vehicaCurrentWidget->getTaxonomySearchFieldIds())); ?>"
initial-keyword="<?php echo esc_attr($vehicaCurrentWidget->getInitialKeywordValue()); ?>"
view="<?php echo esc_attr($vehicaCarCard->getType()); ?>"
primary-taxonomy-key="<?php echo esc_attr($vehicaCurrentWidget->getPrimaryFieldTaxonomyKey()); ?>"
:initial-page="<?php echo esc_attr($vehicaCurrentWidget->getInitialPage()); ?>"
base-url="<?php echo esc_url(vehicaApp('car_archive_url')); ?>"
<?php if ($vehicaCurrentWidget->isCardV3()) : ?>
content-class="vehica-inventory-v1__row-grid"
<?php else : ?>
content-class="vehica-inventory-v1__results"
<?php endif; ?>
>
<div slot-scope="searchFormProps" <?php $vehicaCurrentWidget->print_render_attribute_string('main') ?>>
<div
class="vehica-inventory-v1"
:class="{'vehica-inventory-v1__is-advanced': searchFormProps.showAdvanced, 'vehica-inventory-v1__is-reloading': searchFormProps.isReloading}"
>
<div
@click.prevent="searchFormProps.showMobileMenu"
class="vehica-inventory-v1__mobile-button-options"
:class="{'vehica-inventory-v1__mobile-button-options--active': searchFormProps.filtersCount > 0}"
>
<button>
<?php echo esc_html(vehicaApp('filters_string')); ?>
<template>({{ searchFormProps.filtersCount }})</template>
</button>
</div>
<div class="vehica-inventory-v1__top">
<div class="vehica-inventory-v1__top__inner">
<vehica-show-advanced-fields>
<div
slot-scope="showAdvancedFields"
class="vehica-results__fields"
:class="{'vehica-results__fields--mobile-open': searchFormProps.mobileMenu}"
>
<div class="vehica-results__fields__mobile-section-top">
<h3 class="vehica-results__fields__mobile-section-top__title">
<?php echo esc_html(vehicaApp('filters_string')); ?>
</h3>
<h4 class="vehica-results__fields__mobile-section-top__subtitle">
<template>
<span class="vehica-results__fields__mobile-section-top__subtitle__number">
{{ searchFormProps.resultsCount }}
</span>
</template>
<span class="vehica-results__fields__mobile-section-top__subtitle__label">
<?php echo esc_html(vehicaApp('results_string')); ?>
</span>
<span
v-if="searchFormProps.filtersCount > 0"
@click="searchFormProps.reset"
class="vehica-results__fields__mobile-section-top__subtitle__clear"
>
<?php echo esc_html(vehicaApp('clear_all_string')); ?>
</span>
</h4>
<div
@click.prevent="searchFormProps.hideMobileMenu"
class="vehica-results__fields__mobile-section-top__close"
>
<i class="fa fa-times-circle"></i>
</div>
</div>
<?php
global $vehicaSearchField;
foreach ($vehicaSearchFields as $vehicaSearchField) :
/* @var \Vehica\Search\Field\SearchField|\Vehica\Search\Field\SearchField $vehicaSearchField */
if ($vehicaSearchField->isTaxonomy()) :
get_template_part('templates/search/fields/taxonomy');
elseif ($vehicaSearchField->isNumberField()) :
get_template_part('templates/search/fields/number');
elseif ($vehicaSearchField->isPriceField()) :
get_template_part('templates/search/fields/price');
elseif ($vehicaSearchField->isTextField()) :
get_template_part('templates/search/fields/text');
elseif ($vehicaSearchField->isDateField()) :
get_template_part('templates/search/fields/date');
elseif ($vehicaSearchField->isLocationField()) :
get_template_part('templates/search/fields/location');
endif;
endforeach;
?>
<div class="vehica-results__fields__clear-load-more">
<div
class="vehica-results__fields__clear"
@click="searchFormProps.reset"
>
<?php echo esc_html(vehicaApp('clear_all_string')); ?>
</div>
<div
v-if="showAdvancedFields.showAdvancedButton"
class="vehica-results__advanced-button <?php echo esc_attr($vehicaCurrentWidget->getAdvancedButtonClasses($vehicaSearchFields->count())); ?>"
@click.prevent="showAdvancedFields.onShowAdvanced"
>
<div v-if="!showAdvancedFields.showAdvanced">
<i class="fas fa-angle-double-down"></i> <?php echo esc_html(vehicaApp('more_filters_string')); ?>
</div>
<template>
<div v-if="showAdvancedFields.showAdvanced">
<i class="fas fa-angle-double-up"></i> <?php echo esc_html(vehicaApp('less_filters_string')); ?>
</div>
</template>
</div>
</div>
<div
@click.prevent="searchFormProps.hideMobileMenu"
class="vehica-results__fields__mobile-section-bottom"
>
<button class="vehica-button">
<?php echo esc_html(vehicaApp('apply_string')); ?>
</button>
</div>
</div>
</vehica-show-advanced-fields>
<div class="vehica-inventory-v1__bar">
<div class="vehica-inventory-v1__bar__left">
<?php if ($vehicaCurrentWidget->hasPrimaryFieldTerms()) : ?>
<vehica-taxonomy-search-field
:taxonomy="<?php echo htmlspecialchars(json_encode($vehicaCurrentWidget->getPrimaryFieldTaxonomy())); ?>"
:filters="searchFormProps.filters"
:terms="<?php echo htmlspecialchars(json_encode($vehicaCurrentWidget->getPrimaryFieldTerms())); ?>"
:terms-count="searchFormProps.terms"
:show-always="true"
>
<div
slot-scope="taxonomyField"
class="vehica-search-v1__tabs"
v-dragscroll.pass="true"
>
<div
class="vehica-search-v1__tab vehica-search-v1__tab--all"
:class="{'vehica-search-v1__tab--active': taxonomyField.showAll}"
>
<button
@click.prevent="taxonomyField.clearSelection"
class="vehica-search-v1__tab-button"
>
<?php echo esc_html(vehicaApp('all_string')); ?>
<template>
<span class="vehica-search-v1__tab-count">
({{ taxonomyField.getTermCount(taxonomyField.key) }})
</span>
</template>
</button>
</div>
<?php foreach ($vehicaCurrentWidget->getPrimaryFieldTerms() as $vehicaTerm) :
/* @var \Vehica\Model\Term\Term $vehicaTerm */
?>
<div
class="vehica-search-v1__tab"
:class="{'vehica-search-v1__tab--active': taxonomyField.isTermSelected(<?php
echo esc_attr($vehicaTerm->getId()); ?>)}"
>
<button
@click.prevent="taxonomyField.setTermId(<?php echo esc_attr($vehicaTerm->getId()); ?>)"
:disabled="taxonomyField.isTermDisabled(<?php echo esc_attr($vehicaTerm->getId()); ?>)"
class="vehica-search-v1__tab-button"
>
<?php echo esc_html($vehicaTerm->getName()) ?>
<template>
<span class="vehica-search-v1__tab-count">
({{ taxonomyField.getTermCount(<?php echo esc_attr($vehicaTerm->getId()); ?>)}})
</span>
</template>
</button>
</div>
<?php endforeach; ?>
</div>
</vehica-taxonomy-search-field>
<?php endif; ?>
</div>
<div class="vehica-inventory-v1__bar__right">
<?php if (vehicaApp('compare_mode') === 1) : ?>
<vehica-compare>
<div
slot-scope="compare"
class="vehica-inventory-v1__compare"
:class="{'vehica-inventory-v1__compare--active': compare.compareMode}"
@click.prevent="compare.setCompareMode"
>
<i class="fas fa-exchange-alt"></i>
<?php echo esc_html(vehicaApp('compare_string')) ?>
<template v-if="compare.compareMode">
({{ compare.cars.length }})
</template>
</div>
</vehica-compare>
<?php endif; ?>
<?php if ($vehicaCurrentWidget->showKeyword()) : ?>
<div
class="vehica-inventory-v1__keyword"
:class="{'vehica-inventory-v1__keyword--active': searchFormProps.keyword.length > 0}"
>
<input
@input="searchFormProps.setKeyword($event.target.value)"
:value="searchFormProps.keyword"
type="text"
maxlength="25"
placeholder="<?php echo esc_html(vehicaApp('enter_keyword_string')); ?>"
value="<?php echo esc_attr($vehicaCurrentWidget->getInitialKeywordValue()); ?>"
>
<div
v-if="searchFormProps.keyword.length > 0"
@click="searchFormProps.setKeyword('')"
class="vehica-inventory-v1__clear-keyword"
>
<svg xmlns="http://www.w3.org/2000/svg"
width="10" height="10">
<path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>
</svg>
</div>
<div class="vehica-inventory-v1__keyword__icon">
<i class="fas fa-search"></i>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<div class="vehica-inventory-v1__loader">
<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff">
<circle cx="15" cy="15" r="15">
<animate attributeName="r" from="15" to="15"
begin="0s" dur="0.8s"
values="15;9;15" calcMode="linear"
repeatCount="indefinite"/>
<animate attributeName="fill-opacity" from="1" to="1"
begin="0s" dur="0.8s"
values="1;.5;1" calcMode="linear"
repeatCount="indefinite"/>
</circle>
<circle cx="60" cy="15" r="9" fill-opacity="0.3">
<animate attributeName="r" from="9" to="9"
begin="0s" dur="0.8s"
values="9;15;9" calcMode="linear"
repeatCount="indefinite"/>
<animate attributeName="fill-opacity" from="0.5" to="0.5"
begin="0s" dur="0.8s"
values=".5;1;.5" calcMode="linear"
repeatCount="indefinite"/>
</circle>
<circle cx="105" cy="15" r="15">
<animate attributeName="r" from="15" to="15"
begin="0s" dur="0.8s"
values="15;9;15" calcMode="linear"
repeatCount="indefinite"/>
<animate attributeName="fill-opacity" from="1" to="1"
begin="0s" dur="0.8s"
values="1;.5;1" calcMode="linear"
repeatCount="indefinite"/>
</circle>
</svg>
</div>
<div class="vehica-inventory-v1__middle">
<div>
<div v-if="false" class="vehica-inventory-v1__title">
<span><?php echo esc_html($vehicaCurrentWidget->getCarsCount()); ?></span>
<?php if ($vehicaCurrentWidget->getCarsCount() === 1) : ?>
<?php echo esc_html(vehicaApp('result_string')); ?>
<?php else : ?>
<?php echo esc_html(vehicaApp('results_string')); ?>
<?php endif; ?>
</div>
<template>
<div class="vehica-inventory-v1__title">
<template v-if="searchFormProps.resultsCount === 1">
{{ searchFormProps.resultsCount }}
<?php echo esc_html(vehicaApp('result_string')); ?>
</template>
<template v-if="searchFormProps.resultsCount !== 1">
{{ searchFormProps.resultsCount }}
<?php echo esc_html(vehicaApp('results_string')); ?>
</template>
</div>
</template>
</div>
<?php if ($vehicaCurrentWidget->showSortBy()) : ?>
<div class="vehica-inventory-v1__sort">
<?php if ($vehicaCurrentWidget->showViewSelector()) : ?>
<div class="vehica-inventory-v1__view">
<button
@click.prevent="searchFormProps.setView('v2')"
<?php if ($vehicaCurrentWidget->isCardV2()) : ?>
class="vehica-inventory-v1__view__button-active"
<?php endif; ?>
>
<svg xmlns="http://www.w3.org/2000/svg"
width="20" height="20"
viewBox="0 0 20 20">
<g
transform="translate(-819 -493)">
<rect
data-name="Rectangle 5"
width="9" height="8"
rx="3"
transform="translate(819 493)"
fill="#888e95"
/>
<rect
data-name="Rectangle 6"
width="9" height="8"
rx="3"
transform="translate(830 493)"
fill="#888e95"
/>
<rect
data-name="Rectangle 7"
width="9" height="8"
rx="3"
transform="translate(830 505)"
fill="#888e95"
/>
<rect
data-name="Rectangle 8"
width="9" height="8"
rx="3"
transform="translate(819 505)"
fill="#888e95"
/>
</g>
</svg>
</button>
<button
@click.prevent="searchFormProps.setView('v3')"
<?php if ($vehicaCurrentWidget->isCardV3()) : ?>
class="vehica-inventory-v1__view__button-active"
<?php endif; ?>
>
<svg xmlns="http://www.w3.org/2000/svg"
width="25" height="20"
viewBox="0 0 25 20">
<g id="lista"
transform="translate(-830 -493)">
<rect
data-name="Rectangle 6"
width="25" height="8"
rx="3"
transform="translate(830 493)"
fill="#888e95"
/>
<rect
data-name="Rectangle 7"
width="25" height="8"
rx="3"
transform="translate(830 505)"
fill="#888e95"
/>
</g>
</svg>
</button>
</div>
<?php endif; ?>
<div class="vehica-inventory-v1__sort__heading">
<?php echo esc_html(vehicaApp('sort_by_string')); ?>:
</div>
<div class="vehica-inventory-v1__sort__select">
<div v-if="false" class="vehica-form-button">
<?php echo esc_html($vehicaCurrentWidget->getInitialSortByLabel()); ?>
</div>
<template>
<v-select
:options="<?php echo htmlspecialchars(json_encode($vehicaCurrentWidget->getSortByOptions())); ?>"
label="name"
:append-to-body="false"
:reduce="option => option.key"
@input="searchFormProps.setSortBy"
:clearable="false"
:value="searchFormProps.sortBy"
:searchable="false"
>
</v-select>
</template>
</div>
</div>
<?php endif; ?>
</div>
<div>
<?php if ($vehicaCurrentWidget->isCardV3()) : ?>
<div class="vehica-inventory-v1__2-cols">
<div class="vehica-inventory-v1__2-cols__left">
<div class="vehica-inventory-v1__row-grid">
<?php foreach ($vehicaCars as $vehicaCurrentCar) : ?>
<?php $vehicaCarCard->loadTemplate($vehicaCurrentCar); ?>
<?php endforeach; ?>
</div>
</div>
<?php if ($vehicaCurrentWidget->showColumn()) : ?>
<div class="vehica-inventory-v1__2-cols__right">
<div class="vehica-inventory-v1__2-cols__right__inner">
<?php echo wp_kses_post($vehicaCurrentWidget->getColumnContent()); ?>
<div class="clearfix"></div>
</div>
</div>
<?php endif; ?>
</div>
<?php else : ?>
<div class="vehica-inventory-v1__results">
<?php foreach ($vehicaCurrentWidget->getCars() as $vehicaCurrentCar) : ?>
<div class="vehica-inventory-v1__results__card">
<?php $vehicaCarCard->loadTemplate($vehicaCurrentCar); ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<template>
<div class="vehica-inventory-v1__pagination vehica-pagination-mobile--inventory">
<vehica-pagination
:total-items="searchFormProps.resultsCount"
:current-page="searchFormProps.currentPage"
:page-size="searchFormProps.limit"
:max-pages="7"
>
<div
slot-scope="pagination"
v-if="pagination.pages.length > 1"
>
<div class="vehica-pagination-mobile">
<button
@click.prevent="searchFormProps.setPrevPage"
class="vehica-pagination-mobile__arrow vehica-pagination-mobile__arrow--left"
:class="{'vehica-pagination-mobile__arrow--disabled': pagination.currentPage === 1}"
:disabled="pagination.currentPage === 1"
>
<i class="fa fa-chevron-left"></i>
</button>
<span class="vehica-pagination-mobile__start">{{ pagination.currentPage }}</span>
<span class="vehica-pagination-mobile__middle">/</span>
<span class="vehica-pagination-mobile__end">{{ pagination.totalPages }}</span>
<button
@click.prevent="searchFormProps.setNextPage"
class="vehica-pagination-mobile__arrow vehica-pagination-mobile__arrow--right"
:class="{'vehica-pagination-mobile__arrow--disabled': pagination.currentPage === pagination.endPage}"
:disabled="pagination.currentPage === pagination.endPage"
>
<i class="fa fa-chevron-right"></i>
</button>
</div>
<div class="vehica-pagination vehica-pagination--inventory">
<div class="vehica-pagination__inner">
<div
v-if="pagination.currentPage > 1"
class="vehica-pagination__arrow vehica-pagination__arrow--left"
@click.prevent="searchFormProps.setPrevPage"
>
<i class="fa fa-chevron-left"></i>
</div>
<div
v-if="pagination.startPage > 1"
class="vehica-pagination__page"
@click.prevent="searchFormProps.setCurrentPage(1)"
>
1
</div>
<div v-if="pagination.startPage > 2" class="vehica-pagination__page">
...
</div>
<div
v-for="page in pagination.pages"
class="vehica-pagination__page"
:class="{'vehica-pagination__page--active': page === searchFormProps.currentPage}"
@click.prevent="searchFormProps.setCurrentPage(page)"
>
{{ page }}
</div>
<div
v-if="pagination.currentPage < pagination.endPage"
class="vehica-pagination__arrow vehica-pagination__arrow--right"
@click.prevent="searchFormProps.setNextPage"
>
<i class="fa fa-chevron-right"></i>
</div>
</div>
</div>
</div>
</vehica-pagination>
</div>
</template>
</div>
</div>
</vehica-query-cars>
</div>