Truefit Mobile React Native SDK

Installation

npx expo install truefit-consumer-app-sdk-react-native

If you do not already have expo installed, make sure to install expo in your project.

Usage

TfWidget

Import TrueFit Component where you want to place the widget in the React Native App. Make sure to pass the storeKey and styleId to the component.

import { View } from "react-native";
// 1. Import the TfWidget component from the package
import TfWidget from truefit-consumer-app-sdk-react-native;

export default function YourComponent() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      // 2. Add the TfWidget component where you want the widget to show.
      <TfWidget styleId={*style id*} storeKey={*store key*} locale={* locale *} userId={* store user id *}></TfWidget>
    </View>
  );
}

TfWidget Attributes

| Attribute | Type | Required/Optional | Description | | --- | --- | --- | --- | | storeKey | String | required | Store key for the deployment | | styleId | String | required | The ID of the style to provide a recommendation for. This must match the ProductID supplied in the Product Catalog feed. | | locale | String | required | Identifier specifying the copy and default measurements to be rendered for the widget and modal. This is only required if we are implementing on multiple locales. Use an ISO 639 language code followed by an ISO 3166 country code, e.g. en_US. | | userId | String | required | The identifier for the shopper’s account with the retailer. This is used to link their True Fit account to their store account. This ID is also used to link to our True 360 product, which seamlessly integrates client records into your CRM or email marketing system, it's important this ID can link back to the associated record in your system. For example: Shopify: "customer.id", or Adobe: "id"Please Note:If the userid is passed, it must be passed consistently throughout a user's shopping session. If it is passed on some pages and omitted on others, this can cause the user to be logged out of their True Fit account inadvertently. The attribute should be passed as an empty string for guest shoppers who are not assigned an ID from your CRM. |

TfRegisterWidget

Import TrueFit Register Widget Component where you want to place the register widget in the React Native App. It accepts a children attribute to allow custom react element which is clickable to be rendered for the widget element. Make sure to pass the children and storeKey to the component.

import { View } from "react-native";
// 1. Import the TfRegisterWidget component from the package
import { TfRegisterWidget } from truefit-consumer-app-sdk-react-native;

export default function YourComponent() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      // 2. Add the TfRegisterWidget component where you want the banner registration widget to show.
      <TfRegisterWidget storeKey={*store key*} locale={* locale *} userId={* store user id *}>
         <Text>Login/Register</Text>
      </TfWidget>
    </View>
  );
}

TfRegisterWidget Attributes

| Attribute | Type | Required/Optional | Description | | --- | --- | --- | --- | | storeKey | String | required | Store key for the deployment | | locale | String | required | Identifier specifying the copy and default measurements to be rendered for the widget and modal. This is only required if we are implementing on multiple locales. Use an ISO 639 language code followed by an ISO 3166 country code, e.g. en_US. | | userId | String | required | The identifier for the shopper’s account with the retailer. This is used to link their True Fit account to their store account. This ID is also used to link to our True 360 product, which seamlessly integrates client records into your CRM or email marketing system, it's important this ID can link back to the associated record in your system. For example: Shopify: "customer.id", or Adobe: "id"Please Note:If the userid is passed, it must be passed consistently throughout a user's shopping session. If it is passed on some pages and omitted on others, this can cause the user to be logged out of their True Fit account inadvertently. The attribute should be passed as an empty string for guest shoppers who are not assigned an ID from your CRM. |

trackOrderApi

Use the trackOrder API to track orders that were purchased and allow truefit to learn from these orders.

import { Text } from "react-native";
// 1. Import the trackOrder method from the package
import { trackOrder } from truefit-consumer-app-sdk-react-native;

export default function YourComponent() {
  trackOrder(*trackOrderParams object*).then(resp => console.log(resp));
  return <Text>Your Component</Text>;
}

fetchToken

Use the fetchToken API if invoking any True Fit REST API which requires token to be passed in the header

import { Text } from "react-native";
// 1. Import the fetchToken method from the package
import { fetchToken } from truefit-consumer-app-sdk-react-native;

export default function YourComponent() {
  const token = await fetchToken({*store key*})
  //Use token to call True Fit's API
  return <Text>Your Component</Text>;
}

TrackOrderParams

| Attribute | Type | Required/Optional | Description | | --- | --- | --- | --- | | storeKey | String | required | Store key for the deployment | | orderId | String | required | The identifier for that order. | | products | Array | required | An array of product objects. | | locale | String | required | Identifier specifying the copy and default measurements to be rendered for the widget and modal. This is only required if we are implementing on multiple locales. Use an ISO 639 language code followed by an ISO 3166 country code, e.g. en_US. | | userId | String | required | The identifier for the shopper’s account with the retailer. This is used to link their True Fit account to their store account. This ID is also used to link to our True 360 product, which seamlessly integrates client records into your CRM or email marketing system, it's important this ID can link back to the associated record in your system. For example: Shopify: "customer.id", or Adobe: "id"Please Note:If the userid is passed, it must be passed consistently throughout a user's shopping session. If it is passed on some pages and omitted on others, this can cause the user to be logged out of their True Fit account inadvertently. The attribute should be passed as an empty string for guest shoppers who are not assigned an ID from your CRM. |

TrackOrderProduct

The products array in TrackOrderParams should contain products in this format.

| Attribute | Type | Required/Optional | Description | | --- | --- | --- | --- | | productId | String | required | The ID of the style to provide a recommendation for. This must match the ProductID supplied in the Product Catalog feed. | | quantity | Int | required | Number of items purchased. | | price | Double | required | Unit price paid for the item. If it is on sale, this should reflect the final price paid by the shopper. | | currency | String | required | Currency of the unit price. | | colorId | String | required | The ID for that color. | | size | String | required | Size purchased. | | sku | String | required | UPC or EAN or SKU for the product. | | salesGroup | String? | optional | Sales group for the product (used for custom reporting if applicable). |