Build a full-stack single-click search keyword app for BigCommerce 

1import { ActionOptions } from "gadget-server";
2
3export const run: ActionRun = async ({ params, api, connections, trigger }) => {
4  if (trigger.type !== "bigcommerce_webhook") {
5    throw new Error("This action can only be triggered by BigCommerce webhooks");
6  }
7
8  // handle deletes early, don't need to query BigCommerce, just need to remove data from Gadget
9  if (trigger.scope === "store/product/deleted") {
10    // see if product exists in database
11    const productRecordToDelete = await api.bigcommerce.product.maybeFindFirst({
12      filter: { bigcommerceId: { equals: params.id } },
13      select: { id: true },
14    });
15    if (productRecordToDelete) {
16      // if it exists, delete it
17      await api.bigcommerce.product.delete(productRecordToDelete.id);
18    }
19    return;
20  }
21
22  // get the BigCommerce API client for the current store
23  const bigcommerce = connections.bigcommerce.current!;
24
25  // fetch the product data
26  const product = await bigcommerce.v3.get("/catalog/products/{product_id}", {
27    path: {
28      product_id: params.id,
29    },
30  });
31
32  if (product) {
33    // split out fields we are storing in database
34    const productToSave = {
35      bigcommerceId: product.id,
36      name: product.name,
37      description: product.description,
38      searchKeywords: product.search_keywords,
39      store: {
40        // get the id of the store record in Gadget to create the relationship
41        _link: connections.bigcommerce.currentStoreId,
42      },
43      type: product.type,
44      price: product.price,
45      weight: product.weight,
46    };
47
48    // a switch statement to handle different product webhook topics
49    // use the trigger parameter to access the webhook scope
50    switch (trigger.scope) {
51      case "store/product/created":
52        // add product to database
53        await api.bigcommerce.product.create(productToSave);
54        break;
55      case "store/product/updated":
56        // upsert the product into the database, using the bigcommerceId as the key identifier
57        await api.bigcommerce.product.upsert({
58          ...productToSave,
59          on: ["bigcommerceId", "store"],
60        });
61        break;
62    }
63  } else {
64    throw new Error(`Product ${params.id} not found in BigCommerce store!`);
65  }
66};
67
68export const options: ActionOptions = {
69  triggers: {
70    api: false,
71    bigcommerce: {
72      webhooks: [
73        "store/product/created",
74        "store/product/updated",
75        "store/product/deleted",
76      ],
77    },
78  },
79};

1import { api, logger, connections } from "gadget-server";
2
3export const getKeywords = async (record: {
4  description: string;
5  searchKeywords: string | null;
6  storeId: string;
7  bigcommerceId: number;
8  type: "physical" | "digital";
9  price: number;
10  weight: number;
11  name: string;
12}) => {
13  // get array of unique words in product description
14  const descriptionWords = [...new Set(record.description.match(/\w+(?:'\w+)*/g))];
15  // get array of entered search keywords
16  const savedKeywords = (await api.searchKeyword.findMany()).map(
17    (searchKeyword) => searchKeyword.value
18  );
19  // get the final list of keywords to be used for the product
20  let searchKeywords = [
21    ...new Set(descriptionWords.filter((tag) => savedKeywords.includes(tag))),
22  ];
23
24  // concatenate with existing searchKeywords, using a Set to remove duplicates
25  if (record.searchKeywords) {
26    searchKeywords = Array.from(
27      new Set(record.searchKeywords.split(",").concat(searchKeywords))
28    );
29  }
30
31  logger.info(
32    { descriptionWords, savedKeywords, searchKeywords },
33    "keyword and description info"
34  );
35
36  // get the storeHash for the current product
37  const store = await api.bigcommerce.store.findById(record.storeId, {
38    select: { storeHash: true },
39  });
40  // use the storeHash to get a BigCommerce API client for the current store
41  const bigcommerce = await connections.bigcommerce.forStoreHash(store.storeHash);
42  // update the search_keywords!
43  await bigcommerce.v3.put("/catalog/products/{product_id}", {
44    path: {
45      product_id: record.bigcommerceId,
46    },
47    body: {
48      search_keywords: searchKeywords.toString(),
49      type: record.type,
50      price: record.price,
51      weight: record.weight,
52      name: record.name,
53    },
54  });
55};

1import { applyParams, save, ActionOptions } from "gadget-server";
2import { getKeywords } from "../utils";
3
4export const run: ActionRun = async ({ params, record }) => {
5  applyParams(params, record);
6  await save(record);
7};
8
9export const onSuccess: ActionOnSuccess = async ({ record }) => {
10  if (record.storeId && record.description && record.description !== "") {
11    await getKeywords({
12      ...record,
13      storeId: record.storeId,
14      description: record.description,
15    });
16  }
17};
18
19export const options: ActionOptions = {
20  actionType: "create",
21};

1import { ActionOptions, applyParams, save } from "gadget-server";
2import { getKeywords } from "../utils";
3
4export const run: ActionRun = async ({ params, record }) => {
5  applyParams(params, record);
6  await save(record);
7};
8
9export const onSuccess: ActionOnSuccess = async ({ record }) => {
10  if (
11    record.storeId &&
12    record.description &&
13    record.description !== "" &&
14    record.changed("description")
15  ) {
16    await getKeywords({
17      ...record,
18      storeId: record.storeId,
19      description: record.description,
20    });
21  }
22};
23
24export const options: ActionOptions = {
25  actionType: "update",
26};

1import { Box, Panel, Text, StatefulTable, Form, FormGroup, Input, Button, ProgressCircle, Message } from "@bigcommerce/big-design";
2import { DeleteIcon } from "@bigcommerce/big-design-icons";
3import { useFindMany, useActionForm, useBulkAction } from "@gadgetinc/react";
4import { useState } from "react";
5import { api } from "../api";
6
7export default function () {
8  const [selectedKeywordIds, setSelectedKeywordIds] = useState<string[]>([]);
9
10  // a useFindMany hook to fetch search keyword data
11  const [{ data, fetching, error }] = useFindMany(api.searchKeyword);
12
13  // the useAction hook is used for deleting existing keywords
14  const [{ error: deleteKeywordsError }, deleteKeywords] = useBulkAction(api.searchKeyword.bulkDelete);
15
16  // useActionForm used to manage form state and submission for creating new keywords
17  const { submit, register, reset, error: createError, formState } = useActionForm(api.searchKeyword.create);
18
19  return (
20    <>
21      <Panel>
22        {createError && <ErrorMessage title="Error adding keyword" error={createError} />}
23        <Form
24          onSubmit={async (event) => {
25            event.preventDefault();
26            await submit();
27            reset();
28          }}
29        >
30          <FormGroup>
31            <Input
32              description="Enter a new product search keyword"
33              label="Add search keywords"
34              required
35              {...register("value")}
36              autoComplete="off"
37            />
38          </FormGroup>
39          <Box marginTop="xxLarge">
40            <Button type="submit" disabled={formState.isSubmitting}>
41              Add keyword
42            </Button>
43          </Box>
44        </Form>
45      </Panel>
46      <Panel description="Current search keywords">
47        {fetching && <ProgressCircle size="large" />}
48        {error && <ErrorMessage title="Error reading keywords" error={error} />}
49        {deleteKeywordsError && <ErrorMessage title="Error removing keyword" error={deleteKeywordsError} />}
50        {data && (
51          <StatefulTable
52            stickyHeader
53            pagination
54            itemName="search keywords"
55            selectable
56            onSelectionChange={(value) => setSelectedKeywordIds(value.map((v) => v.id))}
57            columns={[
58              {
59                header: "Keyword",
60                hash: "value",
61                render: ({ value }) => value,
62              },
63            ]}
64            items={data}
65            actions={
66              <Button
67                actionType="destructive"
68                variant="secondary"
69                iconLeft={<DeleteIcon />}
70                disabled={selectedKeywordIds.length === 0}
71                onClick={async () => {
72                  await deleteKeywords({
73                    ids: selectedKeywordIds,
74                  });
75                  setSelectedKeywordIds([]);
76                }}
77              >
78                Delete
79              </Button>
80            }
81            emptyComponent={<Text marginTop="medium">No search keywords - start by adding one above!</Text>}
82          />
83        )}
84      </Panel>
85    </>
86  );
87}
88
89const ErrorMessage = ({ title, error }: { title: string; error: Error }) => {
90  return (
91    <Message
92      type="error"
93      header={title}
94      messages={[
95        {
96          text: error.toString(),
97        },
98      ]}
99      marginBottom="medium"
100    />
101  );
102};

1import { ActionOptions, applyParams, save } from "gadget-server";
2
3export const run: ActionRun = async ({ params, record }) => {
4  applyParams(params, record);
5  await save(record);
6};
7
8export const onSuccess: ActionOnSuccess = async ({ api, connections }) => {
9  // set the batch size to 50, process 50 products at a time
10  const BATCH_SIZE = 50;
11
12  const bigcommerce = connections.bigcommerce.current!;
13  // use the API client to fetch all products, and return
14  const products = await bigcommerce.v3.list(`/catalog/products`);
15
16  // get the current store from the database
17  const store = await api.bigcommerce.store.findByStoreHash(
18    connections.bigcommerce.currentStoreHash!,
19    {
20      // only read the id field
21      select: { id: true },
22    }
23  );
24
25  const productPayload = [];
26  // use a for await loop to iterate over the AsyncIterables, add to an array
27  for await (const product of products) {
28    productPayload.push({
29      bigcommerceId: product.id,
30      name: product.name,
31      description: product.description,
32      searchKeywords: product.search_keywords,
33      store: {
34        _link: store.id,
35      },
36      // use the upsert meta action to avoid creating duplicates
37      on: ["bigcommerceId", "store"],
38    });
39
40    // enqueue 80 actions at a time
41    if (productPayload.length >= BATCH_SIZE) {
42      const section = productPayload.splice(0, BATCH_SIZE);
43      // bulk enqueue create action
44      await api.enqueue(api.bigcommerce.product.bulkUpsert, section, {
45        queue: { name: "product-sync" },
46      });
47    }
48  }
49
50  // enqueue any remaining products
51  await api.enqueue(api.bigcommerce.product.bulkUpsert, productPayload, {
52    queue: { name: "product-sync" },
53  });
54};
55
56export const options: ActionOptions = {
57  actionType: "create",
58  // 15 minute timeout for the sync
59  timeoutMS: 900000,
60};