电子商务

简介

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

在线预览链接

模板代码链接

文档

布局结构

模板的核心分为两个主要组件：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...
  ]
}

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