Создание headless проекта
В этой статье вы узнаете, как создать проект, используя встроенный шаблон под названием "Headless Store". Мы покажем:
- как добавить новый продукт в каталог вашего проекта
- как опубликовать внесенные изменения
- как получить продукт из вашего проекта
Создание проекта
После входа в систему вы попадете на экран "Проекты", где вам нужно нажать на Создать проект.
На экране "Создать проект" вам будут предложены доступные шаблоны или возможность использовать удаленный Git-репозиторий вместо выбора шаблона из списка. Прокрутите диалоговое окно, чтобы увидеть стандартные шаблоны, предоставленные CMS Studio, включая возможность использовать удаленный Git-репозиторий.
В нашем примере мы будем использовать шаблон "Headless Store". Шаблоны предоставляют вам отправную точку для вашего сайта. Вы также можете создать и добавить в систему свои собственные новые шаблоны. Нажмите на Использовать под шаблоном "Headless Store".
Присвойте имя проекту и добавьте описание. Нажмите на Обзор, чтобы проверить свои данные перед созданием нового проекта.
Нажмите на Создать проект и дождитесь, пока система настроит ваш проект на основе шаблона.
Появится индикатор загрузки, пока система создает конфигурацию, контент проекта и права доступа на основе предоставленного шаблона.
Когда все будет готово, вы будете перенаправлены на предварительный просмотр вашего проекта.
Теперь ваш проект настроен, и вы можете начинать добавлять или редактировать контент.
Чтобы редактировать контент на странице, нажмите на три точки рядом с URL-адресом страницы на панели инструментов вверху, а затем выберите Изменить.
Откроется форма , где вы можете редактировать содержимое страницы.
Добавление нового продукта в каталог
Обратите внимание, что проект на основе шаблона “Headless Store” в основном состоит из компонентов “компания” и “продукт”. Чтобы добавить новый продукт, откройте боковую панель и перейдите к Элементы > items > products. Нажмите на три точки рядом с папкой products, затем выберите Новый контент.
Откроется шаблон компонента продукта, и мы можем начать заполнять свойства создаваемого нами продукта. Для примера мы добавим продукт “Плюшевый медведь”. Нам нужно указать название и внутреннее название ("Медведь"), а также описание ("Плюшевый медведь").
Теперь можно загрузить изображение нового продукта, выбрать категорию и тег (если необходимо), установить цену и, наконец, добавить/выбрать компанию, которая произвела продукт, нажав на Добавить в поле Company. После настройки параметров товара, нажмите на Сохранить и закрыть.
Теперь в каталоге нашего магазина отображается только что созданный нами товар.
Вы можете добавлять больше продуктов/компаний или изменять/удалять существующие продукты/компании в зависимости от ваших нужд.
Чтобы удалить или изменить существующий продукт/компанию, перейдите к продукту/компании через боковую панель. Щелкните правой кнопкой мыши по продукту/компании, а затем выберите действие, которое вы хотите выполнить над элементом (например, Изменить или Удалить).
Публикация изменений
Сразу после создания проекта при помощи шаблона “Headless Store” проект нужно опубликовать. После непосредственной публикации любые правки или новые элементы также нужно будет каждый раз публиковать, чтобы аудитория вашего проекта могла видеть изменения.
Для публикации сначала через боковую панель перейдите к элементу, который хотите опубликовать, затем нажмите на три точки рядом с ним и выберите Опубликовать.
Вам будет предложено опубликовать элемент сразу же или запланировать публикацию на более позднюю дату и время. Если это первая публикация проекта, появится уведомление, что будет опубликован весь проект.
Подробнее о создании, изменении и публикации контента можно узнать здесь.
Извлечение продукта из проекта
Теперь мы получим продукт из проекта, используя один из доступных API для извлечения контента.
Для примера предположим, что мы не уверены в URL-адресах некоторых продуктов, поэтому мы используем API "Get Children", чтобы получить список продуктов в /site/items/products. ID нашего проекта — my-store, который будет использоваться в параметре cmsSite для указания проекта.
Вот запрос, который мы отправим: http://localhost:8080/api/1/site/content_store/children.json?url=/site/items/products&cmsSite=my-store
Так будет выглядеть ответ:
[
{
"name": "0f08bd09-622d-816f-4f81-f3975947d9af.xml",
"url": "/site/items/products/0f08bd09-622d-816f-4f81-f3975947d9af.xml",
"descriptorUrl": "/site/items/products/0f08bd09-622d-816f-4f81-f3975947d9af.xml",
"descriptorDom": {
"component": {
"content-type": "/component/product",
"display-template": null,
"merge-strategy": "inherit-levels",
"objectGroupId": "0f08",
"objectId": "0f08bd09-622d-816f-4f81-f3975947d9af",
"file-name": "0f08bd09-622d-816f-4f81-f3975947d9af.xml",
"internal-name": "Cards",
"name_s": "Cards",
"price_d": "10.5",
"categories_o": {
"item": {
"key": "board",
"value_smv": "Board"
}
},
"tags_o": {
"item": {
"key": "groups",
"value_smv": "Groups"
}
},
"image_s": "/static-assets/images/products/cards.jpeg",
"company_o": {
"item": {
"key": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"value": "Company 2",
"include": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"disableFlattening": "false"
}
},
"description_html": "<p>Classic Cards</p>",
"createdDate": "2017-05-12T16:47:33.000Z",
"createdDate_dt": "2017-05-12T16:47:33.000Z",
"lastModifiedDate": "2017-05-15T17:19:26.000Z",
"lastModifiedDate_dt": "2017-05-15T17:19:26.000Z",
"disabled": "false"
}
},
"properties": null,
"folder": false
},
{
"name": "11cc0cd3-55e4-ae2e-6f2d-a349486c0b84.xml",
"url": "/site/items/products/11cc0cd3-55e4-ae2e-6f2d-a349486c0b84.xml",
"descriptorUrl": "/site/items/products/11cc0cd3-55e4-ae2e-6f2d-a349486c0b84.xml",
"descriptorDom": {
"component": {
"content-type": "/component/product",
"display-template": null,
"merge-strategy": "inherit-levels",
"objectGroupId": "11cc",
"objectId": "11cc0cd3-55e4-ae2e-6f2d-a349486c0b84",
"file-name": "11cc0cd3-55e4-ae2e-6f2d-a349486c0b84.xml",
"internal-name": "Plane",
"name_s": "Plane",
"price_d": "5.5",
"image_s": "/static-assets/images/products/toy-plane.jpeg",
"categories_o": {
"item": {
"key": "cars",
"value_smv": "Cars"
}
},
"tags": null,
"company_o": {
"item": {
"key": "/site/items/companies/8b868a29-3b70-a461-efa1-7b4555bdc60c.xml",
"value": "Company 1",
"include": "/site/items/companies/8b868a29-3b70-a461-efa1-7b4555bdc60c.xml",
"disableFlattening": "false"
}
},
"description_html": "<p>Small toy plane</p>",
"createdDate": "2017-05-11T20:6:23.000Z",
"createdDate_dt": "2017-05-11T20:6:23.000Z",
"lastModifiedDate": "2017-05-12T16:27:53.000Z",
"lastModifiedDate_dt": "2017-05-12T16:27:53.000Z"
}
},
"properties": null,
"folder": false
},
{
"name": "167f4a61-a9a2-54ec-a87d-6195634c65dd.xml",
"url": "/site/items/products/167f4a61-a9a2-54ec-a87d-6195634c65dd.xml",
"descriptorUrl": "/site/items/products/167f4a61-a9a2-54ec-a87d-6195634c65dd.xml",
"descriptorDom": {
"component": {
"content-type": "/component/product",
"display-template": null,
"merge-strategy": "inherit-levels",
"objectGroupId": "167f",
"objectId": "167f4a61-a9a2-54ec-a87d-6195634c65dd",
"file-name": "167f4a61-a9a2-54ec-a87d-6195634c65dd.xml",
"internal-name": "Rubik's",
"name_s": "Rubik's",
"price_d": "15",
"categories_o": {
"item": {
"key": "board",
"value_smv": "Board"
}
},
"tags_o": {
"item": {
"key": "learning",
"value_smv": "Learning"
}
},
"image_s": "/static-assets/images/products/cube.jpg",
"company_o": {
"item": {
"key": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"value": "Company 2",
"include": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"disableFlattening": "false"
}
},
"description_html": "<p>Classic Rubik's Cube</p>",
"createdDate": "2017-05-12T16:43:17.000Z",
"createdDate_dt": "2017-05-12T16:43:17.000Z",
"lastModifiedDate": "2017-05-12T16:50:30.000Z",
"lastModifiedDate_dt": "2017-05-12T16:50:30.000Z"
}
},
"properties": null,
"folder": false
},
{
"name": "72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb.xml",
"url": "/site/items/products/72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb.xml",
"descriptorUrl": "/site/items/products/72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb.xml",
"descriptorDom": {
"component": {
"content-type": "/component/product",
"display-template": null,
"merge-strategy": "inherit-levels",
"objectGroupId": "72f3",
"objectId": "72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb",
"file-name": "72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb.xml",
"internal-name": "Chess",
"name_s": "Chess",
"price_d": "50",
"categories_o": {
"item": {
"key": "board",
"value_smv": "Board"
}
},
"tags_o": {
"item": [
{
"key": "groups",
"value_smv": "Groups"
},
{
"key": "learning",
"value_smv": "Learning"
}
]
},
"image_s": "/static-assets/images/products/chess.jpeg",
"company_o": {
"item": {
"key": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"value": "Company 2",
"include": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"disableFlattening": "false"
}
},
"description_html": "<p>Chess</p>",
"createdDate": "2017-05-12T16:1:58.000Z",
"createdDate_dt": "2017-05-12T16:1:58.000Z",
"lastModifiedDate": "2017-05-12T16:24:38.000Z",
"lastModifiedDate_dt": "2017-05-12T16:24:38.000Z"
}
},
"properties": null,
"folder": false
},
{
"name": "89b4a941-8bad-cf6b-4c0c-3baf52baa003.xml",
"url": "/site/items/products/89b4a941-8bad-cf6b-4c0c-3baf52baa003.xml",
"descriptorUrl": "/site/items/products/89b4a941-8bad-cf6b-4c0c-3baf52baa003.xml",
"descriptorDom": {
"component": {
"content-type": "/component/product",
"display-template": null,
"merge-strategy": "inherit-levels",
"objectGroupId": "89b4",
"objectId": "89b4a941-8bad-cf6b-4c0c-3baf52baa003",
"file-name": "89b4a941-8bad-cf6b-4c0c-3baf52baa003.xml",
"internal-name": "Car",
"name_s": "Car",
"price_d": "10.0",
"image_s": "/static-assets/images/products/toy-car.jpg",
"categories_o": {
"item": {
"key": "cars",
"value_smv": "Cars"
}
},
"tags": null,
"company_o": {
"item": {
"key": "/site/items/companies/8b868a29-3b70-a461-efa1-7b4555bdc60c.xml",
"value": "Company 1",
"include": "/site/items/companies/8b868a29-3b70-a461-efa1-7b4555bdc60c.xml",
"disableFlattening": "false"
}
},
"description_html": "<p>Small Car</p>",
"createdDate": "2017-05-11T17:43:45.000Z",
"createdDate_dt": "2017-05-11T17:43:45.000Z",
"lastModifiedDate": "2017-05-12T16:28:29.000Z",
"lastModifiedDate_dt": "2017-05-12T16:28:29.000Z"
}
},
"properties": null,
"folder": false
},
{
"name": "9cab74a4-0198-6cf9-2798-93ad67aada05.xml",
"url": "/site/items/products/9cab74a4-0198-6cf9-2798-93ad67aada05.xml",
"descriptorUrl": "/site/items/products/9cab74a4-0198-6cf9-2798-93ad67aada05.xml",
"descriptorDom": {
"component": {
"content-type": "/component/product",
"display-template": null,
"merge-strategy": "inherit-levels",
"objectGroupId": "9cab",
"objectId": "9cab74a4-0198-6cf9-2798-93ad67aada05",
"file-name": "9cab74a4-0198-6cf9-2798-93ad67aada05.xml",
"internal-name": "Duck",
"name_s": "Duck",
"price_d": "15",
"image_s": "/static-assets/images/products/duck.jpeg",
"categories_o": {
"item": {
"key": "dolls",
"value_smv": "Dolls"
}
},
"tags": null,
"company_o": {
"item": {
"key": "/site/items/companies/8b868a29-3b70-a461-efa1-7b4555bdc60c.xml",
"value": "Company 1",
"include": "/site/items/companies/8b868a29-3b70-a461-efa1-7b4555bdc60c.xml",
"disableFlattening": "false"
}
},
"description_html": "<p>Small rubber duck.</p>",
"createdDate": "2017-05-12T16:26:10.000Z",
"createdDate_dt": "2017-05-12T16:26:10.000Z",
"lastModifiedDate": "2017-05-12T16:26:10.000Z",
"lastModifiedDate_dt": "2017-05-12T16:26:10.000Z"
}
},
"properties": null,
"folder": false
},
{
"name": "ff16a7a8-1948-38e6-7808-5a590f60ff85.xml",
"url": "/site/items/products/ff16a7a8-1948-38e6-7808-5a590f60ff85.xml",
"descriptorUrl": "/site/items/products/ff16a7a8-1948-38e6-7808-5a590f60ff85.xml",
"descriptorDom": {
"component": {
"content-type": "/component/product",
"display-template": null,
"merge-strategy": "inherit-levels",
"objectGroupId": "ff16",
"objectId": "ff16a7a8-1948-38e6-7808-5a590f60ff85",
"file-name": "ff16a7a8-1948-38e6-7808-5a590f60ff85.xml",
"internal-name": "Dice",
"name_s": "Dice",
"price_d": "2.5",
"categories_o": {
"item": {
"key": "board",
"value_smv": "Board"
}
},
"tags": null,
"image_s": "/static-assets/images/products/dices.jpeg",
"company_o": {
"item": {
"key": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"value": "Company 2",
"include": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"disableFlattening": "false"
}
},
"description_html": "<p>Simple dice.</p>",
"createdDate": "2017-05-12T16:37:36.000Z",
"createdDate_dt": "2017-05-12T16:37:36.000Z",
"lastModifiedDate": "2017-05-12T16:37:36.000Z",
"lastModifiedDate_dt": "2017-05-12T16:37:36.000Z"
}
},
"properties": null,
"folder": false
}
]
Чтобы извлечь конкретный продукт, используйте API Get Item для извлечения элемента из хранилища контента. Не забудьте установить параметр cmsSite при выполнении запроса.
Запрос: http://localhost:8080/api/1/site/content_store/item.json?url=/site/items/products/72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb.xml&cmsSite=my-store
Ответ:
{
"name": "72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb.xml",
"url": "/site/items/products/72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb.xml",
"descriptorUrl": "/site/items/products/72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb.xml",
"descriptorDom": {
"component": {
"content-type": "/component/product",
"display-template": null,
"merge-strategy": "inherit-levels",
"objectGroupId": "72f3",
"objectId": "72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb",
"file-name": "72f3b00c-2baa-0a0d-da2a-5ed9be3f74eb.xml",
"internal-name": "Chess",
"name_s": "Chess",
"price_d": "50",
"categories_o": {
"item": {
"key": "board",
"value_smv": "Board"
}
},
"tags_o": {
"item": [
{
"key": "groups",
"value_smv": "Groups"
},
{
"key": "learning",
"value_smv": "Learning"
}
]
},
"image_s": "/static-assets/images/products/chess.jpeg",
"company_o": {
"item": {
"key": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"value": "Company 2",
"include": "/site/items/companies/9ea03b5c-e199-5e07-aa60-1997dcefbd4c.xml",
"disableFlattening": "false"
}
},
"description_html": "<p>Chess</p>",
"createdDate": "2017-05-12T16:1:58.000Z",
"createdDate_dt": "2017-05-12T16:1:58.000Z",
"lastModifiedDate": "2017-05-12T16:24:38.000Z",
"lastModifiedDate_dt": "2017-05-12T16:24:38.000Z"
}
},
"properties": null,
"folder": false
}