Свай прокрутка в мобильной версии

В мобильной версии темы, а именно в карточке товара при листании свайпом фотографий работает одновременно горизонтальная и вертикальная прокрутка. Из-за этого в процессе листания фотографий, постоянно дергается экран то вверх то вниз.

1 лайк

Вообще, это “баг” js-библиотеки, через которую работает карусель товаров (Owl Carousel) и iOS, который не понимает стиль touch-action, который как раз запрещает прокрутку по вертикали при горизонтальном свайпе. На Android такой проблемы нет.

Согласен, что решить этот нюанс в коробке не помешало бы, очень раздражает такое поведение на айфонах.

Как временное решение можно использовать небольшой скрипт. Включить модуль “Мои изменения”, создать файл в пути ТЕМА/templates/addons/my_changes/hooks/index/scripts.post.tpl и вставить туда скрипт:

<script type="text/javascript">
var isAndroid = /(android)/i.test(navigator.userAgent);
if (!isAndroid) {
    var tapArea, startX;
    tapArea = document.querySelectorAll('.ty-product-bigpicture .ty-product-img');
    startX = 0;
    for (var item of tapArea) {
        item.ontouchstart = function(e) {
            startX = e.touches[0].clientX;
        };
        item.ontouchmove = function(e) {
            if (Math.abs(e.touches[0].clientX - startX) > 5 && e.cancelable ) {
                e.preventDefault();
            }
        };
    }
}
</script>

После чего почистить кэш. Это решит проблему с параллельной прокруткой по вертикали на iOS.

6 лайков

Проблема решилась на половину.
Работает через раз.
Есть еще какое-то решение?

Реакция представителей cs-cart будет ? Уже почти месяц прошёл.

1 лайк

Прошло еще 2 месяца, как успехи?

1 лайк

Здравствуйте. Мы приносим извинения за такую задержку с ответом. Случайно пропустили данный пост.

Мы воспроизвели эту проблему на iPhone и сообщили нашим разработчикам. На Android такой проблемы нет.

Нет, на Андроиде есть другая проблема /
Проверьте, пожалуйста

Этой проблеме уже как несколько версий карта. Когда-то про это писал в баг трекер, но там ответ получил, что они не смогли воспроизвести. По факту проблема есть, но не постоянного характера, для того что б выявить нужно “поиграться”.

Чтобы работало не через раз:
создайте файл ТЕМА/templates/addons/my_changes/hooks/index/scripts.post.tpl со след. содержимым:
{script src="js/addons/my_changes/owl-ios.js"}

добавьте js в папку js/addons/my_changes/owl-ios.js с кодом:

(function(_, $) {
	$(document).ready(function() {
		var isAndroid = /(android)/i.test(navigator.userAgent);
		if (!isAndroid) {
		    var tapArea, startX;
		    tapArea = document.querySelectorAll('.owl-carousel');
		    startX = 0;
		    for (var item of tapArea) {
		        item.ontouchstart = function(e) {
		            startX = e.touches[0].clientX;
		        };
		        item.ontouchmove = function(e) {
		            if (Math.abs(e.touches[0].clientX - startX) > 5 && e.cancelable ) {
		                e.preventDefault();
		            }
		        };
		    }
		}
		$.ceEvent('on', 'ce.ajaxdone', function(event) {
			var isAndroid = /(android)/i.test(navigator.userAgent);
			if (!isAndroid) {
			    var tapArea, startX;
			    tapArea = document.querySelectorAll('.owl-carousel');
			    startX = 0;
			    for (var item of tapArea) {
			        item.ontouchstart = function(e) {
			            startX = e.touches[0].clientX;
			        };
			        item.ontouchmove = function(e) {
			            if (Math.abs(e.touches[0].clientX - startX) > 5 && e.cancelable ) {
			                e.preventDefault();
			            }
			        };
			    }
			}
		});		
	});
}(Tygh, Tygh.$));
1 лайк

@albinoz, @babyart, @Maksimpx, @fevzi

Здравствуйте!

Мы исправили проблему со скроллом главного изображения на странице товара на мобильных.
Исправление войдет в CS-Cart 4.10.5.

Если вы хотите внести исправления, не дожидаясь выхода следующей версии, воспользуйтесь diff-файлом https://gist.github.com/csavoronin/97f432bab10e44b0fb96678b296e41fb

Вот инструкция, как воспользоваться этим файлом:
https://www.cs-cart.ru/docs/latest/upgrade/apply_diff_file.html

1 лайк

Только для главного изображения исправили?
А для слайдеров исправили?

@avoronin @ikoshkin
Раз уж вы будете править product_image_gallery.js
добавьте, пожалуйста, настройку “Отображать пагинацию или нет” в виде точек для главного изображения на странице товара на мобильных. Мини-иконки при этом нужно скрывать. Точки на мобильных смотрятся лаконичнее, чем мини-иконки.

....
pagination: true,
paginationNumbers: false,
....