Customizing the Featured Category Extension in SuiteCommerce

The Featured Category extension allows you to prominently display a commerce category on your website, streamlining the shopping experience for users. It highlights multiple items, minimizes API calls to a single request per category, and grants control over item presentation. This functionality is particularly valuable for showcasing several products effectively on the Product Detail page.

How to Override the Featured Category Extension

Customizing the Featured Category extension can be achieved through an override method. This process involves creating a new template file within your theme's Overrides directory. Here’s a step-by-step guide:

1. Location of Template: Navigate to Workspace/Extras/Extensions/NetSuite/FeaturedCategory/Modules/Item/Templates/sc_featuredcategory_item.tpl.
2. Copy Source File: Copy the template source file to your clipboard.
3. Paste in Overrides Directory: Paste the copied file into the corresponding location within your theme's Overrides directory (e.g., Workspace/Theme/Overrides/NetSuite/FeaturedCategory/Modules/Item/Templates/sc_featuredcategory_item.tpl).
   Important: Keep the file's name intact for the override to work correctly.
4. Open Template File: Access the new file from your Overrides directory.
5. Start Local Server: Run your local server using the command gulp theme:local.
   Note: Ensure all files are in the correct location prior to starting the server; otherwise, they won't be monitored for changes. Check your CLI log to identify which overrides are being watched.
6. Add Custom Styles: Modify your template file to include desired styles. For example, to center and enlarge the item price, you can use the following code snippet:
   javascriptCopy

   .home-page .featurecategorycct-item-price {
       text-align: center;
       font-size: $sc-font-size-xl;
   }

   To remove the item's name, simply hide or remove the line responsible for rendering it.
7. Testing and Deployment: Once your customizations are in place, utilize the theme developer tools to test or deploy your changes. Refer to the section on Test and Deploy Your Theme for detailed procedures.

Key Considerations

• Maintain the original file names during the override process to ensure functionality.
• Perform thorough testing locally before deploying changes to a live environment.
• Utilize the theme developer tools for efficient workflows.