In this article I want to tell you how to easily make your life a little easier by filling out the website using the WebAsyst engine, going straight to editing products and having the ability to remove all the checkboxes on the page. And also potentially save 500 rubles on the purchase of a plugin that fixes one of these problems.Foreword
I work in the field of creating and promoting websites, and for online stores we mainly resort to the Webasyst engine. I can’t say anything bad about him, but in a year of filling out sites on it, I realized that 2 things annoy me, which I will talk about later.And once I decided to look in the code of the admin panel itself and try to fix what I do not like.Switching to product editing by clicking on it in the admin panel
This is what the list of goods looks like:
The fact is that if you simply click on the name in the list of goods, then such an intermediate window opens:
In it you can go to edit photos or change the name ... And when you click on the "edit" button, the transition directly for editing.
Maybe someone is comfortable. Someone but not me.Exploring
If you look at the link, it becomes clear that the intermediate page has an addresshttps:///webasyst/shop/?action=products
And the editing page is the same + /editat the end.We correct
It was not difficult to find the template for the product listing display page, it is located at://wa-apps/shop/templates/actions/products/
There are 3 files, the name of which begins with product_list_. All of them draw the admin panel in 3 variations:
Display of goods in the form of a table, icons and a table with articles. I only use the table view, so my choice is the fileproduct_list_table.html
Having opened the browser page inspector in the admin panel, I found out that product links look something like this:<td class="drag-handle s-product-name">
<a href="#/product/6037">
<div>. <i class="shortener"></i></div>
</a>
</td>
Found the line in the above file:<td class="drag-handle s-product-name">
<a href="#/product/{%#p.id%}/">
<div>{%#p.name%}<i class="shortener"></i></div>
</a>
</td>
and added at the end of edit, it turned out like this:<td class="drag-handle s-product-name">
<a href="#/product/{%#p.id%}/edit">
<div>{%#p.name%}<i class="shortener"></i></div>
</a>
</td>
And it worked.By the way, I saw on the expanses of the Installer a plug-in that is needed for the same task, but it costs 500 rubles.Checkboxes
On the site, which most often has to be filled, various additional components for doors implemented using the "Services". Each product (door) is associated with its category, and since it is impossible to assign a service to a category, all products are still sorted into different types of goods, which usually duplicate categories.That is, everything that is inside the category “one” belongs to the type of product “one”. But there are exceptions when the price of components in one category differs depending on the color of the door, etc. Then the product types “one.1”, “one.2”, etc. are created And for each type you need to create your own services with their own prices.View in admin panel:
View on site:
It was required to create a lot of such services, and it was necessary to mark from 1 to 5 checkboxes, and by default, when creating a new “service”, all checkboxes in the list of product types were already marked. At first, I removed everything manually, leaving it necessary, but of course, it took a lot of time to remove about a hundred checkboxes and I started writing the code in the console each time I created a “service”:$('body input:checkbox').prop('checked', false);
This code removes all checked checkboxes on the page. It worked, but it was still not very convenient. Therefore, I saw 2 options: edit the code so that when creating the service the checkboxes would appear in the unchecked state, and not in the marked one or add the “remove all checkboxes” button to the admin interface.My knowledge in JS is extremely small, so I chose the second method.Found a render file for the service editing interface://wa-apps/shop/templates/actions/services/Services.html
And in it is the button code for the “Delete Service”:<li>
<a href="#" class="s-delete-service">
<i class="icon16 delete"></i>
[`Delete this service`]
</a>
</li>
Without thinking twice, I added a button right next to the current lonely “delete” by placing the code below:<li>
<input type="button" value=" " onClick="$('body input:checkbox').prop('checked', false);" />
</li>
When clicked, the above JS code is executed and everything works.Before clicking:
After pressing:
Perhaps all this could be solved easier, but I decided as best I could. I hope someone will find this helpful.