Funções do opencode são conjuntos de comandos já prontos que realizam determinado procedimento. Essas funções têm como objetivo facilitar e estruturar o desenvolvimento.

A utilização de funções possibilita consultar informações de Produtos, Marcas e Categorias, onde também disponibiliza utilidades como referenciar o caminho absoluto do tema além de exibir imagens e textos cadastrados no painel administrativo da Tray.

Funções Disponíveis

As funções disponíveis são:

• asset()
• Brands()
• Categories()
• Image()
• Products()
• Translation

Chamadas de Funções

Com o opencode podemos manipular funções de diversas maneiras, como exibir seus atributos na tela, utilizar laços de repetição e fazer validações, tudo isso de acordo com a necessidade.

As algumas funções como por exemplo Product(), Brands() e Categories() sempre retornarão um array (vetor) de dados, por isso para exibir determinada informação você deve passar seu índice dentro desse vetor. Já as funções como Assets(), Image() e a Translation(), retornam apenas informações pontuais.

Desta forma, para exibir uma posição do vetor de products retornadas pela função temos:

        {% set products = Products() %}
          {{ products[0].id}}
      

Podemos também exibir todos os produtos ou todas as categorias utilizando um laço for:

        {% set products = Products({
            'order': {
                'quantity_sold': 'desc',
                'name': 'asc',
                'id': 'desc'
            }
        }) %}
        {% for product in products %}
          {{ product.name }}
        {% endfor %}
      

        {% set myCategories = Categories({ "order": { "name": "asc" }}) %}
        <ul>
          {% for category in myCategories %}
            <li>{{ category.name }}</li>
          {% endfor %}
        </ul>
      

Além disso podemos utilizar por exemplo a função Image() para exibir um botão adicional cadastrado no painel como por exemplo:

        {{ Image('additional_button') }}
      

Ou até mesmo adicionar arquivos .css, .js ou até mesmo imagens utilizando a função Asset()

          <img src="{{ asset('img/my-image.png') }}" alt="">
          <script src="{{ asset('js/style.js') }}"></script>
          <link rel="stylesheet" href="{{ asset('css/style.css') }}">
        

Frontend - Agencia

12 de junho de 2020 12:52