Krible Shelf: создание виджета

Владелец сайта может размещать свои собственные виджеты на Полке. Для этого нужно в тело страницы добавить специальный HTML-тег <template>...</template>, в ктором можно разместить содержимое виджета. Этот тип тега является валидным и входит в стандарт HTML5, одобренный консорциумом [W3C]. Содержимое этого тега не выводится современными браузерами, а является контентом для последующей обработки JS-скриптами веб-сайта.

Shelf - от английского ::ʃelf:: - Полка, стеллаж. Это продукт компании Krible, позволяющий размещать на веб-сайтах виджеты: "Онлайн-консультант", "Звонок с сайта", "Телепортатор" и т.д., в едином стиле с соблюдением общих свойств в поведении.

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

Для активации Полки на сайте нужно разместить общий код сервиса [Krible], который доступен в личном кабинете.

<script src="//cdn.krible.com/loader?code=xxxxxx"></script>  

Созданиe простого виджета

Владелец сайта может размещать свои собственные виджеты на Полке. Для этого нужно в тело страницы добавить специальный HTML-тег <template>...</template>, в ктором можно разместить содержимое виджета. Этот тип тега является валидным и входит в стандарт HTML5, одобренный консорциумом [W3C]. Содержимое этого тега не выводится современными браузерами, а является контентом для последующей обработки JS-скриптами веб-сайта. Для того, чтобы устаревшие браузеры не выводили содержимое этого тега, рекомендуется прописать в теге атрибут hidden.

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

<template id="shelf-number" data-name="Тел: +7(499) 705-82-90" data-href="/index.html" data-color="#17a379" data-align="left" data-order="1" data-width="200px" data-type="simple" data-sign="phone" hidden></template>  

Тег <template> содержит ряд атрибутов, которые определяют оформление и поведения виджета на Полке. Для того, чтобы программный код Krible Shelf смог определить какой именно тег <template> нужно импортировать на Полку нужно задать атрибут id, начинающийся со слова shelf-, в противном случае тег будет проигнорирован.

Предусмотрен специальный формат атрибутов для передачи нестандартных параметров, он начинается с префикса data-. Атрибут data-name - определяет текст виджета, кторое будет выведен на Полке. Здесь можно передавать только текст, без использования форматирования. Для создания более сложных видов оформления, используется другая форма записи, см. ниже.

Если нужно, чтобы клик по виджету приводил переход на определенную страницу, пропишите ссылку в атрибут: data-href.

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

Виджеты на Полке умеют располагаться с левого или с правого края в нужной последовательности. Чтобы определить расположение, укажите data-align="left" или data-align="right", а для задания очередности пропишите data-order="11", где разрешается использовать любое целочисленное значение, кроме 0, 10, 20, 30, 40 и т.д. Значения десятков зарезервированы за продуктами сервиса Krible и используются при сортировке в Личном кабинете.

Стандартный размер ширины видждета 180 точек, если необходимо изменить это значение - пропишите data-width="200px", обязательно укажите нужные единицы измерения: px, %, em и т.п.

Полка умеет адаптироваться под размеры экрана пользователя. Если ширина окна браузера не позволяет уместить все виджеты в полном размере, то некоторые из них сожмутся до размера иконки. Поэтому важно каждому виджету присвоить свою подходящую по смыслу иконку. Мы подготовили набор из нескольких десятков иконок, выполненых в едином стиле. Выберите понравивщийся символ и пропишите его название в атрибут data-sign. Например, для описываегомого выше виджета, мы выбрали изображение телефонной трубки: data-sign="phone".

Обязательным и важным атрибутом является data-type="", который принимает 2 типа значений: - simple - тип для простых виджетов, которые не предусматривают развертывание; - bubble - тип для сложных виджетов с режимом развертывания подробной информации, например как Онлайн-консультант;

Атрибут hidden запрещает отображение тега <template> для старых браузеров.

Создание сложного виджета

Для создания более сложных виджетов так же используется тег <template>...</template> который может быть размещен в любой части HTML-документа веб-сайта.

Приведем пример виджета корзины покупок для Интернет-магазина.

<template id="shelf-cart" data-align="right" data-type="bubble" data-timeout="5" data-lifetime="10" data-sign="cart" data-width="280px" hidden>  
  <div class="shelfHead">Заголовок</div>
  <div class="shelfBody">Описание</div>
</template>  

Задаем уникальный идентификатор, начинающийся с префикса "shelf-", определяем положение и тип как "bubble", задаем ширину и высоту виджета в раскрытом состоянии. Обратие внимание, что атрибут data-name отсутствует, т.к. за контент, отображаемый на Полке будет теперь отвечать тег <div> с атрибутом class="shelfHead" внутри тега <template>. А за содержимое раскрывающейся части growl отвечает тег <div> с атрибутом class="shelfBody".

Мы хотим вывести в заголовок виджета текст "В корзине: 0 товаров", который изменяется в зависимости от действий пользователя. А в раскрывающуюся часть виджета мы хотим вывести картинки товаров из корзины и кнопку "Оформить заказ".

<div class="shelfHead">  
  В корзине: <span id="cartVol">0</span> товаров
</div>

<div class="shelfBody">  
<button id="orderBut">Оформить заказ</button>  
<ul id="cartPics">  
  <li><img src="/images/goods/empty.jpg"></li>
</ul>  
</div>  

Вы можете создать свои собственные JavaScript функции, изменяющие контент созданных тегов. ВАЖНО! В записи селекторов не используйте тег template, т.к. его содержимое на момент работы Полки - отсутствует.

Примерная функция отображения кол-ва товаров на jQuery может выглядеть так:

var addToCart = function(vol) {  
    var cartVol = $("#cartVol");
    var volume = parseInt(cartVol.html());
    cartVol.html(volume + vol);     
    return;
};

addToCart(1);  

Допустимые атрибуты и их значения

Ниже приведен список всех допустимых атрибутов тега <template>

  • id - уникальный идентификатор виджета, значение начинается с префикса "shelf-". Например: id="shelf-widget1".

  • data-name - текст для вывода в заголовке виджета и во всплывающей подсказке. Игнорируется к выводу в заголовке, если определен тег с атрибутом class="shelfHead", но сохраняется к выводу для всплывающей подсказке.

  • data-type - тип виджета: simple|bubble;

  • data-sign - задает изображение для иконки виджета, (см. полный список названий иконок);

  • data-align - выравнивание по краям Полки: left|right;

  • data-order - порядковый номер сортировки виджета: от 1 до 999;

  • data-width - ширина виджета с указанием единиц измерения: 300px;

  • data-color - цвет виджета: "#ff00ee";

  • data-href - ссылка на страницу при клике на виджет;

  • data-title - текст для вывода во всплывающей подсказке. Рекомендуется, если нужно вывести отличный текст от заголовка виджета.

  • data-click - вызов JavaScript-функции при клике на виджет: data-click="alert('Hello!')";

  • data-blank - если значение равно 1, то при клике на виджет будет открываться новая вкладка браузера;

  • data-timeout - время ожидания в секундах перед автоматическим раскрытием виджета. Только при data-type="growl";

  • data-lifetime - время ожидания в секундах перед автоматическим закрытием виджета. Только при data-type="growl";

Создавайте свои виджеты, пробуйте, экспериментируйте, сообщайте разработчикам Krible о своих успехах и неудачах. Будем развивать сервис Krible вместе!