Atributos
Os arquivos canopus (canopus.js e canopus.css) foram pensados para agilizar o desenvolvimento de ações corriqueiras do desenvolvimento (adicionar produtos ao carrinho, abrir modal de identificação, carregar prévia do carrinho, entre outras). A inserção desses arquivos são obrigatórias no desenvolvimento do seu site.
Caso não tenha inserido ainda, insira no <head></head> do seu arquivo as chamadas para os arquivos do canopus:
<link href="{{ canopus_css() }}" rel="stylesheet">E no rodapé do seu arquivo é necessário também inserir:
<script src="{{ canopus_js() }}"></script>Para utilizá-lo, é necessário configurar alguns atributos do seu template para ativar as funções do nosso script, e, os atributos podem ser incluídos em quaisquer tags HTML. São eles:
canopus-checkout-add-item-btn - Atributo utilizado para identificar um elemento cujo clique dispara uma requisição de envio de item ao carrinho. No elemento deve conter o endpoint a ser chamado via requisição AJAX que executa a inclusão do item no carrinho. Esse endpoint poderá estar em um atributo href (em casos de tag <a>) ou rel (para demais tags, como <button>). A regra para montar o endpoint é a mesma disponível na documentação da API para inserir itens no carrinho. Se preferir, a função {{ checkout_cart_add_item_link($produtoOuPlano) }}.
Por padrão 1 quantidade do item é inserida. Se necessário uma quantidade maior, um atributo quantity pode ser incluído à mesma tag.
Após o retorno com sucesso da requisição, uma prévia do carrinho é exibida automaticamente via modal. Se o redirecionamento à página do carrinho for desejado, pode-se criar um link com uma tag <a> para o mesmo endpoint e o atributo canopus-checkout-add-item-btn não deverá ser acrescentado à tag.
canopus-checkout-cart-open-preview - Atributo utilizado para identificar elementos cujo clique abre o preview do carrinho em um modal.
canopus-checkout-cart-close-preview - Atributo utilizado para identificar elementos cujo clique fecha uma instância de modal com o preview do carrinho previamente aberto.
canopus-logout - Atributo utilizado para identificar elementos cujo clique dispara uma requisição que efetua o logout do cliente previamente logado.
canopus-open-identification-modal - Atributo utilizado para identificar elementos cujo clique abre o modal de identificação.
canopus-logout - Atributo utilizado para identificar elementos cujo clique processa o logout do cliente identificado.
canopus-showcase-infinite-scroll - Atributo utilizado para identificar o elemento base da vitrine. Onde serão incluídos (ao final) os demais resultados a partir do clique no botão de carregar mais.
canopus-showcase-infinite-scroll-more - Atributo utilizado para identificar elementos cujo clique deve carregar mais itens em uma vitrine que não foi configurada como rolagem infinita. A não existência de uma tag com esse atributo implica na rolagem infinita da vitrine.
canopus-showcase-infinite-scroll-sort - Atributo utilizado para identificar elementos que indicam a ordem da vitrine (algo como “Nome crescente”, “Nome decrescente” e etc). Se configurado corretamente, assim que o valor do elemento é alterado (preferencialmente <select> ou <input>) a vitrine é atualizada com a nova ordem de itens.
canopus-showcase-infinite-scroll-limit - Atributo utilizado para identificar elementos que indicam a quantidade de produtos por carregamento (ou página) da vitrine. Se configurado corretamente, assim que o valor do elemento é alterado (preferencialmente <select> ou <input>) a vitrine é atualizada com o novo limite.
canopus-showcase-infinite-scroll-price-max - Atributo utilizado para identificar filtros de preço máximo. Se configurado corretamente, ao atualizar o valor do elemento (preferencialmente <input>) a vitrine é atualizada considerando o novo limite de preço.
canopus-showcase-infinite-scroll-price-min - Atributo utilizado para identificar filtros de preço mínimo. Se configurado corretamente, ao atualizar o valor do elemento (preferencialmente <input>) a vitrine é atualizada considerando o novo limite de preço.
canopus-showcase-infinite-scroll-tag-filter - Atributo utilizado para identificar elementos que representam tags de produtos disponíveis para serem filtradas. O slug da tag deverá ser incluído como valor do atributo (<elemento canopus-showcase-infinite-scroll-tag-filter=”slug-da-tag”>Nome da tag</elemento>). Se configurado corretamente, ao clicar no elemento a tag será adicionada aos filtros se ausente ou removida dos filtros se já estiver presente e a vitrine recarregada automaticamente.
canopus-showcase-infinite-scroll-remove-tag-filter - Atributo utilizado para identificar elementos que devem remover uma tag dos filtros aplicados. O slug da tag deverá ser incluído como valor do atributo (<elemento canopus-showcase-infinite-scroll-remove-tag-filter=”slug-da-tag”>Nome da tag</elemento>). Se configurado corretamente, ao clicar no elemento a tag será removida dos filtros e a vitrine recarregada automaticamente.
canopus-showcase-infinite-scroll-extra-field-filter - Atributo utilizado para identificar elementos de campos extras que devem ser exibidos na aplicação de filtros. O slug do campo extra deverá ser incluído como valor do atributo (<elemento canopus-showcase-infinite-scroll-extra-field-filter=”slug-do-campo-extra”>Meu campo extra</elemento>). Se configurado corretamente, ao clicar no elemento o campo extra e o valor escolhido será adicionado à lista de filtragem e a vitrine será recarregada.
canopus-showcase-infinite-scroll-apply - Atributo utilizado para identificar elementos que disparam uma atualização nos filtros. Se configurado corretamente, ao clicar no elemento os valores das demais tags configuradas com atributos canopus serão capturados e a vitrine recarregada.
canopus-showcase-infinite-scroll-categories-filter - Atributo utilizado para exibir todas as categorias, e fazer a identificação das mesmas.
canopus-open-item-availability-alert-modal - Atributo utilizado para identificar o elemento que, ao ser clicado, abrirá o modal padrão de avise-me. O valor do atributo deverá ser o ID do item a ser avisado. Exemplo: <elemento canopus-open-item-availability-alert-modal=”{{ aqui deve ir o ID }}”>Avise-me</elemento>
Comentários
0 comentário
Por favor, entre para comentar.