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() %}