Blueprint (WIP)

I Blueprint sono dei modelli di page element parametrici e riutilizzabili. I blueprint sono definiti da:

• Id
• Nome
• Sito di appartenenza
• Body
• Parametri

Funzionamento

Un blueprint è un costrutto che permette di rendere un page element configurabile, mappando i valori passati attraverso i parametri sul JSON di un page element. Ogni parametro è definito da:

• Nome
• Tipo (o tipi) di dati accettati
• Percorso nel JSON che indica dove inserire il valore

Esempio

Supponiamo di voler definire un page element "InfoProdotto":

{
    "id": ...,
    "site": ...,
    "name": "InfoProdotto",
    "body": {
        "template": "bodyComposer",
        "content": {
            "title": "titolo di default",
            "body": "descrizione di default",
            "image": null
        },
        "config": {
            ...
        }
    },
    "parameters": [
        {
            "name": "Titolo",
            "accepts": {
                "type": "string"
            },
            "path": "$.content.title"
        },
        {
            "name": "Descrizione",
            "accepts": {
                "type": "string"
            },
            "path": "$.content.body"
        },
        {
            "name": "Immagine",
            "accepts": {
                "type": "image"
            },
            "path": "$.content.image"
        }
    ]
}

Sarà quindi possibile configurare questo body composer attraverso i parametri "Titolo", "Descrizione" e "Immagine". Possiamo utilizzare l'endpoint .../blueprints/{id}/resolved, che permette di avere un'anteprima del page element risolto, riempito con i valori in arrivo dai parametri:

//Body richiesta

{
	"Titolo": "Rubber duck",
	"Descrizione": "Quack",
	"Immagine": {
		"url": "https://images-na.ssl-images-amazon.com/images/I/51VXgNZFIoL.jpg",
		"alt": "Duck"
	}
}

//Body risposta

{
	"id": "86a9e449-241e-425e-8262-cff63bd52db3",
	"template": "bodyComposer",
	"locked": false,
	"active": true,
	"customName": "bodyComposer",
	"content": {
		"title": "Rubber duck",
		"body": "Quack",
		"readMoreBody": null,
		"image": {
			"url": "https://images-na.ssl-images-amazon.com/images/I/51VXgNZFIoL.jpg",
			"height": 0,
			"width": 0,
			"size": 0,
			"blurPreviewBase64": "",
			"alt": "Duck",
			"id": "e5ed165f-57f9-4eb7-9d3f-e5822c258ae9"
		}
	},
	"config": {
		...
	}
}

warning

I blueprint supportano parametri di tipo immagine, che permette l'inserimento di url in formato base64: data l'attuale implementazione, è possibile che durante la configurazione del blueprint le stesse immagini siano caricate diverse volte sul servizio di storage (S3), consumando spazio di archiviazione. Immagini uguali, con alt uguale, vengono tuttavia archiviate una sola volta.

Tipi di Parametro

I parametri accettano solo valori compatibili con il proprio tipo. I tipi disponibili sono:

• string
• int
• float
• bool/boolean
• html
• image
• array - Dettagli
• blueprint - Dettagli

Tipo di Parametro 'Array'

I parametri di tipo array permettono di inserire valori multipli di un determinato tipo:

{
    "name": "GalleriaCustom",
    "site": ...,
    "body": {
        "template": "gallery",
        "config": {...},
        "content": []
    },
    "parameters": [
        {
            "name": "Immagini",
            "type": "array",
            "accepts": {
                "type": "image"
            }
        }
    ]
}

Il parametro Immagini accetterà ora una lista di oggetti di tipo immagine.

Tipo di Parametro 'Blueprint'

I parametri di tipo blueprint permettono di fare riferimento ad un altro blueprint. Il blueprint a cui si fa riferimento viene risolto e il suo valore usato come valore del parametro. Questo costrutto permette di modularizzare i blueprint ed abbreviare le definizioni.

Esempio

{
    "id": ...,
    "name": "ElencoProdotti",
    "site": ...,
    "body": {
        "template": "grid",
        "config": { ... },
        "content": []
    },
    "parameters": [
        {
            "name": "Prodotti",
            "accepts": {
                "type": "array",
                "accepts": {
                    "type": "blueprint",
                    "blueprint": "<id del blueprint InfoProdotto definito prima>",
                    "path": "$.content"
                }
            }
        }
    ]
}

Accetta come valore per il parametro Prodotti un array di oggetti da passare come parametri al blueprint a cui ci si riferisce (InfoProdotto). Verrebbe risolto nel seguente modo:

Body Richiesta:

{
	"Prodotti": [
		{
			"Titolo": "Rubber duck",
			"Descrizione": "Quack",
			"Immagine": {
				"url": "https://images-na.ssl-images-amazon.com/images/I/51VXgNZFIoL.jpg",
				"alt": "Duck"
			}
		},
		{
			"Titolo": "Pet Rock",
			"Descrizione" : "Roccia da compagnia",
			"Immagine": {
				"url": "https://townsquare.media/site/723/files/2015/04/Pet-Rock-12.jpg?w=1200&h=0&zc=1&s=0&a=t&q=89",
				"alt": "Pet Rock"
			}
		}
	]
}

Ogni elemento dell'array verrà gestito dal blueprint associato, restituendo il page element finale:

Body Risposta:

{
	"id": "bd67d2a4-c414-409e-9b31-d7523c7d2873",
	"template": "grid",
	"locked": false,
	"active": true,
	"customName": "grid",
	"content": [
		{
			"id": "f8a3c648-b5b2-49e5-bed1-1fe98446b7f4",
			"template": "bodyComposer",
			"locked": false,
			"active": true,
			"customName": "bodyComposer",
			"content": {
				"title": "Rubber duck",
				"body": "Quack",
				"readMoreBody": null,
				"image": {
					"url": "https://images-na.ssl-images-amazon.com/images/I/51VXgNZFIoL.jpg",
					"height": 0,
					"width": 0,
					"size": 0,
					"blurPreviewBase64": "",
					"alt": "Duck",
					"id": "1094ae8d-3975-4db4-904a-d638402573eb"
				}
			},
			"config": { ... }
		},
		{
			"id": "d175fda9-f4d2-43e6-89d6-c326224511e5",
			"template": "bodyComposer",
			"locked": false,
			"active": true,
			"customName": "bodyComposer",
			"content": {
				"title": "Pet Rock",
				"body": "Roccia da compagnia",
				"readMoreBody": null,
				"image": {
					"url": "https://townsquare.media/site/723/files/2015/04/Pet-Rock-12.jpg?w=1200&h=0&zc=1&s=0&a=t&q=89",
					"height": 0,
					"width": 0,
					"size": 0,
					"blurPreviewBase64": "",
					"alt": "Pet Rock",
					"id": "0a5c20e2-5621-43bd-8ffb-bede29191a5b"
				}
			},
			"config": { ... }
		}
	],
	"config": { ... }
	}
}