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

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

i seek understand how responsiveness works in default-bootstrap theme of prestahsop 1.6. although not new newbie, lot of homework done regarding futile.

situation: let's take illustration , focus on it; theme allows selection between 2 options displaying list of products: grid , list. on click on 1 of anchors, product list alter grid list without neither page reload, nor url alter in adress bar.

problems: goal add together info list displayed in both display options. so, customized template file product-list.tpl in order print additional attribute.the line of code executed. but:

the printed element appear in grid displaying (not list). when swap between 2 styles (going list grid) added element don't show.

my current understanding:

i used utilize developement tools in chrome find event listener breakpoints. in other words, click on anchor class large lead me file $(".large").onclick() event binded , allow me find javascript performed actions. under default-bootstrap theme, operation leads me jquery-1.1.10.min.js is(as know) minimified file of jquery library. expected finding file contains event listener uses library; $(".large").onclick(....).

questions: how find specific javascript code performs update of page content on click? file/files hold reponsiveness of current theme? in js files, dont find classname of elements triggering actions (something large).

edit based on david taiaroa answer: class of unordered list <ul> changes grid list after click on anchors. there not much styles attached these classes. happening content of <li>s altered. should find like: $('ul').toggleclass("grid"); and/or jquery/ajax? how find ajax code if exist in actual theme? in network, there no requests after click when ajax used. that's odd, maybe related way bootstrap works?

your help much invaluable me. in advance.

solution:

the file contains concerned javascript in default-bootstrap theme of prestashop 1.6 global.js. investigated based on sources>event-listeners breakpoints under chrome dev tools misleading me. as jumping file while checking js files in source code. silly error made me waste lot of time , uncertainty knowledge. sorry wasting time. have nice day.

without specific url refer to, have general suggestions try.

disclaimer :) these suggestions apply typical web page. don't have experience designing prestashop templates , may not apply in case

one way of acheiving big icon / list icon behaviour describe toggling or adding css classes. jquery manipulates classes , css takes on , hides objects , displays others, maybe animates things , changes layout.

using chrome development tools, see if can identify what's happening classes of big , list icons, or perchance parent elements.

in js files, dont find icon-th-large word.

i'm not sure if there need reference icon-th-large in js files. if this actual icon way read you've posted if clicks on it, js kicks in , thing, toggling or adding classes.

edit there might ajax happening allow load content page without url changing or page reloading.

hope helps!

javascript jquery responsive-design prestashop prestashop-1.6