How can we use products webhook ?

[Anshu-Shar]

Hello @Mini-Sylar ,
How can we use products and order_create webhooks like 'topic' => 'products/update','topic' => 'orders/create' in this template code ?

[Mini-Sylar]

@Anshu-Shar

First of all when testing on local, shopify won't allow you to send webhooks through their cloudflare tunnels

so remember we installed ngrok if you havent refer to download ngrok

after you have ngrok setup do the following

Step 1

in your terminal run nrgok http 3000

Step 2

Modify the dev command in your root package.json the when next to README.md as follows

"dev": "shopify app dev --tunnel-url=https://[YOUR NGROK APP].ngrok-free.app:3000

• note: the :3000 at the end is important
• note 2: You may have to update the ngrok url everytime you close ngrok

Step 3

run npm run dev -- --reset to reset the preview links (don't forget to revert when in production)

Step 4

• You can see an example of the webhook call with gdpr.js in web, but I prefer to have all of this in a folder called webhooks move gdpr,js to that folder and rename to webhook-handlers.js if you want but I will use webhook-handlers.js
• modify the import statements in index.js as follows

 import webhookHooks from "./webhooks/webhook-handlers.js";
// Set up Shopify authentication and webhook handling

app.post(
  shopify.config.webhooks.path,
// change from `GDPRWebhookHandlers` to `webhookHooks`
  shopify.processWebhooks({
    webhookHandlers: webhookHooks,
  })
);

Step 5

in webhook-handlers.js we can listen for ORDERS_CREATE for instance as follows

 ORDERS_CREATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
      do something with that data like console.log(topic, shop, body)
    },
  },

VERY IMPORTANT

According to shopify webhook data can be duplicated, so one way to handle that will be store the webhookID in your database, when you receive one check if that webhookID already exists. If it does throw an error

Also to get your app approved you need to verify your webhooks,
Validating webhooks
write a function to validate your webhooks using the HMAC header lets say validateWebhookRequest

use it as a middleware in index.js

import { validateWebhookRequest } from "somewhere";

app.post(
  shopify.config.webhooks.path,
  validateWebhookRequest,
  shopify.processWebhooks({
    webhookHandlers: webhookHooks,
  })
);

[Anshu-Shar]

Thanks for the quick reply

[Anshu-Shar]

@Anshu-Shar

First of all when testing on local, shopify won't allow you to send webhooks through their cloudflare tunnels

so remember we installed ngrok if you havent refer to download ngrok

after you have ngrok setup do the following

Step 1

in your terminal run nrgok http 3000

Step 2

Modify the dev command in your root package.json the when next to README.md as follows

"dev": "shopify app dev --tunnel-url=https://[YOUR NGROK APP].ngrok-free.app:3000

• note: the :3000 at the end is important
• note 2: You may have to update the ngrok url everytime you close ngrok

Step 3

run npm run dev -- --reset to reset the preview links (don't forget to revert when in production)

Step 4

• You can see an example of the webhook call with gdpr.js in web, but I prefer to have all of this in a folder called webhooks move gdpr,js to that folder and rename to webhook-handlers.js if you want but I will use webhook-handlers.js
• modify the import statements in index.js as follows

 import webhookHooks from "./webhooks/webhook-handlers.js";
// Set up Shopify authentication and webhook handling

app.post(
  shopify.config.webhooks.path,
// change from `GDPRWebhookHandlers` to `webhookHooks`
  shopify.processWebhooks({
    webhookHandlers: webhookHooks,
  })
);

Step 5

in webhook-handlers.js we can listen for ORDERS_CREATE for instance as follows

 ORDERS_CREATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/api/webhooks",
    callback: async (topic, shop, body, webhookId) => {
      do something with that data like console.log(topic, shop, body)
    },
  },

VERY IMPORTANT

According to shopify webhook data can be duplicated, so one way to handle that will be store the webhookID in your database, when you receive one check if that webhookID already exists. If it does throw an error

Also to get your app approved you need to verify your webhooks, Validating webhooks write a function to validate your webhooks using the HMAC header lets say validateWebhookRequest

use it as a middleware in index.js

import { validateWebhookRequest } from "somewhere";

app.post(
  shopify.config.webhooks.path,
  validateWebhookRequest,
  shopify.processWebhooks({
    webhookHandlers: webhookHooks,
  })
);

Please provide the code for validateWebhookRequest,

[Mini-Sylar]

Since I don't know exactly how your app works, I can't provide a "validateWebhookRequest" implementation

However you can take a look at this github issue to get started Validating Webhooks

[Mini-Sylar]

Marking this as closed

[Anshu-Shar]

Since I don't know exactly how your app works, I can't provide a "validateWebhookRequest" implementation

However you can take a look at this github issue to get started Validating Webhooks

[Anshu-Shar]

OK,I have implemented the above steps in my code for webhook.If I am trying to uninstall the app getting the error.
Failed To Process Webhook: Error: No Body Was Received When Processing Webhook

[Mini-Sylar]

the webhooks take a string as the body and parse them, make sure any middleware that parses the data to JSON comes AFTER

const app = express();

app.get(shopify.config.auth.path, shopify.auth.begin());
app.get(
  shopify.config.auth.callbackPath,
  shopify.auth.callback(),
  shopify.redirectToShopifyOrAppRoot()
);
app.post(
  shopify.config.webhooks.path,
  shopify.processWebhooks({ webhookHandlers: YOUR_WEBHOOK_HANDLERS})
);

// middlewares should come after this

[Anshu-Shar]

the webhooks take a string as the body and parse them, make sure any middleware that parses the data to JSON comes AFTER

const app = express();

app.get(shopify.config.auth.path, shopify.auth.begin());
app.get(
  shopify.config.auth.callbackPath,
  shopify.auth.callback(),
  shopify.redirectToShopifyOrAppRoot()
);
app.post(
  shopify.config.webhooks.path,
  shopify.processWebhooks({ webhookHandlers: YOUR_WEBHOOK_HANDLERS})
);

// middlewares should come after this

Thanks for response
It is working now.