A library of discounts-focused React components to help in building Shopify apps.
The @shopify/discount-app-components package is a set of stateless discount components designed to assist third-party app developers in creating discounts apps powered by AppBridge. It provides a range of locale-specific components that require the inclusion of a locale and ianaTimezone when using the discounts AppProvider. The package also requires wrapping the app in both a Polaris AppProvider and an AppBridge AppProvider. The package includes instructions for installation, usage, and troubleshooting.
discounts AppProviderTo install the @shopify/discount-app-components package, follow these steps:
Open the terminal and run the following command using npm:
npm install @shopify/discount-app-components
If you prefer Yarn, use the following command instead:
yarn add @shopify/discount-app-components
The project has peerDependencies of @shopify/app-bridge, @shopify/app-bridge-react, and @shopify/polaris which must also be installed in your app. Make sure to install them as well.
Import the CSS for the package and Polaris directly into your project. If your asset packager supports it, you can import them using the following code:
import '@shopify/discount-app-components/dist/styles.css';
import '@shopify/polaris/dist/styles.css';
Alternatively, you can include the CSS in your HTML. It is recommended to copy the styles file into your own project, but you may also use it directly.
Since this library contains locale-specific components, you will need to pass a locale and ianaTimezone to the discounts AppProvider. Make sure to wrap your app in both a Polaris AppProvider and an AppBridge AppProvider. Here is an example of an app root:
import { AppProvider as PolarisProvider } from '@shopify/polaris';
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react';
import { Provider as DiscountsProvider } from '@shopify/discount-app-components';
// ...
function AppRoot() {
return (
<PolarisProvider>
<AppBridgeProvider>
<DiscountsProvider ianaTimezone="your_timezone" locale="your_locale">
{/* Your app components here */}
</DiscountsProvider>
</AppBridgeProvider>
</PolarisProvider>
);
}
The @shopify/discount-app-components package provides third-party app developers with a set of stateless discount components for creating discounts apps powered by AppBridge. The package includes locale-specific components that require specific parameters for the discounts AppProvider and the wrapping of the app in both a Polaris AppProvider and an AppBridge AppProvider. The installation guide provides instructions for installing the package and its dependencies, as well as importing the necessary CSS. Developers can also find troubleshooting tips for common issues.