esun3d/design-qa.md

Recommended Products Design QA

• Source visual truth: /var/folders/ms/dxgtmtg93ms5kz93_skmkqy40000gn/T/codex-clipboard-49015bb0-81ea-48b9-bf76-76bed1e1b2b9.png.
• Source dimensions: 1666 × 1342 px.
• Implementation: https://esun3d.test/pla-basic-product
• Implementation screenshot: Codex in-app Browser inline capture, 2026-09-08.
• Implementation dimensions: 1368 × 1766 px from a 684 × 883 CSS px viewport at device pixel ratio 2.
• State: PLA-Basic Recommended Products after navigating to the final carousel position.
• Density normalization: responsive component proportions and interaction state were compared; the source is a desktop composition and the browser capture is the corresponding narrow responsive state.

Full-view comparison evidence

• The recommendation section is directly beneath the purchasing controls and before Delivery and Shipping.
• The section-to-details transition now has one divider instead of two.
• The section uses the source's bordered white cards, rounded corners, product image, product name, actual/original prices, discount badge, and green product action.
• The recommendation-specific quantity control is absent, the cart action occupies its own right-aligned row, and price/discount spacing uses a 24 px flex gap.
• All four configured products are present in the rendered carousel.
• Recommendation cards now use border-box, so Swiper's assigned slide width includes the card border and padding instead of overflowing the calculated track width.

Focused region comparison evidence

• Source card: product image on the left and product information/actions on the right at desktop width.
• Implementation desktop rule: two-column card with a 42% image column and 58% information column from 768 px upward.
• Narrow browser capture: cards intentionally collapse vertically while preserving the same content hierarchy.
• Typography: existing site font is retained; name, price, old price, and discount weights follow the source hierarchy.
• Spacing/layout: card border, 20 px radius, image/content separation, and price/action grouping match the source structure.
• Colors/tokens: white card, dark text, gray strike-through price, red discount pill, and eSUN green action are retained.
• Image quality: Magento product imagery is used directly with object-fit: contain; no placeholder imagery is introduced.
• Copy/content: recommendation heading and product catalog content are unchanged.

Interaction verification

• Four configured products render in the DOM: ABS2.5KG, DC100 Dental Cast Resin, CT100 Custom Tray Resin, and PLA+CMYK.
• Browser-rendered output shows $75.99, $99.99, and 24% OFF for all four products; the two configurable products no longer render $0.00.
• Next navigation moved the Swiper track and enabled Previous navigation.
• Touch/mouse movement is explicitly enabled with allowTouchMove and simulateTouch.
• The final slide retains its complete name, prices, discount, and product action inside the slider viewport at the end position.
• No quantity or stepper markup exists in the recommendation template.
• Live browser structure confirms the order Buy Now → Recommended Products → Delivery and Shipping → Payment & Security.
• The sticky detail navigation contains Overview, Download, Available Colors, and FAQ; the recommendation section is no longer registered as a detail-navigation anchor.

Comparison history

1. P1: Only two of four configured products rendered because two unavailable products were filtered with isSaleable(); this left no desktop overflow. Fixed by rendering every enabled, visible product explicitly configured for recommendations. Post-fix evidence: carousel reports four slides and Next changes the active track position.
2. P1: Cards used a vertical catalog-tile layout instead of the desktop reference composition. Fixed with a responsive two-column desktop card and a compact vertical narrow-screen fallback. Post-fix evidence: the narrow state preserves all required information and the desktop breakpoint contains the measured left-image/right-content structure.
3. P2: Color swatches were present although they are not part of the requested simplified recommendation card. Removed from the template and block dependencies.
4. P1: Magento layout moves placed product.info.details and recommendations against the same anchor, allowing Delivery and Shipping / Payment & Security to render first. Fixed by explicitly placing product.info.details after esun.product.recommended.products.
5. P2: The cart icon shared the price/discount row. Fixed by separating summary and action containers, with the action row right-aligned.
6. P1: You May Also Like became active while scrolling because it remained the final configured sticky-nav anchor even though the recommendation content had moved ahead of product details. Removed that recommendation/related-products alias from the detail-nav configuration.
7. P2: The discount badge sat too close to the struck-through price. Increased the summary gap to 24 px and used space-between; live CSS confirms the updated rule.
8. P2: Two dividers appeared between recommendations and Delivery and Shipping. Removed the recommendation section's bottom border, leaving the product-details divider as the single boundary.
9. P1: DC100 and CT100 displayed $0.00 because their configurable parents have a zero base price and Magento's normal configurable resolver found no salable associated option. Added a store-aware fallback to the lowest positive associated-product final price, retaining the regular price from the same child. Live browser evidence shows $75.99 / $99.99 / 24% OFF for both.
10. P1: The last product was clipped at the final carousel position because Swiper calculated the slide content width while each card added 34 px of border and padding outside that width. Added box-sizing: border-box to recommendation slides, aligning the rendered outer width with Swiper's assigned width and removing the accumulated end-of-track overflow.

Remaining findings

• No actionable P0/P1/P2 findings remain for the requested scope.

final result: passed