products

O Objeto products é um array que disponibiliza informações de todos os produtos possíveis na página atual.

Na pagina de categorias “catalog”, por exemplo contém somente os produtos da categoria determinada de acordo com os filtros aplicados, e na “search” contém os produtos de acordo com os critérios da busca e os filtros aplicados.

Para chamar produtos com critérios personalizados, veja a função Products().

Disponível para uso nas páginas: home | catalog | search

Para saber mais sobre como gerenciar produtos acesse: Cadastrar Produto

Atributos disponíveis​

As requisições de produtos sempre retornarão um array de dados, portanto podem ser exibidos com a utilização de um índice determinado como nos atributos abaixo, ou quando iterados em um laço de repetição.

Atributo product.images

Este atributo retorna um array com informações sobre as imagens cadastradas no produto, que pode ser usado nas páginas home, catalog e search. É possível manipular o tamanho da imagem para uso em Thumbnails por exemplo, com os atributos da tabela abaixo:

Como Usar

Abaixo você pode ver alguns exemplos da utilização do Objeto products

Input
<div class="showcase-catalog">
    <ul class="list-product">
        {% for item in products %}
            <li class="item">                
                <div class="product">
                    <div class="image">                        
                        <a href="{{ item.link }}" class="space-image">
                            <img class="image" src="{{ asset('img/empty.png') }}" data-src="{{ item.images[0].large }}" alt="{{ item.name }}">
                        </a>
                        {% set replaceTags = {'src=': 'width="119" height="22" alt="Selo" src='} %}
                         {% if product.featured and Image('featured') %}
                            <div class="tag featured">
                                {{ Image('featured') | replace(replaceTags) }}
                            </div>
                        {% endif %}                                       
                    </div>

                    <a class="item-info" href="{{ item.link }}">
                        <div class="item-name">
                            {{ item.name }}
                        </div>
                        <div class="item-price">
                            {% if item.available and item.stock > 0 and not item.upon_request %}
                            
                                {% set current_price = item.price_offer > 0 ? item.price_offer : item.price %}
                                {% set old_price     = item.price_offer > 0 ? item.price : false %}                                
                                {% if item.has_variation and item.has_other_prices %}
                                    <span class="item-has-variants">
                                        {{ Translation('a_partir_de') }}
                                    </span>
                                {% endif %}
                                                                
                                <div class="price display-cash">                                
                                    {% if old_price %}
                                        <span class="old-price">
                                            {{ settings.currency }} {{ old_price | currency }}
                                        </span>
                                    {% endif %}                                
                                    <span class="current-price">
                                        {{ settings.currency }} {{ current_price | currency }}
                                    </span>                                
                                    <span class="item-installments">
                                        {{ item.payment }}
                                    </span>                                
                                </div>
                                                            
                            {% endif %}
                        </div>
                    </a>

                    <div class="actions">
                        {% if item.available and item.stock > 0 and not item.upon_request %}
                            <a class="item-button" href="{{ item.link }}">
                                Ver produto
                            </a>
                        {% endif %}
                    </div>

                </div>
            </li>
        {% endfor %}
    </ul>
</div>
Output
<div class="showcase-catalog">
    <ul class="list-product">
        <li class="item">                
            <div class="product">
                <div class="image">                        
                    <a href="www.sualoja/categoria/produto-a" class="space-image">
                        <img class="image" src="https://caminhoimg.com.br/produto-a.png" alt="Produto A">
                    </a>
                    <div class="tag featured">
                        Destaque
                    </div>
                </div>
                <a class="item-info" href="{{ item.link }}">
                    <div class="item-name">
                        Produto A
                    </div>
                    <div class="item-price">
                        <span class="item-has-variants">
                            A partir de
                        </span>
                        <div class="price display-cash">                                
                            <span class="old-price">
                                R$ 500,00
                            </span>                          
                            <span class="current-price">
                                R$ 450,00
                            </span>                                
                            <span class="item-installments">
                                ou 10x de 53,40 com juros
                            </span>                                
                        </div>
                    </div>
                </a>
                <div class="actions">
                    <a class="item-button" href="https://www.sualoja.com.br/produto-a">
                        Ver produto
                    </a>
                </div>
            </div>
        </li>
    </ul>
</div>

Last updated