En este art铆culo, quiero decirle c贸mo hacer que su vida sea un poco m谩s f谩cil completando el sitio web utilizando el motor WebAsyst, yendo directamente a la edici贸n de productos y teniendo la capacidad de eliminar todas las casillas de verificaci贸n en la p谩gina. Y tambi茅n potencialmente ahorrar 500 rublos en la compra de un complemento que soluciona uno de estos problemas.Prefacio
Trabajo en el campo de la creaci贸n y promoci贸n de sitios web, y para las tiendas en l铆nea recurrimos principalmente al motor Webasyst. No puedo decir nada malo sobre 茅l, pero en un a帽o de llenar sitios en 茅l, me di cuenta de que hay dos cosas que me molestan, de lo que hablar茅 m谩s adelante.Y una vez que decid铆 buscar en el c贸digo del panel de administraci贸n y tratar de arreglar lo que no me gusta.Cambiar a la edici贸n del producto haciendo clic en 茅l en el panel de administraci贸n
As铆 es la lista de productos:
el hecho es que si simplemente hace clic en el nombre en la lista de productos, se abre una ventana intermedia de este tipo:
en ella puede ir a editar fotos o cambiar el nombre ... Y cuando hace clic en el bot贸n "editar", la transici贸n directamente para editar
Quiz谩s alguien se sienta c贸modo. Alguien pero no yo.Explorador
Si mira el enlace, queda claro que la p谩gina intermedia tiene una direcci贸nhttps:///webasyst/shop/?action=products
Y la p谩gina de edici贸n es la misma + /edital final.Corregimos
No fue dif铆cil encontrar la plantilla para la p谩gina de visualizaci贸n de la lista de productos, se encuentra en://wa-apps/shop/templates/actions/products/
Hay 3 archivos, cuyo nombre comienza con product_list_. Todos ellos dibujan el panel de administraci贸n en 3 variaciones:
visualizaci贸n de productos en forma de tabla, iconos y una tabla con art铆culos. Solo uso la vista de tabla, as铆 que mi elecci贸n es el archivoproduct_list_table.html
Despu茅s de abrir el inspector de la p谩gina del navegador en el panel de administraci贸n, descubr铆 que los enlaces de productos se ven as铆:<td class="drag-handle s-product-name">
<a href="#/product/6037">
<div>. <i class="shortener"></i></div>
</a>
</td>
Encontr贸 la l铆nea en el archivo anterior:<td class="drag-handle s-product-name">
<a href="#/product/{%#p.id%}/">
<div>{%#p.name%}<i class="shortener"></i></div>
</a>
</td>
y agregado al final de la edici贸n, result贸 as铆:<td class="drag-handle s-product-name">
<a href="#/product/{%#p.id%}/edit">
<div>{%#p.name%}<i class="shortener"></i></div>
</a>
</td>
Y funcion贸.Por cierto, vi en las extensiones del instalador un complemento que se necesita para la misma tarea, pero cuesta 500 rublos.Casillas de verificaci贸n
En el sitio, que debe llenarse con mayor frecuencia, se implementan varios componentes adicionales para puertas utilizando los "Servicios". Cada producto (puerta) est谩 asociado con su categor铆a, y dado que es imposible asignar un servicio a una categor铆a, todos los productos a煤n se clasifican en diferentes tipos de productos, que generalmente duplican categor铆as.Es decir, todo lo que est谩 dentro de la categor铆a "uno" pertenece al tipo de producto "uno". Pero hay excepciones cuando el precio de los componentes en una categor铆a difiere seg煤n el color de la puerta, etc. Luego se crean los tipos de producto "one.1", "one.2", etc. Y para cada tipo necesita crear sus propios servicios con sus propios precios.Ver en el panel de administraci贸n:
Ver en el sitio:
Se requer铆a crear muchos de estos servicios, y era necesario marcar de 1 a 5 casillas de verificaci贸n, y de manera predeterminada, al crear un nuevo "servicio", todas las casillas de verificaci贸n en la lista de tipos de productos ya estaban marcadas. Al principio, elimin茅 todo manualmente, dej谩ndolo necesario, pero por supuesto, me llev贸 mucho tiempo eliminar unas cien casillas de verificaci贸n y comenc茅 a escribir el c贸digo en la consola cada vez que creaba un "servicio":$('body input:checkbox').prop('checked', false);
Este c贸digo elimina todas las casillas marcadas en la p谩gina. Funcion贸, pero todav铆a no era muy conveniente. Por lo tanto, vi 2 opciones: editar el c贸digo para que al crear el servicio las casillas de verificaci贸n aparezcan en el estado desmarcado, y no en el marcado o agregue el bot贸n "eliminar todas las casillas de verificaci贸n" a la interfaz de administraci贸n.Mi conocimiento en JS es extremadamente peque帽o, as铆 que eleg铆 el segundo m茅todo.Encontr贸 un archivo de render para la interfaz de edici贸n de servicio://wa-apps/shop/templates/actions/services/Services.html
Y en 茅l est谩 el c贸digo del bot贸n para el "Servicio de eliminaci贸n":<li>
<a href="#" class="s-delete-service">
<i class="icon16 delete"></i>
[`Delete this service`]
</a>
</li>
Sin pensarlo dos veces, agregu茅 un bot贸n justo al lado de la "eliminaci贸n" solitaria actual colocando el c贸digo a continuaci贸n:<li>
<input type="button" value=" " onClick="$('body input:checkbox').prop('checked', false);" />
</li>
Cuando se hace clic, el c贸digo JS anterior se ejecuta y todo funciona.Antes de hacer clic:
Despu茅s de presionar:
Quiz谩s todo esto podr铆a resolverse m谩s f谩cilmente, pero decid铆 lo mejor que pude. Espero que alguien lo encuentre 煤til.