Create the UI for a pre-order and Try Before You Buy (TBYB) app
Previously, you set up the foundation of your app. You're now ready to add app components that can help merchants create their pre-orders.
On the app page, you want to add functionality that enables merchants to do the following tasks:
- Set the pre-order name
- Configure the delivery, inventory, and billing policies for the pre-order
- Select products that will have the pre-order
You'll use Polaris and App Bridge React to build the user interface. You'll use GraphQL Admin API mutations and queries to create and retrieve pre-orders.
At the end of this tutorial, you'll have an understanding on how to create pre-orders. This app will be simple, but you’ll learn where to find resources to build more complex features on your own.
What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial, you'll learn how to do the following tasks:
- Add new routes to your app's server that call the Shopify Admin API
- Add UI to create a pre-order
- Test your app on a development store
This tutorial is not intended to give you a full example on how to build a pre-order application, but more a reference starter.
Requirements
Anchor link to section titled "Requirements"- Complete the Getting started tutorial to set up the foundation of your app.
- Familiarize yourself with selling plans and pre-orders and try before you buy.
Step 1: Create the pre-order creation route
Anchor link to section titled "Step 1: Create the pre-order creation route"Create a file app.create.jsx under app/routes. This file will create the route /app/create that will let you create a pre-order.
Step 2: Create app components
Anchor link to section titled "Step 2: Create app components"Create the following app components:
Create the name component
Anchor link to section titled "Create the name component"Create a component that enables merchants to set the pre-order name. The name component includes the following Polaris components:
In your app/routes/app.create.jsx file, add the following code:
Create the checkout charge component
Anchor link to section titled "Create the checkout charge component"When merchants create a pre-order, they can decide the initial charge when customers check out. The type of charge can be set with a PERCENTAGE or PRICE type. Learn more about selling plan checkout charge types and selling plan checkout charge values.
The checkout charge component includes the following Polaris components:
In the app/components folder, create the file checkoutCharge.jsx.
Create the product picker component
Anchor link to section titled "Create the product picker component"Create a component that enables merchants to select products that will have the pre-order. The product selection component includes the Resource Picker API.
In the app/components folder, create the file ProductPicker.jsx.
Step 3: Action to create the pre-order
Anchor link to section titled "Step 3: Action to create the pre-order"The next step is to create the action that will make it possible to create the pre-order with all the information we are gathering with the previous created components. Add the action inside your app/routes/app.create.jsx file. The following action is currently showing a working example on how to use the sellingPlanGroupCreate mutation to create a pre-order, this example can also be updated to create a Try before you buy.
Step 4: Complete create page
Anchor link to section titled "Step 4: Complete create page"The following code illustrate the complete code for the app/routes/app.create.jsx file. We use the Toast API to add feedback when a merchant is creating a new pre-order.
The code that you just created is only a first step to create a complete pre-order or Try before you buy app. You can use the following API object to improve your application:
- SellingPlanCheckoutCharge that will let you decide how customers are charged with pre-order and TBYB.
- SellingPlanFixedBillingPolicy that will let you decide how customers will handle the remain balance customer will need to pay for a pre-order and TBYB
- SellingPlanFixedDeliveryPolicy that will let you decide how fulfillment will work with you pre-order and TBYB.
- SellingPlanInventoryPolicy that will let you decide how the inventory will update with you pre-order and TBYB.