Revisão do painel de administração do Webasyst

Neste artigo, quero mostrar como facilitar sua vida um pouco mais fácil, preenchendo o site usando o mecanismo WebAsyst, indo diretamente para a edição de produtos e tendo a capacidade de remover todas as caixas de seleção da página. E também potencialmente economize 500 rublos na compra de um plug-in que corrige um desses problemas.

Prefácio


Trabalho no campo da criação e promoção de sites e, para lojas online, recorremos principalmente ao mecanismo Webasyst. Não posso dizer nada de ruim sobre ele, mas em um ano preenchendo sites, percebi que duas coisas me incomodam, das quais falarei mais tarde.
E uma vez eu decidi procurar no código do painel de administração e tentar consertar o que não gosto.

Mudando para a edição do produto, clicando nele no painel de administração


É assim que a lista de mercadorias se parece:

imagem

O fato é que, se você simplesmente clicar no nome na lista de mercadorias, uma janela intermediária será aberta:

imagem

nela você poderá editar fotos ou alterar o nome ... E quando clicar no botão "editar", faça a transição diretamente para edição.

imagem

Talvez alguém esteja confortável. Alguém, mas não eu.

Explorando


Se você olhar para o link, fica claro que a página intermediária tem um endereço

https:///webasyst/shop/?action=products#/product/id

E a página de edição é a mesma + /editno final.

Nós corrigimos


Não foi difícil encontrar o modelo para a página de exibição da lista de produtos. Ele está localizado em:

//wa-apps/shop/templates/actions/products/

Existem 3 arquivos, cujo nome começa com product_list_. Todos eles desenham o painel de administração em três variações:

imagem

exibição de mercadorias na forma de uma tabela, ícones e uma tabela com artigos. Eu só uso a visualização de tabela, então minha escolha é o arquivo

product_list_table.html

Depois de abrir o inspetor da página do navegador no painel do administrador, descobri que os links dos produtos são mais ou menos assim:

<td class="drag-handle s-product-name">
    <a href="#/product/6037">
        <div>.  <i class="shortener"></i></div>
    </a>
</td>

Encontre a linha no arquivo acima:

<td class="drag-handle s-product-name">
    <a href="#/product/{%#p.id%}/">
        <div>{%#p.name%}<i class="shortener"></i></div> 
    </a>
</td>

e adicionado no final da edição, ficou assim:

<td class="drag-handle s-product-name">
    <a href="#/product/{%#p.id%}/edit">
        <div>{%#p.name%}<i class="shortener"></i></div> 
    </a>
</td>

E funcionou.

A propósito, vi nas extensões do instalador um plug-in necessário para a mesma tarefa, mas custa 500 rublos.

Caixas de seleção


No site, que geralmente precisa ser preenchido, vários componentes adicionais para portas são implementados usando os "Serviços". Cada produto (porta) está associado à sua categoria e, como é impossível atribuir um serviço a uma categoria, todos os produtos ainda são classificados em diferentes tipos de mercadorias, que geralmente duplicam categorias.

Ou seja, tudo o que está dentro da categoria "um" pertence ao tipo de produto "um". Mas há exceções quando o preço dos componentes em uma categoria difere dependendo da cor da porta, etc. Em seguida, são criados os tipos de produto "one.1", "one.2" etc. E para cada tipo, você precisa criar seus próprios serviços com seus próprios preços.

Visualizar no painel de administração:

imagem

Visualizar no site:

imagem

Era necessário criar muitos desses serviços e era necessário marcar de 1 a 5 caixas de seleção e, por padrão, ao criar um novo "serviço", todas as caixas de seleção na lista de tipos de produtos já estavam marcadas. Inicialmente, removi tudo manualmente, deixando necessário, mas é claro que demorou muito tempo para remover cerca de cem caixas de seleção e comecei a escrever o código no console toda vez que criava um "serviço":

$('body input:checkbox').prop('checked', false);

Este código remove todas as caixas de seleção marcadas na página. Funcionou, mas ainda não era muito conveniente. Portanto, vi duas opções: edite o código para que, ao criar o serviço, as caixas de seleção apareçam no estado desmarcado e não no marcado ou adicione o botão "remover todas as caixas de seleção" à interface de administração.

Meu conhecimento em JS é extremamente pequeno, então eu escolhi o segundo método.

Foi encontrado um arquivo de renderização para a interface de edição de serviço:

//wa-apps/shop/templates/actions/services/Services.html

E nele está o código do botão para o "Excluir serviço":

<li>
    <a href="#" class="s-delete-service">
        <i class="icon16 delete"></i>
        [`Delete this service`]
    </a>
</li>

Sem pensar duas vezes, adicionei um botão ao lado da atual "exclusão" solitária, colocando o código abaixo:

<li>
    <input type="button" value="  " onClick="$('body input:checkbox').prop('checked', false);" />
</li>

Quando clicado, o código JS acima é executado e tudo funciona.

Antes de clicar:

imagem
Depois de pressionar:

imagem
Talvez tudo isso pudesse ser resolvido com mais facilidade, mas decidi da melhor maneira possível. Espero que alguém ache isso útil.

Source: https://habr.com/ru/post/undefined/


All Articles