Vue Storefront项目扩展开发指南：实现社交产品图片功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00267/article/details/148415192

Vue Storefront项目扩展开发指南：实现社交产品图片功能

vue-storefront 项目地址: https://gitcode.com/gh_mirrors/vue/vue-storefront

前言

在电商平台开发中，我们经常需要扩展基础功能以满足特定业务需求。本文将详细介绍如何在Vue Storefront项目中添加自定义扩展，实现一个展示社交平台产品图片的功能模块。

技术背景

Vue Storefront采用统一数据模型(UDM)来处理电商数据，但实际业务中我们经常需要：

添加标准模型中没有的数据字段
组合多个数据源的信息
创建全新的数据结构

针对这些需求，Vue Storefront提供了灵活的扩展机制。本文将演示如何通过扩展机制实现"社交产品图片"功能，该功能将展示用户在社交平台上分享的产品相关图片。

实现步骤

第一步：创建API方法

首先我们需要在中间件层创建新的API端点：

在/api/socialImagesExtension目录下创建类型定义文件：

// /api/socialImagesExtension/types.ts
export interface SocialImagesArgs {
  seed: string;  // 使用产品ID作为种子参数
}

export interface SocialImagesResponse {
  id: string;
  author: string;
  width: number;
  height: number;
  url: string;
  download_url: string;
}

实现API方法逻辑：

// /api/socialImagesExtension/getImages.ts
import { SapccIntegrationContext } from "@vsf-enterprise/sapcc-api";
import { SocialImagesArgs, SocialImagesResponse } from "./types";

export async function getSocialImages(
  context: SapccIntegrationContext,
  args: SocialImagesArgs,
): Promise<SocialImagesResponse> {
  // 使用Lorem Picsum API模拟社交图片数据
  const image: SocialImagesResponse = await (
    await fetch(`https://picsum.photos/seed/${args.seed}/info`)
  ).json();
  return image;
}

第二步：创建中间件扩展

// integrations/sapcc/extensions/socialImagesExtension.ts
import type { ApiClientExtension } from "@vue-storefront/middleware";
import { getSocialImages } from "../../../api/socialImagesExtension";

export const socialImagesExtension = {
  name: "socialImagesExtension",
  extendApiMethods: {
    getSocialImages,  // 暴露自定义API方法
  },
} satisfies ApiClientExtension;

导出扩展并更新类型定义：

// integrations/sapcc/types.ts
import { WithoutContext } from "@vue-storefront/middleware";
import { socialImagesExtension } from "./extensions";

export type SocialImagesExtension = typeof socialImagesExtension;
export type SocialImagesExtensionEndpoints = WithoutContext<SocialImagesExtension["extendApiMethods"]>;

第三步：配置集成

在集成配置中注册扩展：

// integrations/sapcc/config.ts
import { socialImagesExtension } from "./extensions";

export const config = {
  // ...
  extensions: (extensions: ApiClientExtension[]) => [
    ...extensions,
    unifiedApiExtension,
    socialImagesExtension,  // 添加自定义扩展
  ],
} satisfies Integration<MiddlewareConfig>;

第四步：配置SDK

更新SDK配置以包含新扩展：

// sdk/sdk.config.ts
import type { SocialImagesExtensionEndpoints } from 'storefront-middleware/types';

export const { getSdk } = createSdk(options, ({ buildModule, middlewareModule }) => ({
  socialImagesExtension: buildModule(middlewareModule<SocialImagesExtensionEndpoints>, {
    apiUrl: `${middlewareUrl}/commerce`,
    defaultRequestConfig: {
      headers: getRequestHeaders(),
    },
  }),
}));

第五步：实现前端组件

创建自定义Hook获取数据：

// hooks/useSocialImages/useSocialImages.ts
import { useQuery } from '@tanstack/react-query';
import { useSdk } from '~/sdk';

export function useSocialImages(params: SocialImagesArgs) {
  const sdk = useSdk();

  return useQuery({
    queryKey: ['social-image', params.seed],
    queryFn: () => sdk.socialImagesExtension.getSocialImages(params),
    refetchOnMount: false,
  });
}

实现展示组件：

// components/SocialImages/SocialImages.tsx
import Image from 'next/image';
import { useSocialImages } from '~/hooks/useSocialImages';

export function SocialImages({ productId }: { productId: string }) {
  const { data } = useSocialImages({ seed: productId });

  return (
    <div className="px-4">
      <Image
        alt="社交平台产品图片"
        src={data?.download_url ?? ''}
        width={data?.width}
        height={data?.width}
        unoptimized
      />
      <p>图片作者: {data?.author}</p>
    </div>
  );
}

将组件集成到产品详情页：

// components/ProductAccordion/ProductAccordion.tsx
import { SocialImages } from '~/components/SocialImages';

// 在AccordionItem中添加
<AccordionItem
  label={<h2 className="font-semibold">社交图片</h2>}
  open={isOpened('socialImages')}
  onToggle={() => toggleItem('socialImages')}
>
  <SocialImages productId={productId} />
</AccordionItem>