使用Alokai构建Vue Storefront移动端商品列表与详情页-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01158/article/details/148415079

使用Alokai构建Vue Storefront移动端商品列表与详情页

前言

在移动电商应用开发中，商品列表页(PLP)和商品详情页(PDP)是最核心的两个页面。本文将详细介绍如何使用Alokai框架为Vue Storefront移动端应用构建这两个关键页面。

环境准备

在开始之前，请确保已经完成以下准备工作：

已安装必要的React Native开发环境
已初始化Alokai React Native项目
已配置好与SAP Commerce Cloud后端的连接

商品列表页(PLP)开发

基础结构搭建

首先我们需要创建一个基本的商品列表页面框架：

import { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import { Product } from '@vsf-enterprise/sap-commerce-webservices-sdk';

export default function ProductListingPage() {
  const [products, setProducts] = useState<Product[] | undefined>(undefined);

  useEffect(() => {
    async function getProducts() {
      const { products } = await sdk.sapcc.searchProduct({});
      setProducts(products);
    }
    getProducts();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>商品列表</Text>
      <FlatList
        data={products}
        keyExtractor={(item) => item.code as string}
        renderItem={({ item }) => (
          <Text>{item.name}</Text>
        )}
      />
    </View>
  );
}

这段代码实现了：

使用useState管理商品数据状态
在组件挂载时通过useEffect获取商品数据
使用FlatList组件渲染商品列表

商品卡片组件优化

基础列表显示效果较差，我们需要创建一个专门的商品卡片组件：

import { Product } from "@vsf-enterprise/sap-commerce-webservices-sdk";
import { transformImageUrl } from "@/utils/transformImage";

export default function ProductCard({ product }: { product: Product }) {
  return (
    <Link href={{
      pathname: "Product Details/[product_code]",
      params: { product_code: product.code },
    }}>
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <Image 
            source={{ uri: transformImageUrl(product.firstVariantImage!) }} 
            style={styles.image} 
          />
        </View>
        <View style={styles.detailsContainer}>
          <Text style={styles.title}>{product.name}</Text>
          <Text style={styles.price}>{product.price?.formattedValue}</Text>
          <Pressable style={styles.addToCartButton}>
            <FontAwesome name="cart-plus" size={24} color="#fff" />
            <Text style={styles.addToCartButtonText}>加入购物车</Text>
          </Pressable>
        </View>
      </View>
    </Link>
  );
}

这个组件提供了：

商品图片展示
商品名称和价格显示
加入购物车按钮
点击跳转到商品详情页的功能

列表页性能优化

对于商品列表页，我们需要特别注意性能优化：

图片懒加载：使用React Native的Image组件配合FlatList的懒加载特性
内存管理：对于长列表，使用FlatList的windowSize属性控制渲染范围
缓存策略：考虑实现本地缓存机制减少网络请求

商品详情页(PDP)开发

动态路由配置

商品详情页需要支持动态路由，我们可以这样配置：

import { useLocalSearchParams } from "expo-router";

export default function ProductDetails() {
  const { product_code } = useLocalSearchParams();
  // 其他代码...
}

商品数据获取

在详情页中获取特定商品数据：

const [product, setProduct] = useState<Product | null>(null);

useEffect(() => {
  async function fetchProduct() {
    const data = await sdk.sapcc.getProduct({ id: product_code as string });
    setProduct(data);
  }
  fetchProduct();
}, []);

图片轮播实现

商品详情页通常需要展示多张商品图片，我们可以使用轮播组件：

import Carousel from "react-native-reanimated-carousel";

const width = Dimensions.get("window").width;

// 在组件中
<Carousel
  loop
  pagingEnabled
  snapEnabled
  style={styles.imageContainer}
  width={width * 0.95}
  height={width * 0.8}
  data={galleryImages}
  renderItem={({ item }) => (
    <Image
      source={{ uri: item }}
      style={{ width: width * 0.95, height: width * 0.8 }}
    />
  )}
/>

详情页完整布局

完整的商品详情页应该包含以下部分：

图片展示区：轮播展示商品图片
基本信息区：商品名称、价格、评分等
商品描述区：详细商品描述
规格参数区：商品规格参数
操作按钮区：加入购物车、立即购买等

<ScrollView style={styles.page}>
  {/* 图片轮播区 */}
  <View style={styles.imageContainer}>
    <Carousel ... />
  </View>
  
  {/* 基本信息区 */}
  <View style={styles.infoContainer}>
    <Text style={styles.name}>{product.name}</Text>
    <Text style={styles.price}>{product.price?.formattedValue}</Text>
    {/* 其他信息... */}
  </View>
  
  {/* 商品描述区 */}
  <View style={styles.descriptionContainer}>
    <Text style={styles.sectionTitle}>商品描述</Text>
    <Text style={styles.description}>{product.description}</Text>
  </View>
  
  {/* 操作按钮区 */}
  <View style={styles.actionContainer}>
    <Pressable style={styles.addToCartButton}>
      <Text style={styles.buttonText}>加入购物车</Text>
    </Pressable>
    <Pressable style={styles.buyNowButton}>
      <Text style={styles.buttonText}>立即购买</Text>
    </Pressable>
  </View>
</ScrollView>