Jump to content

Josefmartos

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by Josefmartos

  1. I had the same big problem: The dropdown menu, the cart, the slider and other features like create new account, didn't work on Android devices. In IOS systems (Iphones, Ipads), they fix this problem in a native way, which "transforms" the "hovers" into "taps" for a proper functionality in a mobile device. (Source: http://www.domestika.org/es/forums/5-programacion-cliente/topics/97970-como-transformar-menu-hover-a-hover-click-para-que-funcione-en-tablet-y-ipad) (Spanish). I solved this problem thanks to the last post and another one I found on internet. I'll try to explain: 1) The first thing to do is to remove some script lines as it's said in the post before: - Open the file: "<prestashop_dir>/themes/theme481/js/script.js" From line 22 to line 48, there is the problematic code. When this code is removed almost everything starts to work again. So you can comment this block of code like this, in order to avoid its execution: 22 // Responsive Prestashop 23 /* 24 $(function(){ . . // IPad/IPhone . var viewportmeta = document.querySelector && document.querySelector('meta[name=viewport]'), .......................................... . if(isAndroid) { . $('.sf-menu').responsiveMenu({autoArrows:true}); . } 48 }); 49 */ I can't really explain why we have to remove this code, but it works. Now the slider, and many others drop-down features works again. 2) The second thing to solve is the behaviour of the drop-down menu in a tablet device. With the abscence of a cursor, like in a PC, the action "hover" when you place the mouse over the menu in order to open it down, is not possible becasse in a table there is not a cursor, so we can only just "tap" with the finger like a mouse click, so we need a extra code to change the drop-menu behaviour to our needs. In this post is everything explained: http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/ Lets do it: - Download the following script: doubletaptogo.js - Place it into the default javascript folder for the theme: <prestashop_dir>/themes/theme481/js - Add the script file into the header: Open <prestashop_dir>/themes/theme481/header.tpl Add the following (green) line to the file: <script type="text/javascript" src="{$js_dir}doubletaptogo.js"></script> You can do it around the same place where all others scripts imports are. (ca. line 78-90) - Now we have to add the special behaviour to our menu. Open <prestashop_dir>/themes/theme481/modules/blocktopmenu/blocktopmenu.tpl Add the following lines (in green): 10 {$MENU} 11 </ul> 12 </div> 13 <!-- Menu --> 14 <div class="sf-contener clearfix"> 15 <nav id="nav" role="navigation"> 16 <ul class="sf-menu clearfix"> 17 {$MENU} 18 {if $MENU_SEARCH} 19 <li class="sf-search noBack" style="float:right"> 20 <form id="searchbox" action="{$link->getPageLink('search')}" method="get"> 21 <input type="hidden" name="controller" value="search" /> 22 <input type="hidden" value="position" name="orderby"/> 23 <input type="hidden" value="desc" name="orderway"/> 24 <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" /> 25 </form> 26 </li> 27 {/if} 28 </ul> 29 </nav> 30 <div class="sf-right"> </div> 31</div> 32<script>$( function(){ $( '#nav li:has(ul)' ).doubleTapToGo();});</script> 33 <!--/ Menu --> 34{/if} Now, the script takes action on the menu, so they will force a double tap to go to the desire link, allowing the navitgation on it using a tablet. I'm sure it will be improved, but with this we have now our responsive theme fully working on almost every popular device Thanks to the authors of the fixes to get to this.
  2. Hi, I had that problem and I just solved it (maybe it can work for you also): The file you have to modify is "./themes/theme481/products.tpl" From line 143 you will find this: <div id="pb-right-column"> <!-- product img--> <!-- product img--> <script> /*$(function(){ $('#zoom1').parent().on('click',function(){ var perehod = $(this).attr("perehod"); if (perehod=="false") { return true; }else{ return false; } }); });*/ $(document).ready(function() { $("a#zoom1").fancybox(); }); ... The lines in red catchs the event when we click on the image (that is a link in fact), and I have no idea what they pretend to do, but for sure them make the fancybox does not work. So just comment them. You have to add the lines in green. Them adds the image on the link to the fancybox system, so when we click on it, it will make the effect. Your link with the big image to show has to have the ID zoom1 (in this example, you can change it). I decided to not use the jqzoom, and just show the image and having the big one by clicking on it, so some lines down under in the same file I did the following: {if $jqZoomEnabled} <a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:0, adjustY:0" class="cloud-zoom" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block; width:106px!important; height:106px!important;"> <img alt="{$product->name|escape:'htmlall':'UTF-8'}" width="106" height="106" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block ; z-index:2; opacity:0; width:106px!important; height:106px!important;"> <img alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" class="picpic" width="300" height="300" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block; margin-top:0px; margin-left:0; top:-270px; left:-186px; position:absolute; z-index:1"> </a> {else} <a id="zoom1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}"> <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic" /> </a> {/if} You have to add the link (lines in green) in order to make it work with the fancybox. As you can see I used the same ID #zoom1. If you are using jqzoom it may work without modifications because it already have the link. Hope this can help. Regards.
  3. You're an angel. I had this big problem about the CMS pages that doesn't appear when I saw your simple and unimaginable solution: "I've uninstalled (disable) the module promotions of matrice theme and working again " Thank you very much.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More