feat(category-nav): add Cards block support with click-to-open dropdown#419
Conversation
Add functionality to display Cards block items in category-nav dropdown menu with enhanced UI and interaction patterns. Features implemented: - Parse sections containing Cards blocks and integrate into category navigation - Support icon-based menu items (e.g., 🔔 icon) using icon decoration - Add click-to-open behavior for Cards block dropdowns (vs hover for regular items) - Add close button (×) in top-right corner of dropdown - Add navigation arrows with pagination (max 3 cards visible, disabled when ≤3) - Extract and display dropdown container title from second text element
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
- Added gray background (#f5f5f5) to card wrapper and image section - Applied red background to text content areas (title, description, divider, buttons) - Styled card title with white text (16px, font-weight 500) - Styled description text with white color (16px) - Changed divider to white line on red background - Converted button-style links to simple bold white text links (font-weight 700) - Removed rounded corners from image bottom to cleanly meet text section - Used !important on link colors to prevent default blue link styling - Increased card gap spacing to 30px for better visual separation
…n and styling Navigation Layout: - Split navigation into left and right lists for flexible positioning - Moved bell/bulletin cards icon to right side while keeping regular menu items on left - Updated tab-pane layout to use flexbox with space-between for left-right alignment - Added proper gap and flex properties for both navigation lists Dropdown and Card Styling: - Added 50px/38px/29px padding to bulletin cards dropdown (top/sides/bottom) - Restructured card body with dedicated container for red background - Adjusted HR element margins (10px horizontal) to prevent edge-to-edge spanning - Fixed text padding within card body for consistent spacing - Enhanced overflow handling with hidden overflow on carousel wrapper Navigation Arrows: - Increased arrow size to 48x48px with larger 32px font-size - Changed to thin weight (300) for cleaner, more modern appearance - Updated button styling with light gray background (#f5f5f5) - Disabled state now uses lighter red color (#d99) with 0.7 opacity for visual consistency - Improved hover effects with subtle background color change Carousel Touch/Drag Support: - Implemented smooth card-by-card scrolling instead of pagination - Added touch support for mobile devices (touchstart, touchmove, touchend) - Added mouse drag support for desktop (mousedown, mousemove, mouseup, mouseleave) - Implemented momentum detection based on swipe velocity - Fast swipes (>0.5px/ms) move 1-2 cards based on speed - Slow drags use 25% card-width threshold for responsive movement - Added visual feedback with grab/grabbing cursor states - Cards now use flex layout with transform for smooth sliding animations - Prevented text selection and enabled proper touch actions during drag Bell Icon: - Created dedicated bell-outline.svg icon with clean, even stroke edges - Preserved original bell.svg (filled version) for other site uses - Implemented automatic icon substitution: 🔔 authored in Cards blocks now renders as bell-outline - Icon element created programmatically with correct SVG path and attributes
There was a problem hiding this comment.
Bogdan,
I have a couple of main issues with this change:
- I think maybe restyling the entire top nav positioning type has broken the normal card layouts and styling (doesn't flex wrap nicely anymore):
I'd suggest that rather than using a category-nav-left and category-nav-right, we just add the bell/notification item and logic as the last normal li item (you're doing this at line 555 but to the navListRight/navListLeft containers already) to the main category nav, and just use a more simple child selector (like a .top-nav-left>li:nth-last-child(1) { margin-left: auto; } to shift it all the way over to the right (as far as you want). You could also just give it a semantic CSS name like category-nav-bulletin-card-notification or something. This would be a lot less styling code to shift the whole nav out of block to flex, then most of it back to block again (in terms of lines of code on a bunch of selectors)
If we need to adjust the positioning of the category-nav to be more to the left side rather than fully centered, that could be done independently of the position of the right bell icon if we did it as described above.
Either way, we need to fix the broken cards. Let me know if you have any questions on this.
- Secondly, it looks like you built an entire js based card carousel feature for this cards display. It looks good and functions alright, but we're already using the full swiper.js library (at
/scripts/swiperjs/swiper-bundle.min.js) for all card movement logic in the whole site.
You can just ask cursor to refactor your custom carousel function to use that swiper library instead, you may have to direct it a little to keep your next/previous arrows, but that will unify the feel of your cards and ensure broad compatibility without bugs on all devices. This saves ~600 lines of js code since swiper is already loading for every page anyway.
- It appears your code is reading the cards' details from out of the content on the authored page blocks, at least it's authored in the page on your
/drafts/rupay-credit-card1page, and I can't get it to appear on something like https://391-bell--idfc--aemsites.aem.page/credit-card/rupay-credit-card at all. This content needs to be authored either as it's own fragment page within/framework/or specifically at the end of/framework/ccnav, which is where the rest of that category-nav content is currently authored. I believe Charity did some of the legwork for this on/framework/ccnav2, you probably already took a look at it there.
Refactor the bulletin cards implementation based on code review feedback
to improve maintainability, fix broken layouts, and align with existing
site patterns.
Changes:
1. Revert two-list navigation to single list approach
- Remove navListLeft and navListRight separation
- Use margin-left: auto on .category-nav-bulletin-notification
to push bell icon to the right within single list
- Simplifies JavaScript and reduces CSS complexity
2. Fix broken dropdown layouts for regular menu items
- Revert .tab-pane.active from display: flex to display: block
- Prevent flex properties from affecting non-bulletin dropdowns
- Scope Swiper styles only to .category-nav-item-cards
3. Replace custom carousel with Swiper.js integration
- Remove ~180 lines of custom drag/swipe/momentum logic
- Import loadCSS and loadScript utilities from aem.js
- Add initializeSwiperNavigation() function to dynamically load
and configure Swiper library
- Configure Swiper with responsive breakpoints:
* Mobile: 1 card
* Tablet (768px+): 2 cards
* Desktop (990px+): 3 cards
- Use Swiper's built-in navigation and disabled states
- Unifies carousel experience across site
4. Fix bell icon centering within list item
- Add display: flex with justify-content: center to
.category-nav-bulletin-notification, its link, and icon
- Remove asymmetric padding (14px 30px 14px 0px) and replace
with symmetric padding (14px 0)
- Remove margin from icon that was pushing it left
- Bell icon now perfectly centered in 60px container
|
Hi @roperev , Regarding item #3: I am using the framework implementation, specifically a copy of ccnav (ccnav2) created by Charity. I’m working within this copy to experiment safely without risking any breaking changes to the existing functionality. Currently, the bell icon is only authored in /framework/ccnav2. Pages using ccnav or ccnav1 do not have the bell icon yet; it simply needs to be added to those versions following the same authoring logic used in ccnav2. For example, the page /credit-card/rupay-credit-card is currently using ccnav1. If we switch it to ccnav2, the bell icon should appear as expected. I haven't made any changes in AEM yet to avoid interference, especially since I noticed on Slack that there are currently some publishing issues. Please test this setup when you have a few minutes. Thanks cc: @helms-charity |
- Enable flexbox layout on parent containers - Set .top-nav-left to full width - Use margin-left: auto for bell notification positioning - Match header nav container width with unset max-width and horizontal padding
…tems - Only apply bell icon styling to items with 🔔 emoji - Scope section search to siblings of first category-nav block only - Remove document-wide querySelectorAll as per code review - Align bell icon to far right and match header nav container width Prevents random page content from becoming menu items by limiting search to sections near category-nav blocks that have explicit icons.
- Simplify aria-labels: Change 'Previous cards'/'Next cards' to 'Previous'/'Next' - Combine duplicate IF conditions: Merge isFromCardsBlock checks into single block - Remove icon conversion logic: Use author's icon directly (bell-outline) instead of forcing conversion - Simplify card validation: Remove redundant checks already validated in cards.js - Scope document queries: Query within main element instead of entire document - Fix duplicate variable declaration: Reuse main variable declared earlier
Cache and reuse text element queries when processing Cards block sections, eliminating redundant DOM traversal.
amarghioali
left a comment
amarghioali
left a comment
There was a problem hiding this comment.
Hi @helms-charity
I've updated the PR based on your comments. Please take another look when you have a chance. Thanks!
helms-charity
left a comment
helms-charity
left a comment
There was a problem hiding this comment.
It looks better than the original. Sometime we should revisit the entire category-nav to slim down the JS, but for now it's good.
3 participants
Fix #391
Fix #421
Add functionality to display Cards block items in category-nav dropdown menu with enhanced UI and interaction patterns.
Features implemented:
Test URLs: