Storefront Lifecycle

The storefront has a specific lifecycle, where events can be dispatched on triggers such as products being loaded, carts being drawn, etc.

How it works

The component (UI, CLI, Admin API, User API) makes a request to the add-on during the deployment or user interaction flow.

To hook into a lifecycle event, add it as a trigger in the function definition, as below.

---
...
    config:
        -
            type: function
            name: camperoWrapper
            status: ENABLE
            required: true
            metadata:
                trigger:
                    context: user
                    event: responseForOperation
                    query: productsPricedPerCollection
                entryPoint: camperoWrapper
                description: 'wrapper for campero api'
                protocol: https
                method: POST
                path: camperoWrapper
                parameters: {}

The trigger.context indicates from where is going to trigger the function addon

These are the context types supported

  • user, means that the plugins will be run by the storefront user API
  • cli, it means that the plugins will be executed by yalo-cli

Use user context when you want to override the behavior of the store base view and use cli context when you want to activate additional functionality, one single configuration, for example, launch large storage from yalo -cli

Context: User

Because the storefront-user API is the BFF of the storefront and is developed with Apollo Server, we take advantage of the events for requests that this library provides Extend Apollo Server with custom functionality

So for this context, we use 2 of those events that Apollo provides

Hook

Description

Invoked by

responseForOperation

This event means that the function adds on is going to fired before GraphQL execution would take place. The main reason to implement this is able to change the response that the webview did.

more about the event here

By any registered query that the storefront-user API has

willSendResponse

This event fire the function add on after that GraphQL query is executed and before sending a response to the executor
more about the event here

By any registered query that the storefront-user API has

These are the storefront base views that support overwrite data when it's running the storefront.

1. Catalog View

Shows the menu or the products list and executes the storefront-user API query called productsPricedPerCollection see the API ref

Overriding a default catalog list

2. Product Detail View

Shows the detail of the product and executes the storefront-user API query called productsPricedPerCollection sending as a param the productId see the API ref

Overriding a default product Detail

TO GET EACH PRODUCT DETAIL

First Level, It's describes the complete product and contains all the options it has

To have customizations or options in the product the structure needs these fields

type: CUSTOM/SINGLE
customizations: Products[]

{
  "data": {
    "productsPricedPerCollection": [
      {
        "id": "5f03919de6f02447c0073ecc",
        "name": "Pollo campero",
        "enabledPrice": true,
        "productsPriced": [
          {
            "id": "5f3ac61817a40508ab15ce4d",
            "name": "Menú Súper Campero",
            "sku": "w41136",
            "description": "3 Piezas de Pollo, 2 acompañamiento, 1 complemento y bebida",
            "category": "Pollo campero",
            "ranking": 2,
            "imageURL": [
              "https://www.campero.com/iCadImagesMNC/Productos/w41136.png"
            ],
            "clientType": "City",
            "showDescription": true,
            "price": 57.5,
            "type": "CUSTOM",
            "customizations": [
             ... see the SECOND LEVEL
            ]
          }
        ],
      }
    ]
  }
}

Second Levels

These are the customizations categories, the customizations field belong the first level

These are the required fields

type:

  • CHECKBOX
    size: Indicates how many options must be selected, if the size != 0 indicates that is required. if size = 0 the customization category is optional.
    minItems: It's used when the size = 0, Indicates the minimum options that have to be selected to be valid.
    maxItems: It's used when the size = 0, Indicates the maximum options that have to be selected to be valid.
  • COUNTER
    size: Indicates how many options must be selected, if the size != 0 indicates that is required. if size = 0 the customization category is optional.
    minItems: It's used when the size = 0, Indicates the minimum options that have to be selected to be valid.
    maxItems: It's used when the size = 0, Indicates the maximum options that have to be selected to be valid.
  • RADIO
    size: if the size != 0 indicates that is required. if size = 0 the customization category is optional. Becase it's a radio only 1 option can be selected.
    minItems and maxItems: are ignored becase only 1 option can be selected.
"customizations": [
  {
    "name": "Pieza Pollo Super",
    "sku": "uniqueID",
    "category": "Pieza Pollo",
    "size": 3,
    "type": "COUNTER",
    "minItems": 3,
    "maxItems": 3,
    "customizations": [... see the THIRD LEVEL]
  },
  { ... },
  { ... }
]

THIRD LEVEL

This level use the type of the second level to show a different UI component with the options available.

"customizations": [
                  {
                    "name": "papas fritas medianas",
                    "sku": "41067",
                    "category": "Acompañamiento",
                    "type": "SINGLE",
                    "id": "5f038856ab55cb47c09fb6ee"
                  },
                  {
                    "name": "ensalada de repollo",
                    "sku": "41066",
                    "category": "Acompañamiento",
                    "type": "SINGLE",
                    "id": "5f038856ab55cb47c09fb6ef"
                  },
                  {
                    "name": "puré de papa",
                    "sku": "41348",
                    "category": "Acompañamiento",
                    "type": "SINGLE",
                    "id": "5f038856ab55cb47c09fb6f0"
                  },
                  {
                    "name": "ensalada verde con limón",
                    "sku": "41408",
                    "category": "Acompañamiento",
                    "type": "SINGLE",
                    "id": "5f038856ab55cb47c09fb6f1"
                  },
                  {
                    "name": "papas waffle grande",
                    "sku": "44357",
                    "category": "Acompañamiento",
                    "type": "SINGLE",
                    "id": "5f038856ab55cb47c09fb6f2"
                  },
                  {
                    "name": "papas fritas grandes",
                    "sku": "41347",
                    "category": "Acompañamiento",
                    "type": "SINGLE",
                    "id": "5f038856ab55cb47c09fb6f3"
                  }
                ]

3. Cart View

Shows the products that are added to the shopping cart and executes the storefront-user API query called customCart sending as a param the productId see the API ref

Overriding a default cart prices (coming soon)

Context: UI

UI lifecycle events are shownbelow for the different Storefront application pages.

Components of the catalogue viewComponents of the catalogue view

Components of the catalogue view

Context: CLI

CLI events allow us to hook into the application setup and teardown phase.

event

description

  1. default

This event means that the function add-on is going to fire when a command yalo publish is made


Did this page help you?