Создание виджет-компонента

Видеоурок

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

При необходимости установите настройки компонента.

Приведём пример создания нового виджета на основе сервиса «AddThis». Зайдите на сайт и сгенерируйте код.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fa3621d4757f860"></script>
<!-- AddThis Button END -->

Внешний вид кнопок:

При создании компонента можно пойти двумя путями:

• Сгенерированный код вставить в поле «Отображение объекта» и сохранить виджет. При этом не будет иметь никаких настроек, все изменения должны вноситься вручную.
• Добавить администратору возможность выбора нужных кнопок. Для этого:
• создайте для каждой кнопки отдельное поле. В соответствии с указанным примером полей будет 4: facebook, twitter, gplus, addthis. Тип поля: целое число.
  
• внесите изменение в поле «Отображение объекта»:

  <!-- AddThis Button BEGIN -->
  <div class='addthis_toolbox addthis_default_style'>
  <?=$buttons?>
  </div>
  <script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fa3621d4757f860'></script>
  <!-- AddThis Button END -->

• В поле «Системные настройки» впишите массив:

  $buttons = array(
    ($f_facebook ? '<a class='addthis_button_facebook_like' fb:like:layout='button_count'></a>' : ''),
    ($f_twitter ? '<a class='addthis_button_tweet'></a>' : ''),
    ($f_gplus ? '<a class='addthis_button_google_plusone' g:plusone:size='medium'></a>' : ''),
    ($f_addthis ? '<a class='addthis_counter addthis_pill_style'></a>' : '')
  );
  $buttons = implode(',', $buttons);

• Изменить альтернативную форму добавления объекта:

  <input name='f_facebook' value='0' type='hidden' />
  <input name='f_facebook' id='f_facebook' value='1' type='checkbox' />
  <label for='f_facebook'><font color='gray'>Facebook</font><br /></label><br />
  
  <input name='f_twitter' value='0' type='hidden' />
  <input name='f_twitter' id='f_twitter' value='1' type='checkbox' />
  <label for='f_twitter'><font color='gray'>Twitter</font><br /></label><br />
  
  <input name='f_gplus' value='0' type='hidden' />
  <input name='f_gplus' id='f_gplus' value='1' type='checkbox' />
  <label for='f_gplus'><font color='gray'>Google+</font><br /></label><br />
  
  <input name='f_addthis' value='0' type='hidden' />
  <input name='f_addthis' id='f_addthis' value='1' type='checkbox' />
  <label for='f_addthis'><font color='gray'>Add This</font><br /></label><br />

• Изменить альтернативную форму изменения объекта:

  <input name='f_facebook' value='0' type='hidden' />
  <input name='f_facebook' id='f_facebook' value='1' type='checkbox' <?=(1 == $f_facebook ? "checked='checked'" : "");?> />
  <label for='f_facebook'><font color='gray'>Facebook</font><br /></label><br />
  
  <input name='f_twitter' value='0' type='hidden' />
  <input name='f_twitter' id='f_twitter' value='1' type='checkbox' <?= (1 == $f_twitter ? "checked='checked'" : "");?> />
  <label for='f_twitter'><font color='gray'>Twitter</font><br /></label><br />
  
  <input name='f_gplus' value='0' type='hidden' />
  <input name='f_gplus' id='f_gplus' value='1' type='checkbox' <?= (1 == $f_gplus ? "checked='checked'" : "");?> />
  <label for='f_gplus'><font color='gray'>Google+</font><br /></label><br />
  
  <input name='f_addthis' value='0' type='hidden' />
  <input name='f_addthis' id='f_twitter' value='1' type='checkbox' <?= (1 == $f_addthis ? "checked='checked'" : "");?> />
  <label for='f_addthis'><font color='gray'>Add This</font><br /></label><br />

Сохраните виджет. Теперь вы можете выбирать нужные кнопки: