触发加购弹窗的按钮改为使用产品id获取产品信息

src/components/catalog/product/ProductCard.tsx

@@ -11,6 +11,7 @@ type ProductCardProps = {
   specialPrice?: string;
   imageUrl: string;
   product: {
+    _id: number;
     urlKey: string;
     name: string;
     id: string;
@@ -81,7 +82,7 @@ export const ProductCard: FC<ProductCardProps> = ({
               currencyCode={currency}
             />
           )}
-          <OpenAddToCartModalButton productUrlKey={product.urlKey} />
+          <OpenAddToCartModalButton productId={product._id} />
 
         </div>
       </div>

src/components/catalog/type.ts

@@ -195,6 +195,7 @@ export interface SearchProductsResponse {
 
 export interface ProductSectionNode {
   id: string;
+  _id: number;
   sku: string;
   type: string;
   urlKey?: string;

src/components/common/AddToCartModal/OpenAddToCartModalButton.tsx

@@ -2,32 +2,34 @@
 import { FC, ReactNode } from "react";
 import { useAppDispatch } from "@/store/hooks";
 import { openAddToCartDialog } from "@/store/slices/addToCartDialogSlice";
-import { GET_PRODUCT_BY_URL_KEY } from "@/graphql";
+import { GET_PRODUCT_BY_ID } from "@/graphql";
 import { useLazyQuery } from "@apollo/client/react";
 import { LoadingSpinner } from "@components/common/LoadingSpinner";
 import ShoppingCartIcon from "@components/common/icons/ShoppingCartIcon";
 import { useCustomToast } from "@utils/hooks/useToast";
 import { handleApolloBusinessError } from "@/lib/ApolloErrorHandler";
 interface OpenAddToCartModalButtonProps {
-  productUrlKey: string;
+  // productUrlKey?: string;
+  productId: number;
   icon?: ReactNode;
 }
 export const OpenAddToCartModalButton: FC<OpenAddToCartModalButtonProps> = ({
-  productUrlKey,
+  // productUrlKey,
+  productId,
   icon,
 }) => {
   const dispatch = useAppDispatch();
   // const [loading, setLoading] = useState(false);
   const { showToast } = useCustomToast();
 
-  const [getContent, { loading }] = useLazyQuery(GET_PRODUCT_BY_URL_KEY, {
+  const [getContent, { loading }] = useLazyQuery(GET_PRODUCT_BY_ID, {
     fetchPolicy: "network-only",
   });
   const openDialog = async () => {
     if (loading) return;
     try {
       const result = await getContent({
-        variables: { urlKey: productUrlKey },
+        variables: { id: productId },
       });
 
       console.log("product ----- ", result);

src/components/home/ProductCarouselTheme.tsx

@@ -34,6 +34,7 @@ const Theme = ({ title, description, products }: ProductsSectionProps) => {
                 imageUrl={imageUrl || ""}
                 price={String(ProductPrice)}
                 product={{
+                  _id: item._id,
                   urlKey: item.urlKey || item.sku,
                   name: item?.name || item.sku,
                   id: item.id,

src/graphql/catalog/fragments/ProductCore.ts

@@ -3,6 +3,7 @@ import { gql } from "@apollo/client";
 export const PRODUCT_CORE_FRAGMENT = gql`
   fragment ProductCore on Product {
     id
+    _id
     sku
     type
     name

src/graphql/catalog/queries/GetProductById.ts

@@ -0,0 +1,15 @@
+import { gql,TypedDocumentNode } from "@apollo/client";
+import { PRODUCT_DETAILED_FRAGMENT } from "../fragments";
+import { SingleProductResponse } from "@/components/catalog/type";
+/**
+ * Fetch a single product by id with all details
+ */
+export const GET_PRODUCT_BY_ID: TypedDocumentNode<SingleProductResponse> = gql`
+  ${PRODUCT_DETAILED_FRAGMENT}
+
+  query GetProductById($id: ID!) {
+    product(id: $id) {
+      ...ProductDetailed
+    }
+  }
+`;

src/graphql/catalog/queries/index.ts

@@ -10,3 +10,4 @@ export { GET_FILTER_PRODUCTS } from "./GetFilterProducts";
 export { GET_TREE_CATEGORIES } from "./GetTreeCategories";
 export { SEARCH_PRODUCTS } from "./SearchProducts";
 export { GET_CATEHORY_BY_ID } from "./GetCategoryById";
+export { GET_PRODUCT_BY_ID } from "./GetProductById";

src/types/types.ts

@@ -397,6 +397,7 @@ export type BagistoProductInfo = {
   metaDescription: string;
   price: ProductPrice;
   id: string;
+  _id: number;
   handle: string;
   availableForSale: boolean;
   title: string;