Composição de um Widget

Um Widget é composto pelos seguintes itens

  • Manifesto
  • Template (opcional)
  • Scripts (opcional)
  • Styles (opcional)
  • Imagem (opcional) 

Manifesto

Todo Widget deve ter um arquivo manifest.xml no diretório raiz. O manifesto apresenta informações essenciais e também pode informar outros detalhes como os descritos abaixo:

  • O nome e uma descrição sobre o Widget;
  • Qual template será carregado quando o Widget for renderizado;
  • Quais parâmetros o Widget aceita;
  • Quais assets (JS/CSS) serão carregados. 

    Arquivo Manifesto

    Para o arquivo manifesto funcionar precisa estar nomeado exatamente como manifest.xml .


  • A estrutura do arquivo Manifesto deve ser conforme o exemplo abaixo: 


<?xml version="1.0" encoding="utf-8"?>
<package>
  <widgets>
    <widget
      tagName="browsing_logo"
      widgetName="Área do Logotipo"
      component="WidgetComponent"
      title="Área do Logotipo"
      description="Widget da área do logotipo"
      folder="browsing.logo"
      icon="browsing.logo\image\icon.ico"
      template="wd.browsing.logo.template"
      category="general"
      jsHandler=""
      isPreLoad="False">
    <property name="Source" friendlyName="Source da imagem" type="Text" visibility="Server" required="true" defaultValue="" />
    <property name="LinkTitle" friendlyName="Title do link" type="Text" visibility="Server" required="true" defaultValue="" />
      <include type="Javascript" relativePath="Scripts/wd.browsing.logo.js" />
      <include type="StyleSheet" relativePath="Styles/wd.browsing.logo.css" />
    </widget>
  </widgets>
</package>


Templates

  • O template é o arquivo onde é montada a estrutura HTML de um Widget em conjunto com a linguagem Liquidde templates da plataforma, sendo possível carregar conteúdos dinâmicos. Conforme o exemplo abaixo:
{% assign WidgetId = Widget.Id %}
{% assign WidgetTitle = Widget.WidgetTitle %}
{% assign WidgetClass = Widget.WidgetClass %}
{% assign WidgetDefaultClass = Widget.WidgetDefaultClass %}

{% block VAR %}{% endblock %}

<div id="{{ WidgetId }}" class="{{ WidgetName }} {{ WidgetClass }}">

    <!-- BEFORE -->
    {% block BEFORE %}{% endblock %}    

    {% if Widget.WidgetBox == false %}
        <div class="{{ WidgetName }}">
    {% else %}
        <div class="{{ WidgetName }} {% if WidgetDefaultClass != false %}wd-widget{% endif %}">

            <div class="wd-header">
                <span class="wd-icon"></span>
                <div class="wd-title">{{ WidgetTitle | allowhtml }}</div>

                <!-- HEADER -->
                {% block HEADER %}{% endblock %}

            </div>
            <div class="wd-content">
    {% endif %}

                <!-- CONTENT -->
                {% block CONTENT %}{% endblock %}

            </div>
    {% unless Widget.WidgetBox == false %}
            <div class="wd-footer">
                <span class="wd-icon"></span>

                <!-- FOOTER -->
                {% block FOOTER %}{% endblock %}

            </div>
        </div>
    {% endunless %}

    <!-- AFTER -->
    {% block AFTER %}{% endblock %}
</div>
Exemplo de uso
{% extends /widget.template %}

{% block VAR %}

    {% assign WidgetId = '' %}
    {% assign WidgetName = '' %}
    {% assign WidgetTitle = '' %}
    {% assign WidgetClass = '' %}
    {% assign WidgetDefaultClass = '' %}

{% endblock %}

{% block BEFORE %}
    {% assign WidgetName = '' %}
{% endblock %}

{% block HEADER %}{% endblock %}

{% block CONTENT %}{% endblock %}

{% block FOOTER %}{% endblock %}

{% block AFTER %}{% endblock %}


Chamando um Widget no template

Para chamar um Widget em um template, deve-se referenciá-lo no código do template com a Tag {% NOME_DO_WIDGET %}. Como os exemplos abaixo:

  • Breadcrumbs de navegação: {% browsing_breadcrumbs() %}
  • Exibir o menu de categorias: {% browsing_categorymenu() %}
  • Controlar a exibição das flags do produto: {% product_flags() %}
     

  • Sem rótulos