Widgets

Widgets são componentes (blocos de código) independentes responsáveis por exercer uma função específica na loja.

👍

Com os Widgets você pode:

✓ Ter um Layout customizado;
✓ Personalizar Widgets para utilizar no template da loja;

Composição de um Widget

  1. Um Widget é composto pelos seguintes itens: Como Personalizar um Widget
  • Manifesto
  • Template (opcional)
  • Scripts (opcional)
  • Styles (opcional)
  • Imagem (opcional)

Manifesto

  1. 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 com os descritos abaixo:
  • O nome e uma descrição sobre o Widget;
  • Qual template será carregado quando 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

  1. 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

  1. O template é o arquivo onde é montado a estrutura HTML de um Widget em conjunto com a linguagem Liquid de 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

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

Did this page help you?