Вступление

Независимо от того, являетесь ли вы опытным разработчиком из DemandWare или новым разработчиком с тех пор, как SalesForce включила эту службу в свое облако, вы можете обнаружить, что этой платформе не хватает удобного способа разрешить автору редактировать контент. Ситуация изменилась в августе 2019 года, когда новая функция под названием Дизайнер страниц была помещена в Общую доступность. Пожалуйста, позвольте мне объяснить, что такое Page Designer, и помочь вам разработать свои собственные компоненты, чтобы ваши пользователи могли легко редактировать страницы.

Что такое Дизайнер страниц?

У SFCC есть несколько способов добавления и настройки динамического содержания в Бизнес-менеджере для мерчандайзеров. Либо, если пользователь хочет использовать слот содержимого или актив содержимого, пользователь может редактировать содержимое как простой HTML или форматированный текст. Более того, если разработчик добавил несложную разметку, мерчендайзер должен быть очень осторожен, чтобы не нарушить разметку.

Page Designer - действительно простой в использовании визуальный редактор для настройки страниц сайта без риска нарушения разметки или знания HTML / CSS от пользователя.

Вы можете протестировать его самостоятельно, зайдя в Инструменты продавца → Контент → Дизайнер страниц и отредактировав одну из существующих страниц (home-example.html или campaign-example. html). Если вы откроете один из них, вы можете увидеть что-то похожее на изображение ниже:

Вы можете быстро просмотреть четыре кнопки, плавающие слева:

  • Первый (значок плюса) позволяет перетащить один из встроенных (или одного из ваших) компонентов.
  • Вторая цель - расположить компоненты по странице и организовать всю страницу. Это может быть очень полезно, если у вас много компонентов, о которых нужно позаботиться.
  • Третий позволяет вам изменять свойства страницы, такие как ее имя, языковой стандарт, время и время отображения групп клиентов, а также SEO между другими вещами.
  • Последний - управлять медиа-контентом как изображениями и видео.

Зачем использовать Page Designer?

Конструктор страниц позволяет разработчикам инкапсулировать логику и создание динамической разметки для конечного пользователя, предлагая ввести простые данные, такие как строки, изображение или категорию продукта, для каждого компонента страницы.

Вы можете повторно использовать общие компоненты в витринах магазинов или в проектах, сэкономив много времени.

Кроме того, вы можете создать свой собственный макет страницы и поместить туда некоторую логику или настроить, какие компоненты разрешено добавлять в каждый раздел.

Руки вверх

Прежде, чем мы начнем

Мы предполагаем, что у вас уже есть экземпляр песочницы SFCC и вы знаете, как развернуть там свой код.

Создать базовый проект

Наш проект будет называться demo-page-designer, а наш картридж basic-page-designer.

mkdir demo-page-designer && cd demo-page-designer
mkdir basic-page-designer && cd basic-page-designer
mkdir cartridges && cd cartridges
mkdir basic-page-designer && cd basic-page-designer
mkdir experience && cd experience
mkdir components && cd components
mkdir demo_assets && cd demo_assets

Затем скопируйте содержимое SFRA из официального репо в подпапку с именем sfra.

Структура папки

Компоненты конструкторов страниц находятся в папке experience. Здесь нам нужно разместить два файла: файл JSON для определения компонента и контроллер JS для рендеринга вывода.

Давайте создадим эти файлы в $/basic-page-designer/cartridges/basic-page-designer/experience/components/demo-assets.

Предположим, наш компонент называется heroWithCTA. Создадим необходимые файлы с желаемым содержанием.

Файл определения

Создайте файл с именем heroWithCTA.json. Здесь у нас есть некоторые самообъясняемые свойства и другие важные свойства:

  • группа: это группа редакторов, в которой компонент будет отображаться для автора.
  • attribute_definition_groups: этот массив содержит определения групп полей. В каждой группе должно быть хотя бы одно поле. В каждом поле необходимо указать его ID, имя и тип.

Вы можете найти здесь дополнительную информацию о схеме JSON компонента Page Designer.

Ниже приводится полное содержимое файла, в котором определены две группы («Название героя» и «Призыв героя к действию»), в последнюю из них мы добавляем два поля для настройки ссылки и заголовка CTA.

{
  "name": "Hero with CTA",
  "description": "Hero with title, image, copy and CTA button",
  "group": "commerce_assets",
  "attribute_definition_groups": [
  {
    "id": "heroSubTitleSection",
    "name": "Hero title",
    "description": "The message to be displayed on the Sub Title.",
    "attribute_definitions": [
    {
      "id": "heroTitle",
      "name": "Title",
      "description": "The message to be displayed on the title.",
      "type": "string",
      "required": true
    }]
  },
  {
    "id": "heroCTASection",
    "name": "Hero Call To Action",
    "description": "The CTA to be displayed on the hero.",
    "attribute_definitions": [
    {
      "id": "heroCTALink",
      "name": "Button Link",
      "description": "CTA's link.",
      "type": "url"
    },
    {
      "id": "heroCTAText",
      "name": "Button Link Caption",
      "description": "CTA's Caption.",
      "type": "string"
    }]
  }],
  "region_definitions": []
}

Файл контроллера

Здесь находится код для обработки извлечения данных для визуализации компонента с данными пользователя.

Создайте файл с именем heroWithCTA.js и затем передайте введенные пользователем данные в представление ISML .

Ниже вы можете найти весь пример кода, чтобы продолжить работу с нашим примером.

‘use strict’;
var Template = require(‘dw/util/Template’);
var HashMap = require(‘dw/util/HashMap’);
/**
* Render logic for CTA With Hero Component
* @param {dw.experience.ComponentScriptContext} context The component script context object.
* @returns {string} The template to be displayed
*/
module.exports.render = function (context) {
  var content = context.content;
  var model = new HashMap();
  model.heroTitle = content.heroTitle;
  model.heroCTALink = content.heroCTALink;
  model.heroCTAText = content.heroCTAText;
  return new Template(‘experience/components/demo_assets/heroWithCTA’).render(model).text;
};

Создать шаблон компонента

Последний фрагмент кода, который нам нужно ввести, - это отображение данных пользователя. Как обычно при использовании шаблонов ISML, мы получаем данные от heroWithCTA.js в переменной pdict.

Ниже приведен недостающий фрагмент кода. Сохраните его в / experience / components / demo_assets как heroWithCTA.isml.

<div class="container hero-cta-wrapper">
  <div class="row">
    <div class="campaign-banner-container col-10 col-sm-6">
      <div class="campaign-banner-message">
        <h2 class="title">${pdict.heroTitle}</h2>
        <isif condition="${pdict.heroCTALink && pdict.heroCTAText}">
          <a class="cta-button btn btn-primary" href="${pdict.heroCTALink}">${pdict.heroCTAText}</a>
        </isif>
      </div>
    </div>
  </div>
</div>

Обратите внимание, что heroCTALink и heroCTAText не являются обязательными. Для этого нам нужно проверить, хотим ли мы отображать ссылку с призывом к действию.

Тестируем наш компонент

Чтобы полностью протестировать свой новый компонент, вы можете загрузить картридж в свою песочницу и отредактировать любую существующую страницу Page Designer.

Вы можете увидеть наш новый компонент в группе компонентов Commerce Assets следующим образом:

Вы можете перетащить его в любое пустое место на странице, и редактор компонентов может отобразить его для ввода полей, которые мы настроили.

После заполнения обязательных полей вы можете увидеть визуализацию компонента на странице в очень простом стиле.

Совет по устранению неполадок: не забудьте добавить картридж в путь к картриджу на витрине магазина и убедиться, что вы загрузили последний код в активную версию кода. В качестве последнего ресурса попробуйте повторно инициализировать версию кода.

Заключение

Дизайнер страниц не требует больших усилий по разработке, чтобы предоставить нашим клиентам простой в использовании способ изменять контент в Бизнес-менеджере, не опасаясь нарушить нашу бесценную разметку.