Disable mobile double click zoom on product slider

Store Design
1

Hey guys just trying to block the double click zoom feature that’s included on this slider for mobile, cant find solution online.

Using Dawn 4.0

Any help appreciated cheers :slightly_smiling_face:


  

	## {{ section.settings.title | escape }}
  

   

      {% for block in section.blocks %}
      {% assign product = all_products[block.settings.product_item] %}
      

         
            
            

{{ product.title }}

            

{{ product.price | money }}

         
      

      {% endfor %}
   

   

{% assign nav_range = section.settings.navigation_amount %}
{% style %}
	@media only screen and ( min-width: 1201px ) {
		{% if nav_range == 2 %}
        .dawn-product-slider .carousel-cell {
            width: calc(49% - 10px);
        }
		{% elsif nav_range == 3 %}
        .dawn-product-slider .carousel-cell {
          width: calc(32% - 10px);
        }
		{% elsif nav_range == 4 %}
        .dawn-product-slider .carousel-cell {
          width: calc(24% - 10px);
         }
		{% endif %}
    }
    .flickity-page-dots .dot {
    	background: {{ section.settings.navigation_color }};
    }
    .flickity-button-icon {
    	color: {{ section.settings.navigation_color }};
    }
{% endstyle %}

{% schema %}
{
  "name": "Products slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Change the number of cards in view"
    },
    {
      "type": "color",
      "id": "navigation_color",
      "label": "Change color of the pagination|navigation|scrollbar"
    },
	{
      "type": "text",
      "id": "title",
      "default": "Products slider",
      "label": "t:sections.featured-collection.settings.title.label"
    }
  ] ,
  	"blocks": [
	{
        "type": "card",
        "name": "Product card",
        "settings": [
          {
            "type": "product",
            "id": "product_item",
            "label": "Choose the product you want to displayed"
          }
    	]
	}
  ] ,
  "presets": [
    {
      "name": "Product slider",
      "category":"Custom"
    }
  ]
}
{% endschema %}
1 Like
2

Hi @DUMPUMPZ ,

I have reviewed the code and I came to know that you have to disable the double click zoom effect using javascript. I believe this can help you to resolve the issue.

Please add the below code in your theme.js file:

(function($) {
  $.fn.nodoubletapzoom = function() {
      $(this).bind('touchstart', function preventZoom(e) {
        var t2 = e.timeStamp
          , t1 = $(this).data('lastTouch') || t2
          , dt = t2 - t1
          , fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1) return; // not double-tap

        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(this).trigger('click').trigger('click');
      });
  };
})(jQuery);

Thank you.

3

Thanks very much for your time, I only have theme-editor.js file, is that the one ?

4

Seems to be working perfectly with theme-ediotr.js on dawn 4.0 :slightly_smiling_face: Thanks a ton

5

Hey is there a way to disable double click zoom on mobile for everything on the website? Thanks

6

Hi @DUMPUMPZ ,

Yes, using that code you can disable the double click zoom on mobile for everything on the website. If your issue is resolved then please accept the solution.

Thank you.

7

Hey its actually still zooming on mobile is theme-editor.js right place to put it? Thankyou