Inserir mais uma aba de "características"



  • Será que é possível inserir mais um "nível" de características que não tenha vinculo com o já existente para aparecem em uma nova aba no produto?

    Pois temos a seguinte situação:

    Alguns produtos, por lei tem de ter etiquetas de informações divulgadas no e-commerce, é o caso de produtos naturais, que tem que ter todas as informações nutricionais informadas e pneus, que precisam ter a imagem do selo do INMETRO que vem nele visível no e-commerce.

    A ideia desta nova aba, seria, poder editar o layout dela para que pudêssemos por exemplo deixa-la com o layout do selo dos pneus, e então no cadastro do produto, estas informações serem inseridas como características.

    Como o intuito dela é apenas para estes produtos que a lei exige e não apareceria em outro lugar e nem pode estar fora do modelo estabelecido pela lei, não poderia ter vinculo com a parte de características já existente na loja.

    Isso seria possivel?


  • Dev

    Olá @NoxSolucoes, sobre isso é possível sim, segue o site teste que mostra como é possível:
    https://teste2019.xtechcommerce.com/home/Top-Must-Have-Cami

    Se é isso que você quer, é só me falar o nome do seu site que irei implementar em seu layout e te darei os passos de como fazer essa aba personalizada ser adicionada em seu site.



  • Olá @charles, é mais ou menos isso.
    Precisaremos executar esta personalização na aba, porém acho que precisaria de algo a nivel da administração tb.
    Pois terá de adicionar no admin a opção de cadastrar este novo grupo de características.
    Ficando duas abas, uma sendo a que ja existe e uma nova com estas informações separadas.

    Creio que seria uma solução para muitos clientes, pois assim que a legislação começar a ser cobrada, todo mundo que trabalha com produtos que tem selo do inmetro (eletrônicos, pneus entre outros) e quem trabalha com produtos regulados pela Anvisa, precisarão desta solução.

    Ou a alternativa, seria inserir uma imagem das etiquetas, mas isso geraria mais trabalho para obter a etiqueta, upar, além de demandar mais processamento, memoria e espaço do servidor, ja que utilização imagens ao invés de texto como na minha ideia.


  • Dev

    @NoxSolucoes, segue uns prints de como é no painel administrativo a criação simples de abas:

    2_1520007006322_screenshot-teste2019.xtechcommerce.com-2018.03.02-13-07-30.png 1_1520007006321_screenshot-teste2019.xtechcommerce.com-2018.03.02-13-07-10.png 0_1520007006320_screenshot-teste2019.xtechcommerce.com-2018.03.02-13-06-31.png

    As abas são criadas a partir dos ID dos produtos e vc pode colocar várias abas e dar nomes as abas e colocar conteúdos baseados nelas.



  • Entendi @charles, como faz para ativar isso na loja?
    o ID do site do cliente é: 45629


  • Dev

    Olá @noxsolucoes, bem isso é feito por personalização nas lojas, não vem na plataforma, então eu já adicionei o código com esse tipo de programação na sua loja e já pode ser realizado esse tipo de ação em sua loja. Então eu fiz um modelo preview de como ficou na sua loja nesse produto: https://roger-pneus.xtechcommerce.com/home/Calota-Calotinha-Centro-Roda-Audi-A3-A4-A5-A6-A7 e no seu painel administrativo já foi feito 2 abas com um modelo de funcionamento explicativo de como é feito, basta seguí-los. Para encontrar isso no seu painel, vai no menu em LAYOUT > CONTEÚDOS > Abas do Produto I - [Max: 50 itens] e lá tem os detalhes de modelo de exemplo.

    Qualquer dúvida sobre o uso, é só falar comigo!



  • Muito Obrigado @charles



  • Gostaria de implantar na minha loja também as novas abas nos produtos -
    ID da loja: 89698



  • @charles Gostaria de adicionar na minha loja aba adicional de caracteristica . Não tenho acesso ao código para fazer essa adição é a minha primeira loja na Xtech sou desenvolvedor.

    ID da loja: 111483

    Como faço para cadastrar como desenvolvedor, goommerce não é lançado nunca



  • @charles Gostaria muito de implementar no nosso site. Pois a aba Cuidados e limpeza é fundamental para nosso produto



  • @charles

    @charles disse em Inserir mais uma aba de "características":

    Olá @noxsolucoes, bem isso é feito por personalização nas lojas, não vem na plataforma, então eu já adicionei o código com esse tipo de programação na sua loja e já pode ser realizado esse tipo de ação em sua loja. Então eu fiz um modelo preview de como ficou na sua loja nesse produto: https://roger-pneus.xtechcommerce.com/home/Calota-Calotinha-Centro-Roda-Audi-A3-A4-A5-A6-A7 e no seu painel administrativo já foi feito 2 abas com um modelo de funcionamento explicativo de como é feito, basta seguí-los. Para encontrar isso no seu painel, vai no menu em LAYOUT > CONTEÚDOS > Abas do Produto I - [Max: 50 itens] e lá tem os detalhes de modelo de exemplo.

    Qualquer dúvida sobre o uso, é só falar comigo!

    @charles Você consegue me dar uma posição sobe a inclusão dessa nova Aba porfavor. Vamos lançar nosso site na quinta-feira. Preciso inserir Aba garantia e cuidados com os tapetes


  • Dev

    Olá @tapetemais, segue o código bem simples para add a funcionalidade:

    1 - Add o código no arquivo settings.json, para criar um painel de edição das abas visualmente:

    0_1558462567994_screenshot-teste2019.xtechcommerce.com-2019.05.21-15-13-21.png

    - CÓDIGO PARA SER ADICIONADO NA LOJA:

    "tabs_prod": {
                "name": "Abas da página de Produto [Limite de 50 itens]",
                "listing": "text:name",
                "fields": {
                    "text:name":        {"label": "Nome da lista (apenas para referência na listagem)"},
                    "text:order":       {"label": "Ordem da aba (Apenas número - Ordem crescente)"},
                    "text:id":          {"label": "ID do Produto (identifica o produto para adição da aba). Pode deixar em BRANCO caso use para todos os produtos da categoria."},
                    "if:if_nome_cat":   {"label": "Adicionar abas para todos os produtos em uma categoria?"},
                    "text:nome_cat":    {"label": "Nome da categoria (add abas em todos os produtos da categoria). Pode deixar em BRANCO caso use em um produto específico."},
                    "text:tab":         {"label": "Nome da Aba"},
                    "textarea:tab":     {"label": "Conteúdo da Aba", "rich": true}
                }
            }
    
    

    2 - Acesse o arquivo product.html para adicionar o seguinte código:

    0_1558462654690_screenshot-teste2019.xtechcommerce.com-2019.05.21-15-11-12.png

    - CÓDIGOS PARA SEREM ADICIONADOS NA LOJA:

    {# ABAS DO PRODUTO PARA LISTA #}
    {% set cat_prod_name = '' %}
    {% for tab in get_collection('tabs_prod', {'limit': 50})|sort %}
        {% for cat_list in product.categories if tab["text:nome_cat"]|lower == cat_list.slug %}
            {% set cat_prod_name = tab["text:nome_cat"]|lower %}
        {% endfor %}
    	{% if cat_prod_name == tab["text:nome_cat"]|lower and tab["if:if_nome_cat"] %}
    		<li>
    			<a href="#tab-{{loop.index}}" data-toggle="tab">{{ tab['text:tab'] }}</a>
    		</li>
    	{% endif %}
        {% if tab['text:id'] == product.id and tab["if:if_nome_cat"] == false %}
    		<li>
    			<a href="#tab-{{loop.index}}" data-toggle="tab">{{ tab['text:tab'] }}</a>
    		</li>
    	{% endif %}
    {% endfor %}
    
    {# ABAS DO PRODUTO PARA CONTEÚDO #}
    {% for tab in get_collection('tabs_prod', {'limit': 50})|sort %}
        {% for cat_list in product.categories if tab["text:nome_cat"]|lower == cat_list.slug %}
        	 {% set cat_prod_name = tab["text:nome_cat"]|lower %}
        {% endfor %}
        {% if cat_prod_name == tab["text:nome_cat"]|lower and tab["if:if_nome_cat"] %}
    	<div class="tab-pane clearfix" id="tab-{{loop.index}}">
                 {{ tab['textarea:tab']|nl2br }}
            </div>
        {% endif %}
        {% if tab['text:id'] == product.id and tab["if:if_nome_cat"] == false %}
             <div class="tab-pane clearfix" id="tab-{{loop.index}}">
                 {{ tab['textarea:tab']|nl2br }}
            </div>
        {% endif %}
    {% endfor %}
    


  • @charles Muito obrigado !!! Deu super certo. Tem alguma adição ao código para está nova aba ser padrão para todos os itens ou categoria. No caso tenho que criar uma aba para cada produto, não consigo adicionar o ID de uma categoria ou mais de um ID dentro de cada Aba. Obrigado novamente


  • Dev

    Olá @tapetemais, eu atualizei os códigos acima, eu só add para ele fazer que vc add abas em todos os produtos em uma categoria específica, isso vc vai ver no painel após add o código.



  • @charles Obrigado Mestre pelo rápido Retorno. Já vou testar