Skip to content

Commit 7d18535

Browse files
vmrochavmrocha
committed
Add pickup-point-delivery-option-generators templates
1 parent 4803ccc commit 7d18535

38 files changed

+20339
-0
lines changed

‎order-routing/javascript/pickup-point-delivery-option-generators/default/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
dist
2+
generated
3+
node_modules
4+
5+
!/src/*.js
6+
!/src/*.graphql

‎order-routing/javascript/pickup-point-delivery-option-generators/default/README.md

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
# Pickup point delivery option generators demo
2+
3+
This repository contains a function that demonstrates how to generate pickup point delivery options based on an external
4+
API accessible via an HTTP request. To simulate an external API, we have hosted a
5+
[JSON file](https://cdn.shopify.com/s/files/1/0628/3830/9033/files/pickup-points-external-api.json?v=1706549257),
6+
which contains pickup point information in the following format:
7+
8+
```json
9+
{
10+
"deliveryPoints": [
11+
{
12+
"pointId": "001",
13+
"pointName": "Toronto Store",
14+
"location": {
15+
"addressComponents": {
16+
"streetNumber": "620",
17+
"route": "King St W",
18+
"locality": "Toronto",
19+
"administrativeAreaLevel1": "ON",
20+
"postalCode": "M5V 1M6",
21+
"country": "Canada",
22+
"countryCode": "CA"
23+
},
24+
"geometry": {
25+
"location": {
26+
"lat": 43.644664618786685,
27+
"lng": -79.40066267417106
28+
}
29+
}
30+
},
31+
"openingHours": {
32+
"weekdayText": [
33+
"Monday: 9:00 AM – 9:00 PM",
34+
"Tuesday: 9:00 AM – 9:00 PM",
35+
"Wednesday: 9:00 AM – 9:00 PM",
36+
"Thursday: 9:00 AM – 9:00 PM",
37+
"Friday: 9:00 AM – 9:00 PM",
38+
"Saturday: 10:00 AM – 6:00 PM",
39+
"Sunday: Closed"
40+
]
41+
}
42+
}
43+
]
44+
}
45+
```
46+
47+
## Implementation details
48+
49+
A function can have one or more targets, each characterized by a specific input/output API. The Pickup Point Delivery
50+
Option Generators have two targets: an optional **fetch** target and a **run** target. The input/output APIs are
51+
represented as a GraphQL API within the attached [schema](./schema.graphql).
52+
53+
### Fetch target
54+
55+
The **fetch** target is responsible for generating an HTTP request to call the external API. Its input API is defined
56+
by the `Input` type in the [schema](./schema.graphql). In our demo, we are only interested in the delivery address
57+
country and latitude-longitude coordinates, which we specify within the [**fetch** target input query](./src/fetch.graphql).
58+
59+
The [**fetch** target](./src/fetch.js) reads the input and generates an output representing an HTTP request to the
60+
external API if the address country is Canada. The output API is defined by the `FunctionFetchResult` type in
61+
the [schema](./schema.graphql).
62+
63+
#### Fetch target input/output example
64+
65+
##### Input
66+
67+
```json
68+
{
69+
"allocations": [
70+
{
71+
"deliveryAddress": {
72+
"countryCode": "CA",
73+
"longitude": 43.70,
74+
"latitude": -79.42
75+
}
76+
}
77+
]
78+
}
79+
```
80+
81+
##### Output
82+
83+
```json
84+
{
85+
"request": {
86+
"method": "GET",
87+
"url": "https://cdn.shopify.com/s/files/1/0628/3830/9033/files/demo-pickup-points_3dcda620-e196-40cb-ae6b-6dac17dc81c3.json?v=1706119857&lat=-79.42&lon=43.7",
88+
"headers": [
89+
{
90+
"name": "Accept",
91+
"value": "application/json; charset=utf-8"
92+
}
93+
],
94+
"body": null,
95+
"policy": {
96+
"read_timeout_ms": 500
97+
}
98+
}
99+
}
100+
```
101+
102+
### Run target
103+
104+
The **run** target is responsible for generating the pickup point delivery options. Its input API is defined by
105+
the `Input` type in the [schema](./schema.graphql). In our demo, we are only interested in the external API HTTP
106+
response status and body, which we specify within the [**run** target input query](./src/run.graphql).
107+
108+
The [**run** target](./src/run.js) parses the response body and produces the pickup point data in the format
109+
specified by the `FunctionRunResult` type in the [schema](./schema.graphql).
110+
111+
#### Run target input/output example
112+
113+
##### Input
114+
115+
```json
116+
{
117+
"fetchResult": {
118+
"status": 200,
119+
"body": "{\"deliveryPoints\":[{\"pointId\":\"001\",\"pointName\":\"Toronto Store\",\"location\":{\"addressComponents\":{\"streetNumber\":\"620\",\"route\":\"King St W\",\"locality\":\"Toronto\",\"administrativeAreaLevel1\":\"ON\",\"postalCode\":\"M5V 1M6\",\"country\":\"Canada\",\"countryCode\":\"CA\"},\"geometry\":{\"location\":{\"lat\":43.644664618786685,\"lng\":-79.40066267417106}}},\"openingHours\":{\"weekdayText\":[\"Monday: 9:00 AM – 9:00 PM\",\"Tuesday: 9:00 AM – 9:00 PM\",\"Wednesday: 9:00 AM – 9:00 PM\",\"Thursday: 9:00 AM – 9:00 PM\",\"Friday: 9:00 AM – 9:00 PM\",\"Saturday: 10:00 AM – 6:00 PM\",\"Sunday: Closed\"]}}]}"
120+
}
121+
}
122+
```
123+
124+
##### Output
125+
126+
```json
127+
{
128+
"operations": [
129+
{
130+
"add": {
131+
"cost": null,
132+
"pickup_point": {
133+
"external_id": "001",
134+
"name": "Toronto Store",
135+
"provider": {
136+
"name": "Shopify Demo",
137+
"logo_url": "https://cdn.shopify.com/s/files/1/0628/3830/9033/files/shopify_icon_146101.png?v=1706120545"
138+
},
139+
"address": {
140+
"address1": "620 King St W",
141+
"address2": null,
142+
"city": "Toronto",
143+
"country": "Canada",
144+
"country_code": "CA",
145+
"latitude": 43.644664618786685,
146+
"longitude": -79.40066267417106,
147+
"phone": null,
148+
"province": "ON",
149+
"province_code": null,
150+
"zip": "M5V 1M6"
151+
},
152+
"business_hours": [
153+
{
154+
"day": "MONDAY",
155+
"periods": [
156+
{
157+
"opening_time": "09:00:00",
158+
"closing_time": "21:00:00"
159+
}
160+
]
161+
},
162+
{
163+
"day": "TUESDAY",
164+
"periods": [
165+
{
166+
"opening_time": "09:00:00",
167+
"closing_time": "21:00:00"
168+
}
169+
]
170+
},
171+
{
172+
"day": "WEDNESDAY",
173+
"periods": [
174+
{
175+
"opening_time": "09:00:00",
176+
"closing_time": "21:00:00"
177+
}
178+
]
179+
},
180+
{
181+
"day": "THURSDAY",
182+
"periods": [
183+
{
184+
"opening_time": "09:00:00",
185+
"closing_time": "21:00:00"
186+
}
187+
]
188+
},
189+
{
190+
"day": "FRIDAY",
191+
"periods": [
192+
{
193+
"opening_time": "09:00:00",
194+
"closing_time": "21:00:00"
195+
}
196+
]
197+
},
198+
{
199+
"day": "SATURDAY",
200+
"periods": [
201+
{
202+
"opening_time": "10:00:00",
203+
"closing_time": "18:00:00"
204+
}
205+
]
206+
},
207+
{
208+
"day": "SUNDAY",
209+
"periods": []
210+
}
211+
]
212+
}
213+
}
214+
}
215+
]
216+
}
217+
```
218+
219+
## Usage
220+
221+
### Installing dependencies
222+
223+
1. Install the necessary dependencies by running the following command in your terminal:
224+
225+
```bash
226+
yarn install
227+
```
228+
229+
### Running tests
230+
231+
1. Execute the tests by running the following command in your terminal:
232+
233+
```bash
234+
yarn test
235+
```
236+
237+
### Deploying the function to the app
238+
239+
1. Navigate to the root directory of your app. Deploy the function by running the following command
240+
in your terminal:
241+
242+
```bash
243+
yarn deploy
244+
```
245+
246+
### Using the function in a store
247+
248+
1. To activate the function, navigate to the specific location pickups points settings within the store admin.
249+
Navigate to: `Settings > Shipping and delivery > Shipping to pickup points > (pick a location) > Pickup point rates > Edit rate`.
250+
Here, select the function and click on 'Done', then 'Save'.
251+
252+
2. To use the function, initiate a checkout process with a product available from the configured location.
253+
Choose 'Ship to Pickup Point' under the 'Delivery Method' section. Enter an address in Canada and click on 'Search'.
254+
A list of pickup points generated using this function should now be visible.

‎order-routing/javascript/pickup-point-delivery-option-generators/default/package.json.liquid

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "{{name | replace: " ", "-" | downcase}}",
3+
"version": "0.0.1",
4+
"license": "UNLICENSED",
5+
"scripts": {
6+
"shopify": "npm exec -- shopify",
7+
"typegen": "npm exec -- shopify app function typegen",
8+
"build": "npm exec -- shopify app function build",
9+
"preview": "npm exec -- shopify app function run",
10+
"test": "vitest"
11+
},
12+
"codegen": {
13+
"schema": "schema.graphql",
14+
"documents": "src/*.graphql",
15+
"generates": {
16+
"./generated/api.ts": {
17+
"plugins": [
18+
"typescript",
19+
"typescript-operations"
20+
]
21+
}
22+
},
23+
"config": {
24+
"omitOperationSuffix": true
25+
}
26+
},
27+
"devDependencies": {
28+
"vitest": "^0.29.8"
29+
},
30+
"dependencies": {
31+
"@shopify/shopify_function": "0.1.0",
32+
"javy": "0.1.1"
33+
}
34+
}

0 commit comments

Comments
 (0)