Tweak with add-ons

Add-ons are package extensions, which can alter the behavior of the package in different ways. They are generally split into these categories:

Config Add-Ons

These add-ons are named collections of key-value pairs in package-config.yml.

Config add-ons don't do anything by themselves. They either provide metadata for Function or UI Add-Ons, or they turn on / off default functionality in the application's UI.

yalo addon:add -t config

or 

yalo addon:create -t config

Theme Add-Ons

This add-on it uses to change the theme of the storefront based on chakra-ui

yalo addon:add -t theme

or 

yalo addon:create -t theme

Function Add-Ons

An add-on that ties a function to an event in the package's Commerce Lifecycle .

yalo addon:add -t function

or 

yalo addon:create -t function

A basic function add-on takes the following shape:

---
name: sf01
region: us-east-1
storefront:
    currency: MXN
    localization: es-MX
    id: 5ee56ddccc421d0772bec9a6
    config:
      - 
      type: function/theme/config
      metadata:
        trigger:
          context: user
          event: responseForOperation
          query: productsPricedPerCollection
        entryPoint: externalSource
        description: 'Given a `Storefront`, search for the config data `externalSource`, retrieves products data from a external source, transform it into xchema Collection with priced products format, and arrange the items.'
        protocol: https
        method: POST
        path: externalSource
        input:
            storefront: xchema.Storefront
        output: '[xchema.Collection]'
        parameters:
            url: ''
          method: GET
          headers: '{"Content-Type": "application/json"}'
          body: ""
          setters: 'id:_id,name:name,sku:sku,description:description'
          arrangers: 'ranking:ASC,price:DES'
          transformers: 'imageURL:intoArray,price:float'
          rootSetter: ""
          collectionSetter: category

Storefront-User lifecycle

The User lifecycle is a

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

UI lifecycle

Hook

Description

Invoked by

default

This event fire the function add on in the publish command

CLI

UI Add-Ons

An add-on to that ties extends a React event.

UI Lifecycle Hooks

Each component will define some hooks to be able to render itself.

yalo addon:add -t ui

or 

yalo addon:create -t ui

Did this page help you?