我试图了解响应性在默认引导主题中的工作原理所有关于此的家庭作业都是徒劳的。
情况: 举个例子,重点说一下;此主题允许在显示产品列表的两个选项之间进行选择:网格和列表。单击其中一个锚点后,产品列表从网格更改为列表,既没有重新加载页面,也没有更改地址栏中的 url。
问题:
我的目标是在两个显示选项中显示的列表中添加一些数据。因此,我定制了模板文件product-list.tpl
以打印附加属性。执行的代码行。但:
- 打印的元素仅出现在网格显示(而不是列表)中。
- 当我在两种样式之间切换(从列表返回到网格)时,添加的元素不会显示。
我目前的理解:
我曾经在 Chrome 中使用开发工具来查找事件侦听器断点。换句话说,单击带有类的锚点会将我带到绑定事件large
的文件$(".large").onclick()
并让我找到 javascript 执行的操作。但是在 default-bootstrap 主题下,这个操作只会引导我找到jquery-1.1.10.min.js
(如你所知)jQuery 库的最小化文件。我希望找到另一个包含使用该库的事件侦听器的文件;类似的东西$(".large").onclick(....)
。
问题:
如何找到执行点击更新页面内容的特定javascript代码?哪个文件/文件拥有当前主题的响应性?在我所有的 js 文件中,我没有找到任何触发动作的元素类名(类似于large
)。
根据 David Taiaroa 的回答进行编辑:单击锚点后
,无序列表的类别<ul>
从grid
变为。list
但是这些类没有太多的样式。发生的事情是<li>
s 的所有内容都被改变了。通常我应该找到类似的东西:$('ul').toggleClass("grid");
和/或一些jQuery/AJAX?如果此实际主题中存在 AJAX 代码,如何查找?即使在网络中,也没有像通常使用 AJAX 时那样点击后的 GET 请求。这很奇怪,这可能与 Bootstrap 的工作方式有关吗?
解决方案:
Prestashop 1.6 的默认引导主题中包含相关 javascript 的文件是global.js
. 我根据 Chrome Dev Tools 下的 Sources>Event-Listeners 断点进行了调查,这误导了我。在检查源代码中的 js 文件时,我同样跳过了这个文件。