Help with Search Frontend Theme - Final Challenge

Challenge Troubleshooting & Discussion
1

Hi Team,

I get these errors on this assessment:

  • Set the card type for the Menu Items vertical
  • Update the subtitle on the menu item card

This is my code:
{
“verticalKey”: “menu_items”, // The vertical key from your search configuration
“pageTitle”: “Menu Item 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”: “menu_items”, // 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”: {
“expand”: false, // Allow the user to expand and collapse the facets
“showMore”: false, // Display a link to see more facet options within a facet
“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
},
/
/
“FilterLink”: {
“changeFiltersText”: “sorts and 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
“loadingIndicator”: {
“display”: true //Optional, whether to include a loading indicator on seachbar
// “iconUrl”: “” //Optional, use custom icon url instead of the default loading indicator animation
},
“voiceSearch”: {
“enabled”: false // Whether or not voice search is enabled
// “customMicIconUrl”: “”, // Path to override the voice start icon
// “customListeningIconUrl”: “” // Path to override the voice stop icon
}
},
“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”: {
“menu_items”: { // 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”: 3, // The result count limit for universal search
“cardType”: “product-prominentimage”, // The name of the card to use - e.g. accordion, location, customcard
// “icon”: “star”, // The icon to use on the card for this vertical
“universalSectionTemplate”: “grid-two-columns”
}
}
}

#2
{{> cards/card_component componentName=‘menu-item’ }}

class menu_itemCardComponent extends BaseCard[‘menu-item’] {
constructor(config = {}, systemConfig = {}) {
super(config, systemConfig);
}

/**

  • This returns an object that will be called card
  • in the template. Put all mapping logic here.
  • @param profile profile of the entity in the card
    */
    dataForRender(profile) {
    let imageUrl = ‘’;
    let alternateText = ‘’;
    if (profile.photoGallery && profile.photoGallery[0]) {
    imageUrl = Formatter.image(profile.photoGallery[0]).url;
    alternateText = Formatter.image(profile.photoGallery[0]).alternateText;
    }
    const linkTarget = AnswersExperience.runtimeConfig.get(‘linkTarget’) || ‘_top’;
return {
  title: profile.name, // The header text of the card
  url: profile.landingPageUrl, // If the card title is a clickable link, set URL here
  target: linkTarget, // If the title's URL should open in a new tab, etc.
  titleEventOptions: this.addDefaultEventOptions(),
  subtitle: profile.c_calories + 'calories', // The sub-header text of the card
  image: profile.primaryPhoto.image.url, // The URL of the image to display on the card
  altText: alternateText,  // The alternate text for the image
  details: profile.description, // The text in the body of the card
  // tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card
  // If the card's details are longer than a certain character count, you can truncate the
  // text. A toggle will be supplied that can show or hide the truncated text.
  showMoreDetails: {
  showMoreLimit: 250,
  //   truncatedDetails: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget, 350) : null, // The truncated rich text
  //   showMoreText: 'Show more', // Label when toggle will show truncated text
  //   showLessText: 'Show less' // Label when toggle will hide truncated text
  // },
  // The primary CTA of the card
  CTA1: {
    label: 'Order Now', // The CTA's label
    iconName: 'chevron', // The icon to use for the CTA
    url: landingPageUrl, // The URL a user will be directed to when clicking
    target: linkTarget, // Where the new URL will be opened
    eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
    eventOptions: this.addDefaultEventOptions(),
    // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
  },
  // The secondary CTA of the card
  CTA2: {
    label: profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null,
    iconName: 'chevron',
    url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
    target: linkTarget,
    eventType: 'CTA_CLICK',
    eventOptions: this.addDefaultEventOptions(),
    // ariaLabel: '',
  },
  feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
  feedbackTextOnSubmission: 'Thanks!', // Text to display after a thumbs up/down is clicked
  positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up
  negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down
};

}

/**

  • The template to render
  • @returns {string}
  • @override
    */
    static defaultTemplateName (config) {
    return ‘cards/menu-item’;
    }
    }

ANSWERS.registerTemplate(
‘cards/menu-item’,
{{{stringifyPartial (read ‘cards/menu-item/template’) }}}
);
ANSWERS.registerComponentType(menu_itemCardComponent);

I tried using Menuoverride as the cardtype but still have trouble getting this right could you provide some feedback please?

ID: 3254091

Thank you in advance,

2

Hi @Leslie_Chico,

It appears that the issue here is that you are trying to use menuoverride as the card type when it should be menu-item (see step 2 of Add Menu Items Vertical section of the challenge directions).

When you are creating the custom card for menu items in the challenge, it is important to follow the naming exactly since the rules the challenges are graded with are case-sensitive.

To set the card type for the menu items vertical, you need to navigate to the config file of the menu items vertical (menu-items.json). Then you will update the cardType property (within verticalsToConfig) to the custom menu card that you created. It should look like this:

"verticalsToConfig": {
      "cardType": "menu-item", 
    }

To update the subtitle on the menu item card, navigate to the component.js file of the custom menu card you created (cards > menu-item > component.js). In that file is where you want to update the subtitle property to look something like this:

subtitle: profile.c_calories + ' calories'

Make sure there is a space before the word calories in ' calories'. In your code, there seems to be no space.

Hope this helps!

1 Like
3

Thanks Micaela! It worked