电子商务

介绍

电子商务平台展示了一种动态和交互式的方式来展示产品、产品详细信息以及类似或经常一起购买的商品。此模板旨在介绍和解释推荐引擎用例如何在零售行业中得到利用。

链接到实时预览

链接到模板代码

文档

布局架构

模板的核心分为两个主要组件：Home.tsx 和 Content.tsx。Home 组件作为入口点，渲染页眉和内容区域，内容区域包括详细的产品信息、类似产品和捆绑优惠。

布局设计既直观又视觉吸引人，确保用户可以轻松浏览产品并无缝访问详细说明。

代码片段

以下是一个展示使用 @tanstack/react-table 用于产品规格的片段

const columns = [
  columnHelper.accessor('CPU', {
    cell: (info) => info.getValue(),
    footer: (info) => info.column.id,
  }),
  // Additional columns...
];

const table = useReactTable({
  data,
  columns,
  enableSorting: true,
  getSortedRowModel: getSortedRowModel(),
  getCoreRowModel: getCoreRowModel(),
});

此片段演示了特色产品的渲染

<div className='flex flex-row items-start p-4 m-2'>
  <img src={productImg1} alt='Product 1' className='w-[40%] rounded-md' />
  <div className='px-5 flex flex-col'>
    <Typography variant='body-medium'>{products[0].desc1}</Typography>
    <div className='n-w-full n-bg-light-neutral-text-weakest md:inline-block hidden'>
      <DataGrid
        // DataGrid properties...
      />
    </div>
    <div className='md:flex flex-row gap-2.5 hidden'>
      <Tag>DealOfTheWeek</Tag>
      // Additional tags...
    </div>
  </div>
</div>

此片段演示了类似产品的渲染

<div>
  <Typography variant='h2'>Similar products</Typography>
  <div className='flex flex-col md:flex-row gap-2.5 py-2.5'>
    {[productImg2, productImg3, productImg4].map((img, index) => (
      <Widget header={products[index + 1].name} isElevated={true} key={index} className='mx-auto max-w-[80%]'>
        <div className='flex flex-col gap-2.5 md:flex-row'>
          <img src={img} alt={`Product ${index + 2}`} className='max-w-[40%] self-center' />
          <div className='p-2.5 flex flex-col gap-2.5'>
            <div>{products[index + 1].desc1}</div>
            <Typography variant='body-large'>Price: £{products[index + 1].price}</Typography>
            <Button>Add to cart</Button>
          </div>
        </div>
      </Widget>
    ))}
  </div>
</div>

此片段演示了经常一起购买的产品的渲染

<div>
  <Typography variant='h2'>Frequently bought together</Typography>
  <div className='flex flex-col items-start md:flex-row gap-2.5 py-2.5'>
    {[productImg5, productImg6].map((img, index) => (
      <Widget className='md:max-w-[30%]' header='' isElevated={true} key={index}>
        <div className='flex flex-row gap-2.5 md:flex-row'>
          <img src={productImg1} alt='Product 1' className='max-w-[40%]' />
          <Typography variant='h6' className='self-center'>
            <PlusCircleIconOutline className='n-w-6 n-h-6' />
          </Typography>
          <img src={img} alt={`Product ${index + 2}`} className='max-w-[40%]' />
        </div>
        <Typography variant='h4' style={{ textAlignLast: 'center' }}>
          Package deal
        </Typography>
        <Typography variant='body-medium'>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, quasi? Pariatur ipsam voluptatum,
          quas labore amet dolor dolore, aspernatur tempora quasi ullam ad, autem distinctio doloribus! Iusto
          rem iste accusamus.
        </Typography>
      </Widget>
    ))}
  </div>
</div>

数据集/产品目录

应用程序最初使用名为 products.json 的静态 JSON 数据集作为产品目录。此数据集包含产品对象的数组，每个对象都包含详细的信息，例如名称、价格、描述和规格。

模板支持与动态数据源的轻松集成。虽然这是一个静态模板，但您可以进一步扩展它以实现实时库存更新、用户评论、个性化推荐等等。

数据表示

{
  "listProducts": [
    {
      "id": 1,
      "name": "Product 1",
      "price": 999.99,
      "desc1": "Lorem ipsum dolor sit amet...",
      // Additional product details...
    },
    // Additional products...
  ]
}

此模板为在零售行业中开发全面的推荐引擎提供了基础。