Almost done with Search Frontend Theme - Final Challenge

Search
1

Hi Team,

Almost done with HH! Just these two I can’t seem to finish:

  • Add a menu item card and update the image
  • Update the show more limit on the menu item card

Here is my code for the both:

{{> 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 = Formatterprofile.primaryPhoto.image.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: imageUrl, // The URL of the image to display on the card
  altText: alternateText,  // The alternate text for the image
  details: profile.description ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget) : null, // 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: {
  //   truncatedDetails: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget, 350) : null, // The truncated rich text
  showMoreLimit: 'Show more', 250 (characters)// 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: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // 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);

Thank you very much!!!

Best,

Lupillo Andazola

2

Hi @Lupillo_Andazola,

I took a look at the account and a couple of small things. Both of these edits need to be made in the component.js part of the menu-item card. Navigate to cards > menu-item > component.js

1. For “Add a menu item card and update the image”

As of now you have image: imageUrl but it needs to be image: profile.primaryPhoto.image.url

2. For “Update the show more limit on the menu item card”

It looks like there may be a typo for the showMoreLimit property. As of now, you have:

showMoreLimit: 'Show more', 250 (characters)

It should just be:

showMoreLimit: 250,

The ‘Show more’ text part would be used if you were utilizing a different property called showMoreText.

Hope this helps!