Révision du panneau d'administration Webasyst

Dans cet article, je veux vous dire comment vous faciliter la vie un peu plus facilement en remplissant le site Web à l'aide du moteur WebAsyst, en passant directement à la modification des produits et en ayant la possibilité de supprimer toutes les cases à cocher de la page. Et économisez également potentiellement 500 roubles sur l'achat d'un plugin qui résout l'un de ces problèmes.

Préface


Je travaille dans le domaine de la création et de la promotion de sites Web, et pour les boutiques en ligne, nous recourons principalement au moteur Webasyst. Je ne peux rien dire de mal à son sujet, mais en un an de remplissage de sites dessus, je me suis rendu compte que 2 choses m'ennuient, dont je parlerai plus tard.
Et une fois que j'ai décidé de regarder dans le code du panneau d'administration lui-même et d'essayer de corriger ce que je n'aime pas.

Passer à l'édition de produits en cliquant dessus dans le panneau d'administration


Voici à quoi ressemble la liste des marchandises:

image

Le fait est que si vous cliquez simplement sur le nom dans la liste des marchandises, une telle fenêtre intermédiaire s'ouvre:

image

vous pouvez y éditer des photos ou changer le nom ... Et lorsque vous cliquez sur le bouton "modifier", la transition se fait directement pour l'édition.

image

Peut-être que quelqu'un est à l'aise. Quelqu'un mais pas moi.

Explorant


Si vous regardez le lien, il devient clair que la page intermédiaire a une adresse

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

Et la page d'édition est la même + /edità la fin.

Nous corrigeons


Il n'a pas été difficile de trouver le modèle de la page d'affichage de la liste des produits, il se trouve à l'adresse suivante:

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

Il y a 3 fichiers dont le nom commence par product_list_. Tous dessinent le panneau d'administration en 3 variantes:

image

Affichage des marchandises sous la forme d'un tableau, d'icônes et d'un tableau avec des articles. J'utilise uniquement la vue tableau, donc mon choix est le fichier

product_list_table.html

Après avoir ouvert l'inspecteur de page du navigateur dans le panneau d'administration, j'ai découvert que les liens de produits ressemblent à ceci:

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

Trouvé la ligne dans le fichier ci-dessus:

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

et ajouté à la fin de l'édition, il s'est avéré comme ceci:

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

Et ça a marché.

Soit dit en passant, j'ai vu sur les étendues de l'installateur un plug-in qui est nécessaire pour la même tâche, mais cela coûte 500 roubles.

Cases à cocher


Sur le site, qui doit le plus souvent être rempli, divers composants supplémentaires pour portes mis en œuvre à l'aide des "Services". Chaque produit (porte) est associé à sa catégorie, et comme il est impossible d'affecter un service à une catégorie, tous les produits sont toujours triés en différents types de marchandises, qui dupliquent généralement les catégories.

Autrement dit, tout ce qui se trouve dans la catégorie «un» appartient au type de produit «un». Mais il existe des exceptions lorsque le prix des composants d'une catégorie diffère selon la couleur de la porte, etc. Ensuite, les types de produits «one.1», «one.2», etc. sont créés. Et pour chaque type, vous devez créer vos propres services avec leurs propres prix.

Afficher dans le panneau d'administration:

image

Afficher sur le site:

image

Il fallait créer un grand nombre de ces services, et il fallait cocher de 1 à 5 cases à cocher, et par défaut, lors de la création d'un nouveau «service», toutes les cases à cocher de la liste des types de produits étaient déjà cochées. Au début, j'ai tout supprimé manuellement, le laissant nécessaire, mais bien sûr, il a fallu beaucoup de temps pour supprimer une centaine de cases à cocher et j'ai commencé à écrire le code dans la console chaque fois que je créais un «service»:

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

Ce code supprime toutes les cases cochées sur la page. Cela a fonctionné, mais ce n'était toujours pas très pratique. Par conséquent, j'ai vu 2 options: modifier le code de sorte que lors de la création du service, les cases à cocher apparaissent dans l'état non coché et non dans celui marqué ou ajouter le bouton "supprimer toutes les cases à cocher" à l'interface d'administration.

Mes connaissances en JS étant extrêmement limitées, j'ai donc choisi la deuxième méthode.

Trouvé un fichier de rendu pour l'interface d'édition de service:

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

Et c'est le code du bouton pour le "Service Supprimer":

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

Sans y réfléchir à deux fois, j'ai ajouté un bouton juste à côté de la «suppression» solitaire actuelle en plaçant le code ci-dessous:

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

Lorsque vous cliquez dessus, le code JS ci-dessus est exécuté et tout fonctionne.

Avant de cliquer:

image
Après avoir appuyé:

image
Peut - être que tout cela pourrait être résolu plus facilement, mais j'ai décidé du mieux que je pouvais. J'espère que quelqu'un trouvera cela utile.

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


All Articles