Generate pickup points

In this tutorial, you’ll learn how to do the following tasks:

• Generate starter code for Shopify Functions
• Use GraphQL to define the input of your function
• Test the delivery option generator and review function logs
• Retrieve the selected pickup point for an order, using the GraphQL Admin API
• Deploy your function to the Shopify platform.

• You've created a Partner account.
• You've created a development store.

• You've created an app that uses Shopify CLI 3.49.5 or higher. If you previously installed Shopify CLI, then make sure that you're using the latest version.

• You've installed Node.js 16 or higher.

• You've installed your app on the development store.

The following requirements are specific to Rust-based development with Shopify Functions.

• You've installed Rust.

  On Windows, Rust requires the Microsoft C++ Build Tools. Make sure to select the Desktop development with C++ workload when installing the tools.

• You've installed cargo-wasi:

Use Shopify CLI to generate a pickup point delivery option generator starter function. Shopify CLI generates the function, specifies the function's inputs using an input query, and implements the function logic. Learn more about the function that's generated.

1. Navigate to your app directory:

2. Create a new pickup point delivery option generator extension with the following command:

3. Choose the language to use. For this tutorial, you should select either Rust or JavaScript.

   For handling large data payloads, consider using Rust, as it may help avoid exceeding Shopify's instruction limit, potentially preventing an InstructionCountLimitExceededError.

4. Navigate to extensions/pickup-points-generator:

To test your function, you need to make it available to your development store.

1. If you're developing a function in a language other than JavaScript or TypeScript, ensure you have configured build.watch in your function extension configuration.

2. Navigate back to your app root:

3. Use the Shopify CLI dev command to start app preview:

   You can keep the preview running as you work on your function. When you make changes to a watched file, Shopify CLI rebuilds your function and updates the function extension's drafts, so you can immediately test your changes.

4. Follow the CLI prompts to preview your app, and install it on your development store.

For pickup points to be available at checkout, your store needs to have at least one location with pickup points enabled.

1. In the Shopify admin, go to Settings > Shipping and delivery.
2. Under Shipping to pickup points, select a location.
3. Enable the option to ship to pickup points from the location.
4. Click Edit rate.
5. Under Apply rate to pickup points provided by, select your extension.
6. Click Done.
7. Click Save.

You can test your pickup point delivery option generator to ensure that it's working as expected.

1. In your development store, add a product to your cart and proceed to checkout.

   The product must be available from the configured location.

2. In checkout, select Ship to pickup point.

3. Type an address in Canada, and click Search. If you're in Canada, then you can use your location.

4. To view available pickup points, select either Map or List.

5. Select a location.

6. Click Continue to payment.

   The Payment page displays the address that you selected.

To debug your function, or view its output, you can review its logs.

1. Log in to your Partner Dashboard.
2. Navigate to Apps and select your app.
3. Click Extensions > pickup-points-generator.
4. Click on any function run to view its input, output, and any logs written to STDERR.

You can retrieve a pickup point from an order with the GraphQL Admin API.

To query the pickup point, you need to request access to protected customer data in the Partner Dashboard. Your app also needs to meet specific requirements to ensure customer privacy and security.

Add the read_orders and read_merchant_managed_fulfillment_orders access scopes to your app.

1. Stop your app if it's running.

2. In shopify.app.toml, update scopes to include the required access scopes. The following is an example:

3. Deploy your changes with the following command:

4. When prompted, release the new version.

5. Restart your server for the changes to take effect:

Request the pickup point from the GraphQL Admin API's DeliveryMethod object. You'll request data from the deliveryOptionGeneratorPickupPoint field.

1. Complete the order that you started.

2. In Shopify CLI, where your server is running, press g to open GraphiQL in your browser.

3. In GraphiQL, run the following query, with the ID of the order that you created.

   This example returns the IDs of the pickup point and the function that generated the pickup point option.

You can edit the selected pickup point option, either on the order or on the fulfillment page for a pickup order that's completed using pickup points functions.

1. In the Shopify admin, go to Orders page.

2. Click the order you just completed using pickup points.

3. Next to Pickup point address, click the pencil icon.

   In the modal that displays, edit the pickup point address.

4. After you've edited the address, click Search.

   Installed pickup points functions will run and a list of pickup points will be returned.

5. Select a new pickup point delivery option.

6. Click Done.

To edit the selected pickup point option on the fulfillment page, fulfill the order and repeat the steps above.

• Review the UX guidelines for pickup points, to seamlessly integrate your app into the checkout experience.
• Learn more about how Shopify Functions work and the benefits of using Shopify Functions.
• Learn how to use variables in your input query.
• Review the developer tools and resources to build for pickup points, including the Pickup Point Delivery Option Generator API reference.