fix(searchInput): Add a propertie in the cms for searchProductsTitle …#3240
fix(searchInput): Add a propertie in the cms for searchProductsTitle …#3240evander-corebiz wants to merge 7 commits intovtex:devfrom
Conversation
…to be able to change on translate this text in the search input results
evander-corebiz
requested review from
emersonlaurentino and
lemagnetic
and removed request for
a team
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds three configurable title props — Changes
Sequence Diagram(s)sequenceDiagram
participant Navbar as "Navbar"
participant SearchInput as "SearchInput"
participant SearchDropdown as "SearchDropdown"
participant SearchHistory as "SearchHistory"
participant SearchTop as "SearchTop"
participant SearchProducts as "SearchProducts"
Navbar->>SearchInput: render(props include searchHistoryTitle, searchTopTitle, searchProductsTitle)
SearchInput->>SearchDropdown: open(dropdownProps with titles)
SearchDropdown->>SearchHistory: render(title=searchHistoryTitle)
SearchDropdown->>SearchTop: render(title=searchTopTitle)
SearchDropdown->>SearchProducts: render(title=searchProductsTitle)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/components/navigation/Navbar/Navbar.tsx (1)
152-159:⚠️ Potential issue | 🟠 MajorPass
searchProductsTitleto mobileSearchInputas well.Line 157 wires the CMS title only for desktop. In the mobile branch (Line 177-188), the prop is not forwarded, so the dropdown title customization won’t apply on mobile.
Proposed fix
{!isDesktop && ( <SearchInput placeholder="" ref={searchMobileRef} testId="store-input-mobile" buttonTestId="store-input-mobile-button" onSearchClick={handlerExpandSearch} sort={searchInput?.sort} quickOrderSettings={searchInput?.quickOrderSettings} + searchProductsTitle={searchInput?.searchProductsTitle} hidden={!searchExpanded} aria-hidden={!searchExpanded} /> )}Also applies to: 177-188
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/components/navigation/Navbar/Navbar.tsx` around lines 152 - 159, The mobile rendering branch isn't passing the searchProductsTitle prop into the SearchInput, so the CMS-configured dropdown title is only applied on desktop; update the mobile branch that renders <SearchInput .../> (the branch conditioned by isDesktop / its inverse) to include searchProductsTitle={searchInput?.searchProductsTitle} alongside the existing placeholder, sort, and quickOrderSettings props so both desktop and mobile use the same CMS title.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@packages/core/src/components/navigation/Navbar/Navbar.tsx`:
- Around line 152-159: The mobile rendering branch isn't passing the
searchProductsTitle prop into the SearchInput, so the CMS-configured dropdown
title is only applied on desktop; update the mobile branch that renders
<SearchInput .../> (the branch conditioned by isDesktop / its inverse) to
include searchProductsTitle={searchInput?.searchProductsTitle} alongside the
existing placeholder, sort, and quickOrderSettings props so both desktop and
mobile use the same CMS title.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: b37c04d0-9c89-498b-a43c-ca62fe84a1bb
📒 Files selected for processing (5)
packages/core/cms/faststore/sections.jsonpackages/core/src/components/navigation/Navbar/Navbar.tsxpackages/core/src/components/search/SearchDropdown/SearchDropdown.tsxpackages/core/src/components/search/SearchInput/SearchInput.tsxpackages/core/src/components/sections/Navbar/Navbar.tsx
…earchTop to be able to change and translate this text in the search input results
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/core/src/components/search/SearchHistory/SearchHistory.tsx (1)
13-13: Remove local fallback to keep text centralized in CMS.Line [13] hardcodes
'History', which reintroduces UI copy outside CMS/i18n flow. Prefer passingtitlethrough as-is.♻️ Suggested change
-const SearchHistory = ({ title = 'History', ...props }: SearchHistoryProps) => { +const SearchHistory = ({ title, ...props }: SearchHistoryProps) => {Based on learnings: In the FastStore codebase, components intentionally do not provide fallback defaults for text props like
alt,title, or labels so UI text comes from CMS configuration.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/components/search/SearchHistory/SearchHistory.tsx` at line 13, The component SearchHistory currently supplies a local default title ('History') which bypasses CMS/i18n text management; remove the local fallback by removing the default value in the component signature (change const SearchHistory = ({ title = 'History', ...props }: SearchHistoryProps) => to destructure without a default, e.g. ({ title, ...props }: SearchHistoryProps)), ensure any internal uses of title handle undefined safely if needed, and rely on callers/CMS to provide the title so UI copy remains centralized.packages/core/src/components/search/SearchTop/SearchTop.tsx (1)
27-32: Avoid hardcoded default title in component layer.Line [30] adds
'Top Search'fallback in the component. To keep copy centralized and translatable via CMS, prefer no local default.♻️ Suggested change
function SearchTop({ topTerms = [], sort, - title = 'Top Search', + title, ...otherProps }: SearchTopProps) {Based on learnings: In the FastStore codebase, components intentionally do not provide fallback defaults for text props like
alt,title, or labels so UI text comes from CMS configuration.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/components/search/SearchTop/SearchTop.tsx` around lines 27 - 32, The component SearchTop currently hardcodes a default title ('Top Search') in its parameter list; remove that local fallback so UI text is sourced from CMS/parent props instead: delete the "= 'Top Search'" default from the SearchTop function signature, ensure SearchTopProps's title is optional (or accepts undefined) so types compile, and audit/update any callers/tests of SearchTop to supply the desired title from CMS/config; run typecheck and unit tests to confirm no remaining assumptions about a local default.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/core/cms/faststore/sections.json`:
- Around line 205-209: The default value for the searchProductsTitle property is
inconsistent with the existing Search schema; update the "searchProductsTitle"
entry in sections.json to use the same casing as the Search schema default
("Suggested products" instead of "Suggested Products") so labels are consistent
across search surfaces.
---
Nitpick comments:
In `@packages/core/src/components/search/SearchHistory/SearchHistory.tsx`:
- Line 13: The component SearchHistory currently supplies a local default title
('History') which bypasses CMS/i18n text management; remove the local fallback
by removing the default value in the component signature (change const
SearchHistory = ({ title = 'History', ...props }: SearchHistoryProps) => to
destructure without a default, e.g. ({ title, ...props }: SearchHistoryProps)),
ensure any internal uses of title handle undefined safely if needed, and rely on
callers/CMS to provide the title so UI copy remains centralized.
In `@packages/core/src/components/search/SearchTop/SearchTop.tsx`:
- Around line 27-32: The component SearchTop currently hardcodes a default title
('Top Search') in its parameter list; remove that local fallback so UI text is
sourced from CMS/parent props instead: delete the "= 'Top Search'" default from
the SearchTop function signature, ensure SearchTopProps's title is optional (or
accepts undefined) so types compile, and audit/update any callers/tests of
SearchTop to supply the desired title from CMS/config; run typecheck and unit
tests to confirm no remaining assumptions about a local default.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 052c3131-ecf9-47d3-9b45-5087538b4b36
📒 Files selected for processing (6)
packages/core/cms/faststore/sections.jsonpackages/core/src/components/search/SearchDropdown/SearchDropdown.tsxpackages/core/src/components/search/SearchHistory/SearchHistory.tsxpackages/core/src/components/search/SearchInput/SearchInput.tsxpackages/core/src/components/search/SearchTop/SearchTop.tsxpackages/core/src/components/sections/Navbar/Navbar.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/core/src/components/sections/Navbar/Navbar.tsx
- packages/core/src/components/search/SearchDropdown/SearchDropdown.tsx
- packages/core/src/components/search/SearchInput/SearchInput.tsx
…earchTop to be able to change and translate this text in the search input results
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/core/src/components/navigation/Navbar/Navbar.tsx`:
- Around line 157-159: The desktop SearchInput is receiving the CMS title props
(searchHistoryTitle, searchTopTitle, searchProductsTitle) but the mobile
SearchInput instance is not; update the mobile SearchInput component (the
second/phone-rendered <SearchInput> in Navbar.tsx) to accept and pass through
the same props (searchHistoryTitle, searchTopTitle, searchProductsTitle) so
mobile dropdowns use CMS-provided labels; ensure you wire the exact prop names
used by the desktop instance to the mobile SearchInput component.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 55c772be-06d1-45d4-b651-a034ff557905
📒 Files selected for processing (1)
packages/core/src/components/navigation/Navbar/Navbar.tsx
|
Please, also update the new schema component for CMS here. |
done |
evander-corebiz
force-pushed
the
fix/search-products-title
branch
from
40e9b29 to
6ed2866
Compare
…to fix/search-products-title
3 participants
…to be able to change on translate this text in the search input results
What's the purpose of this pull request?
This PR introduces a new property to the CMS (Content Management System) for the SearchInput component. The goal is to allow store administrators to customize or translate the title displayed above the suggested products in the search results dropdown, which was previously hardcoded.
How it works?
A new property, searchProductsTitle, has been added to the CMS schema for the searchProducts section. This value is passed down to the UI components, allowing the "Suggested Products" text to be overridden directly through the VTEX Admin interface without requiring code changes for localization.
How to test it?
In your terminal, inside a store project using this branch, run:
Bash
yarn cms-sync
Access the Store's CMS (VTEX Admin).
Navigate to the Navbar or Search Input settings.
Locate the new searchProductsTitle field.
Enter a custom string (e.g., "Recommended for You" or "Produtos Sugeridos").
Save/Publish the changes and verify that the search dropdown reflects the new title.
Starters Deploy Preview
FastStore Documentation - CMS Integration
References
Checklist
You may erase this after checking them all 😉
PR Title and Commit Messages
feat,fix,chore,docs,style,refactor,ciandtestPR Description
breaking change,bug,contributing,performance,documentation..Dependencies
pnpm-lock.yamlfile when there were changes to the packagesDocumentation
@Mariana-Caetanoto review and update (Or submit a doc request)Summary by CodeRabbit