Steps to connect storefront in studio

examples

https://wa.me/521553712364

https://studio-global.yalochat.com/bots/awesome-store/flows/awesome-store/activities/order-entry

https://wa.me/5215536628295

https://studio-global.yalochat.com/bots/migrations-test-1/flows/migrations-test-1/activities/order-entry

  1. Into the flow configuration "delivery team" needs to develop a lambda to prepare the data that the orderConfig needs.

    orderConfig, It's the order configuration for the storefront, individual data per user.

    Fields:

    ttl: expiration time of the orderConfig in seconds.
    source: From where get the products data (internal/external).
    channelID: The Id of the channel (Bot phone number or Messenger Page ID).
    channelName: Channel name (whatsapp or facebook).
    botSlug: the bot name used in studio/consul.
    state: Name of the state to be used to redirect the send to.
    userID: User ID (user phone number or messenger unique ID, The sendTo function addon use)
    collections*: List of collection selectors of products, only used by source type internal.
    metadata: Auxiliary fields that could be used by function addons. It's a string field to support JSON parse in the backend side.

    In this lambda, If you are using storefront API and needs to filter the products per user you can make a request to get collections and then select some or all collections to show in the webview, If you are using external source (bigstorage/middleware) use metadata to set all information that you need to be in addons.
    example to filter in bigstorage

    In this lambda, If you are using storefront API and needs to filter the products per user you can make a request to get collections already filtered then put them in the orderConfig collections field to show in the webview, example

    collections: ["5ecedb23d3324205990be245", "5ecedb23d3324205990be245"]

    If you are using an external source (bigstorage/middleware) use metadata to set all information that you need to be in functions addons.
    example to filter in bigstorage, Make a request getClientCode and select the clientCode and set them in the orderConfig metadata field

    metadata: "{"clientCode": "10097468"}"

  2. Use that collections or metadata on the webhook to create the orderConfig in the storefront API.

    Then configure the state as automatic to change the state to open the webview

Webhook

URL https://api-staging2.yalochat.com/storefront-user/v1/user/storefronts?token={{TOKEN}}

PAYLOAD {
"query": "mutation {\n createOrderConfig(\n data: {\n ttl: 172800,\n source: "internal",\n channelName: "whatsapp",\n channelID: "5215536628295"\n botSlug: "{{{botSlug}}}",\n state: "order-summary",\n userID: "user.id",\n collections: []\n metadata: "{\"clientCode\": \"{{{user_id.text}}}\",\"slug\": \"awesome-store\"}"\n }\n ) {\n id\n }\n}",
"variables": {}
}

SAVE THE RESPONSE ON storefront

STOREFRONT API RESPONSE

{
  "data": {
    "createOrderConfig": {
      "id": "a0abae20-d294-11ea-9417-1733497c4cb4",
    }
    }
  }
  1. Configure a state to show the webview URL, formed by storefrontName and OrderConfigID

    example :

✔️ Primero entra aquí. 👉 


https://storefronts.yalo.cloud/{{storefrontName}}/{{{storefront.data.createOrderConfig.id}}}
The URL `[storefronts.yalo.cloud](http://storefronts.yalo.cloud)` is returned by the `yalo publish --production`  command. See the [CLI documentation](https://developer.yalochat.com/yalo/docs/yalo-cli) for more.
  1. Then create a state to handle the orderId that comes in the brain send by the function addon sendTo

    Example {{{order-summary.orderId}}}

    where the order-summary is the state configured in the orderConfig state field

    and orderId is the order ID generated

POST 

    URL https://api-staging2.yalochat.com/storefront-user/v1/user/storefronts?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJKQURaQ1RRaE1GdUI2Rmc0eHRiT21Td0hRQmRnVkVUbSJ9.6ByX-cTvN1gnFDYuSoaYa3NVXV27_mWfIxrxtCmR3Lw

    STOREFRONT API [ref](https://api-staging2.yalochat.com/storefront-user/v1/user/storefronts?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJKQURaQ1RRaE1GdUI2Rmc0eHRiT21Td0hRQmRnVkVUbSJ9.6ByX-cTvN1gnFDYuSoaYa3NVXV27_mWfIxrxtCmR3Lw).

    const query =
        query {
          order(id: "{{{**order-summary.orderId}**}}") {
            storefrontID
            userID
            status
            provider
            total
            totalQty
            cart
            note
            updatedAt
            createdAt
            id
          }
        }

    PAYLOAD
    {
      "query": JSON.stringify(query),
    }

Did this page help you?