Search code examples
javascriptjqueryresponsive-designprestashopprestashop-1.6

How does responsiveness work in Default-Bootstrap theme of Prestashop 1.6?

I try to understand how responsiveness works in the default-bootstrap theme of All the homework done regarding this was futile.

Situation: Let's take an example and focus on it; This theme allows the choice between two options for displaying the list of products: Grid and List. On click on one of their anchors, the product list change from Grid to List without neither page reload, nor url change in the adress bar.

Problems: My goal is to add some data to the list displayed in both display options. So, I customized the template file product-list.tpl in order to print the additional attribute.The line of code executed. But:

  • The printed element appear only in the Grid displaying (not the List).
  • When I swap between the two styles (going back from List to Grid) the added element don't show.

My current understanding:

I used to use developement tools in Chrome to find event listener breakpoints. In other words, a click on an anchor with class large lead me to the file where the $(".large").onclick() event is binded and let me find the javascript performed actions. But under the default-bootstrap theme, this operation only leads me to jquery-1.1.10.min.js which is(as you know) a minimified file of the jQuery library. I expected finding another file that contains the event listener that uses this library; something like $(".large").onclick(....).

Questions: How to find the specific javascript code that performs the update of page content on click? Which is the file/files that hold the reponsiveness of the current theme? In all my js files, I dont find any classname of elements triggering actions (something like large).

Edit Based on David Taiaroa answer: The class of the unordered list <ul> changes from grid to list after click on the anchors. But there is not much styles attached to these classes. What is happening is that all the content of the <li>s is altered. Normally I should find something like: $('ul').toggleClass("grid"); and/or some jQuery/AJAX? How to find AJAX code if any exist in this actual theme? Even in Network, there is no GET requests after click like usually when AJAX is used. That's odd, is it maybe related to the way Bootstrap works?

Solution:

The file that contains the concerned javascript in the default-bootstrap theme of Prestashop 1.6 is global.js. I investigated based on Sources>Event-Listeners breakpoints under Chrome Dev Tools which was misleading me. I was equally jumping this file while checking my js files in the source code.

Solution

  • Without a specific URL to refer to, I have some general suggestions you could try.

    Disclaimer :) These suggestions apply to a typical web page. I don't have experience designing Prestashop templates and so it may not all apply in this case

    One way of acheiving the large icon / list icon behaviour you describe is by toggling or adding CSS classes. jQuery manipulates the classes and then CSS takes over and hides some objects and displays others, maybe even animates things and changes the layout.

    Using your Chrome development tools, see if you can identify what's happening to classes of the large and list icons, or possibly even their parent elements.

    In all my js files, I dont find any icon-th-large word.

    I'm not sure if there would necessarily need to be any reference to icon-th-large in the js files. If this is the actual icon then the way I read what you've posted is that if someone clicks on it, then JS kicks in and does its thing, probably toggling or adding classes.

    EDIT
    There might also be some AJAX happening which would allow you to load content into the page without the URL changing or the page reloading.

    Hope this helps!