# Shopping (React Native)

### **Shopping configurations**

**Please refer to** [Shopping configurations (React Native)](/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/shopping-configurations-react-native.md).

### Customize shopping click behaviors <a href="#customize-product-card-click-behavior" id="customize-product-card-click-behavior"></a>

Please refer to [Customize shopping click behaviors](/firework-for-developers/react-native-sdk/integration-guide-v2/customization-react-native/customize-click-behaviors-react-native.md).

### **Product Hydration**

Host app can implement `onUpdateProductDetails` callback to update product info in the client side, such as product name. We call this product hydration. For example, the host apps could fetch the latest product information from their own servers on the callback and return the lastest product info in the callback. The code snippets are:

```tsx
FireworkSDK.getInstance().shopping.onUpdateProductDetails = async (event) => {
  let products: Product[] = [];
  for (let productId of event.productIds) {
    let product: Product = { productId: productId };

    // The latest product information can be fetched from the servers of the host app.

    // Product-level properties
    product.name = 'latest-product-name';
    product.subtitle = 'latest-product-subtitle';
    // Product-level currency string (e.g. "USD", "EUR")
    product.currency = 'USD';
    product.description = 'latest-product-description';
    product.isAvailable = true;
    product.mainProductImage = 'https://example.com/product-image.jpg';
    // Set to true to hide the product price
    product.hidePrice = false;
    // The translated custom CTA title displayed to the user
    product.customCTATitleTranslation = 'Buy Now';
    // Set to true to hide the primary CTA button
    product.hidePrimaryCTA = false;
    product.customCTATarget = '_blank';
    product.customCTAUrl = 'https://example.com/product';
    // The custom CTA title key (untranslated)
    product.customCTATitle = 'Add to Cart';
    // Set to true to hide the product, or false to keep it visible
    product.hidden = true;

    // Product units (variants)
    // IMPORTANT: unitId must match the unit id from the Firework SDK.
    // The SDK matches units by unitId to determine which variant to hydrate.
    // Only matched units will be updated; unmatched ones retain their original values.
    product.units = [
      {
        unitId: 'unit-id-1',
        name: 'Variant 1',
        url: 'https://example.com/product/variant-1',
        imageUrl: 'https://example.com/variant-1-image.jpg',
        // Current selling price
        price: {
          amount: 19.99,
          currencyCode: 'USD',
        },
        // Original price before discount (used to show strikethrough price)
        originalPrice: {
          amount: 39.99,
          currencyCode: 'USD',
        },
        // Whether this variant is available for purchase
        isAvailable: true,
        // Variant options such as color, size, etc.
        options: [
          { name: 'Color', value: 'Red' },
          { name: 'Size', value: 'M' },
        ],
      },
      {
        unitId: 'unit-id-2',
        name: 'Variant 2',
        url: 'https://example.com/product/variant-2',
        imageUrl: 'https://example.com/variant-2-image.jpg',
        price: {
          amount: 24.99,
          currencyCode: 'USD',
        },
        originalPrice: {
          amount: 49.99,
          currencyCode: 'USD',
        },
        isAvailable: false,
        options: [
          { name: 'Color', value: 'Blue' },
          { name: 'Size', value: 'L' },
        ],
      },
    ];

    products.push(product);
  }

  // Return the hydrated product list to the SDK.
  // All properties are optional except productId and unitId.
  // Only set the properties you want to override;
  // unset properties will retain their original values from the SDK.
  return products;
};
```

## Reference

[VideoShopping](https://eng.firework.com/react-native-firework-sdk/v2/classes/VideoShopping.html)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/react-native-sdk/integration-guide-v2/shopping.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.