1 Product Card config Guideline

namds29 edited this page 2025-12-25 10:29:35 +00:00

Table of Contents

• Using VtFeaturedProducts
• JSON Config
• Fields
• Placement
• Notes
• References

Using VtFeaturedProducts

• Renders product rails for one or more collections with customizable styles.
• Filters by collection handle or title via config.title.
• Auto-fetches collections and products using the page region and countryCode from context.

JSON Config

• Place the component under a page key in your design JSON. Example from config/nam.3bear.design.json:

{
  "pages": {
    "Home": [
      {
        "VtFeaturedProducts": {
          "config": {
            "title": "best-seller",
            "styles": {
              "container": "content-container py-12 small:py-20",
              "header": { "container": "hidden", "title": "hidden", "isShowViewAll": false },
              "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
              "productCard": {
                "badgeText": "Bestseller",
                "card": "relative flex flex-col items-center bg-transparent shadow-none border-none p-0",
                "badge": { "container": "absolute top-4 left-4", "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold" },
                "thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain", "size": "full" },
                "content": "flex flex-col items-center justify-start text-center p-0 mt-6",
                "title": "text-[#003F31] text-[28px] font-semibold",
                "description": "order-3 text-[#003f31b3]",
                "price": "mt-2 text-[#0D382E] text-[24px] font-bold order-2 flex gap-2",
                "reviews": { "container": "mt-3 flex items-center gap-2 order-1", "stars": "flex gap-1", "star": "text-[#F59E0B] text-xl leading-none", "emptyStar": "text-[#F59E0B] text-xl opacity-30 leading-none", "text": "text-[#003F31] text-[14px]", "rating": 4.5, "count": 38 },
                "button": { "addToCart": "hidden", "moreInfo": "hidden", "isShowIcon": false }
              }
            }
          }
        }
      }
    ]
  }
}

Fields

• config.title
  • Matches a collection by handle or title and limits rails to that match.
  • Reference: src/modules/home/components/vt-featured-products/index.tsx:.
• config.styles.container
  • Wrapper classes for the rail container.
  • Default: content-container py-12 px-[100px] small:py-24.
  • Reference: src/modules/home/components/vt-featured-products/product-rail/index.tsx.
• config.styles.header
  • container: wrapper classes for title + view-all.
  • title: classes for collection title text.
  • isShowViewAll: show/hide the "View all" link.
  • Defaults: container: flex justify-between mb-8, title: txt-xlarge, isShowViewAll: true.
  • Reference: src/modules/home/components/vt-featured-products/product-rail/index.tsx.
• config.styles.list
  • Grid classes for product cards.
  • Default: grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36.
  • Reference: src/modules/home/components/vt-featured-products/product-rail/index.tsx.
• config.styles.productCard
  • Styles forwarded to the card component.
  • Keys:
    • badgeText: text for the badge above the thumbnail.
    • card: outer card container classes.
    • badge.container, badge.text: badge styling.
    • thumbnail.className, thumbnail.size: image styling and size (full by default).
    • subtitle, content, title, price, description: card text/layout classes.
    • reviews.container, reviews.stars, reviews.star, reviews.emptyStar, reviews.text, reviews.rating, reviews.count.
    • button.addToCart, button.moreInfo, button.isShowIcon.
  • Defaults reference: src/modules/products/components/vt-product-card/index.tsx.

Placement

• Add VtFeaturedProducts under the relevant page key to control visibility. Example:

{
  "pages": {
    "Home": [
      { "VtFeaturedProducts": { "config": { "title": "best-seller" } } }
    ],
    "Product": [
      { "VtFeaturedProducts": { "config": { "title": "best-seller" } } }
    ]
  }
}

• Rendering context supplies region and countryCode automatically. The component reads them from context and fetches collections/products as needed.
  • Reference: src/modules/home/components/vt-featured-products/index.tsx.
  • Component mapping: src/vibentec/component-map.tsx.

Notes

• Use config.title to narrow to a single collection rail; omit to render rails for all collections.
• Tweak styles.header.isShowViewAll to hide the link when not needed.
• Provide reviews.rating and reviews.count to display review stars and count.
• Buttons can be customized or hidden via styles.productCard.button.

References

• Config example: config/nam.3bear.design.json.
• Component: src/modules/home/components/vt-featured-products/index.tsx.
• Rail renderer: src/modules/home/components/vt-featured-products/product-rail/index.tsx.
• Card component: src/modules/products/components/vt-product-card/index.tsx.