修订Webasyst管理面板

在本文中,我想告诉您如何通过使用WebAsyst引擎填写网站,直接编辑产品并具有删除页面上所有复选框的功能来使您的生活轻松一些。并且还可以在购买可解决这些问题之一的插件时节省500卢布。

前言


我从事创建和推广网站的工作,对于在线商店,我们主要采用Webasyst引擎。我不能对他说什么不好,但是在填写网站的一年中,我意识到有两件事困扰着我,我将在后面讨论。
一旦我决定查看管理面板本身的代码,并尝试修复不喜欢的内容。

在管理面板中单击以切换到产品编辑


这是商品清单的样子:

图片

事实是,如果您只是单击商品清单中的名称,则会打开一个中间窗口:

图片

在其中可以编辑照片或更改名称...当您单击“编辑”按钮时,直接转换进行编辑。

图片

也许有人舒服。有人但不是我。

探索


如果您查看链接,很明显中间页有一个地址

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

并且编辑页面/edit的末尾是相同的+

我们纠正


找到产品清单显示页面的模板并不难,它位于:

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

有3个文件,其名称以开头product_list_它们全部以三种形式绘制管理面板:

图片

以表格,图标和带有物品的表格的形式显示商品。我只使用表格视图,所以我的选择是文件

product_list_table.html

在管理面板中打开浏览器页面检查器后,我发现产品链接看起来像这样:

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

在上面的文件中找到该行:

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

并在编辑结束时添加,结果如下:

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

而且有效。

顺便说一句,我在安装程序的广阔范围内看到了一个插件,它是完成同一任务所必需的,但它的价格为500卢布。

选框


在通常需要填充的站点上,使用“服务”实现的门的各种附加组件。每个产品(门)都与其类别相关联,并且由于无法将服务分配给某个类别,因此所有产品仍被分类为不同类型的商品,这些商品通常是重复的类别。

也就是说,类别“一个”内的所有内容都属于产品“一个”的类型。但是,当一类组件的价格根据门的颜色等而有所不同时,也有例外。然后创建产品类型“ one.1”,“ one.2”等。对于每种类型,您都需要以自己的价格创建自己的服务。

在管理控制台中

图片

查看在网站上查看:

图片

需要创建许多此类服务,并且必须标记1至5个复选框,并且默认情况下,在创建新的“服务”时,已经标记了产品类型列表中的所有复选框。最初,我手动删除了所有内容,保留了必要的内容,但是,当然,花了很多时间删除了大约一百个复选框,并且每次创建“服务”时,我都开始在控制台中编写代码:

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

此代码将删除页面上所有选中的复选框。它起作用了,但是仍然不是很方便。因此,我看到了两个选项:编辑代码,以便在创建服务时,复选框将处于未选中状态,而不是已标记状态,或者将“删除所有复选框”按钮添加到管理界面。

我对JS的了解非常少,所以我选择了第二种方法。

找到服务编辑界面的渲染文件:

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

其中是“删除服务”的按钮代码:

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

我三思而后行,通过将下面的代码放置在当前孤独的“删除”旁边,添加了一个按钮:

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

单击后,将执行上面的JS代码,一切正常。

单击之前:

图片
按下之后:

图片
也许可以更轻松地解决所有这些问题,但是我决定尽我所能。我希望有人会对此有所帮助。

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


All Articles