Compare

Disponível para uso nas páginas: catalog e search.

Para saber mais sobre como gerenciar produtos acesse o link: Gerenciar Produtos

Para adicionar e remover produtos da comparação de produtos via AJAX, utilize o seguinte snippet:

Input:

{#
   # Comparador
   # elements/snippets/Comparador.html
#}
{% if pages.current == 'catalog' and settings.compare %}
<div class="compare-buttons">
    {% set compareCSS = 'compare-hidden' %}

    <a data-compare="remove" href="{{ links.compare_delete ~ product.id }}" class="{{ not product.compare ? compareCSS }}">
        <span class="filter-checkbox checked"></span>
        {{ Translation("remover_comparar") }}
    </a>
    
    <a data-compare="add" href="{{ links.compare_add  ~ product.id }}" class="{{ product.compare ? compareCSS }}">
        <span class="filter-checkbox"></span>
        {{ Translation("comparar_produto") }}
    </a>
</div>
{% endif %}

Output:

<div class="compare-buttons">
	<a data-compare="remove" href="xxx" class="compare-hidden">
		<span class="filter-checkbox checked"></span>
    	Remover Comparação
    </a>
    <a data-compare="add" href="xxx" class="">
    	<span class="filter-checkbox"></span>
        Comparar Produto
    </a>
</div>

Como Usar

Copie o código acima e crie um arquivo separado, ex: elements/snippets/comparador.html

Faça a chamada desse arquivo onde desejar:

{% element 'snippets/comparador' {"product": product} %}