Widget Test Post - All Components
This post is auto-generated for QA testing. It contains every product widget variation used across the Homer CMS. Each section below renders a different component with all supported shortcode parameters. Verify that all components display correctly, including discount codes where applicable.
Discount code active: TEST97 on Ambeur Carry-On Luggage
1. Editor's Pick (Sidebar)
The Editor's Pick widget renders in the sidebar (desktop) and inline (mobile). It's configured via the post_product pivot with is_featured=true. The featured product for this post is Ambeur Carry-On Luggage. Check the sidebar to verify it appears correctly with the discount code.
2. Product Showcase Box (type="single")
The product-showcase-box component. Default options - no custom rating or description.
Brand
Ambeur Carry-On Luggage
Above should show image, brand, name, default stars, SHOP NOW button, and discount code.
3. Product Showcase Box (type="single" + custom rating)
Same component with rating="4" override. Uses discount-code product to verify coupon + custom rating together.
Brand
Ambeur Carry-On Luggage
Above should show 4 stars instead of the product's default rating, plus the discount code below SHOP NOW.
4. Product Showcase Box (type="single" + custom description)
Same component with a custom description override.
Brand
Ambeur Carry-On Luggage
This is a custom QA test description to verify the description parameter renders correctly in the product showcase box.
Above should show the custom description text and 5 stars.
5. Legacy Single Product Grid (id=)
The legacy format uses id= instead of ids= and renders the product-grid component.
Above should show a compact product card with image, rating, and buy button.
6. Legacy Single Product Grid (featured="true")
Legacy format with featured flag enabled.
Above should show the featured variant of the product card.
7. Legacy Single - No Price, No Rating
Legacy format with show_price="false" and show_rating="false".
Above should show a product card WITHOUT price and WITHOUT star rating.
8. Legacy Single - No Buy Button
Legacy format with show_buy_button="false".
Ambeur Carry-On Luggage
Above should show a product card WITHOUT the buy/shop button (and no discount code since there's no button).
9. Carousel (3 Products)
The product-carousel component with 3 products.
Above should show a carousel with 3 products. Cards should have brand, name, price, button, and discount code where applicable.
10. Carousel (4 Products)
Carousel with 4 products to test full-width layout behavior.
Above should show 4 products. Check if cards render full-width or scroll.
11. Carousel (6 Products)
Larger carousel to test scrolling/pagination behavior.
12. Carousel - No Price, No Rating
Carousel with show_price="false" and show_rating="false".
Above should show carousel cards WITHOUT price and WITHOUT star rating.
13. Carousel - No Buy Button
Carousel with show_buy_button="false".
OFF
Ambeur Carry-On Luggage
OFF
Luka 15 inch Laptop Backpack
OFF
Tech Organizer
Above should show carousel cards WITHOUT the buy button (and no discount code).
14. Grid Display (3 Products)
The product-grid-display component with "Our Winner" badge on first item.
Above should show a 3-column grid. First product gets the "Our Winner" badge. Discount codes appear below "See more".
15. Grid Display (4 Products)
Grid display with 4 products to test layout with extra card.
Above should show 4 products in the grid. Check how the 4th card wraps.
16. Grid Display + Custom Ratings
Grid with per-product custom ratings via the ratings parameter.
Above should show: product 1 = 5 stars, product 2 = 4.5 stars, product 3 = 4 stars.
17. Grid Display + Anchor Links
Grid with link_mode="anchor" so "See more" scrolls to the ranked products box instead of going to external link.
Above: clicking "See more" should scroll to the ranked products box section below, not open an external link.
18. Grid Display + Mixed Links
Grid with link_mode="anchor" but external_ids overrides first product to use external link.
Above: product 1 "See more" should go to external link; products 2 and 3 should scroll to RPB.
19. Grid Display - No Price, No Rating, No Button
Grid with all display options disabled.
Ambeur Carry-On Luggage
Luka 15 inch Laptop Backpack
Tech Organizer
Above should show only product images and names - no stars, no price, no "See more" link.
20. Slider (3 Products)
The product-slider component with 3 products per slide.
Ambeur Carry-On Luggage
Luka 15 inch Laptop Backpack
Tech Organizer
Above should show a slider with divider line, price, and SHOP NOW button aligned across all cards.
21. Slider (4 Products)
Slider with 4 products to test pagination (3 per slide + 1 on second slide).
Ambeur Carry-On Luggage
Luka 15 inch Laptop Backpack
Tech Organizer
Dopp Kit
Above should show 3 products on first slide, 1 on second slide. Check pagination dots.
22. Slider (6 Products)
Slider with 6 products (2 full slides).
Ambeur Carry-On Luggage
Luka 15 inch Laptop Backpack
Tech Organizer
Dopp Kit
Hue Large Luggage
Terra 26L Laptop Duffel Backpack
Above should show 2 slides of 3 products each. Navigation dots should work.
23. Slider + Custom Features
Slider with custom pros/cons via the features parameter.
Ambeur Carry-On Luggage
Luka 15 inch Laptop Backpack
Tech Organizer
Above: product 1 should show green check pros ("Great quality", "Fast shipping"); products 2 and 3 should show red X cons.
24. Slider - No Price, No Buy Button
Slider with show_price="false" and show_buy_button="false".
Ambeur Carry-On Luggage
Luka 15 inch Laptop Backpack
Tech Organizer
Above should show slider cards with only image, name, and features - no price, no SHOP NOW button, no discount code.
25. Ranked Products Box
The ranked-products-box component with badges, pros/cons, and CTA buttons.
Top Picks
Ambeur Carry-On Luggage
- QA TEST FEATURE 1
- QA TEST FEATURE 2
Pros
Cons
Luka 15 inch Laptop Backpack
- QA TEST FEATURE 1
- QA TEST FEATURE 2
Pros
Cons
Tech Organizer
- QA TEST FEATURE 1
- QA TEST FEATURE 2
Pros
Cons
Above should render the ranked products box. Check for discount code display tight below the SHOP NOW button.
26. Comparison Table
The comparison-table component displays product attributes side by side.
|
AMBEUR CARRY-ON LUGGAGE
$196
$245
|
LUKA 15 INCH LAPTOP BACKPACK
$69
$138
|
TECH ORGANIZER
$31
$48
|
|
|---|---|---|---|
| Price | $196.00 | $69.00 | $31.20 |
| Rating |
|
|
|
| Best For | QA testing | QA testing | QA testing |
Above should render a comparison table with Price, Rating, and Best For rows.
Verification Checklist
- Editor's Pick sidebar shows discount code below pricing
- Product Showcase Box: default, custom rating, custom description all render correctly
- Legacy product grid: default, featured, and show/hide toggles all work
- Carousel: 3, 4, and 6 products render correctly; show/hide toggles work
- Grid Display: 3 and 4 products; custom ratings show correct stars; anchor links scroll to RPB
- Slider: 3, 4, and 6 products; custom features show pros/cons; pagination works
- Ranked Products Box: discount code tight below SHOP NOW
- Comparison Table: renders with correct product data
- All components use the site's accent color for the dotted border on discount codes
- Copy-to-clipboard works on all discount code buttons
- Responsive: check mobile view for all components
Leave a Comment
Your email address will not be published. Required fields are marked *