-1

我试图了解响应性在默认引导主题中的工作原理所有关于此的家庭作业都是徒劳的。

情况: 举个例子,重点说一下;此主题允许在显示产品列表的两个选项之间进行选择:网格和列表。单击其中一个锚点后,产品列表从网格更改为列表,既没有重新加载页面,也没有更改地址栏中的 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 文件时,我同样跳过了这个文件。

4

1 回答 1

1

如果没有具体的 URL 可以参考,我有一些一般性的建议你可以试试。

免责声明 :) 这些建议适用于典型的网页。我没有设计 Prestashop 模板的经验,因此它可能不适用于这种情况

实现您描述的大图标/列表图标行为的一种方法是切换或添加 CSS 类。jQuery 操作类,然后 CSS 接管并隐藏一些对象并显示其他对象,甚至可能为事物设置动画并更改布局。

使用您的 Chrome 开发工具,看看您是否可以识别大图标和列表图标的类发生了什么,甚至可能是它们的父元素。

在我所有的 js 文件中,我没有找到任何图标大字。

我不确定在 js 文件中是否一定需要对 icon-th-large 进行任何引用。如果这是实际的图标,那么我阅读您发布的内容的方式是,如果有人点击它,那么 JS 就会启动并执行它的操作,可能会切换或添加类。

编辑
可能还会发生一些 AJAX,这将允许您在不更改 URL 或重新加载页面的情况下将内容加载到页面中。

希望这可以帮助!

于 2014-06-18T23:39:05.773 回答