Created
May 7, 2021 13:22
-
-
Save julesbravo/260f82cd9aa87ddf9dad2bb84cbb2492 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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…"> | |
<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 & 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 & 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 & 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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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