В мобильной версии темы, а именно в карточке товара при листании свайпом фотографий работает одновременно горизонтальная и вертикальная прокрутка. Из-за этого в процессе листания фотографий, постоянно дергается экран то вверх то вниз.
Вообще, это “баг” 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.
Проблема решилась на половину.
Работает через раз.
Есть еще какое-то решение?
Реакция представителей cs-cart будет ? Уже почти месяц прошёл.
Прошло еще 2 месяца, как успехи?
Здравствуйте. Мы приносим извинения за такую задержку с ответом. Случайно пропустили данный пост.
Мы воспроизвели эту проблему на 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.$));
@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
Только для главного изображения исправили?
А для слайдеров исправили?
@avoronin @ikoshkin
Раз уж вы будете править product_image_gallery.js
добавьте, пожалуйста, настройку “Отображать пагинацию или нет
” в виде точек для главного изображения на странице товара на мобильных. Мини-иконки при этом нужно скрывать. Точки на мобильных смотрятся лаконичнее, чем мини-иконки.
....
pagination: true,
paginationNumbers: false,
....