Skip to content

Instantly share code, notes, and snippets.

@julesbravo

julesbravo/searchspring.html

Created May 7, 2021 13:22
Show Gist options
  • Save julesbravo/260f82cd9aa87ddf9dad2bb84cbb2492 to your computer and use it in GitHub Desktop.
Save julesbravo/260f82cd9aa87ddf9dad2bb84cbb2492 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
searchspring.html
<!-- Stylesheet -->
<link rel="stylesheet" href="//cdn.searchspring.net/ajax_search/sites/h7hdij/css/h7hdij.css">
<!-- AutoComplete -->
<script type="text/ss-template" name="AutoComplete" target="[ss-autocomplete]">
<section class="quickSearchResults" ng-show="ac.visible">
<div ng-show="ac.terms" id="ss-ac-terms" class="searchSuggestion">
<ul>
<li ng-repeat="term in ac.terms | limitTo:4" ng-class="{'ss-active': term.active}">
<a ng-bind-html="term.label | trusted" ss-no-ps ss-nav-selectable ng-focus="term.preview()" href="{{ term.url }}"></a>
</li>
</ul>
</div>
<div ng-if="ac.results" class="searchInner" id="ss-ac-content" data-list-name="{{ ac.context.dataPage }}">
<a class="modal-close" aria-label="Close" data-drop-down-close="" role="button">
<span aria-hidden="true">×</span>
</a>
<h3>Your Search Results for <span class="quickKeyword">"{{ ac.q }}"</span></h3>
<div ng-if="ac.merchandising.content.header.length > 0" id="ss-ac-merch-header" class="ss-ac-merchandising" ss-merchandising="ac.header"></div>
<div ng-if="ac.merchandising.content.banner.length > 0" id="ss-ac-merch-banner" class="ss-ac-merchandising" ss-merchandising="ac.banner"></div>
<ul class="productGrid">
<li ng-repeat="result in ac.results | limitTo:4" class="product">
<!-- result template target -->
</li>
</ul>
<div class="quickSearchBottom">
<div class="quickSearchList" id="ss-ac-facets" ng-show="ac.facets">
<div ng-repeat="facet in ac.facets | filter:{ type: '!slider' } | limitTo:3">
<h4>{{ facet.label }}</h4>
<ul>
<li ng-repeat="value in facet.values | limitTo:4">
<a href="{{ value.url }}">{{ value.label }}</a>
</li>
</ul>
</div>
</div>
<div ng-if="ac.merchandising.content.footer.length > 0" id="ss-ac-merch-footer" class="ss-ac-merchandising" ss-merchandising="ac.footer"></div>
<div class="quickbottomButton">
<a href="javascript:void(0)" ng-click="ac.location.remove('perpage').go(); ac.visible = false;" ss-no-ps>Show All Results</a>
<p>There are {{ ac.pagination.totalResults }} result{{ ac.pagination.totalResults > 1 ? 's' : '' }} based on your parameters.</p>
</div>
</div>
</div>
</section>
</script>
<!-- Facets - Range Slider -->
<script type="text/ss-template" name="Facets - Range Slider" target=".ss-range-slider-container">
<div ng-if="facet.range[0] != facet.range[1]" ss-facet-slider="facet" class="ss-range-slider"></div>
<div ng-if="facet.range[0] != facet.range[1] && facet.facet_active" class="ss-range-slider-reset">
<a ng-if="facet.facet_active" ng-href="{{ location().remove('filter', facet.field).url() }}" class="ss-range-slider-reset-link">Reset</a>
</div>
</script>
<!-- SearchSpring Sidebar -->
<script type="text/ss-template" name="SearchSpring Sidebar" module="search" target="#searchspring-sidebar">
<aside id="facetedSearch" class="facetedSearch sidebarBlock ss-sidebar-container">
<div id="facetedSearch-navList" class="facetedSearch-navList blocker-container" aria-hidden="true">
<div class="accordion accordion--navList">
<div ng-if="facets.length === 0" class="ss-filter-messages"></div>
<div ng-if="facets.length" class="ss-facets"></div>
</div>
</div>
</aside>
</script>
<!-- Filter Messages -->
<script type="text/ss-template" name="Filter Messages" target=".ss-filter-messages">
<p ng-if="pagination.totalResults === 0 && filterSummary.length === 0" class="ss-filter-message-content">
There are no results to refine. If you need additional help, please try our search "<strong>Suggestions</strong>".
</p>
<p ng-if="pagination.totalResults === 0 && filterSummary.length" class="ss-filter-message-content">
If you are not seeing any results, try removing some of your selected filters.
</p>
<p ng-if="pagination.totalResults && filterSummary.length === 0" class="ss-filter-message-content">
There are no filters to refine by.
</p>
</script>
<!-- Facets -->
<script type="text/ss-template" name="Facets" target=".ss-facets">
<div ng-repeat="facet in facets" ng-switch="facet.type" id="ss-{{ facet.field }}" class="accordion-block ss-facet-container ss-facet-container-{{ facet.type ? facet.type : 'list' }}" id="searchspring-{{ facet.field }}_container" ng-class="{'ss-expanded': !facet.collapse, 'ss-collapsed': facet.collapse}">
<div class="accordion-navigation toggleLink" role="button" ng-class="{ 'is-open': !facet.collapse }" ng-click="facet.collapse = !facet.collapse">
<h5 class="accordion-title">{{ facet.label }}</h5>
<div class="accordion-navigation-actions">
<span class="icon accordion-indicator toggleLink-text toggleLink-text--off">
<i class="fas fa-plus"></i>
</span>
<span class="icon accordion-indicator toggleLink-text toggleLink-text--on">
<i class="fas fa-minus"></i>
</span>
</div>
</div>
<div class="accordion-content" aria-hidden="true" ng-class="{ 'is-open': !facet.collapse }">
<input ng-if="facet.values.length > 10 && facet.field != 'calculated_price'" ng-model="facet.search.label" type="text" class="filterInput" placeholder="Filter Tire Model&#8230;">
<div ng-switch-when="slider" class="ss-range-slider-container"></div>
<ul ng-switch-default class="navList" ng-class="{'ss-scrollbar': facet.overflow.remaining != facet.overflow.count}">
<li class="navList-item" ng-repeat="value in facet.values | limitTo:facet.overflow.limit | filter:facet.search" ng-class="{ 'yotpo': facet.field == 'reviews_product_score' }">
<a ng-href="{{ value.url }}" class="navList-action navList-action--checkbox" rel="nofollow" ng-class="{ 'yotpo-bottomline': facet.field == 'reviews_product_score', 'is-selected': value.active }" ng-click="closeMobileFacets()">
<span class="yotpo-stars" ng-if="value.rating_classes.length">
<span ng-repeat="star_class in value.rating_classes" class="yotpo-icon pull-left {{ star_class }}"></span>
</span>
{{ value.label }}<span class="ss-value-count" ng-if="value.count && facet.field != 'reviews_product_score'"> ({{ value.count }})</span>
</a>
</li>
</ul>
<div ng-if="facet.overflow.set(facet.limitCount).count" class="Load-More-Btn" ng-class="{'ss-expanded': facet.overflow.remaining, 'ss-collapsed': !facet.overflow.remaining}">
<a ng-click="facet.overflow.toggle()" href="javascript:void(0);">
{{ facet.overflow.remaining ? 'Load More' : 'Show Less' }} <span ng-if="facet.overflow.remaining">(+{{ facet.overflow.remaining }})</span>
</a>
</div>
</div>
</div>
<div ng-if="merchandising.content.left.length > 0" id="ss-merch-left" class="ss-merchandising" ss-merchandising="left"></div>
</script>
<!-- Filter Summary -->
<script type="text/ss-template" name="Filter Summary" target=".ss-targeted .YourSelections">
<label>Your Selections:</label>
<ul class="SelectedList Search-Vehicle-List">
<li ng-repeat="filter in filterSummary">
<a href="" ng-click="filter.removeIt()" class="facetLabel" aria-label="Remove filter {{ filter.filterValue }}">
{{ filter.filterValue }}
<span id="icon-close">
<i class="fas fa-times"></i>
</span>
</a>
</li>
<li class="ss-list-option ss-summary-reset">
<a href="" ng-click="clearAllFilters()" class="ss-list-link" aria-label="Clear all selected filters">
Clear All
<span id="icon-close">
<i class="fas fa-times"></i>
</span>
</a>
</li>
</ul>
</script>
<!-- Desktop Home Vehicle Finder -->
<script type="text/ss-template" target=".Homepage-Hero-right #searchspring-home-vehicle-finder.ss-loaded">
<div class="ss-vehicle-search" ng-init="finder.vehicle.search()"></div>
<div ng-repeat="facet in finder.vehicle.facets">
<div class="Vehicle-MM-Wrap" ng-init="columnSelection = 'desktopHome'">
<ul>
1 {{ level.disabled }} 2
<li ng-repeat="level in facet.finder.levels" ng-class="{ 'ss-finder-disabled': level.disabled || finder.vehicle.loading, 'is-open': finder.controls.desktop.vehicle.step == level.label && !finder.vehicle.loading, 'col-5' : $index > 0 }">
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('vehicle', level.label)" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.vehicle.step == level.label && !finder.vehicle.loading }">
<span class="count">{{ $index + 1 }}</span>
{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }}
<i class="fas fa-chevron-down"></i>
</a>
<div class="navPage-subMenu" ng-class="{ 'is-open': finder.controls.desktop.vehicle.step == level.label && !finder.vehicle.loading }" id="navPages-Search-Widget-{{ level.label }}" aria-hidden="true">
<div class="Vehicle-Search-Widget-Vehicle">
<input class="form-input" type="text" name="Vehicle-Search-Widget-Vehicle" ng-model="level.search.label" placeholder="Search {{ level.label }}...">
</div>
<div class="Search-Widget-{{ level.label }}-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns[columnSelection], level.search.label, $index)">
<li ng-repeat="value in column">
<a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a class="button WSearchBtn" ng-click="facet.finder.currentLevel == 4 && finder.vehicle.findIt()" ng-class="{ 'ss-finder-disabled': finder.vehicle.facets[0].finder.currentLevel != 4 }">SEARCH</a>
</li>
</ul>
</div>
<div class="Search-Widget-Recent-Searches">
<p class="WidgetCloseLink"></p>
<div class="Search-Widget-Recent-inner">
<div class="Search-Widget-Recent-Top">
<h3>Recent Searches:</h3>
<a href="javascript:void(0)" ng-click="finder.storage.clear('vehicle')" class="Search-Widget-Recent-Clear">Clear All</a>
</div>
<div class="Search-Widget-Recent-Result">
<ul>
<li ng-repeat="entry in finder.storage.recent.get('vehicle')">
<div class="Widget-Size-Recent-Searches-inner">
<div class="Search-Widget-Recent-Img">
<img ng-src="{{ entry.imageUrl || variables.images.fallbackVehicle }}" alt="">
</div>
<div class="Search-Widget-Recent-Content">
<p>{{ entry.vehicle.details.year }} {{ entry.vehicle.details.make }}<br> {{ entry.vehicle.details.model }} {{ entry.vehicle.details.option }}</p>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</script>
<!-- Desktop Nav Vehicle Finder -->
<script type="text/ss-template" target="#searchspring-nav-vehicle-finder">
<div class="ss-vehicle-search" ng-init="finder.vehicle.search()"></div>
<div class="Vehicle-Recent-Searches" ng-if="finder.storage.recent.get('vehicle').length">
<div class="Vehicle-Recent-Top">
<h3>Recent Searches:</h3>
<a href="javascript:void(0)" ng-click="finder.storage.clear('vehicle')" class="Vehicle-Recent-Clear">Clear All</a>
</div>
<div class="Vehicle-Recent-Result">
<ul>
<li ng-repeat="entry in finder.storage.recent.get('vehicle')">
<div class="Vehicle_inner">
<div class="Vehicle-Recent-Img">
<img ng-src="{{ entry.imageUrl || variables.images.fallbackVehicle }}" alt="">
</div>
<div class="Vehicle-Recent-Content">
<p>{{ entry.vehicle.details.year }} {{ entry.vehicle.details.make }}<br> {{ entry.vehicle.details.model }} {{ entry.vehicle.details.option }}</p>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div ng-repeat="facet in finder.vehicle.facets">
<div class="Vehicle-MM-Wrap ss-finder-options" ng-init="columnSelection = 'desktopNav'">
<!-- Vehicle finder dropdowns -->
</div>
<div class="Search-Widget-Result-Wrap sr_button">
<a class="button" href="javascript:void(0)" ng-click="facet.finder.currentLevel == 4 && finder.vehicle.findIt()" ng-class="{ 'ss-finder-disabled': facet.finder.currentLevel != 4 }">Show Results</a>
<div class="Search-Widget-Result-Txt" style="display: none;">
<p>There are {{ finder.vehicle.pagination.totalResults }} results based on your parameters.</p>
</div>
</div>
</div>
</script>
<!-- Desktop Vehicle Finder Dropdowns -->
<script type="text/ss-template" target=".ss-targeted .ss-finder-options">
<h3>New Search:</h3>
<ul>
<li ng-class="{ 'ss-finder-disabled': level.disabled, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading, 'col-5' : $index > 0 }" ng-repeat="level in facet.finder.levels">
<span>{{ level.label }}</span>
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('vehicle', level.label, 'mobile')" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.vehicle.step == level.label && !finder.size.loading }">
{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }}
<i class="fas fa-chevron-down"></i>
</a>
<div class="navPage-subMenu" ng-class="{ 'is-open': finder.controls.desktop.vehicle.step == level.label && !finder.vehicle.loading }" id="navPages-Search-Widget-{{ level.label }}" aria-hidden="true">
<div class="Vehicle-Search-Widget-Vehicle">
<input class="form-input" type="text" ng-model="level.search.label" name="Vehicle-Search-Widget-Vehicle" placeholder="Search {{ level.label }}...">
</div>
<div class="Search-Widget-Vehicle-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns[columnSelection], level.search.label, $index)">
<li ng-repeat="value in column">
<a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a>
</li>
</ul>
</div>
</div>
</li>
<li ng-class="{ 'is-open': finder.controls.desktop.vehicle.step == 'Zipcode' && !finder.vehicle.loading }">
<span>Zip Code (Optional)</span>
<a href="javascript:void(0)" class="has-subMenu" ng-click="finder.controls.desktop.toggleMenu('vehicle', 'Zipcode')" ng-class="{ 'is-open': finder.controls.desktop.vehicle.step == 'Zipcode' }">{{ finder.validZipcode() || 'Enter ZIP' }} <i class="fas fa-chevron-down"></i></a>
<div class="navPage-subMenu" id="navPages-Search-Widget-ZIP" aria-hidden="true" ng-class="{ 'is-open': finder.controls.desktop.vehicle.step == 'Zipcode' }">
<div class="zipCodeWrap Search-Widget-ZIP-List">
<div class="Zip-Left">
<form class="form" action="">
<label for="Search-Search-Widget-ZIP">Enter your zip code to see delivery times with FREE FedEx Shipping.</label>
<div class="form-field">
<input class="form-input" name="Search-Widget-ZIP" id="Search-Widget-ZIP" placeholder="Type ZIP/Postal Code" ng-model="finder.zipcode">
<input class="form-button Search-Widget-ZIP-btn" type="button" value="Use zip code" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }" ng-click="finder.validZipcode() && finder.controls.desktop.toggleMenu('vehicle', 'Zipcode')" ng-disabled="!finder.validZipcode()">
</div>
</form>
<a class="Search-Widget-Location" href="javascript:void(0)" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }">Search near my Location</a>
</div>
<div class="Zip-Right">
<a class="Search-Widget-SkipCode" href="javascript:void(0)" ng-click="finder.zipcode = ''; finder.controls.desktop.toggleMenu('vehicle', 'Zipcode')">Skip zip code</a>
</div>
</div>
</div>
</li>
</ul>
</script>
<!-- Desktop Home Size Finder -->
<script type="text/ss-template" target=".Homepage-Hero-right #searchspring-home-size-finder">
<div ng-init="finder.size.search()"></div>
<div ng-class="{ showDifferSize: finder.secondarySizeOpen }">
<div class="Widget-Size-Top">
<div class="Front-Rear-Widget-Size">
<div class="Front-Wrap">
<h4 ng-if="finder.secondarySizeOpen">Front</h4>
<ul ng-repeat="facet in finder.size.facets">
<li ng-repeat="level in facet.finder.levels" ng-class="{ 'ss-finder-disabled': level.disabled || finder.size.loading, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading, 'col-5' : $index > 0 }">
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('size', level.label)" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading }">
<span class="count">{{ $index + 1 }}</span>
{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }}
<i class="fas fa-chevron-down"></i>
</a>
<div class="navPage-subMenu" id="navPages-Front-Widget-Size-{{ level.label }}" aria-hidden="true" ng-class="{ 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading }">
<div class="Front-Size-{{ level.label }}-Search">
<input class="form-input" type="text" name="Front-Size-{{ level.label }}-Search" placeholder="Search {{ level.label }}..." ng-model="level.search.label">
</div>
<div class="Front-Size-{{ level.label }}-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns.desktop, level.search.label, $index)">
<li ng-repeat="value in column">
<a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a>
</li>
</ul>
</div>
</div>
</li>
<li class="Search-Button" ng-show="!finder.secondarySizeOpen">
<a class="button" ng-click="!finder.secondarySizeOpen && finder.size.facets[0].finder.currentLevel == 3 && finder.size.findIt()" ng-class="{ 'ss-finder-disabled': finder.size.facets[0].finder.currentLevel != 3 }">SEARCH</a>
</li>
</ul>
</div>
<div class="Rear-Wrap" ng-if="finder.secondarySizeOpen">
<h4 ng-init="finder.secondarySize.search()">Rear</h4>
<div class="Widget-Size-different">
<span ng-click="toggleDifferSizeClass(finder)">Remove different rear tire size</span>
</div>
<ul ng-repeat="facet in finder.secondarySize.facets">
<li ng-repeat="level in facet.finder.levels" ng-class="{ 'ss-finder-disabled': level.disabled || finder.secondarySize.loading, 'is-open': finder.controls.desktop.secondarySize.step == level.label && !finder.size.loading, 'col-5' : $index > 0 }">
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('secondarySize', level.label)" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.secondarySize.step == level.label }">{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }} <i class="fas fa-chevron-down"></i></a>
<div class="navPage-subMenu" id="navPages-Rear-Widget-Size-{{ level.label }}" aria-hidden="true" tabindex="-1" ng-class="{ 'is-open': finder.controls.desktop.secondarySize.step == level.label }">
<div class="Rear-Size-{{ level.label }}-Search">
<input class="form-input" type="text" name="Rear-Size-{{ level.label }}-Search" placeholder="Search {{ level.label }}...">
</div>
<div class="Rear-Size-{{ level.label }}-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns.desktop, level.search.label, $index)">
<li li ng-repeat="value in column"><a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a></li>
</ul>
</div>
</div>
</li>
<li class="Search-Button" ng-show="finder.secondarySizeOpen">
<a class="button" ng-click="finder.secondarySizeOpen && finder.size.facets[0].finder.currentLevel == 3 && finder.size.findIt()" ng-class="{ 'ss-finder-disabled': finder.size.facets[0].finder.currentLevel != 3 }">SEARCH</a>
</li>
</ul>
</div>
</div>
<div class="different_rear" ng-if="!finder.secondarySizeOpen && finder.size.facets[0].finder.currentLevel == 3" ng-click="toggleDifferSizeClass(finder)">
<div class="diff_rear_lbl ss-finder-disabled">
<span class="open_close_ic">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="none" fill-rule="evenodd">
<g fill="#3A3839">
<g>
<g>
<g>
<g>
<path d="M8.82 4.9H10.780000000000001V14.700000000000001H8.82z" transform="translate(-274 -579) translate(0 155) translate(269 358) translate(0 61) translate(5 5)"/>
<path d="M8.82 4.9L10.78 4.9 10.78 14.7 8.82 14.7z" transform="translate(-274 -579) translate(0 155) translate(269 358) translate(0 61) translate(5 5) rotate(-90 9.8 9.8)"/>
<path fill-rule="nonzero" d="M9.8 1.96c4.323 0 7.84 3.517 7.84 7.84s-3.517 7.84-7.84 7.84-7.84-3.517-7.84-7.84S5.477 1.96 9.8 1.96zM9.8 0C4.388 0 0 4.388 0 9.8c0 5.412 4.388 9.8 9.8 9.8 5.412 0 9.8-4.388 9.8-9.8 0-5.412-4.388-9.8-9.8-9.8z" transform="translate(-274 -579) translate(0 155) translate(269 358) translate(0 61) translate(5 5)"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
<span class="diff_lbl_name">Add a Different Rear Tire Size</span>
</div>
</div>
</div>
<div class="Remove-different" ng-if="finder.secondarySizeOpen">
<div ng-if="!finder.secondarySize.loading && ((!finder.secondarySize.facets.length || !finder.secondarySize.facets[0].values.length) && finder.secondarySize.facets[0].finder.currentLevel != 3)">
<p>Complimentary size not found.</p>
</div>
</div>
<div class="Widget-Size-Recent-Searches">
<p class="WidgetCloseLink"></p>
<div class="Widget-Size-Recent-Searches-inner ss-size-inner"></div>
</div>
</div>
</script>
<!-- Desktop Nav Size Finder -->
<script type="text/ss-template" target="#searchspring-nav-size-finder">
<div class="ss-size-search" ng-init="finder.size.search()"></div>
<div class="Size-Recent-Searches" ng-if="finder.storage.recent.get('size').length" ng-init="finder.controls.desktop.togglePopularSizes()">
<div class="Size-Recent-Top">
<h3>Recent Searches:</h3>
<a href="javascript:void(0)" class="Size-Recent-Clear" ng-click="finder.storage.clear('size'); finder.controls.desktop.togglePopularSizes();">Clear All</a>
</div>
<div class="Size-Recent-Result">
<ul>
<li ng-repeat="entry in finder.storage.recent.get('size')">
<div class="size_inner">
<div class="Size-Recent-Img">
<img ng-src="{{ variables.images.size }}" alt="">
</div>
<div class="Size-Recent-Content">
<div ng-if="entry.sizes.length == 1" class="Tire-Size-Text">
<span class="Tire-Size-Label">Tire Size:</span>
<span class="Tire-Size-Value">{{ entry.sizes[0].name }}</span>
</div>
<div ng-if="entry.sizes.length == 2" class="Front-Rear-Text">
<span class="Front-Label">Front:</span>
<span class="Front-Value">{{ entry.sizes[0].name }}</span>
<span class="Rear-Label">Rear:</span>
<span class="Rear-Value">{{ entry.sizes[1].name }}</span>
</div>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="Size-Top">
<div ng-if="!finder.secondarySizeOpen" class="Single-Size">
<h3>New Search:</h3>
<div class="size_inner">
<ul ng-repeat="facet in finder.size.facets">
<li ng-repeat="level in facet.finder.levels" ng-class="{ 'ss-finder-disabled': level.disabled || finder.size.loading, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading, 'col-5' : $index > 0 }">
<span>{{ level.label }}</span>
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('size', level.label)" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading }">{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }} <i class="fas fa-chevron-down"></i></a>
<div class="navPage-subMenu" id="navPages-Size-{{ level.label }}" aria-hidden="true" tabindex="-1" ng-class="{ 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading }">
<div class="Size-{{ level.label }}-Search">
<input class="form-input" type="text" name="Size-{{ level.label }}-Search" placeholder="Search {{ level.label }}..." ng-model="level.search.label">
</div>
<div class="Size-{{ level.label }}-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns.desktop, level.search.label, $index)">
<li ng-repeat="value in column"><a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a></li>
</ul>
</div>
</div>
</li>
<li ng-class="{ 'is-open': finder.controls.desktop.size.step == 'Zipcode' && !finder.size.loading }">
<span>Zip Code (Optional)</span>
<a href="javascript:void(0)" class="has-subMenu" ng-click="finder.controls.desktop.toggleMenu('size', 'Zipcode')" ng-class="{ 'is-open': finder.controls.desktop.size.step == 'Zipcode' }">{{ finder.validZipcode() || 'Enter ZIP' }} <i class="fas fa-chevron-down"></i></a>
<div class="navPage-subMenu" id="navPages-Size-ZIP" aria-hidden="true" tabindex="-1" ng-class="{ 'is-open': finder.controls.desktop.size.step == 'Zipcode' }">
<div class="zipCodeWrap Size-ZIP-List">
<div class="Zip-Left">
<form class="form" action="">
<label for="Search-Size-ZIP">Enter your zip code to see delivery times with FREE FedEx Shipping.</label>
<div class="form-field">
<input class="form-input" name="Search-Size-ZIP" id="Search-Size-ZIP" placeholder="Type ZIP/Postal Code" ng-model="finder.zipcode">
<input class="form-button Search-Size-ZIP-btn" type="button" value="Use zip code" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }" ng-click="finder.validZipcode() && finder.controls.desktop.toggleMenu('size', 'Zipcode')" ng-disabled="!finder.validZipcode()">
</div>
</form>
<a class="Search-Size-Location" href="javascript:void(0)" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }">Search near my Location</a>
</div>
<div class="Zip-Right">
<a class="Search-Size-SkipCode" href="javascript:void(0)" ng-click="finder.zipcode = ''; finder.controls.desktop.toggleMenu('size', 'Zipcode')">Skip zip code</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="different_rear" ng-if="!finder.secondarySizeOpen">
<div class="diff_rear_lbl" ng-click="finder.secondarySizeOpen = true" ng-class="{ 'ss-finder-disabled': finder.size.facets[0].finder.currentLevel != 3 }">
<span class="open_close_ic"></span>
<span class="diff_lbl_name">Add a Different Rear Tire Size</span>
<span class="diff-tooltip"></span>
</div>
</div>
<div class="Front-Rear-Size" ng-if="finder.secondarySizeOpen">
<h3>New Search:</h3>
<div class="Front-inner">
<div class="Front-Wrap">
<h4>Front</h4>
<ul ng-repeat="facet in finder.size.facets">
<li ng-repeat="level in facet.finder.levels" ng-class="{ 'ss-finder-disabled': level.disabled || finder.size.loading, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading, 'col-5' : $index > 0 }">
<span>{{ level.label }}</span>
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('size', level.label)" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading }">{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }} <i class="fas fa-chevron-down"></i></a>
<div class="navPage-subMenu" id="navPages-Front-Size-{{ level.label }}" aria-hidden="true" tabindex="-1" ng-class="{ 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading }">
<div class="Front-Size-{{ level.label }}-Search">
<input class="form-input" type="text" name="Front-Size-{{ level.label }}-Search" placeholder="Search {{ level.label }}..." ng-model="level.search.label">
</div>
<div class="Front-Size-{{ level.label }}-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns.desktop, level.search.label, $index)">
<li ng-repeat="value in column"><a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="Rear-Wrap">
<h4 ng-init="finder.secondarySize.search()">Rear</h4>
<ul ng-repeat="facet in finder.secondarySize.facets">
<li ng-repeat="level in facet.finder.levels" ng-class="{ 'ss-finder-disabled': level.disabled || finder.secondarySize.loading, 'is-open': finder.controls.desktop.secondarySize.step == level.label && !finder.size.loading, 'col-5' : $index > 0 }">
<span>{{ level.label }}</span>
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('secondarySize', level.label)" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.secondarySize.step == level.label }">{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }} <i class="fas fa-chevron-down"></i></a>
<div class="navPage-subMenu" id="navPages-Rear-Size-{{ level.label }}" aria-hidden="true" tabindex="-1" ng-class="{ 'is-open': finder.controls.desktop.secondarySize.step == level.label }">
<div class="Rear-Size-{{ level.label }}-Search">
<input class="form-input" type="text" name="Rear-Size-{{ level.label }}-Search" placeholder="Search {{ level.label }}...">
</div>
<div class="Rear-Size-{{ level.label }}-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns.desktop, level.search.label, $index)">
<li li ng-repeat="value in column"><a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="Remove-different" ng-if="finder.secondarySizeOpen">
<div ng-if="!finder.secondarySize.loading && ((!finder.secondarySize.facets.length || !finder.secondarySize.facets[0].values.length) && finder.secondarySize.facets[0].finder.currentLevel != 3)">
<p>Complimentary size not found.</p>
</div>
<span ng-click="finder.secondarySizeOpen = false">Remove different rear tire size</span>
</div>
<div class="Front-Rear-Size-ZIP">
<ul>
<li ng-class="{ 'is-open': finder.controls.desktop.size.step == 'Zipcode' && !finder.size.loading }">
<span>Zip Code (Optional)</span>
<a href="javascript:void(0)" class="has-subMenu" ng-click="finder.controls.desktop.toggleMenu('size', 'Zipcode')" ng-class="{ 'is-open': finder.controls.desktop.size.step == 'Zipcode' }">{{ finder.validZipcode() || 'Enter ZIP' }} <i class="fas fa-chevron-down"></i></a>
<div class="navPage-subMenu" id="navPages-Front-Rear-Size-ZIP" aria-hidden="true" tabindex="-1" ng-class="{ 'is-open': finder.controls.desktop.size.step == 'Zipcode' }">
<div class="zipCodeWrap Front-Rear-Size-ZIP-List">
<div class="Zip-Left">
<form class="form" action="">
<label for="Search-Front-Rear-Size-ZIP">Enter your zip code to see delivery times with FREE FedEx Shipping.</label>
<div class="form-field">
<input class="form-input" name="Search-Front-Rear-Size-ZIP" id="Search-Front-Rear-Size-ZIP" placeholder="Type ZIP/Postal Code" ng-model="finder.zipcode">
<input class="form-button Search-Front-Rear-Size-ZIP-btn" type="button" value="Use zip code" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }" ng-click="finder.validZipcode() && finder.controls.desktop.toggleMenu('size', 'Zipcode')" ng-disabled="!finder.validZipcode()">
</div>
</form>
<a class="Search-Front-Rear-Size-Location" href="javascript:void(0)" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }">Search near my Location</a>
</div>
<div class="Zip-Right">
<a class="Search-Front-Rear-Size-SkipCode" href="javascript:void(0)" ng-click="finder.zipcode = ''; finder.controls.desktop.toggleMenu('size', 'Zipcode')">Skip zip code</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="Search-Size-Result-Wrap sr_button">
<a class="button" href="javascript:void(0)" ng-click="finder.size.facets[0].finder.currentLevel == 3 && finder.size.findIt()" ng-class="{ 'ss-finder-disabled': finder.size.facets[0].finder.currentLevel != 3 }">Show Results</a>
<div class="Search-Size-Result-Txt" style="display: none;">
<p>There are {{ finder.size.pagination.totalResults }} results based on your parameters.</p>
</div>
</div>
</div>
</script>
<!-- Desktop Search Page Vehicle Finder -->
<script type="text/ss-template" target="#tab-Search-Widget-Vehicle #searchspring-home-vehicle-finder.ss-loaded">
<div class="ss-vehicle-search" ng-init="finder.vehicle.search()"></div>
<div class="Search-Widget-Recent-Searches" ng-if="finder.storage.recent.get('vehicle').length">
<div class="Search-Widget-Recent-Top">
<h3>Recent Searches:</h3>
<a href="javascript:void(0)" ng-click="finder.storage.clear('vehicle')" class="Vehicle-Recent-Clear">Clear All</a>
</div>
<div class="Search-Widget-Recent-Result">
<ul>
<li ng-repeat="entry in finder.storage.recent.get('vehicle')">
<div class="Search-Widget-Recent-Img">
<img ng-src="{{ entry.imageUrl || variables.images.fallbackVehicle }}" alt="">
</div>
<div class="Search-Widget-Recent-Content">
<p>{{ entry.vehicle.details.year }} {{ entry.vehicle.details.make }}<br> {{ entry.vehicle.details.model }} {{ entry.vehicle.details.option }}</p>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</li>
</ul>
</div>
</div>
<div ng-repeat="facet in finder.vehicle.facets">
<div class="Vehicle-MM-Wrap ss-finder-options" ng-init="columnSelection = 'desktopModal'">
<!-- Vehicle finder dropdowns -->
</div>
<div class="Search-Widget-Result-Wrap sr_button">
<a class="button" href="javascript:void(0)" ng-click="facet.finder.currentLevel == 4 && finder.vehicle.findIt()" ng-class="{ 'ss-finder-disabled': facet.finder.currentLevel != 4 }">Show Results</a>
<div class="Search-Widget-Result-Txt" style="display: none;">
<p>There are {{ finder.vehicle.pagination.totalResults }} results based on your parameters.</p>
</div>
</div>
</div>
</script>
<!-- Desktop Search Page Size Finder -->
<script type="text/ss-template" name="Desktop Search Page Size Finder" target="#tab-Search-Widget-Size #searchspring-home-size-finder">
<div class="Widget-Size-Recent-Searches" ng-if="finder.storage.recent.get('size').length" ng-init="finder.controls.desktop.togglePopularSizes()">
<div class="Widget-Size-Recent-Top">
<h3>Recent Searches:</h3>
<a href="javascript:void(0)" class="Size-Recent-Clear" ng-click="finder.storage.clear('size'); finder.controls.desktop.togglePopularSizes();">Clear All</a>
</div>
<div class="Widget-Size-Recent-Result">
<ul>
<li ng-repeat="entry in finder.storage.recent.get('size')">
<div class="Widget-Size-Recent-Img">
<img ng-src="{{ variables.images.size }}" alt="">
</div>
<div class="Widget-Size-Recent-Content">
<div ng-if="entry.sizes.length == 1" class="Tire-Widget-Size-Text">
<span class="Tire-Widget-Size-Label">Tire Size:</span>
<span class="Tire-Widget-Size-Value">{{ entry.sizes[0].name }}</span>
</div>
<div ng-if="entry.sizes.length == 2" class="Front-Rear-Text">
<span class="Front-Label">Front:</span>
<span class="Front-Value">{{ entry.sizes[0].name }}</span>
<span class="Rear-Label">Rear:</span>
<span class="Rear-Value">{{ entry.sizes[1].name }}</span>
</div>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</li>
</ul>
</div>
</div>
<div ng-class="{ 'showDifferSize': finder.secondarySizeOpen }" class="Widget-Size-Top">
<div class="Front-Rear-Widget-Size">
<h3>New Search:</h3>
<div class="Front-Wrap">
<h4 ng-if="finder.secondarySizeOpen">Front</h4>
<ul ng-repeat="facet in finder.size.facets">
<li ng-repeat="level in facet.finder.levels" ng-class="{ 'ss-finder-disabled': level.disabled || finder.size.loading, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading }">
<span>{{ level.label }}</span>
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('size', level.label)" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading }">
{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }}
<i class="fas fa-chevron-down"></i>
</a>
<div class="navPage-subMenu" id="navPages-Front-Widget-Size-{{ level.label }}" aria-hidden="true" tabindex="-1" ng-class="{ 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading }">
<div class="Front-Size-{{ level.label }}-Search">
<input class="form-input" type="text" name="Front-Size-{{ level.label }}-Search" placeholder="Search {{ level.label }}..." ng-model="level.search.label">
</div>
<div class="Front-Size-{{ level.label }}-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns.desktopModal, level.search.label, $index)">
<li ng-repeat="value in column">
<a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="different_rear" ng-if="!finder.secondarySizeOpen">
<div class="diff_rear_lbl" ng-click="finder.secondarySizeOpen = true" ng-class="{ 'ss-finder-disabled': finder.size.facets[0].finder.currentLevel != 3 }">
<span class="open_close_ic"></span>
<span class="diff_lbl_name">Add a Different Rear Tire Size</span>
<span class="diff-tooltip"></span>
</div>
</div>
<div class="Rear-Wrap" ng-if="finder.secondarySizeOpen">
<h4 ng-init="finder.secondarySize.search()">Rear</h4>
<ul ng-repeat="facet in finder.secondarySize.facets">
<li ng-repeat="level in facet.finder.levels" ng-class="{ 'ss-finder-disabled': level.disabled || finder.secondarySize.loading, 'is-open': finder.controls.desktop.secondarySize.step == level.label && !finder.size.loading }">
<span>{{ level.label }}</span>
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('secondarySize', level.label)" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.secondarySize.step == level.label }">{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }} <i class="fas fa-chevron-down"></i></a>
<div class="navPage-subMenu" id="navPages-Rear-Size-{{ level.label }}" aria-hidden="true" tabindex="-1" ng-class="{ 'is-open': finder.controls.desktop.secondarySize.step == level.label }">
<div class="Rear-Size-{{ level.label }}-Search">
<input class="form-input" type="text" name="Rear-Size-{{ level.label }}-Search" placeholder="Search {{ level.label }}...">
</div>
<div class="Rear-Size-{{ level.label }}-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns.desktop, level.search.label, $index)">
<li li ng-repeat="value in column">
<a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="Widget-Size-different" ng-if="finder.secondarySizeOpen">
<div ng-if="!finder.secondarySize.loading && ((!finder.secondarySize.facets.length || !finder.secondarySize.facets[0].values.length) && finder.secondarySize.facets[0].finder.currentLevel != 3)">
<p>Complimentary size not found.</p>
</div>
<span ng-click="finder.secondarySizeOpen = false">Remove different rear tire size</span>
</div>
<div class="Front-Rear-Widget-Size-ZIP">
<ul>
<li ng-class="{ 'is-open': finder.controls.desktop.size.step == 'Zipcode' && !finder.size.loading }">
<span>Zip Code (Optional)</span>
<a href="javascript:void(0)" class="has-subMenu" ng-click="finder.controls.desktop.toggleMenu('size', 'Zipcode')" ng-class="{ 'is-open': finder.controls.desktop.size.step == 'Zipcode' }">{{ finder.validZipcode() || 'Enter ZIP' }} <i class="fas fa-chevron-down"></i></a>
<div class="navPage-subMenu" id="navPages-Front-Rear-Widget-Size-ZIP" aria-hidden="true" tabindex="-1" ng-class="{ 'is-open': finder.controls.desktop.size.step == 'Zipcode' }">
<div class="zipCodeWrap Front-Rear-Widget-Size-ZIP-List">
<div class="Zip-Left">
<form class="form" action="">
<label for="Search-Front-Rear-Widget-Size-ZIP">Enter your zip code to see delivery times with FREE FedEx Shipping.</label>
<div class="form-field">
<input class="form-input" name="Search-Front-Rear-Size-ZIP" id="Search-Front-Rear-Size-ZIP" placeholder="Type ZIP/Postal Code" ng-model="finder.zipcode">
<input class="form-button Search-Front-Rear-Size-ZIP-btn" type="button" value="Use zip code" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }" ng-click="finder.validZipcode() && finder.controls.desktop.toggleMenu('size', 'Zipcode')" ng-disabled="!finder.validZipcode()">
</div>
</form>
<a class="Search-Front-Rear-Size-Location" href="javascript:void(0)" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }">Search near my Location</a>
</div>
<div class="Zip-Right">
<a class="Search-Front-Rear-Size-SkipCode" href="javascript:void(0)" ng-click="finder.zipcode = ''; finder.controls.desktop.toggleMenu('size', 'Zipcode')">Skip zip code</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="Search-Size-Result-Wrap sr_button">
<a class="button" href="javascript:void(0)" ng-click="finder.size.facets[0].finder.currentLevel == 3 && finder.size.findIt()" ng-class="{ 'ss-finder-disabled': finder.size.facets[0].finder.currentLevel != 3 }">Show Results</a>
<div class="Search-Size-Result-Txt" style="display: none;">
<p>There are {{ finder.size.pagination.totalResults }} results based on your parameters.</p>
</div>
</div>
</div>
</script>
<!-- Desktop Home Size Recent Searches -->
<script type="text/ss-template" target=".ss-targeted .ss-size-inner">
<div class="Widget-Size-Recent-Top">
<h3>Recent Searches:</h3>
<a href="javascript:void(0)" ng-click="finder.storage.clear('size')" class="Widget-Size-Recent-Clear">Clear All</a>
</div>
<div class="Widget-Size-Recent-Result">
<ul>
<li ng-repeat="entry in finder.storage.recent.get('size')">
<div class="Widget-Size-Recent-Inner">
<div class="Widget-Size-Recent-Img">
<img ng-src="{{ variables.images.size }}" alt="">
</div>
<div class="Widget-Size-Recent-Content">
<div ng-if="entry.sizes.length == 1" class="Tire-Widget-Size-Text">
<span class="Tire-Widget-Size-Label">Tire Size:</span>
<span class="Tire-Widget-Size-Value">{{ entry.sizes[0].name }}</span>
</div>
<div ng-if="entry.sizes.length == 2" class="Front-Rear-Text">
<span class="Front-Label">Front:</span>
<span class="Front-Value">{{ entry.sizes[0].name }}</span>
<span class="Rear-Label">Rear:</span>
<span class="Rear-Value">{{ entry.sizes[1].name }}</span>
</div>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
</li>
</ul>
</div>
</script>
<!-- Mobile Vehicle Finder -->
<script type="text/ss-template" target="#searchspring-mobile-vehicle-finder">
<div ng-if="finder.storage.recent.get('vehicle').length" class="Vehicle-Recent-Searches">
<div class="Vehicle-Recent-Top">
<h3>Recent Searches:</h3>
<a href="javascript:void(0)" class="Vehicle-Recent-Clear" ng-click="finder.storage.clear('vehicle')">Clear All</a>
</div>
<div class="Vehicle-Recent-Result">
<ul>
<li ng-repeat="entry in finder.storage.recent.get('vehicle')">
<div class="Vehicle_inner">
<div class="Vehicle-Recent-Img">
<img ng-src="{{ entry.imageUrl || variables.images.fallbackVehicle }}" alt="">
</div>
<div class="Vehicle-Recent-Content">
<p>{{ entry.vehicle.details.year }} {{ entry.vehicle.details.make }}<br> {{ entry.vehicle.details.model }} {{ entry.vehicle.details.option }}</p>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="VehicleSteps">
<h3 class="newSearchTxt" ng-if="finder.storage.recent.vehicle.searches.length">New Search:</h3>
<ul ng-if="finder.controls.mobile.vehicle.step != 'Review'" ng-repeat="facet in finder.vehicle.facets">
<li ng-repeat="level in facet.finder.levels" class="{{ level.label }}Step" ng-class="{ 'currentStep': finder.controls.mobile.vehicle.step == level.label, 'completedStep': level.selected && finder.controls.mobile.vehicle.step != level.label }" ng-click="finder.controls.mobile.nextStep('vehicle', facet, level.label)">
<div>
<span class="stepTxt">{{ level.label }}</span>
<span class="stepCircle"></span>
</div>
</li>
<li ng-if="!controls.mobileFitOpen" class="ZIPStep" ng-class="{ 'currentStep': finder.controls.mobile.vehicle.step == 'Zipcode', 'completedStep': finder.zipcode && facet.finder.currentLevel == facet.finder.levels.length && finder.controls.mobile.vehicle.step != 'Zipcode' }" ng-click="finder.controls.mobile.changeStep('vehicle', 'Zipcode')">
<div>
<span class="stepTxt">ZIP</span>
<span class="stepCircle"></span>
</div>
</li>
</ul>
<div class="ValueContainer" ng-repeat="facet in finder.vehicle.facets">
<div ng-repeat="level in facet.finder.levels" ng-if="finder.controls.mobile.vehicle.step == level.label" class="Vehicle-{{ level.label }}-List itemsList">
<h3>Select {{ level.label }}</h3>
<ul ng-repeat="column in level.columns(level.numberOfColumns.mobile)">
<li ng-repeat="value in column">
<a href="javascript:void(0)" ng-click="facet.finder.select(value)" ng-class="{ 'is-active': facet.finder.selection == value.value || level.selection == value.value }">{{ value.label }}</a>
</li>
</ul>
</div>
<div ng-if="finder.controls.mobile.vehicle.step == 'Zipcode'" class="zipCodeWrap Vehicle-ZIP-List itemsList">
<h3>Select Zip Code (Optional)</h3>
<div class="Zip-Left">
<form class="form" action="">
<label for="Search-Vehicle-ZIP">Enter your zip code to see delivery times with FREE FedEx Shipping.</label>
<div class="form-field">
<input class="form-input" name="Search-Vehicle-ZIP" id="Search-Vehicle-ZIP" placeholder="Type ZIP/Postal Code" ng-model="finder.zipcode">
<input class="form-button Search-Vehicle-ZIP-btn" type="button" value="Use zip code" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }" ng-click="finder.validZipcode() && finder.controls.mobile.nextStep('vehicle', facet, 'Review')" ng-disabled="!finder.validZipcode()">
</div>
</form>
<a class="Search-Vehicle-Location" href="javascript:void(0)" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }">Search near my Location</a>
</div>
<div class="Zip-Right">
<a class="Search-Vehicle-SkipCode" href="javascript:void(0)" ng-click="finder.zipcode = ''; finder.controls.mobile.nextStep('vehicle', facet, 'Review')">Skip zip code</a>
</div>
</div>
<div ng-if="finder.controls.mobile.vehicle.step == 'Review'" class="Vehicle-Result-Window">
<ul ng-repeat="facet in finder.vehicle.facets">
<li ng-repeat="level in facet.finder.levels">
<div class="form-field">
<label>{{ level.label }}</label>
<span ng-click="finder.controls.mobile.changeStep('vehicle', level.label)">
<input type="text" name="{{ level.label }}" value="{{ level.selectionDisplay }}" disabled>
<a class="Edit{{ level.label }}" href="javascript:void(0)"><span>Edit</span></a>
</span>
</div>
</li>
<li ng-if="!controls.mobileFitOpen">
<div class="form-field">
<label>Zip Code </label>
<span ng-click="finder.controls.mobile.changeStep('vehicle', 'Zipcode')">
<input type="text" name="Zip Code" value="{{ finder.zipcode }}" disabled>
<a class="EditZipCode" href="javascript:void(0)"><span>Edit</span></a>
</span>
</div>
</li>
</ul>
<div class="Search-Vehicle-Result-Wrap sr_button">
<a ng-if="!controls.mobileFitOpen" class="button" href="javascript:void(0)" ng-click="facet.finder.currentLevel == facet.finder.levels.length && finder.vehicle.findIt()" ng-class="{ 'ss-finder-disabled': facet.finder.currentLevel != 4 }">Show Results</a>
<a ng-if="controls.mobileFitOpen" class="button" href="javascript:void(0)" ng-click="facet.finder.currentLevel == facet.finder.levels.length && pdpVariables.pdpFindIt()" ng-class="{ 'ss-finder-disabled': facet.finder.currentLevel != 4 }">Show Results</a>
<div class="Search-Vehicle-Result-Txt" style="display: none;">
<p>There are {{ finder.vehicle.pagination.totalResults }} results based on your parameters.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<!-- Mobile Size Finder Search Init -->
<script type="text/ss-template" target=".ss-targeted .ss-size-search">
<div ng-init="finder.size.search()"></div>
</script>
<!-- Mobile Size Finder -->
<script type="text/ss-template" target="#searchspring-mobile-size-finder">
<div class="ss-size-search"></div>
<div ng-if="finder.storage.recent.get('size').length" class="Size-Recent-Result">
<div class="Size-Recent-Top">
<h3>Recent Searches:</h3>
<a href="javascript:void(0)" class="Size-Recent-Clear" ng-click="finder.storage.clear('size')">Clear All</a>
</div>
<ul>
<li ng-repeat="entry in finder.storage.recent.get('size')">
<div class="size_inner">
<div class="Size-Recent-Img">
<img ng-src="{{ variables.images.size }}" alt="">
</div>
<div class="Size-Recent-Content">
<div ng-if="entry.sizes.length == 1" class="Tire-Size-Text">
<span class="Tire-Widget-Size-Label">Tire Size:</span>
<span class="Tire-Widget-Size-Value">{{ entry.sizes[0].name }}</span>
</div>
<div ng-if="entry.sizes.length == 2" class="Front-Rear-Text">
<span class="Front-Label">Front:</span>
<span class="Front-Value">{{ entry.sizes[0].name }}</span>
<span class="Rear-Label">Rear:</span>
<span class="Rear-Value">{{ entry.sizes[1].name }}</span>
</div>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
</li>
</ul>
</div>
<div class="SizeSteps">
<h3 class="newSearchTxt" ng-if="finder.storage.recent.size.searches.length">New Search:</h3>
<ul ng-if="finder.controls.mobile.size.editing == 'primary' && finder.controls.mobile.size.step != 'Review'" ng-repeat="facet in finder.size.facets">
<li ng-repeat="level in facet.finder.levels" class="{{ level.label }}Step" ng-class="{ 'currentStep': finder.controls.mobile.size.step == level.label, 'completedStep': level.selected && finder.controls.mobile.size.step != level.label }" ng-click="finder.controls.mobile.nextStep('size', facet, level.label, 'primary')">
<div>
<span class="stepTxt">{{ level.label }}</span>
<span class="stepCircle"></span>
</div>
</li>
<li class="ZIPStep" ng-class="{ 'currentStep': finder.controls.mobile.size.step == 'Zipcode', 'completedStep': finder.zipcode && facet.finder.currentLevel == facet.finder.levels.length && finder.controls.mobile.size.step != 'Zipcode' }" ng-click="finder.controls.mobile.changeStep('size', 'Zipcode', 'primary')">
<div>
<span class="stepTxt">ZIP</span>
<span class="stepCircle"></span>
</div>
</li>
</ul>
<ul ng-if="finder.controls.mobile.size.editing == 'secondary' && finder.controls.mobile.size.step != 'Review'" ng-repeat="facet in finder.secondarySize.facets">
<li ng-repeat="level in facet.finder.levels" class="{{ level.label }}Step" ng-class="{ 'currentStep': finder.controls.mobile.size.step == level.label, 'completedStep': level.selected && finder.controls.mobile.size.step != level.label }" ng-click="finder.controls.mobile.nextStep('size', facet, level.label, 'secondary')">
<div>
<span class="stepTxt">{{ level.label }}</span>
<span class="stepCircle"></span>
</div>
</li>
<li class="ZIPStep" ng-class="{ 'currentStep': finder.controls.mobile.size.step == 'Zipcode', 'completedStep': finder.zipcode && facet.finder.currentLevel == facet.finder.levels.length && finder.controls.mobile.size.step != 'Zipcode' }" ng-click="finder.controls.mobile.changeStep('size', 'Zipcode', 'secondary')">
<div>
<span class="stepTxt">ZIP</span>
<span class="stepCircle"></span>
</div>
</li>
</ul>
<div class="ValueContainer">
<div ng-if="finder.controls.mobile.size.step != 'Review' && finder.controls.mobile.size.editing == 'primary'" ng-repeat="facet in finder.size.facets">
<div ng-repeat="level in facet.finder.levels" ng-if="finder.controls.mobile.size.step == level.label" class="Size-{{ level.label }}-List itemsList">
<h3>Select {{ level.label }}</h3>
<ul ng-repeat="column in level.columns(level.numberOfColumns.mobile)">
<li ng-repeat="value in column">
<a href="javascript:void(0)" ng-click="facet.finder.select(value)" ng-class="{ 'is-active': facet.finder.selection == value.value || level.selection == value.value }">{{ value.label }}</a>
</li>
</ul>
</div>
<div ng-if="finder.controls.mobile.size.step == 'Zipcode'" class="zipCodeWrap Size-ZIP-List itemsList">
<h3>Select Zip Code (Optional)</h3>
<div class="Zip-Left">
<form class="form" action="">
<label for="Search-Size-ZIP">Enter your zip code to see delivery times with FREE FedEx Shipping.</label>
<div class="form-field">
<input class="form-input" name="Search-Size-ZIP" id="Search-Size-ZIP" placeholder="Type ZIP/Postal Code" ng-model="finder.zipcode">
<input class="form-button Search-Size-ZIP-btn" type="button" value="Use zip code" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }" ng-click="finder.validZipcode() && finder.controls.mobile.nextStep('size', facet, 'Review', 'primary')" ng-disabled="!finder.validZipcode()">
</div>
</form>
<a class="Search-Size-Location" href="javascript:void(0)" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }">Search near my Location</a>
</div>
<div class="Zip-Right">
<a class="Search-Size-SkipCode" href="javascript:void(0)" ng-click="finder.zipcode = ''; finder.controls.mobile.nextStep('size', facet, 'Review', 'primary')">Skip zip code</a>
</div>
</div>
</div>
<div ng-if="finder.controls.mobile.size.step != 'Review' && finder.controls.mobile.size.editing == 'secondary'" ng-repeat="facet in finder.secondarySize.facets">
<div ng-repeat="level in facet.finder.levels" ng-if="finder.controls.mobile.size.step == level.label" class="Size-Rear-{{ level.label }}-List itemsList">
<h3>Select Rear {{ level.label }}</h3>
<ul ng-repeat="column in level.columns(level.numberOfColumns.mobile)">
<li ng-repeat="value in column">
<a href="javascript:void(0)" ng-click="facet.finder.select(value)" ng-class="{ 'is-active': facet.finder.selection == value.value || level.selection == value.value }">{{ value.label }}</a>
</li>
</ul>
</div>
<div ng-if="finder.controls.mobile.size.step == 'Zipcode'" class="zipCodeWrap Size-ZIP-List itemsList">
<h3>Select Zip Code (Optional)</h3>
<div class="Zip-Left">
<form class="form" action="">
<label for="Search-Size-ZIP">Enter your zip code to see delivery times with FREE FedEx Shipping.</label>
<div class="form-field">
<input class="form-input" name="Search-Size-ZIP" id="Search-Size-ZIP" placeholder="Type ZIP/Postal Code" ng-model="finder.zipcode">
<input class="form-button Search-Size-ZIP-btn" type="button" value="Use zip code" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }" ng-click="finder.validZipcode() && finder.controls.mobile.nextStep('size', facet, 'Review', 'secondary')" ng-disabled="!finder.validZipcode()">
</div>
</form>
<a class="Search-Size-Location" href="javascript:void(0)" ng-class="{ 'ss-finder-disabled': !finder.validZipcode() }">Search near my Location</a>
</div>
<div class="Zip-Right">
<a class="Search-Size-SkipCode" href="javascript:void(0)" ng-click="finder.zipcode = ''; finder.controls.mobile.nextStep('size', facet, 'Review', 'secondary')">Skip zip code</a>
</div>
</div>
</div>
<div ng-if="finder.controls.mobile.size.step == 'Review'" class="Size-Result-Window">
<h3 ng-if="finder.secondarySizeOpen">Front</h3>
<ul class="FrontWrap" ng-repeat="facet in finder.size.facets">
<li ng-repeat="level in facet.finder.levels">
<div class="form-field">
<label>{{ level.label }}</label>
<span ng-click="finder.controls.mobile.changeStep('size', level.label, 'primary')">
<input type="text" name="{{ level.label }}" value="{{ level.selectionDisplay }}" disabled>
<a class="Edit{{ level.label }}" href="javascript:void(0)"><span>Edit</span></a>
</span>
</div>
</li>
<li ng-if="!finder.secondarySizeOpen">
<div class="form-field">
<label>Zip Code </label>
<span ng-click="finder.controls.mobile.changeStep('size', 'Zipcode', 'primary')">
<input type="text" name="Zip Code" value="{{ finder.zipcode }}" disabled>
<a class="EditZipCode" href="javascript:void(0)"><span>Edit</span></a>
</span>
</div>
</li>
<li ng-show="!finder.secondarySizeOpen">
<div class="different_rear">
<div class="diff_rear_lbl" ng-click="finder.secondarySizeOpen = true" ng-class="{ 'ss-finder-disabled': finder.size.facets[0].finder.currentLevel != 3 }">
<span class="open_close_ic"></span>
<span class="diff_lbl_name">Add a Different Rear Tire Size</span>
<span class="diff-tooltip"></span>
</div>
</div>
</li>
</ul>
<ul class="RearWrap" ng-repeat="facet in finder.secondarySize.facets" ng-if="finder.secondarySizeOpen">
<h3>Rear</h3>
<li ng-repeat="level in facet.finder.levels">
<div class="form-field">
<label>{{ level.label }}</label>
<span ng-click="finder.controls.mobile.changeStep('size', level.label, 'secondary')">
<input type="text" name="Rear{{ level.label }}" value="{{ level.selectionDisplay }}" placeholder="Select {{ level.label }}" disabled>
<a ng-if="level.selected" class="Edit{{ level.label }}" href="javascript:void(0)"><span>Edit</span></a>
<a ng-if="!level.selected" class="Add{{ level.label }} Plus" href="javascript:void(0)" ></a>
</span>
</div>
</li>
<li>
<div class="Remove-different" ng-click="finder.secondarySize.reset(); finder.secondarySizeOpen = false">
<span>Remove different rear tire size</span>
</div>
</li>
<li>
<div class="form-field">
<label>Zip Code </label>
<span ng-click="finder.controls.mobile.changeStep('size', 'Zipcode', 'secondary')">
<input type="text" name="Zip Code" value="{{ finder.zipcode }}" disabled>
<a class="EditZipCode" href="javascript:void(0)"><span>Edit</span></a>
</span>
</div>
</li>
</ul>
<div class="Search-Size-Result-Wrap sr_button">
<a class="button" href="javascript:void(0)" ng-click="finder.size.facets[0].finder.currentLevel == 3 && finder.size.findIt()" ng-class="{ 'ss-finder-disabled': finder.size.facets[0].finder.currentLevel != 3 }">Show Results</a>
<div class="Search-Size-Result-Txt" style="display: none;">
<p>There are {{ finder.size.pagination.totalResults }} results based on your parameters.</p>
</div>
</div>
</div>
</div>
</div>
<div ng-if="finder.controls.mobile.size.step == 'Width'" class="Show-All-Button">
<a href="/by-size/" class="">SHOW ALL SIZES</a>
</div>
</script>
<!-- Mobile Menu Recent Search -->
<script type="text/ss-template" target="#searchspring-mobile-finder-recents">
<div class="MobileRecentSearch">
<div ng-if="finder.storage.recent.searches.length">
<h3>
<span class="RecentSearchCount">({{ finder.storage.recent.searches.length }})</span>
Recent Searches
</h3>
<div class="RecentSearchItems">
<ul>
<li ng-repeat="entry in finder.storage.recent.get('all', 6)">
<div ng-if="entry.type == 'vehicle'" class="Vehicle_inner">
<div class="Vehicle-Recent-Img">
<img ng-src="{{ entry.imageUrl || variables.images.fallbackVehicle }}" alt="">
</div>
<div class="Vehicle-Recent-Content">
<p>{{ entry.vehicle.details.year }} {{ entry.vehicle.details.make }}<br> {{ entry.vehicle.details.model }} {{ entry.vehicle.details.option }}</p>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
<div ng-if="entry.type =='size'" class="size_inner">
<div class="Size-Recent-Img">
<img ng-src="{{ variables.images.size }}" alt="">
</div>
<div class="Size-Recent-Content">
<div ng-if="entry.sizes.length == 1" class="Tire-Size-Text">
<span class="Tire-Widget-Size-Label">Tire Size:</span>
<span class="Tire-Widget-Size-Value">{{ entry.sizes[0].name }}</span>
</div>
<div ng-if="entry.sizes.length == 2" class="Front-Rear-Text">
<span class="Front-Label">Front:</span>
<span class="Front-Value">{{ entry.sizes[0].name }}</span>
<span class="Rear-Label">Rear:</span>
<span class="Rear-Value">{{ entry.sizes[1].name }}</span>
</div>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div ng-if="!finder.storage.recent.searches.length" class="NoRecentSearch">
<p>You don't have any recent searches. Search by Vehicle or size using the button below.</p>
</div>
</div>
</script>
<!-- Vehicle Size Finder Left (vehicle-search) -->
<script type="text/ss-template" target="#searchspring-vehicle-sizes-finder-left">
<div ng-init="subsearch.vehicleSizes.suboptions.backgroundFilters.ss_vehicle && subsearch.vehicleSizes.search()"></div>
<div class="ImageWrap" ng-if="currentSelection.type == 'vehicle'">
<div class="ImageMn">
<!-- <img ng-src="{{ variables.images.fallbackVehicle }}" alt="Vehicle Image"> -->
<img ng-src="{{ currentSelection.imageUrl || subsearch.vehicleSizes.vehicleImageUrl || variables.images.fallbackVehicle }}" alt="Vehicle Image">
</div>
<div class="LeftContent">
<span>{{ currentSelection.vehicle.details.year }}</span>
<h3>{{ currentSelection.vehicle.details.make }} {{ currentSelection.vehicle.details.model }} {{ currentSelection.vehicle.details.option }}</h3>
</div>
</div>
</script>
<!-- Vehicle Size Finder Right (vehicle-search) -->
<script type="text/ss-template" target="#searchspring-vehicle-sizes-finder-right">
<p class="toptxt">SEARCH FOR TIRES BY VEHICLE</p>
<div ng-if="currentSelection.type == 'vehicle'">
<h3>Confirm Your Tire Size</h3>
<p class="titlebottom">Your vehicle can come equipped with more than one possible size during production.</p>
<div class="size_result_mn">
<ul class="tabs size_result_mn_inner" data-tab>
<li class="tab" ng-class="{'is-active' : tabs.current == 'original' }">
<a class="tab-title" href="" ng-click="tabs.changeVehicleTab('original')">ORIGINAL EQUIPMENT SIZES</a>
</li>
<li class="tab" ng-class="{'is-active' : tabs.current == 'plus' }">
<a class="tab-title" href="" ng-click="tabs.changeVehicleTab('plus')">PLUS SIZES</a>
</li>
</ul>
<div class="tabs-contents">
<div class="tab-content" ng-class="{'is-active' : tabs.current == 'original' }" id="tab-original-equipment-sizes">
<ul ng-if="subsearch.vehicleSizes.results.length > 0">
<li ng-repeat="wheel in subsearch.vehicleSizes.wheelSizes">
<a ng-if="!wheel.front && !wheel.rear" href="" ng-click="wheel.all.go()">
<span class="weels">Wheels
<span>{{ wheel.size }}”</span>
</span>
<span>{{ wheel.all.rawsize }}</span>
</a>
<a ng-if="wheel.front && wheel.rear" href="" ng-click="wheel.all.go()">
<span class="weels">Wheels<span>{{ wheel.size }}”</span></span>
<span class="front">Front<span>{{ wheel.front.rawsize }}</span></span>
<span class="rear">Rear<span>{{ wheel.rear.rawsize }}</span></span>
</a>
<ul ng-if="wheel.front && wheel.rear">
<li class="onlyFront">
<a href="" ng-click="wheel.front.go()">
<span>only front</span>
<span>{{ wheel.front.rawsize }}</span>
</a>
</li>
<li class="onlyRear">
<a href="" ng-click="wheel.rear.go()">
<span>only rear</span>
<span>{{ wheel.rear.rawsize }}</span>
</a>
</li>
</ul>
</li>
</ul>
<div ng-if="subsearch.vehicleSizes.results.length == 0">
<p class='toptxt'>No original equipment sized tires available</p>
</div>
</div>
<div class="tab-content" ng-class="{'is-active' : tabs.current == 'plus' }" id="tab-plus-sizes">
<ul ng-if="subsearch.vehicleSizes.results.length > 0">
<li ng-repeat="wheel in subsearch.vehicleSizes.wheelSizes">
<a ng-if="!wheel.front && !wheel.rear" href="" ng-click="wheel.all.go()"><span class="weels">Wheels<span>{{ wheel.size }}”</span></span><span>{{ wheel.all.rawsize }}</span></a>
<a ng-if="wheel.front && wheel.rear" href="" ng-click="wheel.all.go()">
<span class="weels">Wheels<span>{{ wheel.size }}”</span></span>
<span class="front">Front<span>{{ wheel.front.rawsize }}</span></span>
<span class="rear">Rear<span>{{ wheel.rear.rawsize }}</span></span>
</a>
<ul ng-if="wheel.front && wheel.rear">
<li class="onlyFront">
<a href="" ng-click="wheel.front.go()">
<span>only front</span>
<span>{{ wheel.front.rawsize }}</span>
</a>
</li>
<li class="onlyRear">
<a href="" ng-click="wheel.rear.go()">
<span>only rear</span>
<span>{{ wheel.rear.rawsize }}</span>
</a>
</li>
</ul>
</li>
</ul>
<div ng-if="subsearch.vehicleSizes.results.length == 0">
<p class='toptxt'>No plus sized tires available</p>
</div>
</div>
</div>
</div>
<div class="Important-Note">
<h5>Important Note About O.E. Tire Sizes</h5>
<p>When selecting an Original Equipment (O.E.) tire size, note that the proper O.E. tire size for the vehicle is
determined by options or changes by the manufacturer.</p>
</div>
<div class="Need-Help" ng-init="vehicleFinderHelpOpen = false">
<a href="" ng-click="vehicleFinderHelpOpen = !vehicleFinderHelpOpen" ng-class="{ 'is-open': vehicleFinderHelpOpen }">Need Help Choosing the correct size?</a>
<div class="Need-Help-Content" ng-show="vehicleFinderHelpOpen">
<p>If you are unsure what size is installed on the vehicle please check the size as listed on the tire sidewall.
</p>
<img src="/content/image-correct-size-retina.png" alt="image correct size">
</div>
</div>
</div>
<div ng-if="subsearch.vehicleSizes.results.length === 0 || currentSelection.type != 'vehicle'">
<h4>No results found. Please try another vehicle selection.</h4>
</div>
</script>
<!-- Desktop Recent Searches Controls -->
<script type="text/ss-template" target=".ss-targeted .WidgetCloseLink">
<a href="javascript:void(0);" class="show">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd" opacity=".7" transform="rotate(90 8 8)">
<rect width="16" height="16" fill="#E4E4E4" rx="8"/>
<path fill="#3A3839" d="M7.273 3.636H8.728V12.363H7.273z"/>
<path fill="#3A3839" d="M7.273 3.636H8.728V12.363H7.273z" transform="rotate(90 8 8)"/>
</g>
</svg>
Show Recent Searches
</a>
<a href="javascript:void(0);" class="close">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<defs>
<style>.a{fill:#d61e1e;}.b{clip-path:url(#a);}.c{fill:#e4e4e4;}.d{fill:#3a3839;}</style>
<clipPath id="a">
<rect class="a" width="16" height="16" transform="translate(1775 4206)"/>
</clipPath>
</defs>
<g class="b" transform="translate(-1775 -4206)">
<rect class="c" width="16" height="16" rx="8" transform="translate(1791 4206) rotate(90)"/>
<path class="d" d="M-1796.365,8.726V5.09H-1800V3.636h3.635V0h1.455V3.636h3.637V5.09h-3.637V8.726Z" transform="translate(3049.622 2941.208) rotate(-45)"/>
</g>
</svg>
Close Recent Searches
</a>
</script>
<!-- Search Page -->
<script type="text/ss-template" target="#searchspring-searchpage">
<div ng-if="sizeCategory" id="searchspring-category-selection"></div>
<div id="searchspring-finder-selection"></div>
<div class="container">
<div ng-if="currentSelection.type == 'size'" class="Cat-Search-List-Row">
<p>Check a List of some popular vehicles that {{ currentSelection.displayName }} tires may fit depending on Year & Option:</p>
<a href="javascript:void(0);" class="Show-List-Btn">Show List Vehicles</a>
</div>
<div class="Cat-Search-List-Pop">
<div class="Found-Vehicle-Block">
<h3>Found your Vehicle in this list?</h3>
<p>Type the Year & Option of your vehicle to make sure the tires fit on your vehicle.</p>
<a href="javascript:void(0);" class="Search-Vehicle-Btn hideMob" data-reveal-id="SearchNew">SEARCH BY VEHICLE</a>
<a href="javascript:void(0);" class="Search-Vehicle-Btn hideDesktop" data-collapsible="navPages-mob-ByVehicle">SEARCH BY VEHICLE</a>
</div>
</div>
</div>
<div id="SearchNew" class="modal" data-reveal>
<div class="modal-content">
<div class="modal-header">
<a href="#" class="modal-close" role="button">
<span aria-hidden="true"></span>
</a>
</div>
<div class="modal-body">
<div class="Search-Widget-Inner">
<ul class="tabs" data-tab>
<li class="tab" ng-class="{ 'is-active' : controls.activeModalTab == 'vehicle'}">
<a class="tab-title" ng-click="controls.activeModalTab = 'vehicle'" href="">Shop Tires By <span>Vehicle</span></a>
</li>
<li class="tab" ng-class="{ 'is-active' : controls.activeModalTab == 'size'}">
<a class="tab-title productView-reviewTabLink" ng-click="controls.activeModalTab = 'size'" href="">Shop Tires By <span>Size</span></a>
</li>
</ul>
<div class="tabs-contents">
<div class="tab-content" ng-class="{ 'is-active' : controls.activeModalTab == 'vehicle'}" id="tab-Search-Widget-Vehicle">
<div id="searchspring-home-vehicle-finder"></div>
</div>
<div class="tab-content" ng-class="{ 'is-active' : controls.activeModalTab == 'size'}" id="tab-Search-Widget-Size">
<div id="searchspring-home-size-finder"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" ng-class="{ 'Front_Rear_Login' : currentSelection.sizes.length == 2 }">
<div class="CategoryOuter">
<div class="LeftBar">
<div class="Mob_menu_topbar">
<div class="TopBarMenu">
<h3>Filter &amp; Sort</h3>
<a class="ApplyFilter closeMenu" href="javascript:void(0)" ng-click="controls.toggleMobileFacets()">
<i class="fas fa-check"></i>
<span>APPLY FILTERS</span>
</a>
</div>
</div>
<div class="actionBar hideDesktop">
<div class="ss-sorting"></div>
</div>
<aside class="page-sidebar" id="faceted-search-container">
<div id="searchspring-sidebar"></div>
</aside>
<div ng-if="!loading" class="LeftBotBanner">
<div class="LeftBotInner">
<div class="OverImg">
<img src="/content/support-photo.jpg" alt="">
</div>
<h5>Questions?</h5>
<a href="tel:866-440-0177" class="call-btn">CALL US: 866-440-0177</a>
<a href="javascript:void(0)" class="chat-btn" onclick="MyLiveChat_OpenDialog()">LIVE CHAT</a>
<p class="bottomTxt">8am - 6pm EST Monday - Saturday<br>Closed Sunday</p>
</div>
</div>
</div>
<main class="page-content" id="product-listing-container">
<div id="searchspring-content"></div>
</main>
</div>
</div>
</script>
<!-- Size Category Page Selection -->
<script type="text/ss-template" name="Size Category Page Selection" target="#searchspring-category-selection">
<div ng-if="sizeCategory" class="CategoryTopContent">
<div class="container">
<div class="Left">
<div class="CatImg">
<img ng-src="{{ variables.images.size }}" alt="Tie Size Image">
</div>
<div class="CatContent">
<p>Shopping for:</p>
<span>
<span class="SizeLabel">Size:</span>
<h1 class="SizeValue">{{ sizeCategory }} Tires</h1>
</span>
</div>
</div>
<div class="ss-selection-history Right"></div>
</div>
</div>
<br ng-if="!currentSelection.sizes.length">
</script>
<!-- Finder Selection -->
<script type="text/ss-template" name="Finder Selection" target="#searchspring-finder-selection">
<div ng-if="!sizeCategory && currentSelection" class="CategoryTopContent SizeRow" ng-class="{ 'Front_Rear': currentSelection.sizes.length == 2, 'Front_Rear_size': (currentSelection.sizes.length == 2 && currentSelection.type == 'size') }" ng-init="fireEvent('vehicleSelectionShowing', true)">
<div class="container">
<div class="Left" ng-if="currentSelection.type == 'size'">
<div class="CatImg">
<img ng-src="{{ variables.images.size }}" alt="Tie Size Image">
</div>
<div class="CatContent">
<p>Shopping for:</p>
<span ng-if="currentSelection.sizes.length == 1">
<span class="SizeLabel">Size:</span>
<h2 class="SizeValue">{{ currentSelection.sizes[0].name }} Tires</h2>
</span>
<div class="front_left" ng-if="currentSelection.sizes.length == 2">
<p class="front Lab">FRONT:</p>
<span class="SizeValue">{{ currentSelection.sizes[0].name }}</span>
</div>
<div class="Rear_left" ng-if="currentSelection.sizes.length == 2">
<p class="Rear Lab">REAR:</p>
<span class="SizeValue">{{ currentSelection.sizes[1].name }}</span>
</div>
<a href="javascript:void(0)" ng-click="controls.removeFinderSelection();" class="ClearSizeSearch">Clear</a>
</div>
</div>
<div class="Left Vehicle-Search" ng-if="currentSelection.type == 'vehicle'">
<div class="CatImg">
<img ng-src="{{ currentSelection.imageUrl || variables.images.fallbackVehicle }}" alt="Vehile image here">
</div>
<div class="CatContent">
<p>Shopping for:</p>
<div class="front_left">
<h1 class="SizeValue">{{ currentSelection.displayName || currentSelection.name }} Tires</h1>
</div>
<a href="javascript:void(0)" ng-click="controls.removeFinderSelection();" class="ClearSizeSearch">Clear</a>
</div>
<div ng-if="currentSelection.sizes.length" class="Tire-Size-Btn">
<a ng-if="currentSelection.sizes.length == 1" class="Single-Size"><span class="Label">TIRE SIZE: </span><span class="Value">{{ currentSelection.sizes[0].name }}</span></a>
<a ng-if="currentSelection.sizes.length == 2" class="Double-Size"><span class="Label">TIRE SIZE: </span><span class="Value">FRONT: {{ currentSelection.sizes[0].name }}</span> + <span class="Value">REAR: {{ currentSelection.sizes[1].name }}</span></a>
</div>
</div>
<div ng-if="finder.storage.recent.searches.length" class="ss-selection-history Right"></div>
</div>
</div>
<br ng-if="!sizeCategory && !currentSelection.sizes.length">
</script>
<!-- Selection History -->
<script type="text/ss-template" name="Selection History" target=".ss-selection-history">
<a href="" ng-class="{ 'is-open': controls.finderSelectorOpen }" ng-click="controls.toggleFinderSelector()" class="SwitchSize">Switch Vehicles &amp; Sizes</a>
<div class="SwitchSizePop" ng-if="controls.finderSelectorOpen">
<div class="inner">
<div class="Top">
<div ng-if="finder.storage.recent.searches.length" class="Left">
<h3><span class="SearchedCount">({{ finder.storage.recent.searches.length }})</span> My Searched Vehicles &amp; Sizes</h3>
<a class="ClearAllSearches" href="javascript:void(0)" ng-click="finder.storage.clearAll(); controls.toggleFinderSelector(); finder.controls.desktop.togglePopularSizes();">CLEAR ALL <span class="hideMob">SEARCHES</span></a>
</div>
<div class="Right">
<a class="SearchNew" href="javascript:void(0)" ng-click="controls.toggleFinderSelector()" data-reveal-id="SearchNew">Search new vehicle or size</a>
</div>
</div>
<div class="SwitchSizePopContent">
<ul>
<li ng-repeat="entry in finder.storage.recent.get('all', 6)">
<div class="Vehicle_inner" ng-if="entry.type == 'vehicle'">
<div class="Vehicle-Recent-Img">
<img ng-src="{{ entry.imageUrl || variables.images.fallbackVehicle }}" alt="">
</div>
<div class="Vehicle-Recent-Content">
<p>{{ entry.vehicle.details.year }} {{ entry.vehicle.details.make }}<br>{{ entry.vehicle.details.model }} {{ entry.vehicle.details.option }}</p>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
<div class="size_inner" ng-if="entry.type == 'size'">
<div class="Size-Recent-Img">
<img ng-src="{{ variables.images.size }}" alt="">
</div>
<div class="Size-Recent-Content">
<div ng-if="entry.sizes.length == 1" class="Tire-Size-Text">
<span class="Tire-Size-Label">Tire Size:</span>
<span class="Tire-Size-Value">{{ entry.sizes[0].name }}</span>
</div>
<div ng-if="entry.sizes.length == 2" class="Front-Rear-Text">
<span class="Front-Label">Front:</span>
<span class="Front-Value">{{ entry.sizes[0].name }}</span>
<span class="Rear-Label">Rear:</span>
<span class="Rear-Value">{{ entry.sizes[1].name }}</span>
</div>
<a class="button" href="javascript:void(0)" ng-click="finder.storage.search(entry)">Shop</a>
</div>
</div>
</li>
</ul>
</div>
<div class="MenuButtons hideDesktop">
<ul>
<li>
<a href="javascript:void(0)" ng-click="controls.showMobileFinder('size');">Shop By Size</a>
</li>
<li>
<a href="javascript:void(0)" ng-click="controls.showMobileFinder('vehicle');">Shop By Vehicle</a>
</li>
</ul>
</div>
</div>
</div>
</script>
<!-- Pagination -->
<script type="text/ss-template" name="Pagination" target="#searchspring-content .ss-pagination">
<ul class="pagination-list">
<li ng-if="pagination.previous" class="pagination-item pagination-item--previous">
<a class="pagination-link" href="{{ pagination.previous.url }}">
<i class="icon" aria-hidden="true">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</i>
Previous
</a>
</li>
<li ng-repeat="page in pagination.getPages(5)" class="pagination-item" ng-class="{ 'pagination-item--current': page.active }">
<a class="pagination-link" href="{{ page.url }}" data-faceted-search-facet="">{{ page.number }}</a>
</li>
<li ng-if="pagination.next" class="pagination-item pagination-item--next">
<a class="pagination-link" href="{{ pagination.next.url }}" >
Next
<i class="icon" aria-hidden="true">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</i>
</a>
</li>
</ul>
</script>
<!-- Searchspring Vehicle Fit Check -->
<script type="text/ss-template" module="search" target="#searchspring-vehicle-fit">
<div class="VehicleTireFitWrap">
<div ng-if="!currentSelection" class="container">
<div ng-if="!controls.productPageFinderOpen" class="VehicleTireFitWrapInner">
<h3>Does this tire fit my vehicle?</h3>
<a href="javascript:void(0);" ng-click="openMobilePdpFinder()" class="Btn Fits">MAKE SURE THIS FITS</a>
</div>
<div ng-if="controls.productPageFinderOpen" class="VehicleTireFitWrapInner form">
<h4>Does this tire fit my vehicle?</h4>
<div class="Product-vehicle-finder Search-Widget-Inner">
<div id="searchspring-product-vehicle-finder"></div>
</div>
</div>
</div>
</div>
<div class="Pro_Not_Compatibe_wrap" style="display: none;">
<div class="container">
<div class="Pro_Not_Compatibe"></div>
</div>
</div>
<div class="TireFIt" ng-if="currentSelection.type == 'vehicle'">
<div class="container">
<p ng-if="pdpVariables.ssCompatibility == 'false'" class="Not">
<span>This tire does not fit your vehicle</span>
<a ng-href="{{ pdpVariables.viewAllSizes }}">See all tires that fit this vehicle</a>
</p>
<p ng-if="pdpVariables.ssCompatibility == 'true'">
<span>This tire fits your vehicle</span>
<a ng-href="{{ pdpVariables.viewAllSizes }}">See all tires that fit this vehicle</a>
</p>
</div>
</div>
</script>
<!-- PDP Vehicle Finder -->
<script type="text/ss-template" target="#searchspring-product-vehicle-finder">
<div class="ss-vehicle-search" ng-init="finder.vehicle.search()"></div>
<div ng-repeat="facet in finder.vehicle.facets">
<div class="Vehicle-MM-Wrap" ng-init="columnSelection = 'desktopNav'">
<ul>
<li ng-class="{'ss-finder-disabled': level.disabled || finder.size.loading, 'is-open': finder.controls.desktop.size.step == level.label && !finder.size.loading, 'col-5' : $index > 0 }" ng-repeat="level in facet.finder.levels">
<a href="javascript:void(0)" ng-click="!level.disabled && finder.controls.desktop.toggleMenu('vehicle', level.label, 'mobile')" class="has-subMenu" ng-class="{ 'ss-start-selected': level.selected, 'is-open': finder.controls.desktop.vehicle.step == level.label && !finder.size.loading }">
<span class="count">{{ $index + 1 }}</span>
{{ level.selected ? level.selectionDisplay : 'Select ' + level.label }}
<i class="fas fa-chevron-down"></i>
</a>
<div class="navPage-subMenu" ng-class="{ 'is-open': finder.controls.desktop.vehicle.step == level.label && !finder.vehicle.loading }" id="navPages-Search-Widget-{{ level.label }}" aria-hidden="true">
<div class="Vehicle-Search-Widget-Vehicle">
<input class="form-input" type="text" ng-model="level.search.label" name="Vehicle-Search-Widget-Vehicle" placeholder="Search {{ level.label }}...">
</div>
<div class="Search-Widget-Vehicle-List itemsList">
<ul ng-repeat="column in level.columns(level.numberOfColumns[columnSelection], level.search.label, $index)">
<li ng-repeat="value in column">
<a href="javascript:void(0)" ng-click="finder.controls.desktop.selectValue(facet, value)" ng-class="{ 'ss-finder-selected': facet.finder.selection == value.value }">{{ value.label }}</a>
</li>
</ul>
</div>
</div>
</li>
<li ng-click="facet.finder.currentLevel == 4 && pdpVariables.pdpFindIt()">
<a class="button WSearchBtn" ng-class="{ 'ss-finder-disabled': facet.finder.currentLevel != 4 }" href="javascript:void(0)">Confirm</a>
</li>
</ul>
</div>
</div>
</script>
<!-- PDP Dropdown -->
<script type="text/ss-template" module="search" target=".productView .size-dropdown form">
<select name="size" id="size" ng-model="pdpVariables.tireSizes.selected" ng-options="tire.value for tire in pdpVariables.tireSizes.options" ng-change="pdpVariables.searchTireSize(pdpVariables.tireSizes.selected)"></select>
</script>
<!-- PDP Dropdown -->
<script type="text/ss-template" module="search" target=".productView .AllSizeLink">
<a ng-href="{{ pdpVariables.pdpTireSpecs.searchUrl }}">View all {{ pdpVariables.pdpTireSpecs.size }} Tires</a>
</script>
<!-- Main Content -->
<script type="text/ss-template" name="Main Content" target="#searchspring-content" module="search">
<div ng-if="merchandising.content.header.length > 0" id="ss-merch-header" class="ss-merchandising" ss-merchandising="header"></div>
<div ng-if="pagination && currentSelection" class="Sub-Cat-Top">
<p ng-if="currentSelection.type == 'size' || currentSelection.sizes.length ">Tire results are filtered based on your vehicle/size. To see all sizes, <a href="javascript:void(0);" ng-click="controls.removeFinderSelection();">click here</a> or delete the size below in blue.</p>
<p ng-if="currentSelection.type == 'vehicle' && !currentSelection.sizes.length">A vehicle has been selected without a size. Click <a ng-href="{{ currentSelection.url }}">here</a> to select a size.</p>
</div>
<form ng-if="pagination" class="actionBar ss-top-toolbar" method="get"></form>
<div ng-if="filterSummary.length" class="YourSelections"></div>
<div ng-if="merchandising.content.banner.length > 0" id="ss-merch-banner" class="ss-merchandising" ss-merchandising="banner"></div>
<div ng-if="pagination" class="AllProductListing" data-list-name="{{ context.dataPage }}">
<div class="ss-items" ng-class="{ 'category_front_rear': sets.displayed }">
<div class="AllProductListing">
<ul class="productGrid">
<li ng-if="result.tireDisplays.length != 2" ng-repeat="result in results track by result.uid" class="product ss-single"></li>
<li ng-if="result.tireDisplays.length == 2" ng-repeat="result in results track by result.uid" class="product ss-front-rear"></li>
</ul>
</div>
</div>
<div ng-if="pagination.totalResults === 0" class="ss-no-results"></div>
</div>
<div ng-if="pagination && pagination.totalResults" class="Cat-Bottom-Pagination ss-bottom-toolbar"></div>
<div ng-if="merchandising.content.footer.length > 0" id="ss-merch-footer" class="ss-merchandising" ss-merchandising="footer"></div>
</script>
<!-- Results - Item -->
<script type="text/ss-template" name="Results - Items" target="#searchspring-content .productGrid .ss-single, [ss-autocomplete] .product">
<article class="card" data-product-brand="{{ result.brand }}" data-sku="{{ result.sku }}" data-product-id="{{ result.uid }}" data-url="{{ result.url }}">
<div ng-if="result.custom_badge && result.custom_badge != 'N/A'" class="sale-flag-side badge_rules">
<span class="sale-text">{{ result.custom_badge }}</span>
</div>
<div class="Top-Card">
<div class="card-body">
<div class="card-body-left">
<div class="card-body-left-inner">
<figure class="card-figure">
<a ng-href="{{ result.url }}" intellisuggest>
<div class="card-img-container">
<img class="card-image lazyload" data-sizes="auto" ng-src="{{ ssLazyload.loadingImage }}" ss-lazy-src="result.thumbnailImageUrl" alt="{{ result.name }}" title="{{ result.name }}">
</div>
</a>
</figure>
<p class="card-text ProductRating" data-test-info-type="productRating">
<span class="rating--small">
<span ng-repeat="star in result.ratingStars" class="icon icon--rating{{ star }}">
<svg>
<use xlink:href="#icon-star" />
</svg>
</span>
</span>
<span ng-if="(result.rating_count * 1) == 0" class="productView-reviewLink">No Reviews Yet</span>
</p>
</div>
<div class="card-body-right-inner">
<p class="card-text" data-test-info-type="brandName">{{ result.brand }}</p>
<h4 class="card-title">
<a ng-href="{{ result.url }}" intellisuggest>{{ result.displayName }}</a>
</h4>
<span class="product-sku">{{ result.displaySku }}</span>
<div class="Icon-Air-Pressure-Passed">
<ul class="ppIcons">
<li ng-repeat="ppIcon in result.ppIcons">
<img ng-src="{{ ppIcon.imageUrl }}" alt="{{ ppIcon.value }}">
<span>{{ ppIcon.value }}</span>
</li>
</ul>
<div class="Free-Road-Hazard-Result" ng-if="result.custom_free_road_hazard == 'Yes'">
<a href="/manufacturer-free-road-hazard/" target="_blank">
<span class="CustomLabel">
<img src="https://cdn11.bigcommerce.com/s-jmg6p55oqf/content/Free-Road-Hazard.svg" alt="Yes">
Free Road Hazard
</span>
</a>
</div>
</div>
</div>
</div>
<div ng-repeat="tire in result.tireDisplays" class="card-body-right">
<div class="Bottom-Card-Inner">
<div class="LoginClubMSG">
<h4 class="MSGHead">
<span ng-if="!loggedIn">
<a href="##" data-reveal-id="popupLoginWindow" intellisuggest>Log in</a>
or
<a href="/login.php?action=create_account" intellisuggest>Join</a>
the Club to Get Member Pricing
</span>
<span ng-if="loggedIn">Special Member<br> Only Price</span>
</h4>
</div>
<div class="LoginClubMSGOuter">
<div class="CardPriceWrap">
<div class="card-text productView-price" data-test-info-type="price" ng-class="{'AfterLogin': loggedIn }">
<div ng-if="tire.msrp && (tire.msrp * 1) > (tire.price * 1)" class="price-section price-section--withoutTax rrp-price--withoutTax">
<span class="price_label">MSRP</span>
<span class="price price--rrp" data-price="{{ tire.msrp | currency }}">{{ tire.msrp | currency }}</span>
</div>
<div class="price-section price-section--withoutTax non-sale-price--withoutTax" ng-show="loggedIn && result.regular_price">
<span class="price_label">Regular Price</span>
<span class="price_label forMobile_only" style="display:none">Our price</span>
<span class="price price--non-sale">{{ tire.regular_price | currency }}</span>
</div>
<div class="price-section price-section--withoutTax" ng-class="{ 'ss-regular-price' : (tire.msrp * 1) < (tire.price * 1) }">
<span class="price price--withoutTax" data-price="{{ tire.price | currency }}">{{ tire.price | currency }}</span>
</div>
<div ng-init="tire.cartData.calculateSubtotal()" class="four_p_price">
<span>Total for {{ tire.cartData.qty }}:</span>{{ tire.cartData.subtotal | currency }}
</div>
<div ng-if="tire.msrp && (tire.msrp * 1) > (tire.price * 1)" class="price-section price-section--saving price YouSaveMSG">
<span class="price">You save</span>
<span class="price price--saving">
<strong class="sprice" data-price="{{ (tire.msrp - tire.price) | currency }}">{{ tire.cartData.saved | currency }}</strong>
<strong>({{ tire.percentSaved }})</strong>
</span>
</div>
</div>
</div>
<div ng-if="!tire.ss_in_stock" class="out_stock_content">
<h5 class="Unavailable-Stock">This item is currently unavailable.</h5>
<p class="Out_Call">Please call <a href="tel:8664400177">(866-440-0177)</a> for assistance selecting a comparable product</p>
</div>
<div ng-if="tire.ss_in_stock" ng-repeat="tire in result.tireDisplays" class="form-field form-field--increments">
<div class="card_qty" name="{{ result.uid }}">
<select>
<option ng-repeat="qty in tire.cartData.qtyOptions" value="{{ qty }}" ng-selected="tire.cartData.qty == qty">{{ qty }}</option>
</select>
</div>
</div>
<div class="Last-Right" ng-class="{ 'out-of-stock-btn' : !tire.ss_in_stock }">
<div class="Add-To-Cart-Btn">
<a href="javascript:void(0)" intellisuggest>
<span>ADD TO CART</span>
</a>
<form style="display: none" id="customAddcart">
<input type="hidden" name="action" value="add">
<input type="hidden" name="product_id" value="{{ tire.uid }}">
<input type="hidden" name="qty[]" value="{{ tire.cartData.qty }}">
</form>
</div>
</div>
<div ng-if="(tire.inventory_level * 1) > 10" class="stock_level In-Stock-Btn">In Stock (10+)</div>
<div ng-if="(tire.inventory_level * 1) <= 10 && (tire.inventory_level * 1) > 0" class="stock_level Low-Stock-Btn">Low Stock ({{ tire.inventory_level }})</div>
</div>
</div>
<div class="Risk-Paypal-Img-Credit">
<img src="/content/Risk_buying.png" alt="Risk Free Buying" />
</div>
</div>
<div ng-repeat="message in result.warningMessages" class="Warning-Message">
<span>{{ message }}</span>
</div>
</div>
</div>
<div ng-repeat="tire in result.tireDisplays" class="Bottom-Card">
<div class="Outer">
<div ng-init="tire.showSpecs = false" class="Tire-Specifications">
<a href="javascript:void(0)" ng-click="tire.showSpecs = !tire.showSpecs" ng-class="{ 'is-open': tire.showSpecs }" class="Specifications-Link" intellisuggest>Show Tire Specifications</a>
<div ng-if="tire.showSpecs" class="Specifications-Pop">
<ul>
<li ng-repeat="spec in tire.tireSpecs">
<span class="ctm_lable">{{ spec.label }}</span>
<span class="ctm_value">{{ spec.value }}</span>
</li>
</ul>
</div>
</div>
<div class="CardSippingWrap">
<div class="FedxImg">
<img src="/content/free-shipping.svg" alt="Free Shipping">
</div>
<div class="Same-Day-Ship-Btn">
<a href="javascript:void(0)">Same day Shipping for orders before 1PM EST</a>
</div>
</div>
</div>
</div>
</article>
</script>
<!-- Results - Item -->
<script type="text/ss-template" name="Results - Items" target="#searchspring-content .productGrid .ss-front-rear">
<article class="card" data-event-type="list" data-entity-id="{{ result.uid }}" data-position="{{ $index }}" data-name="{{ result.name }}" data-product-category="{{ result.categories.join(',') }}" data-product-brand="{{ result.brand }}" data-product-price="{{ result.price }}" data-sku="{{ result.sku }}" data-product-id="{{ result.uid }}">
<div ng-if="result.custom_badge && result.custom_badge != 'N/A'" class="sale-flag-side badge_rules">
<span class="sale-text">{{ result.custom_badge }}</span>
</div>
<div class="Top-Card">
<figure class="card-figure">
<a ng-href="{{ result.url }}" intellisuggest>
<div class="card-img-container">
<img class="card-image lazyload" data-sizes="auto" ng-src="{{ ssLazyload.loadingImage }}" ss-lazy-src="result.thumbnailImageUrl" alt="{{ result.name }}" title="{{ result.name }}">
</div>
</a>
</figure>
<div class="card-body">
<div class="card-body-left">
<p class="card-text" data-test-info-type="brandName">{{ result.custom_brand[0] }}</p>
<h4 class="card-title">
<a ng-href="{{ result.url }}" intellisuggest>{{ result.displayName }}</a>
</h4>
<p class="card-text ProductRating" data-test-info-type="productRating">
<span class="rating--small">
<span ng-repeat="star in result.ratingStars" class="icon icon--rating{{ star }}">
<svg>
<use xlink:href="#icon-star" />
</svg>
</span>
</span>
<span ng-if="(result.rating_count * 1) == 0" class="productView-reviewLink">No Reviews Yet</span>
</p>
</div>
<div class="card-body-right"></div>
</div>
</div>
<div class="Bottom-Card Tire-Set" ng-class="{ 'Front-Pro-Data': $index == 0, 'Rear-Pro-Data': $index == 1 }" ng-repeat="tire in result.tireDisplays">
<div class="Outer card-body">
<div class="Bottom-Card-Left">
<div>
<p class="Front-Label">{{ $index == 0 ? 'FRONT' : 'REAR' }}:</p>
<span class="product-sku">{{ tire.displaySku }}</span>
<ul class="ppIcons">
<li ng-repeat="ppIcon in tire.ppIcons">
<img ng-src="{{ ppIcon.imageUrl }}" alt="{{ ppIcon.value }}">
<span>{{ ppIcon.value }}</span>
</li>
</ul>
</div>
</div>
<div class="Bottom-Card-Right card-body-right">
<div class="Bottom-Card-Inner">
<div class="LoginClubMSG">
<h4 class="MSGHead">
<span ng-if="!loggedIn">
<a href="##" data-reveal-id="popupLoginWindow" intellisuggest>Log in</a>
or
<a href="/login.php?action=create_account" intellisuggest>Join</a>
the Club to Get Member Pricing
</span>
<span ng-if="loggedIn">Special Member<br> Only Price</span>
</h4>
</div>
<div class="LoginClubMSGOuter">
<div class="CardPriceWrap">
<div class="card-text productView-price" data-test-info-type="price">
<div ng-if="tire.msrp && (tire.msrp * 1) > (tire.price * 1)" class="price-section price-section--withoutTax rrp-price--withoutTax">
<span class="price_label">MSRP</span>
<span class="price price--rrp" data-price="{{ tire.msrp | currency }}">{{ tire.msrp | currency }}</span>
</div>
<div class="price-section price-section--withoutTax non-sale-price--withoutTax" style="display: none;">
<span class="price_label">Regular Price</span>
<span class="price_label forMobile_only" style="display:none">Our price</span>
<span class="price price--non-sale"></span>
</div>
<div class="price-section price-section--withoutTax">
<span class="price price--withoutTax" data-price="{{ tire.price | currency }}">{{ tire.price | currency }}</span>
</div>
<div class="four_p_price" ng-init="tire.cartData.calculateSubtotal()">
<span>Total for {{ tire.cartData.qty }}:</span>{{ tire.cartData.subtotal | currency }}
</div>
</div>
</div>
<div class="qty-save-inner">
<div ng-if="tire.msrp && (tire.msrp * 1) > (tire.price * 1)" class="price-section price-section--saving price YouSaveMSG">
<span class="price">You save</span>
<span class="price price--saving">
<strong class="sprice" data-price="{{ (tire.msrp - tire.price) | currency }}">{{ tire.cartData.saved | currency }}</strong>
<strong>({{ tire.percentSaved }})</strong>
</span>
</div>
<div ng-if="tire.ss_in_stock" class="form-field form-field--increments">
<div class="card_qty" name="{{ result.uid }}">
<select ng-options="qty for qty in tire.cartData.qtyOptions" ng-model="tire.cartData.qty" ng-change="tire.cartData.calculateSubtotal()"></select>
</div>
</div>
</div>
<div ng-if="!tire.ss_in_stock" class="out_stock_content">
<h5 class="Unavailable-Stock">This item is currently unavailable.</h5>
<p class="Out_Call">Please call <a href="tel:8664400177">(866-440-0177)</a> for assistance selecting a comparable product</p>
</div>
<div ng-if="(tire.inventory_level * 1) > 10" class="stock_level In-Stock-Btn">In Stock (10+)</div>
<div ng-if="(tire.inventory_level * 1) <= 10 && (tire.inventory_level * 1) > 0" class="stock_level Low-Stock-Btn">Low Stock ({{ tire.inventory_level }})</div>
</div>
</div>
</div>
<div ng-repeat="message in result.warningMessages" class="Warning-Message">
<span>{{ message }}</span>
</div>
</div>
<div ng-init="tire.showSpecs = false" class="Tire-Specifications">
<a href="javascript:void(0)" ng-click="tire.showSpecs = !tire.showSpecs" ng-class="{ 'is-open': tire.showSpecs }" class="Specifications-Link" intellisuggest>Show Tire Specifications</a>
<div ng-if="tire.showSpecs" class="Specifications-Pop">
<ul>
<li ng-repeat="spec in tire.tireSpecs">
<span class="ctm_lable">{{ spec.label }}</span>
<span class="ctm_value">{{ spec.value }}</span>
</li>
</ul>
</div>
</div>
</div>
<div class="Bottom-Card-Last">
<div class="Outer-One">
<div class="Risk-Free FedxImg-Left">
<img src="/content/Risk_buying.png" alt="Risk Free Buying" />
</div>
<div class="Total-Right">
<span class="Total-Label">Tire Set Subtotal:</span>
<span class="Total-Value">{{ (result.tireDisplays[0].cartData.subtotal + result.tireDisplays[1].cartData.subtotal ) | currency }}</span>
</div>
</div>
<div class="Outer">
<div class="Last-Right">
<div class="Custom-Add-To-Cart-Btn">
<a href="javascript:void(0)" data-event-type="product-click" intellisuggest>
<span>ADD TO CART</span>
</a>
<form style="display: none" id="customAddcart">
<input type="hidden" name="action" value="add">
<input type="hidden" name="product_id" value="{{ tire.uid }}">
<input type="hidden" name="qty[]" value="{{ tire.cartData.qty }}">
</form>
</div>
</div>
<div class="Last-Left">
<div class="Risk-Paypal-Img">
<img src="https://cdn11.bigcommerce.com/s-jmg6p55oqf/content/day-gurarantee.svg" alt="">
<img src="https://cdn11.bigcommerce.com/s-jmg6p55oqf/content/Risk-free.svg" alt="">
</div>
<!-- <div class="CardSippingWrap">
<div class="FedxImg">
<img src="/content/free-shipping.svg" alt="Free Shipping">
</div>
<div class="Same-Day-Ship-Btn">
<a href="javascript:void(0)" intellisuggest>Same day Shipping for orders before 1PM EST</a>
</div>
</div> -->
</div>
</div>
</div>
</article>
</script>
<!-- No Results -->
<script type="text/ss-template" name="No Results" target=".ss-no-results">
<div class="ss-no-results-container">
<p ng-if="didYouMean.query.length" class="ss-did-you-mean">
Did you mean <a href="{{ location().remove(context.search).add(context.search, didYouMean.query).url() }}">"{{ didYouMean.query }}"</a>?
</p>
</div>
<div ng-if="merchandising.content.banner.length > 0" id="ss-merch-banner" class="ss-merchandising" ss-merchandising="banner"></div>
<div class="ss-no-results-container">
<h4 class="ss-title">Suggestions</h4>
<ul class="ss-suggestion-list">
<li>Check for misspellings.</li>
<li>Remove possible redundant keywords (ie. "products").</li>
<li>Use other words to describe what you are searching for.</li>
</ul>
<p>Still can't find what you're looking for? <a href="/contact-us/">Contact us</a>.</p>
<div class="ss-contact ss-location">
<h4 class="ss-title">Warehouse Locations</h4>
<h5>Allentown, PA Warehouse</h5>
<p>7072 Snowdrift Rd <br>Allentown PA 18106</p>
<h5>Dallas, TX Warehouse</h5>
<p>2920 114th Street, Suite 300 <br> Grand Prairie, TX 75050</p>
<h5>Jacksonville, FL Warehouse</h5>
<p>1594 Transport Ct STE 102, <br> Jacksonville, FL 32218</p>
</div>
<div class="ss-contact ss-hours">
<h4 class="ss-title">Hours</h4>
<p>
Mon - Sat: 8am - 6pm EST<br />
Sun: Closed
</p>
</div>
<div class="ss-contact ss-phone">
<h4 class="ss-title">Call Us</h4>
<p><a href="tel:18664400177">1-866-440-0177</a></p>
</div>
<div class="ss-contact ss-email">
<h4 class="ss-title">Email</h4>
<p><a href="mailto:info@prioritytire.com">info@prioritytire.com</a></p>
</div>
</div>
<div ng-if="merchandising.content.footer.length > 0" id="ss-merch-footer" class="ss-merchandising" ss-merchandising="footer"></div>
</script>
<!-- SearchSpring Mobile Sticky Buttons -->
<script type="text/ss-template" name="SearchSpring Mobile Sticky Buttons" target="#searchspring-mobile-sticky">
<div ng-if="pagination" class="CatBottomStickyBar hideDesktop">
<div class="BottomStickyLeft" ng-class="{ 'NullResultSticky': !currentSelection }">
<div ng-if="currentSelection">
<!-- <div ng-if="currentSelection.sizes.length"> -->
<div class="CatImg">
<img ng-if="currentSelection.type == 'size'" ng-src="{{ variables.images.size }}" alt="">
<img ng-if="currentSelection.type == 'vehicle'" ng-src="{{ currentSelection.imageUrl || variables.images.fallbackVehicle }}" alt="">
</div>
<div class="CatContent">
<p>Shopping for:</p>
<span class="SizeLabel">{{ currentSelection.name }}</span>
</div>
</div>
<div ng-if="!currentSelection">
<!-- <div ng-if="!currentSelection.sizes.length"> -->
<p>YOU ARE SHOPPING FOR ALL SIZES</p>
<div class="CatContent">
<a ng-click="controls.showMobileFinder('vehicle');" class="StickyLink">Shop By Vehicle</a>
<a ng-click="controls.showMobileFinder('size');" class="StickyLink">Shop By Size</a>
</div>
</div>
</div>
<div class="CatBotmenu Right" ng-click="controls.toggleMobileFacets()">
<a href="javascript:void(0);" class="Filter_Menu">FILTER <br>& SORT</a>
</div>
</div>
</script>
<!-- Top Toolbar -->
<script type="text/ss-template" name="Top Toolbar" target=".ss-top-toolbar">
<div class="Left">
<span class="ResultsFoundTxt">
({{ pagination.totalResults }}) Result{{ pagination.totalResults == 1 ? '' : 's' }} found
<span ng-if="q" class="ss-search-terms">
for
<span class="ss-q">"{{ q }}"</span>
</span>
</span>
</div>
<div class="ss-sorting"></div>
</script>
<!-- Bottom Toolbar -->
<script type="text/ss-template" name="Bottom Toolbar" target=".ss-bottom-toolbar">
<div ng-if="pagination.totalPages > 1" class="pagination ss-pagination"></div>
<div class="Left">
<label>Results Per Page:</label>
<select ng-change="setPersistentPerPage()" ng-model="pagination.perPage" ng-options="n for n in [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"></select>
</div>
</script>
<!-- Sorting -->
<script type="text/ss-template" name="Sorting" target=".ss-sorting">
<fieldset class="form-fieldset actionBar-section" ng-if="pagination.totalResults > 0">
<div class="form-field">
<select class="form-select form-select--small" ng-model="sorting.current" ng-options="option.label for option in sorting.options"></select>
</div>
</fieldset>
</script>
Raw
searchspring.js
SearchSpring.Catalog.site.id = 'h7hdij';
SearchSpring.Catalog.config.apiHost = 'https://h7hdij.a.searchspring.io/';
// springboard generated variables
var modules = {};
modules.enabled = true;
// springboard generated variables for autocomplete/default
modules.autocomplete = {
input: '#search_query',
spellCorrection: false,
language: 'en',
action: '',
autoPosition: false,
limit: 6
};
this.importer.include('autocomplete2', modules.autocomplete);
/* global ga */
var self = this;
var loggedIn = false;
this.context.pagination = 'p';
// category integration background filtering
if (this.context.category) {
this.context.backgroundFilters['categories_hierarchy'] = this.context.category;
this.context.dataPage = "Category: " + this.context.name;
} else {
this.context.dataPage = "Search: <empty>"
}
if (this.context.brand) {
this.context.backgroundFilters['brand'] = this.context.brand;
}
if(self.context.hasOwnProperty('loggedIn')){
loggedIn = true;
}
// springboard generated variables
var modules = {};
modules.enabled = true;
// After bootstrap watcher to determine if autocomplete is open or not
this.on('afterBootstrap', function($scope) {
$scope.$watch('ac.visible', function() {
if ($scope.ac.visible) {
angular.element(document.querySelector('body')).addClass('ActiveSearch');
} else {
angular.element(document.querySelector('body')).removeClass('ActiveSearch');
}
});
});
this.on('_afterAutocompleteSearch', function($scope) {
var selector = '[ss-autocomplete]';
self.utils.ensure(function() {
return typeof(jQuery) == "function"
}, function() {
jQuery(selector).appendTo('body');
jQuery('.ClearSearch').on('click', function() {
$scope.input = '';
$scope.q = '';
jQuery('.searchspring-query').val('');
jQuery(this).hide();
})
});
return self.on.UNBIND;
});
// place 'loaded' class onto homepage finder for targeting
self.on('afterFinderSearch', function($scope) {
if ($scope.options.identifier == 'vehicle') {
angular.element(document.querySelector('#searchspring-home-vehicle-finder')).addClass('ss-loaded');
return self.on.UNBIND;
}
});
this.on('afterSearch', function($scope) {
$scope.submitInputs = function(facet, value1, value2) {
// Values should be multiplied by 1 to avoid conflicts with filter summary
// Ex: values entered as 30.00 (low) and 75.25 (high) cause issues
// We also need to check if any value has been submitted
var newValue1 = value1 ? (value1 * 1) : '*';
var newValue2 = value2 ? (value2 * 1) : '*';
// If you want to be able to submit multiple prices, remove ".remove('filter', facet)"
$scope.location().remove('filter', facet).add('filter', facet, newValue1, newValue2).go();
}
// optionally format the custom price values
angular.forEach($scope.filterSummary, function(filter) {
if (filter.field == 'price') {
if (!filter.filterValue.match(/\$/)) {
var values = filter.filterValue.split(' to ');
values = values.map(function(val) {
if (val != '*') {
val = '$' + (val.match(/\./) ? (val * 1).toFixed(2) : val);
} else {
val = '$0'
}
return val;
});
if (values[1] == '$0') {
filter.filterValue = values[0] + ' +';
} else {
filter.filterValue = values.join(' to ');
}
}
}
});
});
var variables = {
webdavURL: self.context.webdav,
cdnURL: this.context.cdn,
images: {
fallbackVehicle: '/content/No-vehicle-image.png',
size: '/content/tire-search.png',
fallbackResult: self.context.cdn + 'img/ProductDefault.gif',
loadingResult: self.context.cdn + 'img/loading.svg'
},
enableRatings: true
};
//2020 CODE
if(self.context.vehicleSearch){
// vehicle search code
var ss_location;
var tabs = {
values : [
{
label : 'Original',
name : 'original',
order : 1
},
{
label : 'Plus',
name : 'plus',
order : 2
}
],
siteId: '7shinf',
current : 'Original',
previous : 'original'
};
this.on('afterBootstrap', function($scope) {
$scope.tabs = tabs;
ss_location = $scope.location;
//run vehicle subsearch to get all tires sizes
self.promises.module_subsearch.then(function() {
$scope.subsearch.vehicleSizes.search();
})
//change between original and plus tabs
$scope.tabs.changeVehicleTab = function(name){
var tab = this.values.filter(function(tab) {
return tab.name == name;
}).pop();
// Check if there are tabs
if (tab) {
// Current and active tabs
this.previous = this.current;
this.current = name;
// Check if current and previous tabs are different
if (this.current != this.previous) {
$scope.subsearch.vehicleSizes.wheelSizes = [];
$scope.location().remove('type').add('type', name).go();
$scope.subsearch.vehicleSizes.search();
}
}
$scope._update();
}
});
//add url params for in stock products page and set bg filter based on them
this.on('beforeSearch', function(req, config) {
if(config.moduleName == 'subsearch'){
req.siteId = tabs.siteId;
req['bgfilter.plussize'] = '0';
// Get location of the result set
var typeSet = ss_location().get('type');
// If there is a hash
if (typeSet.length && typeSet[0][1]) {
// Set hash name's from the url
var hashname = typeSet[0][1].replace('#', '');
tabs.current = hashname;
if(hashname == 'original'){
delete['bgfilter.plussize'];
req['bgfilter.plussize'] = '0';
} else if (hashname == 'plus') {
delete['bgfilter.plussize'];
req['bgfilter.plussize'] = '1';
}
} else {
tabs.current = 'original';
delete['bgfilter.plussize'];
req['bgfilter.plussize'] = '0';
}
}
});
}
//END 2020 CODE
this.on('afterBootstrap', function($scope) {
//set logged in varaible to determine member pricing
$scope.loggedIn = loggedIn;
$scope.variables = variables;
$scope.controls = {
mobileFacetsOpen: false,
finderSelectorOpen: false,
productPageFinderOpen: false,
mobileFitOpen: false,
activeModalTab: 'vehicle',
toggleMobileFacets: function() {
var body = angular.element(document.querySelector('body'));
var left = angular.element(document.querySelector('.LeftBar'));
this.mobileFacetsOpen = left.hasClass('is-open-bar');
if (!this.mobileFacetsOpen) {
left.addClass('is-open-bar');
window.setTimeout(function() {
$scope.$broadcast('rzSliderForceRender');
});
} else {
left.removeClass('is-open-bar');
}
},
toggleFinderSelector: function() {
var body = angular.element(document.querySelector('body'));
this.finderSelectorOpen = !this.finderSelectorOpen;
if (this.finderSelectorOpen) {
body.addClass('menu_bg_color_x');
} else {
body.removeClass('menu_bg_color_x');
}
},
showMobileFinder: function(type) {
if (type == 'size') {
$('.mobSizeWrap').show();
} else if (type == 'vehicle') {
$('.mobVehicleWrap').show();
}
$('body').addClass('is-openSizeVehicle');
},
removeFinderSelection: function() {
if (finderSelection) {
var currentURL = window.location.href;
var location = $scope.location();
if (finderSelection.vehicle && finderSelection.vehicle.fitment) {
location.remove(finderSelection.vehicle.fitment);
// reset title and breadcrumbs if on search page
var onSearchPage = window.location.href.match(searchLocation);
if (onSearchPage) {
document.querySelector('title').innerHTML = 'Search Results';
var breadcrumbContainer = document.querySelector('.breadcrumbs');
if (breadcrumbContainer) {
var searchBreadcrumbs = '<li class="breadcrumb " itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="/" class="breadcrumb-label" itemprop="item"><span class="Home"itemprop="name"></span></a></li><li class="breadcrumb is-active" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><meta itemprop="item" content="/shop"><span class="breadcrumb-label Last-Link" itemprop="name">Search Results</span><meta itemprop="position" content="2"></li>'
breadcrumbContainer.innerHTML = searchBreadcrumbs;
}
}
}
// remove setSearch regardless
$scope.setSearch = false;
angular.forEach(finderSelection.sizes, function(size) {
location.remove(size.fitment);
});
//2020 CODE
//remove tire sizes storage when cleaning selection
window.localStorage.removeItem('tireSizes')
if($scope.pdpVariables){
$scope.pdpVariables.ssCompatibility = '';
}
//END 2020 CODE
location.remove('front').remove('rear');
finderSelection = undefined;
$scope.currentSelection = finderSelection;
finderStorage.deselect();
var newURL = location.url();
if (currentURL != newURL) {
location.go();
} else {
$scope._update();
}
}
}
}
$scope.setPersistentPerPage = function() {
try {
if (window.navigator.cookieEnabled && typeof(Storage) != 'undefined' && window.sessionStorage) {
window.sessionStorage.setItem('ssPerPage', $scope.pagination.perPage);
}
} catch(err) {
console.error('Failed to store current per page selection:', err);
}
}
$scope.fireEvent = function(event, immediate) {
// special event for page loads...
if (immediate) {
SearchSpring.Catalog.fire(event);
} else {
self.on('domReady', function() {
SearchSpring.Catalog.fire(event);
return self.on.UNBIND;
});
}
}
});
// pre-apply stored per page selection if exists
this.on('beforeSearch', function(req, config) {
if (!config.moduleName) {
if (window.navigator.cookieEnabled && typeof(Storage) != 'undefined' && window.sessionStorage) {
//get stored sort
try {
var storedPerPage = window.sessionStorage.getItem('ssPerPage');
if (storedPerPage) {
req.resultsPerPage = storedPerPage;
}
} catch(err) {
console.error('Failed to read stored per page selection:', err);
}
}
}
});
// make hierarchy facet 'ss_size' a filter summary object
this.on('afterSearch', function($scope) {
// pull out that size facet!
$scope.sizeFacet = $scope.facets.grab('ss_size').pop();
// thou shall not pass v3 modules!
if ($scope.moduleName) {
return;
}
var fields = ['ss_size']
angular.forEach($scope.breadcrumbs, function(crumb) {
if (fields.indexOf(crumb.field) != -1) {
var summaryObject = {
field: crumb.field,
filterLabel: crumb.filterLabel,
filterValue: crumb.filterValue,
label: crumb.label,
value: crumb.filterValue,
remove: {
location: $scope.location(),
go: function() {
summaryObject.remove.location.remove('filter', crumb.field, crumb.filterValue).go();
}
}
}
summaryObject.remove.url = summaryObject.remove.location.remove('filter', crumb.field, crumb.filterValue).url();
$scope.filterSummary.push(summaryObject);
}
});
});
// general facet mutation
this.on('afterSearch', function($scope) {
if (!$scope.moduleName || $scope.moduleName == 'autocomplete2') {
// facets (field names) that should have the search within added
var searchableFacets = ['brand', 'model', 'custom_size'];
var additionalFacetData = {
'ss_num_tires_facet': {
values: {
'Single': {
class: 'single-tire'
},
'Pair': {
class: 'pair-tire'
},
'Set of 4': {
class: 'set-of-4'
}
}
}
}
angular.forEach($scope.facets, function(facet) {
// change limits
var facetType = (facet.type == 'palette' || facet.type == 'grid') ? true : false;
facet.limitCount = facetType ? 15 : 10;
// add flag for search within
if (searchableFacets.indexOf(facet.field) != -1) {
facet.searchWithin = true;
}
// add class or images for image based facets
if (additionalFacetData[facet.field]) {
angular.forEach(facet.values, function(value) {
value.imageMap = additionalFacetData[facet.field].values[value.value];
});
}
});
}
});
// result maps used for icons etc...
// result ppIcons mapping
var ppIconMap = {
'custom_season': {
values: {
'All Season': {
image: 'all-seasons-new.svg'
},
'Summer': {
image: 'tire-list-summer.svg'
},
'Winter': {
image: 'winter_new.svg'
}
}
},
'custom_performance': {
values: {
'Touring': {
image : 'touring-new.svg'
},
'Performance': {
image: 'performance-new.svg'
},
'High Performance': {
image: 'high_performance_new.svg'
},
'Highway': {
image: 'highway-new.svg'
},
'All Terrain': {
image: 'all_terrain_new.svg'
},
'Mud Terrain': {
image: 'tier-mud-terrain-new.svg'
},
'Rugged Terrain': {
image: 'rugged-terrain-outlined.svg'
}
}
}
}
var performanceMap = {
'All Terrain': {
image: 'all-terrain.svg'
},
'Highway': {
image: 'highway.svg'
},
'Mud Terrain': {
image: 'tier-mud-terrain-new.svg'
},
'Touring': {
image: 'touring.svg'
},
'High Performance': {
image: 'high-performance.svg'
},
'Performance': {
image: 'performance.svg'
}
}
var tireSpecMap = {
'sku': {
label: 'SKU'
},
'custom_load_index': {
label: 'Load Index'
},
'custom_type': {
label: 'Type'
},
'custom_utqg': {
label: 'UTQG'
},
'custom_year': {
label: 'Year'
},
'custom_mpn': {
label: 'MPN'
},
'brand': {
label: 'Brand'
},
'custom_speed_rating': {
label: 'Speed Rating'
},
'custom_performance': {
label: 'Performance'
},
'custom_sidewall': {
label: 'Sidewall'
},
'custom_section_width': {
label: 'Section Width'
},
'custom_upc_ean': {
label: 'UPC/EAN'
},
'custom_model': {
label: 'Model'
},
'custom_load_range': {
label: 'Load Range'
},
'custom_season': {
label: 'Season'
},
'custom_tread_depth': {
label: 'Tread Depth'
},
'custom_aspect_ratio': {
label: 'Aspect Ratio'
},
'custom_treadlife': {
label: 'Treadlife'
},
'custom_size': {
label: 'Size'
},
'custom_run_flat': {
label: 'Run Flat'
},
'custom_asin': {
label: 'ASIN'
},
'custom_rebate_available': {
label: 'Rebate Available'
},
'custom_rim_diameter': {
label: 'Rim Diameter'
},
'custom_overall_diameter': {
label: 'Overall Diameter'
},
'custom_production_year_dot': {
label: 'Production Year (DOT)'
},
'custom_insurance': {
label: 'Insurance'
},
'custom_oe_markings': {
label: 'OE Markings'
},
'custom_load_capacity': {
label: 'Load Capacity'
},
'custom_tire_construction_type': {
label: 'Tire Construction Type'
},
'custom_volume': {
label: 'Volume'
},
'commercial_type': {
label: 'Commercial Type'
}
}
// mutate a result - this could be a 'set' item from the "tire" search (containing front + rear)
function mutateResult(result, $scope) {
// initialize warning messages array
result.warningMessages = [];
// setup a display name based on their template logic
result.displayName = result.name;
if (variables.enableRatings) {
result.rating = result.rating || 0;
result.ratingStars = []
for(var s = 1; s <= 5; s++) {
if (result.rating >= s) {
result.ratingStars.push('Full');
} else {
result.ratingStars.push('Empty');
}
}
}
if (result.brand && result.custom_model) {
result.displayName = '';
if (result.custom_bc_condition && result.custom_bc_condition.toLowerCase() == 'used') {
result.displayName += 'Used ';
}
result.displayName += result.brand + ' ' + result.custom_model;
if (result.custom_bc_condition && result.custom_bc_condition.toLowerCase() == 'blemished'){
result.displayName = result.custom_model;
}
}
// setup a displaySku based on their template logic
result.displaySku = generateDisplaySku(result);
// ppIcons
result.ppIcons = [];
angular.forEach(ppIconMap, function(field, key) {
var resultValue = result[key];
if (resultValue) {
resultValue = Array.isArray(resultValue) ? resultValue : [resultValue];
angular.forEach(resultValue, function(value) {
if (field.values[value]) {
var iconMap = angular.copy(field.values[value]);
if (iconMap.image) {
iconMap.imageUrl = variables.webdavURL + iconMap.image;
}
iconMap.value = iconMap.value || value;
result.ppIcons.push(iconMap);
}
});
}
});
if(result['custom_treadlife'] && result['custom_treadlife'] != 'N/A') {
result.ppIcons.push({
image : 'tire-list-treadlife-new.svg',
imageUrl : variables.webdavURL + 'tire-list-treadlife-new.svg',
value : result['custom_treadlife']
})
}
}
// display sku used in template
function generateDisplaySku(result) {
var displaySku;
if (result.custom_size) {
displaySku = result.custom_size;
if (result.custom_load_index && result.custom_speed_rating && result.custom_load_index != 'N/A' && result.custom_speed_rating != 'N/A') {
displaySku += ', ' + result.custom_load_index + result.custom_speed_rating;
}
if (result.custom_load_range && result.custom_load_range != 'N/A') {
displaySku += ', ' + result.custom_load_range;
}
}
if (result.custom_fitment_type && result.custom_fitment_type != "N/A") {
displaySku = result.custom_fitment_type + ' ' + displaySku;
}
return displaySku;
}
// mutate a result object to a tire object - this could be a 'set' item from the "tire" search (containing front + rear)
function mutateTire(originalTire, result, $scope) {
var tire = angular.copy(originalTire);
// setup a displaySku based on their template logic
tire.displaySku = generateDisplaySku(tire);
// performance icons
if (tire.custom_performance && performanceMap[tire.custom_performance]) {
tire.performanceIcon = angular.copy(performanceMap[tire.custom_performance]);
tire.performanceIcon.imageUrl = variables.webdavURL + performanceMap[tire.custom_performance].image;
tire.performanceIcon.value = tire.custom_performance;
}
// ppIcons
tire.ppIcons = [];
angular.forEach(ppIconMap, function(field, key) {
var resultValue = tire[key] || result[key];
if (resultValue) {
resultValue = Array.isArray(resultValue) ? resultValue : [resultValue];
angular.forEach(resultValue, function(value) {
if (field.values[value]) {
var iconMap = angular.copy(field.values[value]);
if (iconMap.image) {
iconMap.imageUrl = variables.webdavURL + iconMap.image;
}
iconMap.value = iconMap.value || value;
tire.ppIcons.push(iconMap);
}
});
}
});
if(tire['custom_treadlife'] && tire['custom_treadlife'] != 'N/A') {
tire.ppIcons.push({
image : 'tire-list-treadlife-new.svg',
imageUrl : variables.webdavURL + 'tire-list-treadlife-new.svg',
value : tire['custom_treadlife']
})
}
// tire specs
tire.tireSpecs = [];
angular.forEach(tireSpecMap, function(spec, key) {
var tireSpec = angular.copy(spec);
if (tire[key] && tire[key] != "N/A") {
tireSpec.value = tire[key];
tire.tireSpecs.push(tireSpec);
}
});
var startingQty = 4;
var minQty = (tire.inventory_level % 2 == 1 || tire.inventory_level > 4) ? 1 : 2;
if (tire.setSearch) {
minQty = 1;
startingQty = 2;
} else {
if (tire.sku.match(/^NL/)) {
minQty = 4;
}
}
// calculate percent saved per tire
tire.percentSaved = generatePercentSaved(tire.price, tire.msrp);
// quantity for add to cart
tire.cartData = {
qty: tire.inventory_level < startingQty ? tire.inventory_level : startingQty,
min: minQty,
max: tire.inventory_level,
subtotal: (tire.inventory_level < startingQty ? tire.inventory_level : startingQty) * tire.price,
saved: (tire.inventory_level < startingQty ? tire.inventory_level : startingQty) * (tire.msrp - tire.price),
increment: function() {
if (this.qty < this.max) {
this.qty = Number(this.qty) + 1;
}
this.calculateSubtotal();
},
decrement: function() {
if (this.qty > this.min) {
this.qty = Number(this.qty) - 1;
}
this.calculateSubtotal();
},
calculateSubtotal: function() {
this.subtotal = this.qty * tire.price;
this.saved = this.qty * (tire.msrp - tire.price);
},
validateInput: function() {
this.qty = Number(this.qty);
if (isNaN(this.qty)) {
this.qty = this.min;
} else if (this.qty < this.min) {
this.qty = this.min;
} else if (this.qty > this.max) {
this.qty = this.max;
}
this.calculateSubtotal();
}
}
//create array of qty options for select dropdown
tire.cartData.qtyOptions = [];
var maxQty = Number(tire.cartData.max)
if(maxQty > 0 && maxQty < 30){
for(var i = 0; i < maxQty; i++){
tire.cartData.qtyOptions.push(i + 1);
}
} else if (maxQty > 30) {
for(var i = 0; i < 30; i++){
tire.cartData.qtyOptions.push(i + 1);
}
}
if (tire.inventory_level < 10) {
tire.cartData.purchaseClasses = 'Must-Purchased-Btn QtyTxtCp';
if (tire.inventory_level == 2) {
tire.cartData.purchaseHTML = 'Must be purchased<br/>as set of 2';
} else if (tire.inventory_level == 4) {
tire.cartData.purchaseHTML = 'Must buy in<br/>increments of 2';
} else if (tire.inventory_level == 1) {
tire.cartData.purchaseHTML = 'Must buy as<br/>a single';
} else {
tire.cartData.purchaseClasses = 'Low-Stock-Btn';
tire.cartData.purchaseHTML = 'Low Stock ' + tire.inventory_level;
}
} else {
tire.cartData.purchaseClasses = 'In-Stock-Btn';
tire.cartData.purchaseHTML = 'In Stock (10+)';
}
// custom warning message for item results display, when Vehicle selection is active
var selection = $scope.currentSelection;
// selection.vehicle.attr: custom attributes defined on Vehicle data object
if (selection && selection.vehicle && selection.vehicle.attr) {
tire.warningMessages = getFitmentWarnings(tire, selection);
// remove any duplicates
result.warningMessages = result.warningMessages.concat(tire.warningMessages);
result.warningMessages = result.warningMessages.filter(function(item, pos, arr) {
return arr.indexOf(item) == pos;
});
}
return tire;
}
this.on('afterBootstrap', function($rootscope) {
$rootscope.toggleDifferSizeClass = function(finder) {
finder.secondarySizeOpen = !finder.secondarySizeOpen;
self.utils.ensure(function() {
return typeof(jQuery) == "function"
}, function() {
jQuery('#tab-Search-Widget-Size').toggleClass('showDifferSize');
});
}
});
// sets for secondary search and result filtering of it
this.on('afterBootstrap', function($rootscope) {
$rootscope.processResults = function($scope) {
if (!$scope.setSearch) {
// doing a normal search
angular.forEach($scope.results, function(result) {
mutateResult(result, $scope);
result.tireDisplays = [mutateTire(result, result, $scope)];
});
} else if (finderSelection && finderSelection.sizes && finderSelection.sizes.length == 2) {
// doing a set search (front + rear)
$scope.sets = $scope.sets || { parsedResults: {} };
$scope.sets.frontSize = finderSelection.sizes[0];
$scope.sets.rearSize = finderSelection.sizes[1];
$scope.sets.displayed = false;
// remove facet
$scope.facets.grab('ss_set_size');
angular.forEach($scope.results, function(result) {
try {
result.url = 'JavaScript:Void(0)';
if (!$scope.sets.parsedResults[result.uid]) {
$scope.sets.parsedResults[result.uid] = JSON.parse(result.ss_items);
}
result.parsedItems = $scope.sets.parsedResults[result.uid];
var front = result.parsedItems.filter(function(item) {
return item.custom_size == $scope.sets.frontSize.value;
}).pop();
var rear = result.parsedItems.filter(function(item) {
return item.custom_size == $scope.sets.rearSize.value;
}).pop();
if (rear && front) {
mutateResult(result, $scope);
front.setSearch = rear.setSearch = $scope.setSearch;
result.tireDisplays = [mutateTire(front, result, $scope), mutateTire(rear, result, $scope)];
} else {
console.error('No Front/Rear match in parsed JSON for product:', result.sku);
}
} catch(err) {
console.error(err, 'Failed to parse JSON on product:', result.sku);
}
});
if ($scope.sets.rearSize && $scope.sets.frontSize) {
$scope.sets.displayed = true;
} else if ($scope.sets.rearSize || $scope.sets.frontSize) {
$scope.pagination.totalResults = 0;
$scope.facets.length = 0;
}
}
}
});
this.on('afterSearch', function($scope) {
if (!$scope.moduleName) {
if (!self.context.category) {
// used for enhanced e-commerce tracking
if ($scope.q) {
$scope.context.dataPage = "Search: " + $scope.q;
} else if ($scope.currentSelection && $scope.currentSelection.name) {
$scope.context.dataPage = "Finder Search: " + $scope.currentSelection.displayName || $scope.currentSelection.name;
}
}
$scope.processResults($scope);
} else if ($scope.moduleName == 'autocomplete2') {
// used for enhanced e-commerce tracking
$scope.context = $scope.context || {};
$scope.context.dataPage = "Autocomplete Search: " + $scope.q;
$scope.$parent.processResults($scope);
}
});
// methods to remove finder selections from filter summary and facets
this.on('afterSearch', function($scope) {
// also push active selections to the top of value array
angular.forEach($scope.facets, function(facet) {
angular.forEach(facet.values, function(value) {
// add 'applyIt' function to all facet values
value.applyIt = value.applyIt || function() {
value.go();
}
});
});
// add 'removeIt' function to all filter summaries
angular.forEach($scope.filterSummary, function(filter) {
filter.removeIt = filter.removeIt || function() {
filter.remove.go();
}
});
// clear both size finder selection and selected facets
$scope.clearAllFilters = function(){
// if current size selected clear size finder
if($scope.currentSelection){
$scope.controls.removeFinderSelection();
}
$scope.location().remove('filter').remove('rq').go();
}
// logic to remove finder selections for current facet values and filter summary entries
if (finderSelection && finderSelection.sizes && finderSelection.sizes.length) {
// check to see if the filter is from the finderSelection
angular.forEach(finderSelection.sizes, function(size) {
// applicable finder facet values
var facet = $scope.facets.get(size.field).pop();
if (facet) {
angular.forEach(facet.values, function(value) {
if (size.value == value.value) {
value.finderValue = true;
value.applyIt = function() {
if (value.active) {
$scope.controls.removeFinderSelection();
} else {
value.go();
}
}
} else {
value.applyIt = value.applyIt || function() {
value.go();
}
}
});
}
// filter summaries
angular.forEach($scope.filterSummary, function(filter) {
if (size.field == filter.field && size.value == filter.value) {
filter.finderFilter = true;
filter.removeIt = function() {
$scope.controls.removeFinderSelection();
}
} else {
filter.removeIt = filter.removeIt || function() {
filter.remove.go();
}
}
});
});
}
});
var searchLocation = '/shop';
var vehicleSearchLocation = '/vehicle-search-multi';
var vehicleSeoLocation = '/vehicles';
// var searchLocation = '//a.cdn.searchspring.net/sites/prioritytire.com/initial/search.html';
// var vehicleSearchLocation = '//a.cdn.searchspring.net/sites/prioritytire.com/initial/search.html';
// var vehicleSeoLocation = '//localhost:1337/sites/prioritytire.com/initial/search.html';
// Add finder
this.importer.include('finder', [
{
identifier: 'size',
searchUrl: searchLocation,
hierarchies: [{
field: 'ss_size',
levels: ['Width', 'Sidewall', 'Diameter']
}],
finderPersist: false
},
{
identifier: 'secondarySize',
searchUrl: searchLocation,
hierarchies: [{
field: 'ss_size',
levels: ['Width', 'Sidewall', 'Diameter']
}],
context: {
siteId: 'smo07c',
backgroundFilters: {}
},
finderPersist: false
},
{
identifier: 'vehicle',
searchUrl: vehicleSearchLocation,
hierarchies: [{
field: 'ss_vehicle',
levels: ['Year', 'Make', 'Model', 'Option']
}],
finderPersist: false,
context: {
siteId: '7shinf'
}
},
]);
// storage of previous finder searches
if (typeof(Storage) != 'undefined') {
var finderStorage = {
current: '',
key: 'ss-finder',
recent: {
limit: 12,
searches: [],
get: function(type, limit) {
if (type && type != 'all' && type != 'selected') {
limit = limit || '3';
return this.searches.filter(function(search) {
return !search.loading;
}).filter(function(search) {
return search.type == type;
}).slice(0, limit);
} else if (type && type == 'selected') {
return this.searches.filter(function(search) {
return search.selected;
}).pop();
} else {
limit = limit || this.limit;
}
return this.searches.slice(0, limit)
}
},
deselect: function() {
this.select();
},
select: function(entry) {
// update recent searches and store a cookie
// deselect all except selected
angular.forEach(this.recent.searches, function(search) {
search.selected = false;
if (entry && entry.name == search.name) {
search.selected = true;
}
});
// save selection
this.save();
// save cookie (for external usage)
if (entry) {
var sizes = entry.sizes.map(function(size) {
return size.value;
});
var cookie = {
name: entry.name,
sizes: sizes,
}
// ben: adding Vechile attributes onto cookie, external usage for Warnings
if (entry.vehicle && entry.vehicle.attr) {
cookie.vehicle_attr = entry.vehicle.attr;
}
SearchSpring.Catalog.utils.cookies.set('ss-finder-selection', JSON.stringify(cookie));
} else {
SearchSpring.Catalog.utils.cookies.unset('ss-finder-selection');
}
},
search: function(entry) {
this.select(entry);
window.location.href = entry.url;
},
save: function() {
var searches = this.recent.searches;
if (searches) {
try {
window.localStorage.setItem(this.key, JSON.stringify(searches));
} catch(err) {
console.error('Error saving to localStorage:', err);
}
}
},
load: function() {
if (window.localStorage[this.key]) {
try {
this.recent.searches = JSON.parse(window.localStorage[this.key]);
} catch(err) {
console.error('Error loading from localStorage:', err);
}
}
},
clear: function(type) {
if (type) {
this.recent.searches = this.recent.searches.filter(function(search) {
return (search.type != type);
});
this.save();
}
},
clearAll: function() {
this.recent.searches = [];
this.save();
},
add: function(entry) {
var recent = this.recent;
entry.timestamp = Date.now();
var duplicates = [];
angular.forEach(recent.searches, function(search, index) {
// deselect others
search.selected = false;
if (entry.name == search.name) {
// preserve the previously stored attr data before splice
if (search.type == 'vehicle' && search.vehicle.attr && entry.vehicle) {
entry.vehicle.attr = search.vehicle.attr;
}
// preserve the imageURL
if (search.imageUrl) {
entry.imageUrl = search.imageUrl;
}
duplicates.push(index);
}
});
for (var i = (duplicates.length - 1); i >= 0 ; i--) {
recent.searches.splice(duplicates[i], 1);
}
recent.searches = [].concat(entry, recent.searches);
if (recent.searches.length > recent.limit) {
recent.searches.pop();
}
this.select(entry);
},
init: function() {
this.load();
}
};
finderStorage.init();
}
// to house the current selection built via params (vehicle or size)
var finderSelection;
// determine currentSelection
function populateFinderSelection() {
var queryParams = SearchSpring.Catalog.utils.parseQueryString();
var vehicleSelection = queryParams['vehicleSelection'] && decodeURIComponent(queryParams['vehicleSelection']).replace(/\+/g, ' ');
// check for SEO page selections
var seoSelection = {
make: queryParams['make'] && decodeURIComponent(queryParams['make']),
model: queryParams['model'] && decodeURIComponent(queryParams['model']),
year: queryParams['year'] && decodeURIComponent(queryParams['year'])
}
if (!vehicleSelection && seoSelection.make && seoSelection.model && seoSelection.year) {
seoSelection.complete = true;
vehicleSelection = seoSelection.year + '>' + seoSelection.make + '>' + seoSelection.model;
}
var sizeAll = queryParams['sizeAll'] && decodeURIComponent(queryParams['sizeAll']);
var sizeFront = queryParams['sizeFront'] && decodeURIComponent(queryParams['sizeFront']);
var sizeRear = queryParams['sizeRear'] && decodeURIComponent(queryParams['sizeRear']);
// apply vehicle / tire parameters as finder selection
if (vehicleSelection || (sizeAll || sizeFront && sizeRear)) {
var findSizes = [];
if (sizeAll) {
findSizes.push(sizeAll);
} else if (sizeFront && sizeRear) {
findSizes.push(sizeFront);
findSizes.push(sizeRear);
}
var options = {
type: vehicleSelection ? 'vehicle' : 'size',
sizes: findSizes,
vehicle: vehicleSelection
}
finderSelection = generateFinderObject(options);
if (!seoSelection.complete) {
finderStorage.add(finderSelection);
}
}
if (!seoSelection.complete) {
finderSelection = finderStorage.recent.get('selected');
}
return finderSelection;
};
populateFinderSelection();
// ****** Finder Search Things ****** //
this.context.queryParams = ['vehicleSelection', 'sizeAll', 'sizeFront', 'sizeRear', 'front', 'rear'];
this.on('afterBootstrap', function($scope) {
// setting the current selection
$scope.currentSelection = finderSelection;
if ($scope.context.category && $scope.context.category.trim().match(/^by size/i)) {
$scope.sizeCategory = $scope.context.name;
}
// apply filters when finders selected
self.on('beforeSearch', function(req, ctx) {
if (ctx.moduleName) {
return;
}
// do not apply filters if on 'by size' category pages
if ($scope.sizeCategory) {
$scope.currentSelection = undefined;
return;
}
$scope.currentSelection = populateFinderSelection();
if (req.q) {
finderStorage.deselect();
$scope.controls.removeFinderSelection();
$scope.currentSelection = undefined;
}
if (finderSelection && (!ctx.moduleName)) {
if (finderSelection.sizes && finderSelection.sizes.length) {
$scope.setSearch = false;
// front rear search uses different account data
if (finderSelection.sizes.length == 2) {
if (!$scope.context.category) {
req.siteId = 'smo07c'; // set tire account
$scope.setSearch = true;
} else {
$scope.currentSelection = undefined;
return;
}
}
angular.forEach(finderSelection.sizes, function(size) {
req['filter.' + size.field] = req['filter.' + size.field] || [];
req['filter.' + size.field].push(size.value);
});
}
}
});
});
/*
Subsearches
*/
// subsearch configuration objects
var vehicleSubSearchOptions;
var sizeSubSearchOptions;
// setting up subsearch for vehicle sizes intermediary search page
if (finderSelection && finderSelection.type == 'vehicle') {
// subsearch used for rear tires
vehicleSubSearchOptions = {
siteId: '7shinf',
identifier: 'vehicleSizes',
backgroundFilters: {},
resultsPerPage: 500,
sort: ''
};
vehicleSubSearchOptions.backgroundFilters[finderSelection.vehicle.field] = finderSelection.vehicle.value;
// if vehicle data is missing and not on vehicle search page do subsearch to get data
// data processing can be found in 'afterSearch' for subsearch
var onVehiclePage = window.location.href.match(vehicleSearchLocation);
var onSearchPage = window.location.href.match(searchLocation);
var onSeoPage = window.location.href.match(vehicleSeoLocation);
if (!onVehiclePage && !onSeoPage && !finderSelection.vehicle.attr) {
if (finderSelection.sizes && finderSelection.sizes.length) {
// run the subsearch with refetch flag and sizes bgfiltering
vehicleSubSearchOptions.refetch = true;
vehicleSubSearchOptions.backgroundFilters['rawsize'] = finderSelection.sizes.map(function(sizeObj) {
return sizeObj.value;
});
self.on('afterBootstrap', function($scope) {
self.promises.module_subsearch.then(function() {
$scope.subsearch[vehicleSubSearchOptions.identifier].search();
});
});
} else {
// no sizes... redirect to vehicle finder page
//var redirectUrl = vehicleSearchLocation + '?' + finderSelection.vehicle.fitment + '=' + encodeURIComponent(finderSelection.vehicle.value);
//window.location.href = redirectUrl;
}
} else if (onSeoPage) {
vehicleSubSearchOptions.seoPage = true;
}
// do meta tag and title swap
if (onSearchPage) {
document.querySelector('title').innerHTML = finderSelection.displayName + ' Tires for Sale at Discount Prices';
var metaDescription = 'Get the highest quality ' + finderSelection.displayName + ' tires at the lowest prices on the web. Free shipping on all orders with 90 Day Money Back Guarantee.';
var metaTag = document.querySelector('meta[name="description"]');
if (!metaTag) {
metaTag = document.createElement('meta');
metaTag.setAttribute('name', 'description');
document.querySelector('head').appendChild(metaTag);
}
if (metaTag) {
metaTag.setAttribute('content', metaDescription);
}
var canonicalURL = window.location.origin + finderSelection.url;
var canonicalTag = document.querySelector('link[rel="canonical"]');
if (!canonicalTag) {
canonicalTag = document.createElement('link');
canonicalTag.setAttribute('rel', 'canonical');
document.querySelector('head').appendChild(canonicalTag);
}
if (canonicalTag) {
canonicalTag.setAttribute('href', canonicalURL);
}
}
//temporary breadcrumbs fix
if(onSearchPage || onVehiclePage){
var breadcrumbContainer = document.querySelector('.breadcrumbs');
var title = onVehiclePage ? 'Vehicle Search' : 'Search Results';
if (finderSelection.vehicle && finderSelection.vehicle.details && finderSelection.vehicle.details.make && finderSelection.vehicle.details.model && finderSelection.vehicle.details.year && finderSelection.vehicle.details.option) {
// check until breadcrumb container exists...
self.utils.ensure(function() {
breadcrumbContainer = document.querySelector('.breadcrumbs');
return breadcrumbContainer;
}, function() {
var newBreadcrumbs = '<li class="breadcrumb " itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="/" class="breadcrumb-label" itemprop="item"><span class="Home" itemprop="name"></span></a></li><li class="breadcrumb " itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><span class="breadcrumb-label" itemprop="item"><span itemprop="name">' + title + '</span></span><meta itemprop="position" content="2"></li>';
breadcrumbContainer.innerHTML = newBreadcrumbs;
});
}
}
// change out breadcrumbs - use this once we have data
if (false) { // removed (onSearchPage || onVehiclePage)
var breadcrumbContainer = document.querySelector('.breadcrumbs');
if (finderSelection.vehicle && finderSelection.vehicle.details && finderSelection.vehicle.details.make && finderSelection.vehicle.details.model && finderSelection.vehicle.details.year && finderSelection.vehicle.details.option) {
// check until breadcrumb container exists...
self.utils.ensure(function() {
breadcrumbContainer = document.querySelector('.breadcrumbs');
return breadcrumbContainer;
}, function() {
var newBreadcrumbs = '<li class="breadcrumb " itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="/" class="breadcrumb-label" itemprop="item"><span class="Home" itemprop="name"></span></a></li><li class="breadcrumb " itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="/vehicles" class="breadcrumb-label" itemprop="item"><span itemprop="name">All Vehicles</span></a><meta itemprop="position" content="2"></li>';
var selectionUrl = '/vehicles?make=' + encodeURIComponent(finderSelection.vehicle.details.make);
newBreadcrumbs += '<li class="breadcrumb " itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="' + selectionUrl + '" class="breadcrumb-label" itemprop="item"><span itemprop="name">' + finderSelection.vehicle.details.make + '</span></a><meta itemprop="position" content="3"></li>';
selectionUrl += '&model=' + encodeURIComponent(finderSelection.vehicle.details.model);
newBreadcrumbs += '<li class="breadcrumb " itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="' + selectionUrl + '" class="breadcrumb-label" itemprop="item"><span itemprop="name">' + finderSelection.vehicle.details.model + '</span></a><meta itemprop="position" content="4"></li>';
selectionUrl += '&year=' + encodeURIComponent(finderSelection.vehicle.details.year);
newBreadcrumbs += '<li class="breadcrumb " itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="' + selectionUrl + '" class="breadcrumb-label" itemprop="item"><span itemprop="name">' + finderSelection.vehicle.details.year + '</span></a><meta itemprop="position" content="5"></li>';
newBreadcrumbs += '<li class="breadcrumb is-active" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><meta itemprop="item" content="' + selectionUrl + '"><span class="breadcrumb-label Last-Link" itemprop="name">' + finderSelection.vehicle.details.option + '</span><meta itemprop="position" content="6"></li>';
breadcrumbContainer.innerHTML = newBreadcrumbs;
});
}
}
}
//2020 CODE
//submit search for vehicle sizes if on a pdp
if(self.context.model && self.context.size){
var optionsTemplate = {
selected: '',
options: []
}
//hold all pdpd variables
var pdpVariables = {
pdpTireSpecs: {
size: self.context.size,
model: self.context.model,
searchUrl: '/by-size/' + self.context.size.split('/').join('-') + '-tires/'
},
ssCompatibility: '',
vehicleCheck: '',
viewAllSizes: '',
tireSizes: angular.copy(optionsTemplate),
}
//subsearch options for tire and vehicles searches
sizeSubSearchOptions = {
siteId: 'h7hdij',
identifier: 'tireSizes',
backgroundFilters: {
'model': pdpVariables.pdpTireSpecs.model
},
resultsPerPage: 500
};
vehicleSubSearchOptions = {
siteId: '7shinf',
identifier: 'vehicleSizes',
backgroundFilters: {},
resultsPerPage: 500,
sort: ''
};
//submit a subsearch for
self.on('afterBootstrap', function($scope) {
//add pdp variables variable to scope
$scope.pdpVariables = pdpVariables;
//submit subsearch for product tires
self.promises.module_subsearch.then(function() {
if($scope.subsearch.tireSizes){
$scope.subsearch.tireSizes.search();
}
})
//get tireSizes from local storage
var localTireSizes;
if(window.localStorage.getItem('tireSizes')){
localTireSizes = window.localStorage.getItem('tireSizes').split(',');
}
//if a selected vehicle exists, check compatibility
if(localTireSizes){
var ssCompatibility = (localTireSizes.indexOf(pdpVariables.pdpTireSpecs.size) != -1) ? 'true' : 'false';
$scope.pdpVariables.ssCompatibility = ssCompatibility;
} else {
$scope.pdpVariables.ssCompatibility = '';
}
//submit a subsearch for vehicle tiresizes
$scope.pdpVariables.pdpFindIt = function() {
selection = $scope.finder.vehicle.facets[0].finder.selection;
vehicleSubSearchOptions.backgroundFilters['ss_vehicle'] = selection;
//submit subsearch for tires based on selected vehicle
self.promises.module_subsearch.then(function() {
$scope.subsearch.vehicleSizes.search();
// Store select in local Storage
// for finder object generation
var options = {
type: 'vehicle',
sizes: [],
vehicle: selection
};
// store the selection locally
if (finderStorage && options) {
var finderObject = generateFinderObject(options);
finderStorage.add(finderObject);
finderObject.loading = true;
// GA TRACKING
if (typeof ga == 'function') {
ga('send', 'event', 'PDP Fit Finder', 'selection', finderObject.name);
}
}
$scope.currentSelection = populateFinderSelection();
})
//create vehicle name
var vehicleCheck = $scope.finder.vehicle.facets[0].finder.selection.split('>').join(' ');
//set vehicle name to scope
$scope.pdpVariables.vehicleCheck = vehicleCheck;
if(!$scope.isMobile){
$scope.controls.productPageFinderOpen = true;
} else if (angular.element(document.querySelector('.mobVehicleWrap.menuWrapMob')) && $scope.isMobile){
$scope.controls.mobileFitOpen = true;
angular.element(document.querySelector('.mobVehicleWrap.menuWrapMob')).css('display', 'none');
}
}
//function for navigating to search page when changing select menu
$scope.pdpVariables.searchTireSize = function(option){
window.location.href = option.url;
}
})
this.on('afterSearch', function($scope){
var filteredTires = angular.copy(optionsTemplate)
var rawsizes = [];
var tireSizeArray = []
//if there is a selected vehicle, subsearch for all tiresizes that fit that vehicle
if($scope.moduleName == 'subsearch' && $scope.suboptions.identifier == 'vehicleSizes' && !$scope.currentSelection){
if($scope.results && $scope.results.length){
$scope.results.forEach(function(size){
if(size.rawsize && size.rawsize.length && typeof size.rawsize == 'array'){
size.rawsize.forEach(function(tire){
if(rawsizes.indexOf(tire) == -1){
rawsizes.push(tire)
}
})
} else if(size.rawsize && rawsizes.indexOf(size.rawsize) == -1){
rawsizes.push(size.rawsize)
}
})
}
//set link to view all tire sizes for selected vehicle
$scope.$parent.pdpVariables.viewAllSizes = '/vehicle-search-multi/?vehicleSelection=' + $scope.suboptions.backgroundFilters['ss_vehicle'];
}
//subsearch for product tiresizes, build tireSize object to power the dropdown
if($scope.moduleName == 'subsearch' && $scope.suboptions.identifier == 'tireSizes'){
if($scope.results && $scope.results.length){
$scope.results.forEach(function(tire){
pdpVariables.tireSizes.options.push({
value: tire.custom_size,
url: tire.custom_url,
size : tire.custom_aspect_ratio,
diam : tire.custom_rim_diameter,
width : tire.custom_section_width
})
})
//filter out duplicates
var filteredOptions = filterDuplicates(pdpVariables.tireSizes.options)
pdpVariables.tireSizes.options = filteredOptions.sort(function(a, b) {
return (b.diam - a.diam) || (b.width - a.width) || (b.size - a.size);
});
//set link to view all tire sizes for selected vehicle
if($scope.$parent.currentSelection) {
$scope.$parent.pdpVariables.viewAllSizes = $scope.$parent.currentSelection.url;
}
}
//add filtered options
$scope.$parent.pdpVariables.tireSizes = pdpVariables.tireSizes;
$scope.$parent.pdpVariables.tireSizes.selected = pdpVariables.tireSizes.options.find(function(option){ return option.value == pdpVariables.pdpTireSpecs.size});
}
//create tire sizes array
if($scope.$parent.pdpVariables && $scope.$parent.pdpVariables.tireSizes && $scope.$parent.pdpVariables.tireSizes.options){
$scope.$parent.pdpVariables.tireSizes.options
.forEach(function(size){
if(tireSizeArray.indexOf(size.value) == -1){
tireSizeArray.push(size.value);
}
})
}
//if there are sizes for product and selected vehicle, set compatibility
if(rawsizes.length && tireSizeArray.length){
//format rawsizes array
var rawArray = rawsizes.join(',').split(',');
//find intersection of avail pdp sizes and vehicle tire sizes
var sizeIntersection = intersection(rawArray, tireSizeArray);
var ssCompatibility = sizeIntersection.length ? 'true' : 'false';
$scope.$parent.pdpVariables.ssCompatibility = ssCompatibility;
//if there are intesecting sizes, filter the dropdown options
if(sizeIntersection.length) {
sizeIntersection.forEach(function(tire){
filteredTires.options.push({
value: tire,
url: '/shop#/filter:custom_size:' + tire + '#/filter:custom_model:' + self.context.model
})
})
//set selected dropdown size option
filteredTires.selected = filteredTires.options[0];
//set dropdown options for be filtered options
$scope.$parent.pdpVariables.tireSizes = filteredTires;
} else {
$scope.$parent.pdpVariables.tireSizes = pdpVariables.tireSizes;
}
}
});
}
//find intersection of two arrays
function intersection(arr1, arr2){
return arr1.filter(function(value) {
return arr2.indexOf(value) !== -1;
});
}
//filter out duplicates from array of objects
function filterDuplicates(){
return pdpVariables.tireSizes.options.reduce(function(filtered, item){
if (!filtered.some(function(obj){ return obj.value === item.value && obj.url === item.url })) {
filtered.push(item);
}
return filtered;
}, []);
}
//handle subsearch configurations
var subsearchConfigs = [];
if (vehicleSubSearchOptions) {
subsearchConfigs.push(vehicleSubSearchOptions);
}
if (sizeSubSearchOptions) {
subsearchConfigs.push(sizeSubSearchOptions);
}
self.importer.include('subsearch', subsearchConfigs);
/*
End Subsearches
*/
//END 2020 CODE
// initialize finders; load cookies and create functions for searching
this.on('afterBootstrap', function($scope) {
$scope.finder = $scope.finder || {};
$scope.finder.controls = {};
// home page finder functionality
$scope.finder.controls = {
desktop: {
vehicle: {
step: ''
},
size: {
step: ''
},
secondarySize: {
step: ''
},
toggleMenu: function(finder, step, type) {
if (this[finder].step == step) {
this.closeMenus();
} else {
// add class to body
if(type == 'mobile'){
//document.querySelector('.Homepage-Hero .Homepage-Hero-right .tabs-contents .Vehicle-MM-Wrap').style.overflow = 'hidden';
//document.querySelector('.Homepage-Hero .Homepage-Hero-right .tabs-contents .Widget-Size-Top').style.overflow = 'hidden';
}
if(type !== 'mobile'){
// angular.element(document.querySelector('body')).addClass('menu_bg_color_x');
}
this[finder].step = step;
}
},
closeMenus: function() {
// remove class from body
angular.element(document.querySelector('body')).removeClass('menu_bg_color_x');
this.vehicle.step = '';
this.size.step = '';
this.secondarySize.step = '';
},
selectValue: function(facet, value) {
facet.finder.select(value);
},
togglePopularSizes: function() {
if (finderStorage.recent.get('size').length) {
angular.element(document.querySelector('.Most-Popular-Sizes-Wrap')).addClass('ng-hide');
} else {
angular.element(document.querySelector('.Most-Popular-Sizes-Wrap')).removeClass('ng-hide');
}
}
},
mobile: {
vehicle: {
step: 'Year'
},
size: {
step: 'Width',
editing: 'primary'
},
changeStep: function(finder, step, editing) {
this[finder].step = step;
if (editing) {
this[finder].editing = editing;
}
},
nextStep: function(finder, facet, step) {
var completedLevel = facet.finder.levels.filter(function(level) {
return level.label == step && level.selected;
}).pop();
// if finder is not completed
if (!completedLevel && facet.finder.currentLevel != facet.finder.levels.length) {
for (var l = facet.finder.levels.length - 1; l >= 0; l--) {
var level = facet.finder.levels[l];
if (!level.disabled) {
step = level.label;
break;
}
}
}
this.changeStep(finder, step);
}
}
}
// connect storage to scope
$scope.finder.storage = finderStorage;
// get the cookie for zipcode
var finderZipcodeCookie = SearchSpring.Catalog.utils.cookies.get('ss-finder-zipcode');
if (finderZipcodeCookie) {
$scope.finder.zipcode = finderZipcodeCookie;
} else {
$scope.finder.zipcode = '';
}
$scope.finder.validZipcode = function() {
if ($scope.finder.zipcode.match(/^\d{5}$/)) {
return $scope.finder.zipcode;
} else {
return false;
}
}
});
// place 'loaded' class onto homepage finder for targeting
self.on('afterFinderSearch', function($scope) {
if ($scope.options.identifier == 'vehicle') {
angular.element(document.querySelector('#searchspring-home-vehicle-finder')).addClass('ss-loaded');
return self.on.UNBIND;
}
});
// filter and or sort the finder data
self.on('afterFinderSearch', function($scope) {
var identifier = $scope.options.identifier;
var controls = $scope.$parent.finder.controls;
if (identifier == 'vehicle') {
angular.forEach($scope.facets, function(facet) {
if (facet.field == 'ss_vehicle') {
angular.forEach(facet.finder.levels, function(level) {
// remove heading
// level.values = level.values.filter(function(value) {
// return value.type != 'heading';
// });
var numberOfColumns = {};
// sort the vehicle finder years descending
if (level.label == 'Year') {
level.values.sort(function(a, b) {
return b.label - a.label;
});
// set number of columns
numberOfColumns.desktopNav = 10;
numberOfColumns.desktopHome = 10;
numberOfColumns.desktopModal = 5;
numberOfColumns.mobile = 3;
// set mobile position
if (level.selected) {
controls.desktop.vehicle.step = controls.mobile.vehicle.step = 'Make';
}
}
if (level.label == 'Make') {
// set number of columns
numberOfColumns.desktopNav = 10;
numberOfColumns.desktopHome = 10;
numberOfColumns.desktopModal = 5;
numberOfColumns.mobile = 2;
// set mobile position
if (level.selected) {
controls.desktop.vehicle.step = controls.mobile.vehicle.step = 'Model';
}
}
if (level.label == 'Model') {
// set number of columns
numberOfColumns.desktopNav = 10;
numberOfColumns.desktopHome = 10;
numberOfColumns.desktopModal = 5;
numberOfColumns.mobile = 2;
// set mobile position
if (level.selected) {
controls.desktop.vehicle.step = controls.mobile.vehicle.step = 'Option';
}
}
if (level.label == 'Option') {
// set number of columns
numberOfColumns.desktopNav = 10;
numberOfColumns.desktopHome = 10;
numberOfColumns.desktopModal = 5;
numberOfColumns.mobile = 1;
// set mobile position
if (level.selected) {
if ($scope.$parent.finder.zipcode) {
controls.desktop.closeMenus();
controls.desktop.vehicle.step = '';
controls.mobile.vehicle.step = 'Review';
} else if($scope.$parent.controls.mobileFitOpen) {
controls.desktop.vehicle.step = controls.mobile.vehicle.step = 'Review';
} else {
controls.desktop.vehicle.step = controls.mobile.vehicle.step = 'Zipcode';
}
}
}
addColumnsFunctionality(level, numberOfColumns);
});
}
});
}
if (identifier == 'size' || identifier == 'secondarySize') {
angular.forEach($scope.facets, function(facet) {
if (facet.field == 'ss_size') {
angular.forEach(facet.finder.levels, function(level) {
// remove heading
// level.values = level.values.filter(function(value) {
// return value.type != 'heading';
// });
// sort the sizes as requested
if (level.label == 'Width') {
// ordering:
// values from 100+
// metric values (values with an 'X')
// values under 100
var standard = level.values.filter(function(value) {
return isNumeric(value.value);
});
var overHundred = standard.filter(function(value) {
return (value.value * 1) >= 100;
}).sort(function(a, b) {
return a.label - b.label;
});
var underHundred = standard.filter(function(value) {
return (value.value * 1) < 100;
}).sort(function(a, b) {
return a.label - b.label;
});
var metric = level.values.filter(function(value) {
return value.value.match(/x/i);
}).sort(function(a, b) {
return a.label - b.label;
});
level.values = overHundred.concat(metric, underHundred);
// set mobile position
if (level.selected) {
controls.desktop[identifier].step = controls.mobile.size.step = 'Sidewall';
}
}
if (level.label == 'Sidewall') {
// set mobile position
if (level.selected) {
controls.desktop[identifier].step = controls.mobile.size.step = 'Diameter';
}
}
if (level.label == 'Diameter') {
// set mobile position
if (level.selected) {
if ($scope.$parent.finder.zipcode) {
controls.desktop[identifier].step = '';
controls.mobile.size.step = 'Review';
controls.desktop.closeMenus();
} else {
controls.desktop[identifier].step = controls.mobile.size.step = 'Zipcode';
}
}
}
addColumnsFunctionality(level);
});
// get filter value from final value in facet
if (facet.finder.currentLevel == 3 && facet.values.length) {
facet.finder.selectedSize = facet.values[0].label;
} else {
facet.finder.selectedSize = undefined;
}
}
});
if (identifier == 'size') {
angular.forEach($scope.facets, function(facet) {
if (facet.field == 'ss_size') {
// set bgfilter on secondarySize finder when needed
if (facet.finder.selectedSize) {
$scope.$parent.finder.secondarySize.context.backgroundFilters['ss_set_size'] = facet.finder.selectedSize
if ($scope.previousSelection && $scope.previousSelection != facet.finder.selection && $scope.$parent.finder.secondarySizeOpen) {
$scope.$parent.finder.secondarySize.reset();
}
$scope.previousSelection = facet.finder.selection
} else {
$scope.$parent.finder.secondarySizeOpen = false;
if ($scope.$parent.finder.secondarySize.results) {
$scope.$parent.finder.secondarySize.reset();
}
}
}
});
}
}
// modify hierarchy finder data
if ($scope.options.hierarchies && $scope.options.hierarchies.length) {
angular.forEach($scope.facets, function(facet) {
if (facet.type == 'hierarchy') {
angular.forEach(facet.finder.levels, function(level, index) {
// remove 'hide-this' values (to prevent auto drilldown)
level.values = level.values.filter(function(value) {
return (value.label != 'hide-this');
});
// create selection for display
if (level.selected && level.selection) {
level.selectionDisplay = level.selection.split(facet.hierarchyDelimiter)[index];
}
});
facet.values = facet.values.filter(function(value) {
return (value.label != 'hide-this');
});
}
});
}
});
// additional finder functionality
this.on('afterFinderSearch', function($scope) {
// which finder search is it (vehicle or size)
var identifier = $scope.options.identifier;
// add the finder selection to storage
$scope.findIt = function() {
// if zip code entered update the cookie
if ($scope.$parent.finder.zipcode != '') {
SearchSpring.Catalog.utils.cookies.set('ss-finder-zipcode', $scope.$parent.finder.zipcode);
}
if ($scope.location.path.length) {
var selection;
// for finder object generation
var options = {
type: identifier,
sizes: []
};
if (identifier == 'vehicle') {
selection = $scope.facets[0].finder.selection;
options.vehicle = selection;
} else if (identifier == 'size') {
selection = $scope.facets[0].finder.selectedSize;
options.sizes.push(selection);
// check if secondary (rear) size is selected
if ($scope.$parent.finder.secondarySizeOpen &&
$scope.$parent.finder.secondarySize.facets &&
$scope.$parent.finder.secondarySize.facets.length &&
($scope.$parent.finder.secondarySize.facets[0].finder.selectedSize != selection)) {
// secondary size selected (and it differs from primary)
var secondarySelection = $scope.$parent.finder.secondarySize.facets[0].finder.selectedSize;
options.sizes.push(secondarySelection);
}
}
// store the selection locally
if (finderStorage && options) {
var finderObject = generateFinderObject(options);
finderStorage.add(finderObject);
finderObject.loading = true;
// GA TRACKING
if (typeof ga == 'function') {
ga('send', 'event', identifier + 'Finder', 'selection', finderObject.name);
}
// redirect to search page
if (finderObject && finderObject.url) {
window.location.href = finderObject.url;
}
}
}
}
// logic to decide when to enable the 'search' button on size finder
if (identifier == 'size') {
$scope.checkEnable = function() {
if ($scope.$parent.finder.secondarySizeOpen && $scope.facets && $scope.facets.length && $scope.facets[0].finder.currentLevel == 3) {
if ($scope.$parent.finder.secondarySize.facets && $scope.$parent.finder.secondarySize.facets.length && $scope.$parent.finder.secondarySize.facets[0].finder.currentLevel == 3) {
return true;
}
} else if ($scope.facets && $scope.facets.length && $scope.facets[0].finder.currentLevel == 3) {
return true;
}
return false;
}
}
});
function generateFinderObject(options) {
/*
options = {
type, ('size' or 'vehicle')
sizes, (array of sizes, eg: ['265/35R20', '295/30R20'], [255~45~19])
vehicle, (eg: '2015>Nissan>Leaf>S')
vehicleAttr,
imageUrl
}
*/
var finderObject = {
type: options.type,
name: '',
url: '',
sizes: [],
imageUrl: options.imageUrl
};
if (options.type == 'vehicle' && options.vehicle) {
var split = options.vehicle.split('>');
finderObject.name = split.join(' ');
finderObject.vehicle = {
field: 'ss_vehicle',
value: options.vehicle,
fitment: 'vehicleSelection'
};
// ben: custom Vehicle attributes, later used for Warning messages
if (options.vehicleAttr) {
finderObject.vehicle.attr = options.vehicleAttr;
}
if (split.length == 4) {
finderObject.vehicle.details = {
year: split[0],
make: split[1],
model: split[2],
option: split[3]
};
}
if (!options.sizes || !options.sizes.length) {
finderObject.url = vehicleSearchLocation + '?' + finderObject.vehicle.fitment + '=' + encodeURIComponent(finderObject.vehicle.value);
} else {
finderObject.url = searchLocation + '?' + finderObject.vehicle.fitment + '=' + encodeURIComponent(finderObject.vehicle.value);
}
var queryParams = SearchSpring.Catalog.utils.parseQueryString();
var frontOnly = Object.keys(queryParams).indexOf('front') != -1;
var rearOnly = Object.keys(queryParams).indexOf('rear') != -1;
var wheelSize;
var wheelDisplay = '';
if (options.sizes && options.sizes.length) {
wheelSize = options.sizes[0].replace(/\d*\/\d*r(\d*)/i, '$1');
if (wheelSize) {
wheelDisplay = wheelSize + '"';
}
}
if (options.sizes && options.sizes.length > 1) {
var rearWheelSize = options.sizes[1].replace(/\d*\/\d*r(\d*)/i, '$1');
if (wheelDisplay && rearWheelSize && wheelSize && rearWheelSize != wheelSize) {
wheelDisplay += ' Front & ';
wheelDisplay += rearWheelSize + '" Rear';
} else if (wheelDisplay && rearWheelSize && wheelSize && rearWheelSize == wheelSize) {
wheelDisplay += ' Front & Rear';
}
} else if (frontOnly) {
wheelDisplay += ' Front'
} else if (rearOnly) {
wheelDisplay += ' Rear'
}
finderObject.displayName = finderObject.name + ' ' + wheelDisplay;
} else if (options.type == 'size') {
finderObject.url = searchLocation;
finderObject.imageUrl = variables.images.size;
}
if (options.sizes && options.sizes.length) {
var sizeField = 'custom_size';
if (options.sizes.length == 2) {
sizeField = 'ss_set_size';
}
angular.forEach(options.sizes, function(size, index) {
// add size objects as needed
var sizeObject = {
field: sizeField,
value: size,
name: size
};
if (options.sizes.length == 1) {
sizeObject.fitment = 'sizeAll'
} else if (options.sizes.length == 2) {
if (index == 0) {
sizeObject.fitment = 'sizeFront'
} else {
sizeObject.fitment = 'sizeRear'
}
}
finderObject.sizes.push(sizeObject);
// add name to finder object
if (!options.vehicle) {
finderObject.name += size;
if (index != (options.sizes.length - 1)) {
finderObject.name += ' + ';
}
}
// add size params to URL
if (index == 0 && !options.vehicle) {
finderObject.url += '?';
} else {
finderObject.url += '&';
}
finderObject.url += sizeObject.fitment + '=';
finderObject.url += encodeURIComponent(sizeObject.value);
});
}
return finderObject;
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function addColumnsFunctionality(level, numberOfColumns) {
var defaultNumberOfColumns = {
mobile: 3,
desktop: 10,
desktopNav: 10,
desktopHome: 10,
desktopModal: 5
};
level.numberOfColumns = angular.extend(defaultNumberOfColumns, numberOfColumns);
// create stored rows
level.storedColumns = {};
// break up level values into two groups
// then push each index value from a group into a new array
level.columns = function(columns, filter, index) {
var finderColumns = columns;
if(finderColumns == 10){
if(index == 0){
finderColumns = 10;
} else {
finderColumns = 5;
}
}
var filteredValues = level.values;
if (filter) {
filter = filter.replace(/[^A-Za-z0-9\s]/g, '');
var regexp = new RegExp(filter, 'ig');
filteredValues = filteredValues.filter (function(value) {
return value.label.match(regexp);
});
} else {
filter = 'nofilter';
}
// Check if values has a heading because we don't want to show it
var hasHeading = false;
for(var j = 0; j < filteredValues.length; j++) {
if(filteredValues[j].type == 'heading') {
hasHeading = true;
break;
}
}
var limit = filteredValues.length;
var per = Math.ceil(limit / finderColumns);
if (!level.storedColumns[filter]) {
level.storedColumns[filter] = {};
}
var offset = hasHeading ? 1 : 0;
var stored = level.storedColumns[filter];
if (!stored[per]) {
stored[per] = [];
for (var i = 0; i < limit; i++) {
var option = filteredValues[i];
// Skip heading
if(option.type == 'heading') {
continue;
}
var row = Math.floor((i - offset) / per);
if ('undefined' == typeof stored[per][row]) {
stored[per][row] = [];
}
stored[per][row].push(option);
}
}
return stored[per];
};
}
// // beforeSearch for subsearch
// this.on('beforeSearch', function(req, config) {
// if (config.moduleName == 'subsearch') {
// req['sort.smartsubmodeldescription'] = 'asc';
// }
// });
// //remove plus size products from vehicle search
// this.on('beforeSearch', function(req, config) {
// if(req.siteId == "7shinf") {
// req['bgfilter.plussize'] = 0;
// }
// });
// afterSearch for subsearch
// filter vehicle tire size results to only show unique items (by item name) - sort by all/front/rear
this.on('afterSearch', function($scope) {
if ($scope.moduleName == 'subsearch' && $scope.suboptions.identifier == 'vehicleSizes' && finderSelection) {
var sizes = [];
var tireSizes = [];
var wheelObjects = {};
// generate options if they do not yet exist and mark selected one as active
$scope.selectionOptions = $scope.selectionOptions || $scope.facets.get('ss_vehicle').pop();
if ($scope.selectionOptions) {
for (var i = $scope.selectionOptions.values.length - 1; i >= 0; i--) {
var option = $scope.selectionOptions.values[i];
if (option.label == 'hide-this') {
// remove the 'hide-this' options
$scope.selectionOptions.values.splice(i, 1);
} else {
// mutate the usable options to alter subsearch
option.select = function() {
if (this.active) {
$scope.suboptions.backgroundFilters[finderSelection.vehicle.field] = finderSelection.vehicle.value;
} else {
$scope.suboptions.backgroundFilters[finderSelection.vehicle.field] = this.value;
}
$scope.currentOptionSelection = $scope.suboptions.backgroundFilters[finderSelection.vehicle.field];
$scope.search();
}
if ($scope.suboptions.backgroundFilters[finderSelection.vehicle.field] == option.value) {
option.active = true;
} else {
option.active = false;
}
}
}
}
angular.forEach($scope.results, function(result) {
if (result.imageUrl) {
$scope.vehicleImageUrl = result.imageUrl;
if (finderSelection) {
finderSelection.imageUrl = $scope.vehicleImageUrl;
}
}
var sizeReference = "";
if (result.ss_name) {
sizeReference = result.ss_name.join(' + ');
}
// add wheel entry to wheelObjects (as needed)
var wheelSize = {
size: result.size_part_3 ? result.size_part_3[0] : 0,
width : 0,
aspect : 0,
diam : 0
};
if(result.rawsize && result.rawsize[0]) {
var match = result.rawsize[0].match(/(\d+)\/(\d+)[A-Z](\d+)/);
if(match) {
wheelSize.width = parseInt(match[1]);
wheelSize.aspect = parseInt(match[2]);
wheelSize.diam = parseInt(match[3]);
}
}
var wheelOption = {
options: {
type: 'vehicle',
vehicle: finderSelection.vehicle.value,
vehicleAttr: {
'pmetric': result.pmetric,
'speedindex': result.speedindex,
'loadrange': result.loadrange
},
sizes: result.rawsize,
imageUrl: result.imageUrl || variables.images.fallbackVehicle
},
url: '',
select: function() {
var finderObject = generateFinderObject(this.options);
finderStorage.add(finderObject);
},
go: function() {
this.select();
// redirect to search page
window.location.href = this.url;
}
}
// add sizes to tireSizes array
tireSizes = tireSizes.concat(result.rawsize);
// modify wheelOption further
if (result.smartsubmodeldescription && wheelOption.options.vehicle.split('>').length == 3) {
wheelOption.options.vehicle += '>' + result.smartsubmodeldescription;
}
var allFinderObject = generateFinderObject(wheelOption.options);
wheelOption.url = allFinderObject.url;
wheelSize.all = angular.copy(wheelOption);
wheelSize.all.rawsize = wheelSize.all.options.sizes ? wheelSize.all.options.sizes[0] : 0;
// front and rear
if (result.rawsize && result.rawsize.length == 2) {
wheelSize.front = angular.copy(wheelOption);
wheelSize.front.options.sizes.pop();
wheelSize.front.rawsize = wheelSize.front.options.sizes[0];
var frontFinderObject = generateFinderObject(wheelSize.front.options);
wheelSize.front.url = frontFinderObject.url + '&front';
wheelSize.rear = angular.copy(wheelOption);
wheelSize.rear.options.sizes.shift();
wheelSize.rear.rawsize = wheelSize.rear.options.sizes[0];
var rearFinderObject = generateFinderObject(wheelSize.rear.options);
wheelSize.rear.url = rearFinderObject.url + '&rear';
}
result.wheelSize = wheelSize;
if (wheelOption.options.vehicle == $scope.currentOptionSelection) {
result.selectionMatch = true;
}
if (sizes.indexOf(sizeReference) == -1) {
wheelObjects[sizeReference] = wheelObjects[sizeReference] || wheelSize;
sizes.push(sizeReference);
}
});
// place wheelObjects into array for sorting
$scope.wheelSizes = [];
angular.forEach(wheelObjects, function(wheelObject) {
$scope.wheelSizes.push(wheelObject)
});
// sort wheel sizes descending
$scope.wheelSizes.sort(function(a, b) {
return (b.size - a.size) || (b.diam - a.diam) || (b.width - a.width);
});
//2020 CODE
//build tiresize array for local storage
var rawsizes = [];
if($scope.wheelSizes && $scope.wheelSizes.length){
$scope.wheelSizes.forEach(function(size){
if(size.front && rawsizes.indexOf(size.front.rawsize) == -1) {
rawsizes.push(size.front.rawsize);
}
if(size.rear && rawsizes.indexOf(size.rear.rawsize) == -1) {
rawsizes.push(size.rear.rawsize);
}
if(size.all && !size.front && !size.rear && rawsizes.indexOf(size.all.rawsize) == -1) {
rawsizes.push(size.all.rawsize);
}
})
}
//set tire size array to local storage
window.localStorage.setItem('tireSizes', rawsizes);
//END 2020 CODE
// Save finderSelection with new image details...
if (!$scope.suboptions.refetch && !$scope.suboptions.seoPage && finderSelection && finderSelection.imageUrl && finderSelection.vehicle && finderSelection.vehicle.value) {
var vehicleOptions = {
type: 'vehicle',
vehicle: finderSelection.vehicle.value,
sizes: finderSelection.sizes,
imageUrl: finderSelection.imageUrl
}
var updatedFinderObject = generateFinderObject(vehicleOptions);
finderStorage.add(updatedFinderObject);
}
// refetching vehicle specifics for use on direct URLs that bypass the vehicle finder page
if ($scope.suboptions.refetch && finderSelection && finderSelection.sizes) {
var selectionSizes = finderSelection.sizes.map(function(sizeObj) {
return sizeObj.value;
});
var vehicleOptions;
// find matching size selections...
angular.forEach($scope.wheelSizes, function(wheelSizing) {
angular.forEach(wheelSizing, function(sizing) {
if (sizing.options && angular.equals(sizing.options.sizes, selectionSizes)) {
vehicleOptions = sizing.options;
}
});
});
if (vehicleOptions) {
finderSelection = $scope.$parent.currentSelection = generateFinderObject(vehicleOptions);
// save selection with updates
finderStorage.add(finderSelection);
if ($scope.$parent.results && $scope.$parent.processResults) {
$scope.$parent.processResults($scope);
}
} else {
// cannot determine proper sizing...
// redirect to vehicle selection page
//var redirectUrl = vehicleSearchLocation + '?' + finderSelection.vehicle.fitment + '=' + encodeURIComponent(finderSelection.vehicle.value);
//window.location.href = redirectUrl;
}
}
// if on seoPage attach tireSizes to bgfilter and inject searchpage element onto page
if ($scope.suboptions.seoPage) {
// get distinct tire sizes
tireSizes = tireSizes.filter(function(item, i, array) {
return array.indexOf(item) === i;
});
self.context.backgroundFilters['custom_size'] = tireSizes;
var searchResultsContainer = document.getElementById('searchspring-searchpage');
var vehicleResultsContainer = document.getElementById('searchspring-vehicle-results');
if (vehicleResultsContainer && !searchResultsContainer) {
angular.element(vehicleResultsContainer).after('<div id="searchspring-searchpage" class="page CatPage"></div>');
angular.element(document.querySelector('body')).addClass('custom_category');
} else if (vehicleResultsContainer && searchResultsContainer) {
$scope.$parent._update();
}
}
$scope.$evalAsync();
}
});
// special event for page loads...
this.on('afterSearch', function($scope) {
if ($scope.moduleName == 'autocomplete' || $scope.moduleName == 'autocomplete2') {
return;
}
self.on('domReady', function() {
SearchSpring.Catalog.fire('tiresInflated');
return self.on.UNBIND;
});
});
function getFitmentWarnings (result, selection) {
if (!selection) {
selection = finderSelection;
}
if (result && selection && selection.vehicle && selection.vehicle.attr) {
var message;
var warnings = [];
message = warningLTvsP(result, selection);
if (message) { warnings.push(message); }
// not using speed rating warning until more granular approach is found
// message = warningSpeedRating(result, selection);
// if (message) { warnings.push(message); }
message = warningLoadRange(result, selection);
if (message) { warnings.push(message); }
return warnings;
}
}
// make function globally available to use on product pages
window.ssCheckFitment = getFitmentWarnings;
// Warning: LT vs P, if a vehicle requires an LT tire recommended by vehicle manufacturer, but the customer selects P rated one
function warningLTvsP (result, selection) {
var pmetric = selection.vehicle.attr.pmetric;
var resultType = result.custom_fitment_type;
// If Fitment Type=ST, never show warning since Car-Fitment doesn’t have this value
if (!pmetric || !resultType || resultType == "st") { return; }
resultType = resultType.toLowerCase();
pmetric = pmetric.toLowerCase();
if (resultType == "p" && pmetric == "lt") {
// GA TRACKING
if (typeof ga == 'function') {
ga('send', 'event', 'WarningMsg', 'Display', 'Fitment Type');
}
return "YOUR " + selection.name.toUpperCase() + " REQUIRES LT TIRES. THIS IS A PASSENGER TIRE.";
} else if (resultType == "lt" && pmetric == "p") {
// GA TRACKING
if (typeof ga == 'function') {
ga('send', 'event', 'WarningMsg', 'Display', 'Fitment Type');
}
return "YOUR " + selection.name.toUpperCase() + " REQUIRES PASSENGER TIRES. THIS IS A LT TIRE.";
}
}
// Warning: Speed Rating, if less is selected than what is recommended by vehicle manufacturer
function warningSpeedRating (result, selection) {
var srating = selection.vehicle.attr.speedindex;
if (!srating || !result.custom_speed_rating) { return; }
// all possible Speed Ratings, sorted High to Low
var all_ratings = ['z', 'y', 'w', 'v', 'h', 'u', 't', 's', 'r', 'q', 'p', 'n', 'm', 'l', 'k', 'j', 'g', 'f', 'e', 'd', 'c', 'b', 'a8', 'a7', 'a6', 'a5', 'a4', 'a3', 'a2', 'a1'];
var tire_idx = all_ratings.indexOf(result.custom_speed_rating.toLowerCase());
var vehicle_idx = all_ratings.indexOf(srating.toLowerCase());
if (tire_idx >= 0 && vehicle_idx >= 0 && tire_idx > vehicle_idx) {
// GA TRACKING
if (typeof ga == 'function') {
ga('send', 'event', 'WarningMsg', 'Display', 'Speed Rating');
}
return "LOWER SPEED RATING THAN SPECIFIED FOR YOUR " + selection.name + ".";
}
}
// Warning: Load Range, if less is selected than what is recommended by vehicle manufacturer
function warningLoadRange (result, selection) {
var lrange = selection.vehicle.attr.loadrange;
if (!lrange || !result.custom_load_range) { return; }
// all possible Load Ranges, sorted High to Low
// arrays contain synonyms
var all_loads = [
['42 ply'], ['40 ply'], ['36 ply'], ['32 ply'], ['28 ply'], ['26 ply'], ['n (24 ply)', 'n', '24 ply'], ['m (22 ply)', 'm', '22 ply'], ['l (20 ply)', 'l', '20 ply'], ['j (18 ply)', 'j', '18 ply'], ['h (16 ply)', 'h', '16 ply'], ['g (14 ply)', 'g', '14 ply'], ['f (12 ply)', 'f', '12 ply'], ['e (10 ply)', 'e', '10 ply'], ['d (8 ply)', 'd', '8 ply'], ['c (6 ply}', 'c', '6 ply'], ['b (4 ply)', 'b', '4 ply'], ['a (2 ply)', 'a', '2 ply'], ['xl'], ['sl'], ['3-star'], ['2-star'], ['1-star'], ['n/a']
]
function findLoad (load, loadranges) {
for (var i = 0; i < loadranges.length; i++) {
if (loadranges[i].indexOf(load) != -1) {
return i;
}
}
return -1;
}
var tire_idx = findLoad(result.custom_load_range.toLowerCase(), all_loads);
var vehicle_idx = findLoad(lrange.toLowerCase(), all_loads);
if (tire_idx >= 0 && vehicle_idx >= 0 && tire_idx > vehicle_idx) {
// GA TRACKING
if (typeof ga == 'function') {
ga('send', 'event', 'WarningMsg', 'Display', 'Load Range');
}
return "LOWER LOAD RANGE THAN SPECIFIED FOR YOUR " + selection.name + ".";
}
}
// calculate percent saved
function generatePercentSaved(price, msrp){
var percent = (1 - (price / msrp)) * 100;
var roundedPercent = Math.ceil(Number(percent));
return roundedPercent + '%';
}
this.importer.include('facet-slider');
this.on('afterSearch', function($scope) {
if ($scope.facets && $scope.facets.length) {
// Remove slider if ranges are the same
for (var i = $scope.facets.length - 1; i >= 0; i--) {
if ($scope.facets[i].type == 'slider' && $scope.facets[i].range[0] == $scope.facets[i].range[1]) {
$scope.facets.splice(i, 1);
}
}
// Update slider layout
$scope.facets.updateSlider = function(type) {
if (type == 'slider') {
setTimeout(function() {
$scope.$broadcast('rzSliderForceRender');
});
}
}
}
});
this.on('afterSearch', function($scope) {
angular.forEach($scope.facets, function(facet) {
// Create different limits for different facet types
// For palette and grid types, this makes sure boxes fill the last row
var facetType = (facet.type == 'palette' || facet.type == 'grid') ? true : false;
facet.limitCount = facetType ? 15 : 10;
// if(facet.field == 'calculated_price'){
// facet.type = 'slider';
// }
// for rating facet add special properties
if (facet.field == 'reviews_product_score') {
facet.type = 'ratingStars';
angular.forEach(facet.values, function(value) {
// grab number of stars from value label
var stars = value.label.substring(0, 1);
value.label = '';
if (stars != 5) {
value.label = "& up";
}
value.ratingStars = [];
for(var s = 1; s <= 5; s++) {
if (stars >= s) {
value.ratingStars.push('Full');
} else {
value.ratingStars.push('Empty');
}
}
});
}
});
});
// lazyload variables
var ssLazyload = {
loadingImage : '//cdn11.bigcommerce.com/s-jmg6p55oqf/stencil/0e4e4730-d653-0138-3151-0242ac110007/e/e0872f50-f148-0138-23ff-0242ac110011/img/loading.svg',
lazyAttr : 'data-src'
}
// directive for lazyloading
angular.module('SearchSpringCatalog').directive('ssLazySrc', function () {
return {
replace: true,
scope: {
'ssLazySrc': '='
},
link: function (scope, elem) {
elem.attr(ssLazyload.lazyAttr, scope.ssLazySrc);
scope.$watch('ssLazySrc', function (newVal, oldVal) {
if (newVal != oldVal) {
elem.attr('src', ssLazyload.loadingImage);
elem.removeClass('lazyloaded');
elem.removeAttr(ssLazyload.lazyAttr);
setTimeout(function() {
elem.attr(ssLazyload.lazyAttr, newVal);
elem.addClass('lazyload');
});
}
});
}
};
});
this.on('afterBootstrap', function($scope) {
//set lazyload variable to scope
$scope.ssLazyload = ssLazyload;
//function for opening mobile finder
$scope.openMobilePdpFinder = function(){
if(!$scope.isMobile){
$scope.controls.productPageFinderOpen = true;
} else if (angular.element(document.querySelector('.mobVehicleWrap.menuWrapMob')) && $scope.isMobile){
$scope.controls.mobileFitOpen = true;
angular.element(document.querySelector('.mobVehicleWrap.menuWrapMob')).css('display', 'block');
if(angular.element(document.querySelector('.mobVehicleWrap .closeMenu'))) {
angular.element(document.querySelector('.mobVehicleWrap .closeMenu')).on('click', function() {
$scope.controls.mobileFitOpen = false;
angular.element(document.querySelector('.mobVehicleWrap.menuWrapMob')).css('display', 'none');
});
}
}
}
// Set initial isMobile
$scope.isMobile = isMobile(767);
// Check if breakpoint has been reached
angular.element(window).bind('resize', function() {
$scope.$apply(function() {
$scope.isMobile = isMobile(767);
});
});
});
//add class for styles
this.on('domReady', function() {
if(document.body.classList.contains('.ss-shop') && document.querySelector('main.page')){
document.querySelector('main.page').classList.add('CatPage');
}
})
// check if on mobile
function isMobile(bp) {
var widthCalc = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
return widthCalc <= bp;
}
var prices = {};
this.on('afterSearch', function($scope) {
if(!self.context.vehicleSearch){
updatePricing($scope);
}
});
var fetchGraphql = function (ids, $scope, limit) {
var page = limit || 50;
fetch('/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + self.context.token
},
body: JSON.stringify({
query: 'query ProductPricesByID {' + 'site {' + 'products(entityIds: [' + ids + '], first: ' + page + '){' + 'pageInfo {' + 'startCursor ' + 'endCursor ' + '}' + 'edges {' + 'node {' + 'entityId ' + 'name ' + 'prices(currencyCode:USD, includeTax: true) {' + 'price {' + 'currencyCode ' + 'value ' + '}' + 'retailPrice {' + 'currencyCode ' + 'value ' + '}' + 'basePrice {' + 'currencyCode ' + 'value ' + '}' + '}' + '}' + '}' + '}' + '}' + '}'
}),
}).then(function (res) { return res.json() })
.then(function (json) {
var obj = json.data.site.products.edges;
var priceObj = {};
var entityId;
var uid;
for (var i = 0; i < obj.length; i++) {
entityId = obj[i].node.entityId;
priceObj[entityId] = obj[i].node.prices;
}
angular.forEach($scope.results, function (result) {
uid = result.uid;
if (priceObj[uid]) {
if (priceObj[uid].price && priceObj[uid].price.value) {
result.price = priceObj[uid].price.value;
}
if (priceObj[uid].retailPrice && priceObj[uid].retailPrice.value) {
result.msrp = priceObj[uid].retailPrice.value;
}
if (priceObj[uid].basePrice && priceObj[uid].basePrice.value) {
result.regular_price = priceObj[uid].basePrice.value;
}
}
});
if ($scope.$parent.processResults) {
$scope.$parent.processResults($scope);
}
if ($scope.processResults) {
$scope.processResults($scope);
}
$scope.$apply()
});
};
var updatePricing = function($scope) {
var entityIds = [];
var eId = '';
var recsPage = {
"begin": 0,
"end": $scope.results.length,
"perPage": 10,
"currentPage": 1,
"totalPages": 1
}
var page = $scope.pagination || recsPage;
var lastResult = (page.end - page.begin) + 1;
angular.forEach($scope.results, function(result, $index) {
// we can apparently only fetch 10 products in one go. I think there's probably a way to get more by updating the graphql query, but this is what their devs told us we needed to do.
eId = parseInt(result.uid);
entityIds.push(eId);
var currentIndex = $index + 1;
var graphQLLimit = 50;
// fetch the current page of results for the main results
if (((currentIndex % graphQLLimit === 0 || page.perPage === 1 || currentIndex == graphQLLimit) && currentIndex <= page.end) && !$scope.recommendations && !$scope.moduleName) {
// console.log("requesting! ", currentIndex)
fetchGraphql(entityIds, $scope);
entityIds = [];
}
// fetch recommendations
if ($scope.recommendations && $scope.results.length > 0 && currentIndex == $scope.results.length) {
// console.log("requesting all recs! ", currentIndex)
fetchGraphql(entityIds, $scope, $scope.results.length);
}
// fetch AC
if ($scope.moduleName && $scope.results.length > 0 && currentIndex == $scope.results.length) {
// console.log("requesting all AC Recs! ", currentIndex)
fetchGraphql(entityIds, $scope, $scope.results.length);
}
// make the last request for the main results
if (currentIndex == lastResult && !$scope.moduleName) {
// if (currentIndex - 1 * page.currentPage == page.end && currentIndex % 10 != 0) {
// console.log('last!')
fetchGraphql(entityIds, $scope);
}
});
}
// try to get exact matches on searhes that look like sizes by stripping the size out of the query and normalizing it
// obviously this isn't super reliable, so let's also do a fallback search without the filter if we get no results
this.on('beforeSearch', function(req) {
if (req.q && req.q.match(/\d+\/\d+r\d+/i)) {
req['bgfilter.ss_size_match'] = req.q.replace(/.*?(\d+)\/(\d+)r(\d+\.?\d?)(.*)/i, '$1 $2 $3');
self.context.sizeFilter = true;
} else if (req.q && req.q.match(/\d+ +\d+ +\d+/i)) {
req['bgfilter.ss_size_match'] = req.q.replace(/.*?(\d+) +(\d+) +(\d+\.?\d?)(.*)/i, '$1 $2 $3');
self.context.sizeFilter = true;
} else if (req.q && req.q.match(/([\d\.]+)x([\d\.]+)r(\d)/i)) {
req['bgfilter.ss_size_match'] = req.q.replace(/.*?([\d\.]+)x([\d\.]+)r([\d\.]+).*/i, '$1 $2 $3');
self.context.sizeFilter = true;
} else if (req.q && req.q.match(/([\d+\.*\d+]+?)0*-([\d+\.*\d+]+?)0*/i)){
req['bgfilter.ss_size_match'] = req.q.replace(/.*?([\d+\.*\d+]+?)0*-([\d+\.*\d+]+?)(.*)/i, '$1 $2');
self.context.sizeFilter = true;
}
})
//disable spelling corrections if the search looks like it has a size in it
this.on('afterSearch', function($scope) {
if ($scope.moduleName == "autocomplete2" && self.context.sizeFilter) {
$scope.options.spellCorrection.corrections = false;
$scope.options.spellCorrection.searchAssumptions = false;
$scope.correctedQuery = $scope.input;
$scope.queryAssumption = false;
$scope.correctionType = null;
$scope.q = $scope.input;
$scope.$apply();
}
})
// do a fallback if we get not results and we're applying a size background filter based on the query
var no_results_research;
var second_search = false;
this.on('afterSearch', function($scope) {
if (!$scope.moduleName) {
if ($scope.results.length == 0 && !no_results_research && self.context.sizeFilter) {
no_results_research = true;
second_search = true;
self.context.sizeFilter = false;
$scope._update();
} else if (no_results_research) {
no_results_research = false;
}
}
});
this.on('beforeSearch', function(req, config) {
if (no_results_research) {
delete req['bgfilter.ss_size_match'];
}
});
// end size filter logic
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment