Добавление статического контента на сайт

В этой статье мы рассмотрим некоторые варианты обработки контента коммерческой платформы YC.

YC имеет широкий набор функциональных возможностей, которые помогут Вам управлять статическим и динамическим содержанием Вашего сайта. Управление контентом YCне является полноценной CMS – скорее это упрощенная система, чтобы сделать платформу YCмаксимально простой в использовании.

Основы

Контент – это, фактически тоже, что и категория в каталоге.  Для отображения содержимого, контент использует тот же системный объект, что и категория – CategoryEntity. Однако есть несколько важных различий, которые дают возможность управлять этими специальными типами категорий.

Первое отличие, это то, что для каждого экземпляра объекта Shopесть корневой каталог контента, который определяется через Category.guid,  который в свою очередь должен соответствовать Shop.code.  Таким образом, каждый отдельный магазин имеет свою собственную иерархию контента. Структура контента очень схожа со структурой каталога категорий, однако в отличие от категории при редактировании контента будет доступна специальная вкладка для управления содержимым страницы. Содержимое контента это текст, который может быть чем угодно: простой текст, HTML, Groovyкод или другие данные, которые могут быть представлены в виде текста.

Содержимое контента хранится в виде списка атрибутов добавляемых пользователем. Названия атрибутов (коды) должны создаваться в соответствии с правилом: CONTENT_BODY_локаль_порядковый номер (например: CONTENT_BODY_ru_1, CONTENT_BODY_ru_2, CONTENT_BODY_en_1, CONTENT_BODY_en_2 и т.д.).  В YCпо умолчанию добавлены два атрибута для русского и английского языков, каждый из которых может хранить по 4000 символов. Примечательно то, что наполняя эти атрибуты текстом в редакторе YUMпользователю нет необходимости делить текст на куски и разбрасывать его по атрибутам CONTENT_BODY_en_1,  CONTENT_BODY_en_2  и т.д. Весь текст может быть добавлен в первый атрибут, после чего сервис управления контентом определит количество созданных атрибутов и разделит текст контента, если это будет необходимо.  Возможно, Вам потребуется создать еще несколько AttributeEntity объектов, если содержание контента больше 8000 символов, что может быть сделано в системе YUM в разделе управления контентом.

Итак, у нас есть представление об управлении контентом, теперь мы рассмотрим, как мы может это использовать.

Так как контент тоже, что и категория мы можем использовать SEO, название, описание и другие атрибуты, доступные для категорий каталога.  В дополнение к этому ContentService.getContentBody(contentId,locale) вернет содержание конкретного контента в виде строки. По умолчанию YCпредполагает, что содержание контента это HTML и ContentCentralView просто делает его частью страницы.  Однако это наиболее упрощенное использование.

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

Галерея изображений

Предположим мы бы хотели создать раздел на сайте, который будет отображать галерею изображений. Для этого мы будем использовать объект Content,  а для uitemplateукажем – imagegallery. Теперь наша категория контента будет представлена в виде галереи изображений. Все подкатегории нашей галереи будут представлены в виде отдельных изображений. Теперь, все что необходимо, это создать новый класс для отображения контента, например ImageGalleryCentralViewи добавить его на HomePage, привязав параметр imagegallery к этому классу. Внутри класса ImageGalleryCentralView мы создадим компоненту Wicketlist, где каждый элемент списка будет представлен в виде кликабельной миниатюры изображения для отдельно взятой подкатегории нашего контента, с использованием, например, lightboxили prettyphoto.

Теперь мы можем создавать объекты контента с uitemplateуказанным как – imagegallery, и добавлять подкатегории с изображениями. В итоге,  у нас есть шаблон для контента – галерея изображений, который мы можем использовать, где пожелаем.

Пример кода реализации галереи изображений

Регистрация класса ImageGalleryCentralView на HomePage:

...
/**
* Registered main panel renderers
*/
private static final Map<String, Class<? extends AbstractCentralView>> rendererPanelMap =
new HashMap<String, Class<? extends AbstractCentralView>>() {{
put(CentralViewLabel.SUBCATEGORIES_LIST, SubCategoriesCentralView.class);
put(CentralViewLabel.PRODUCTS_LIST, ProductsCentralView.class);
put(CentralViewLabel.PRODUCT, SkuCentralView.class);
put(CentralViewLabel.SKU, SkuCentralView.class);
put(CentralViewLabel.SEARCH_LIST, ProductsCentralView.class);
put(CentralViewLabel.CONTENT, ContentCentralView.class);
put(CentralViewLabel.CATEGORY, EmptyCentralView.class);
put(CentralViewLabel.DEFAULT, EmptyCentralView.class);
put("imagegallery", ImageGalleryCentralView.class);
}};
...

Содержимое ImageGalleryCentralView:

import org.apache.lucene.search.BooleanQuery;
import org.apache.wicket.AttributeModifier;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.image.ContextImage;
import org.apache.wicket.markup.html.link.BookmarkablePageLink;
import org.apache.wicket.markup.html.link.ExternalLink;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.request.mapper.parameter.PageParameters;
import org.apache.wicket.spring.injection.annot.SpringBean;
import org.yes.cart.constants.ServiceSpringKeys;
import org.yes.cart.domain.entity.Category;
import org.yes.cart.domain.i18n.I18NModel;
import org.yes.cart.service.domain.ContentService;
import org.yes.cart.web.page.component.AbstractCentralView;
import org.yes.cart.web.support.constants.WebParametersKeys;
import org.yes.cart.web.support.entity.decorator.CategoryDecorator;
import org.yes.cart.web.util.WicketUtil;
import org.yes.cart.web.page.HomePage;
import java.util.ArrayList;
import java.util.List;
public class ImageGalleryCentralView extends AbstractCentralView {

// ----------------------------------- MARKUP IDs BEGIN --------------------------- //
private final static String GALLERY_LIST = "galleryList";
private final static String GALLERY_IMAGE_ZOOM = "galleryImageZoom";
private final static String GALLERY_IMAGE = "galleryImage";
private final static String GALLERY_NAME = "galleryName";
private final static String GALLERY_DESC = "galleryDesc";
private final static String MAIN_IMAGE = "mainImage";
private final static String MAIN_NAME = "mainName";
private final static String MAIN_DESC = "mainDesc";
// ----------------------------------- MARKUP IDs BEGIN --------------------------- //
@SpringBean(name = ServiceSpringKeys.CONTENT_SERVICE)
protected ContentService contentService;
/**
* This is an internal constructor used by HomePage class. It disregards the
* categoryId value.
*
* @param id panel id
* @param categoryId ignored
* @param booleanQuery     boolean query.
*/
public GalleryCentralView(String id, long categoryId, BooleanQuery booleanQuery, List<Long> shopCategories) {
super(id, categoryId, booleanQuery);
final String ctxPath = WicketUtil.getHttpServletRequest().getContextPath();
final String selectedLocale = getLocale().getLanguage();
final String lang = getLocale().getLanguage();
final CategoryDecorator categoryDecorator = getDecoratorFacade().decorate(
getCategory(), WicketUtil.getHttpServletRequest().getContextPath(), getI18NSupport());
final Category parentCategory = contentService.getById(categoryDecorator.getParentId());
final CategoryDecorator categoryParentDecorator = getDecoratorFacade().decorate(
parentCategory, WicketUtil.getHttpServletRequest().getContextPath(), getI18NSupport());
final String i18nName = categoryDecorator.getName(lang);
final String i18nParentName = categoryParentDecorator.getName(lang);
add(new Label("heading", i18nName));
add(new Label("breadcrumb", i18nName));
add(new Label("body", categoryDecorator.getDescription(lang)).setEscapeModelStrings(false));
add(new BookmarkablePageLink<HomePage>("homeLink", HomePage.class));
final PageParameters pageParameters = new PageParameters().add(WebParametersKeys.CONTENT_ID, categoryParentDecorator.getCategoryId());
add(new BookmarkablePageLink<HomePage>("categoryLink", HomePage.class, pageParameters).add(
new Label("breadcrumbParent", i18nParentName)));
// All child content - use this one as it is cached and includes availability!
final List<Category> categories = contentService.getChildContent(categoryId);
CategoryDecorator main = null;
final List<CategoryDecorator> cats = new ArrayList<CategoryDecorator>();
if (categories.size() > 1) {
main = getDecoratorFacade().decorate(categories.get(0), ctxPath, getI18NSupport());
for (final Category category : categories.subList(1, categories.size())) {
cats.add(getDecoratorFacade().decorate(category, ctxPath, getI18NSupport()));
}
} else if (categories.size() == 1) {
main = getDecoratorFacade().decorate(categories.get(0), ctxPath, getI18NSupport());
}
final String contentBody;
if (getCategoryId() > 0l) {
contentBody = contentService.getContentBody(main.getCategoryId(), lang);
} else {
contentBody = "";
}
setVisible(cats.size() > 0);
add(
new ListView<CategoryDecorator>(GALLERY_LIST, cats) {
@Override
protected void populateItem(final ListItem<CategoryDecorator> categoryListItem) {
final CategoryDecorator category = categoryListItem.getModelObject();
final I18NModel nameModel = getI18NSupport().getFailoverModel(category.getDisplayName(), "");
categoryListItem.add(
new ExternalLink(GALLERY_IMAGE_ZOOM, category.getDefaultImage("as", "is")).add(
new ContextImage(GALLERY_IMAGE, category.getDefaultImage("344", "231")).add(
new AttributeModifier("alt", nameModel.getValue(selectedLocale)))
).add(new AttributeModifier("data-rel", "prettyPhoto")
).add(new AttributeModifier("class", "thumb")
).add(new AttributeModifier("title", nameModel.getValue(selectedLocale))));
categoryListItem.add(new Label(GALLERY_NAME, nameModel.getValue(selectedLocale)));
categoryListItem.add(new Label(GALLERY_DESC, category.getDescription(selectedLocale)).setEscapeModelStrings(false));
}
}
);
add(new ContextImage(MAIN_IMAGE, main != null ? main.getDefaultImage("160", "208") : "")
.add(new AttributeModifier("alt", main != null ? main.getName(selectedLocale) : "")));
add(new Label(MAIN_NAME, main != null ? main.getName(selectedLocale) : ""));
add(new Label(MAIN_DESC, main != null ? contentBody : "").setEscapeModelStrings(false));
}
}

Страница Wicket HTML:

<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<body>
<wicket:panel>
<!-- masthead -->
<div id="masthead">
<span class="head">
<wicket:container wicket:id="heading">[Content name]</wicket:container>
</span>
<ul class="breadcrumbs">
<li><a wicket:id="homeLink"><wicket:message key="home">[Home page]</wicket:message></a></li>
<li>/ <a wicket:id="categoryLink"><wicket:container wicket:id="breadcrumbParent">[Content name]</wicket:container></a></li>
<li>/ <wicket:container wicket:id="breadcrumb">[Content name]</wicket:container></li>
</ul>
</div>
<!-- ENDS masthead -->

<!-- page content -->
<div id="gallery-content">
<div class="featured portfolio-list">
<figure wicket:id="galleryList">
<a wicket:id="galleryImageZoom"><img wicket:id="galleryImage"/></a>
<div class="product-grid">
<h5>
<wicket:container wicket:id="galleryName">
[Name]
</wicket:container>
</h5>
<div class="description"><wicket:container wicket:id="galleryDesc">[Description]</wicket:container></div>
</div>
</figure>
</div>
</div>
<!-- ENDS page content -->
<!-- sidebar -->
<aside id="gallery-sidebar">
<div class="block">
<h4><wicket:container wicket:id="mainName">[Name]</wicket:container></h4>
<ul>
<li>
<img wicket:id="mainImage"/>
</li>
</ul>
</div>
<div class="block justify">
<wicket:container wicket:id="mainDesc">[Description]</wicket:container>
</div>
</aside>
<div class="clearfix"></div>
<!-- ENDS sidebar -->
</wicket:panel>
</body>
</html>

Динамические данные

Предположим, мы хотим использовать некоторые динамические данные. Мы можем вставить Groovyкод в содержимое нашего контента. Создать еще одну страницу отображения контента, которая использует GStringTemplateEngine для разбора содержимого контента как groovyкод, и рендерить HTMLкоторый будет содержать динамические данные, такие как товары, категории и другие.

Пример разбора Groovy кода:

...
final GStringTemplateEngine templateEngine = new GStringTemplateEngine(classLoader);
...
final String contentBody = contentService.getContentBody(contentId,locale);
// Map contain all object that are rendered within template
final Map<String, Object> model = ... ;
...
final Writable writable = templateEngine.createTemplate(contentBody).make(model);
final StringWriter stringWriter = new StringWriter();
writable.writeTo(stringWriter);
stringWriter.close();
final String htmlToRender = stringWriter.toString();
...

Другие решения

Создание новых страниц отображения контента довольно простое и позволяет создавать конкретные шаблоны. Как было показано на примере, если мы знаем GUIDконтента,  мы можем получить его содержимое с помощью ContentService.getContentBody(). Также возможно создание специализированного контента с конкретно определенными GUID для использования в шаблонах страниц (например «Контакты»). Эти элементы контента могут быть использованы в шаблонах как коллаж, что позволит изменять отдельные части страницы, либо для добавления дополнительных разделов к существующим страницам (Поиск, Страницы категорий и товаров).

Заключение

YC предлагает Вам простой подход, где Вы принимаете решения. Расширяйте функциональность платформы по мере необходимости и затрачивайте минимум времени на разработку. После того как все необходимые шаблоны будут созданы, Вы можете использовать их при работе с контентом в менеджере YUM, просто указав параметр для uitemplate для нужных контент категорий, что не требует никакой дополнительно разработки.

Надеемся, эта статься дала Вам общее представление, о том, как управлять контентом в Вашей YCплатформе.