Hi team,
I’m having trouble with completing Answers: Advanced module 4. I keep on having wrong on “Update the Restaurants config file to add Facets component”.
Can you please help? I’ve checked the configs and can’t find where I am stuck.
Thanks and best,
Victoria
Here is my config> restaurant.json:
{
“verticalKey”: “restaurants”, // The vertical key from your search configuration
“pageTitle”: “Restaurant Search”, // !!!REPLACE THIS VALUE!!! The contents of the title tag and meta open graph tag for title
// “metaDescription”: “”, // The meta tag for open graph description
// “canonicalUrl”: “”, // The link tag for canonical URL as well as the meta tag for open graph url
// “keywords”: “”, // The meta tag for keywords
“pageSettings”: {
/**
"search": {
"verticalKey": "restaurants", // The vertical key from your search configuration
"defaultInitialSearch": "" // Enter a default search term
}
**/
},
“componentSettings”: {
/**
"QASubmission": {
"entityId": "", // Set the ID of the entity to use for Q&A submissions, must be of entity type "Organization"
"privacyPolicyUrl": "" // The fully qualified URL to the privacy policy
},
**/
"Facets": {
"title": "", // The title to display above the facets
"expand": false, // Allow the user to expand and collapse the facets
"showMore": true, // Display a link to see more facet options within a facet
"showMorelimit": 3,
"searchOnChange": true, // Will automatically run a search as facets are selected or unselected. Set to false to only trigger updates with an Apply button.
// Additional options are available in the documentation
"fields": {
"c_restaurantFeatures": {
"searchable": true,
"searchLabelText": "Search for our features",
"placeholderText": "Search"
}
}
},
"FilterLink": {
"changeFiltersText": "filters", // Text that displays by default
"resetFiltersText": "reset filters", // Text when filters are applied
"clearSearchText": "clear search" // Text when there are no results, conducts an empty search
},
"AppliedFilters": {
"removable": true
},
"VerticalResults": {
"noResults": {
"displayAllResults": true // Optional, whether to display all results in the vertical when no results are found.
},
"hideResultsHeader": true
},
"SearchBar": {
"placeholderText": "Search", // The placeholder text in the answers search bar
"allowEmptySearch": true // Allows users to submit an empty search in the searchbar
},
"Pagination": {
"noResults": {
"visible": true
}
}
},
// Configuration used to define the look and feel of the vertical, both on this page and, by default,
// on the universal page.
“verticalsToConfig”: {
"restaurants": { // The vertical key from your search configuration
// "label": "", // The name of the vertical in the section header and the navigation bar
// "verticalLimit": 15, // The result count limit for vertical search
// "universalLimit": 5, // The result count limit for universal search
"cardType": "restaurant", // The name of the card to use - e.g. accordion, location, customcard
// "icon": "pin", // The icon to use on the card for this vertical
"mapConfig": {
//"enablePinClustering": true, // Cluster pins on the map that are close together. Defaults false
"mapProvider": "MapBox", // The name of the provider (e.g. Mapbox, Google)
"noResults": {
"displayAllResults": false // Set to FALSE to hide results on the map when a search returns no results
},
"pin": {
"default": { // The pin in its normal state
"backgroundColor": "#5387d7", // Enter a hex value or color for the pin background
"strokeColor": "#2a446b",
"labelColor": "white"
},
"hovered": { // The pin when it is hovered
"backgroundColor": "#2f4d71",
"strokeColor": "#172638",
"labelColor": "white"
},
"selected": { // The pin when it is selected by mouse click or through a card click
"backgroundColor": "#2f4d71",
"strokeColor": "#172638",
"labelColor": "white"
}
}
},
"universalSectionTemplate": "standard"
}
}
}
Here is my restaurants.html.hbs:
{{#> layouts/html pageWrapperCss=“YxtPage-wrapper–mobileListView” }}
{{#> script/core }}
{{> cards/all }}
{{> templates/vertical-full-page-map/collapsible-filters/page-setup }}
{{> templates/vertical-full-page-map/page-setup }}
{{> templates/vertical-full-page-map/script/searchbar }}
{{> templates/vertical-full-page-map/script/spellcheck }}
{{> templates/vertical-full-page-map/script/navigation }}
{{> templates/vertical-full-page-map/script/verticalresultscount }}
{{> templates/vertical-full-page-map/script/appliedfilters }}
{{!-- {{> templates/vertical-full-page-map/script/sortoptions }} --}}
{{> templates/vertical-full-page-map/script/facets }}
{{!-- {{> templates/vertical-full-page-map/script/filterbox }} --}}
{{> templates/vertical-full-page-map/script/verticalresults }}
{{> templates/vertical-full-page-map/script/pagination }}
{{!-- {{> templates/vertical-full-page-map/script/qasubmission }} --}}
{{> templates/vertical-full-page-map/script/locationbias modifier="main" }}
{{> templates/vertical-full-page-map/script/locationbias modifier="mobileMap" }}
{{/script/core }}
<div class="Answers AnswersVerticalMap CollapsibleFilters VerticalFullPageMap VerticalFullPageMap--mobileListView js-answersVerticalFullPageMap">
<div class="Answers-content">
<div class="Answers-contentWrap js-locator-contentWrap" role="region" aria-label="{{ translate phrase="Main location search" }}">
<div class="Answers-resultsHeader">
<div class="Answers-searchWrapper js-sticky">
<div class="Answers-form">
{{> templates/vertical-full-page-map/markup/searchbar }}
{{> templates/vertical-full-page-map/markup/navigation }}
</div>
</div>
<div class="Answers-resultsHeaderTop">
{{> templates/vertical-full-page-map/markup/verticalresultscount }}
{{> templates/vertical-full-page-map/markup/appliedfilters }}
{{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }}
{{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }}
</div>
<div class="Answers-resultsHeaderBottom">
{{> templates/vertical-full-page-map/markup/alternativeresults }}
</div>
</div>
<!-- Uncomment the following div if you want to include filters, facets, or sort options -->
<div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive">
{{!-- {{> templates/vertical-full-page-map/markup/sortoptions }} --}}
{{> templates/vertical-full-page-map/markup/facets }}
{{!-- {{> templates/vertical-full-page-map/markup/filterbox }} --}}
</div>
<div class="Answers-resultsWrapper js-locator-resultsWrapper">
<div class="Answers-resultsContainer js-locator-resultsContainer js-answersResultsWrapper">
<div class="js-answersResultsColumn">
<div class="Answers-results js-answersResults">
{{> templates/vertical-full-page-map/markup/spellcheck }}
{{> templates/vertical-full-page-map/markup/verticalresults }}
{{> templates/vertical-full-page-map/markup/pagination }}
{{!-- {{> templates/vertical-full-page-map/markup/qasubmission }} --}}
</div>
</div>
</div>
</div>
<div class="Answers-centerTop">
{{> templates/vertical-full-page-map/markup/searchthisareabutton }}
</div>
<div class="Answers-stickyBottom" role="region" aria-label="{{ translate phrase="Map controls" }}">
{{> templates/vertical-full-page-map/markup/searchthisareatoggle modifier="desktop"}}
{{> templates/vertical-full-page-map/markup/locationbias modifier="main"}}
</div>
</div>
<div class="Answers-mapWrapper" role="region" aria-label="{{ translate phrase="Map" }}">
{{> templates/vertical-full-page-map/markup/map }}
<div class="Answers-mapFooter">
{{> templates/vertical-full-page-map/markup/searchthisareatoggle modifier="mobileMap"}}
{{> templates/vertical-full-page-map/markup/locationbias modifier="mobileMap"}}
</div>
</div>
{{> templates/vertical-full-page-map/markup/mobilelisttoggles }}
</div>
</div>
<div class="Answers-footer js-answersFooter">
{{> layouts/yext-logo }}
</div>
{{/layouts/html }}
