Shopify Integration

[Georges Petrov]

• oauth login with shopify store
• install chatbubble widget on store
• get store products add them to a datastore
• creat agent with tools :
  • check order status (orderId) => status
  • get the delivery price for a product
  • TODO: find an example write endpoint to showcase approval

[Georges Petrov]

_

[Georges Petrov]

# From ChatGPT 
Developing a Shopify app using Next.js for integrating an intercom-like widget involves several steps, including setting up OAuth for authentication and creating the necessary code for widget installation. Below is a guide on how to achieve this:

1. Initial Setup
You need to create a new Next.js project if you haven't already. You can do this by running:

bash
Copy code
npx create-next-app my-shopify-app
cd my-shopify-app
2. Installing Necessary Dependencies
Install the Shopify API library and other necessary dependencies:

bash
Copy code
npm install @shopify/shopify-api dotenv next
3. Setting Up Environment Variables
Create a .env.local file in the root of your Next.js project and add the following environment variables. You will get these details from your Shopify Partner Dashboard when you create a new app.

env
Copy code
SHOPIFY_API_KEY=your_api_key
SHOPIFY_API_SECRET=your_api_secret
SCOPES=read_products,write_products
HOST_NAME=https://your-ngrok-url.ngrok.io
SHOP=your-development-store.myshopify.com
4. Setting Up Shopify Context
In your pages/api/index.js, set up the Shopify context:

javascript
Copy code
import Shopify, { ApiVersion } from "@shopify/shopify-api";

const { SHOPIFY_API_KEY, SHOPIFY_API_SECRET, SCOPES, HOST_NAME } = process.env;

Shopify.Context.initialize({
  API_KEY: SHOPIFY_API_KEY,
  API_SECRET_KEY: SHOPIFY_API_SECRET,
  SCOPES: SCOPES.split(","),
  HOST_NAME: HOST_NAME.replace(/https:\/\//, ""),
  API_VERSION: ApiVersion.October21,
  IS_EMBEDDED_APP: true,
  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});

// ... rest of the code
5. OAuth Authentication
Create a file for OAuth (e.g., pages/api/auth.js) to handle the authentication process:

javascript
Copy code
import Shopify from "@shopify/shopify-api";

export default async function handler(req, res) {
  const { shop } = req.query;

  if (shop) {
    const authRoute = await Shopify.Auth.beginAuth(
      req,
      res,
      shop,
      "/api/auth/callback",
      false
    );

    res.writeHead(302, { Location: authRoute });
    res.end();
  } else {
    res.status(500).send("Missing shop parameter. Please add ?shop=your-development-store.myshopify.com to your request");
  }
}
6. OAuth Callback
Create the OAuth callback handler (pages/api/auth/callback.js):

javascript
Copy code
import Shopify from "@shopify/shopify-api";

export default async function callback(req, res) {
  try {
    const session = await Shopify.Auth.validateAuthCallback(req, res, req.query);

    // TODO: Store the session information in a database
    // ...

    res.redirect(`/?shop=${session.shop}`);
  } catch (error) {
    console.error(error);
    res.status(500).send("Error during Shopify Auth Callback");
  }
}
7. Adding the Widget
For the widget installation, you need to create a script tag that points to your widget's JavaScript file. This can be done in the authentication callback after a successful authentication, or as a separate API endpoint that the merchant can trigger.

Here's an example to add a script tag:

javascript
Copy code
import Shopify from "@shopify/shopify-api";

export default async function addWidget(req, res) {
  const { shop, accessToken } = req.query;

  const client = new Shopify.Clients.Rest(shop, accessToken);
  await client.post({
    path: 'script_tags',
    data: {
      script_tag: {
        event: 'onload',
        src: 'https://your-domain.com/path-to-your-widget.js'
      }
    },
    type: 'application/json',
  });

  res.status(200).send('Widget added successfully');
}
8. Running Your App
You can now run your Next.js app:

bash
Copy code
npm run dev
Additional Considerations
Make sure to handle session persistence properly. The example uses in-memory storage which is not suitable for production.
Ensure your app complies with Shopify's app requirements and security guidelines.
Test your app thoroughly before submitting it to the Shopify App Store.
This guide provides a basic setup. Depending on your specific requirements, you may need to adjust and add more functionality.

[yahya benzha]

1- onBoard store (oauth)
2- add tool to agent (like get status of a product)
Goal: create datastore and agent for shopify store, (knowledge = products , every product become source - grouped datasource)
datasource type = shopify_product (every product is a datasource ideal: 1chunk has all.)
3- How to add the widget to the shopify store. / How to remove the widget ?