Implement Bestseller section #14

New Issue

namds29 · 2025-12-17T09:36:03Z

namds29 commented

2025-12-17 09:36:03 +00:00

No description provided.

namds29 added this to the Storefront Shop project 2025-12-17 09:36:12 +00:00

namds29 commented

2025-12-19 03:08:47 +00:00

Hi @yen.nguyen @Stephan , about this section best seller, it's maybe should call the api to fetch the list best-seller products. The default medusa only have list collections product in homepage and didnt have this section yet. Should i create a UI for this section and mock data first then we do api later?

![image](/attachments/bdbd21ba-907c-4d73-ac1d-5fca22c58c66) ![image](/attachments/c3eadc64-9630-4d19-92dd-c0abeb3dd8ce) Hi @yen.nguyen @Stephan , about this section best seller, it's maybe should call the api to fetch the list best-seller products. The default medusa only have list collections product in homepage and didnt have this section yet. Should i create a UI for this section and mock data first then we do api later?

image.png

434 KiB

image.png

196 KiB

namds29 commented

2025-12-29 04:18:55 +00:00

![image](/attachments/3c11be10-ab3b-4425-add2-171028fa643f) ![image](/attachments/f5f71633-0e8a-417a-adc3-3758e9f2a1c8) ![image](/attachments/12a6245c-a69c-4ea3-98ed-0a6ba49dc775) ![image](/attachments/1661be3d-bc74-4f34-beb5-a1eecc2ce895)

image.png

462 KiB

image.png

853 KiB

image.png

603 KiB

image.png

420 KiB

namds29 commented

2025-12-29 04:24:29 +00:00

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:96–117:

{
  "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:96–117.
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.

# 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:96–117`: ```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: ```json { "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:96–117`. - 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`.

Sign in to join this conversation.