Assistance Required for Mobile Touch Event Issue

Dear Support Team,

When users attempt to scroll through the product details page on mobile devices, they unintentionally select product options (such as size, color, etc.) instead of just scrolling.

For your reference, here is the link to the product experiencing this issue:
https://wingchunelec.com/product/schneider-unica-x-%e9%96%8b%e9%97%9c%e6%8e%a3-%e6%9b%9c%e7%9f%b3%e9%bb%91/?attribute_pa_%25e7%2594%25a2%25e5%2593%2581%25e7%25a8%25ae%25e9%25a1%259e=4%25e4%25bd%258d%25e9%2596%258b%25e9%2597%259c

Hello,

On mobile devices with touchscreens, elements like product swatches are activated using the “touchstart” event. Unfortunately, we cannot modify the scrolling behavior you described because, in this case, there is no distinction between a touch for scrolling and a touch for selecting a variation.

Any other possible manipulations with swatch activation (e.g., using JavaScript) could lead to unintended side effects, such as misclicks or the need for double-tapping when users intentionally try to select a variation.

As an alternative to minimize this effect, we recommend reducing the swatch size on mobile. This way, swatches won’t take up the entire screen at certain points, allowing users to scroll without accidentally triggering a variation selection. If this solution works for you, we can prepare the appropriate custom code.

Best Regards,

/* 解決產品詳情頁滑動頁面時觸發選項被誤選中的問題 */
document.addEventListener('DOMContentLoaded', function() {
    const swatches = document.querySelectorAll('td.with-swatches .wd-swatch'); // 获取所有选项
    let selectedTime = 0; // 用于标记选中顺序
    let touchStartX, touchStartY; // 记录触摸起始位置
    let isScrolling = false; // 是否在滑动

    // 为每个选项添加 touchstart 事件监听
    swatches.forEach(swatch => {
        swatch.addEventListener('touchstart', function(event) {
            // 记录触摸起始位置
            touchStartX = event.touches[0].clientX;
            touchStartY = event.touches[0].clientY;

            // 标记选中顺序
            selectedTime++;
            swatch.setAttribute('selected_time', selectedTime);
        });

        swatch.addEventListener('touchmove', function(event) {
            // 计算滑动距离
            const touchEndX = event.touches[0].clientX;
            const touchEndY = event.touches[0].clientY;
            const deltaX = Math.abs(touchEndX - touchStartX);
            const deltaY = Math.abs(touchEndY - touchStartY);

            // 如果滑动距离超过阈值，则认为是滑动
            if (deltaX > 10 || deltaY > 10) {
                isScrolling = true;
            }
        });

        swatch.addEventListener('touchend', function(event) {
            if (isScrolling) {
                // 如果是滑动，延迟 200 毫秒执行回滚逻辑
                setTimeout(() => {
                    rollbackSelection();
                }, 200);
            }
            isScrolling = false; // 重置滑动状态
        });
    });

    // 回滚到上一个选中的选项
    function rollbackSelection() {
        const selectedSwatches = Array.from(swatches).filter(swatch => swatch.hasAttribute('selected_time')); // 获取所有被标记的选项
        if (selectedSwatches.length < 2) return; // 如果少于 2 个选项被标记，则不处理

        // 按 selected_time 排序
        selectedSwatches.sort((a, b) => {
            return b.getAttribute('selected_time') - a.getAttribute('selected_time');
        });

        // 获取倒数第二个选中的选项（即上一个选中的选项）
        const previousSelected = selectedSwatches[1];

        // 取消当前选中的选项
        selectedSwatches[0].classList.remove('wd-active'); // 假设 wd-active 是选中状态的类
        selectedSwatches[0].removeAttribute('selected_time'); // 移除标记

        // 选中上一个选项
        previousSelected.classList.add('wd-active'); // 假设 wd-active 是选中状态的类
    }
});

Why don’t you monitor the click time directly and monitor the touchstart time? If possible, it is recommended that you modify or add one more option to us. However, I temporarily solved it using the above method. Thanks!

In theme version 7.6 and earlier, we used click interactions, but after receiving numerous complaints from customers, we were forced to switch to touch. The click method caused double taps and misclicks on iOS devices, which directly affected the shopping experience and raised concerns among our clients. For this reason, unfortunately, we will not be able to revert this change in future theme updates.

Kind Regards

Thanks for your reply, but it’s not an optimal solution right now.
Maybe you should add an option in the backend: click, touchstart. Let the customer choose.
Below is my final code that temporarily solves our problem. Other customers can also refer to:

/* {解決產品詳情頁滑動頁面時觸發選項被誤選中的問題 */
document.addEventListener('DOMContentLoaded', function() {
    const swatches = document.querySelectorAll('td.with-swatches .wd-swatch'); // 获取所有选项
    let selectedTime = 0; // 用于标记选中顺序
    let touchStartX, touchStartY; // 记录触摸起始位置
    let isScrolling = false; // 是否在滑动

    // 为每个选项添加 touchstart 事件监听
    swatches.forEach(swatch => {
        swatch.addEventListener('touchstart', function(event) {
            // 记录触摸起始位置
            touchStartX = event.touches[0].clientX;
            touchStartY = event.touches[0].clientY;

            // 标记选中顺序
            selectedTime++;
            swatch.setAttribute('selected_time', selectedTime);
        });

        swatch.addEventListener('touchmove', function(event) {
            // 计算滑动距离
            const touchEndX = event.touches[0].clientX;
            const touchEndY = event.touches[0].clientY;
            const deltaX = Math.abs(touchEndX - touchStartX);
            const deltaY = Math.abs(touchEndY - touchStartY);

            // 如果滑动距离超过阈值，则认为是滑动
            if (deltaX > 10 || deltaY > 10) {
                isScrolling = true;
            }
        });

        swatch.addEventListener('touchend', function(event) {
            if (isScrolling) {
                // 如果是滑动，延迟 200 毫秒执行回滚逻辑
                setTimeout(() => {
                    rollbackSelection();
                }, 200);
            }
            isScrolling = false; // 重置滑动状态
        });
    });

    // 回滚到上一个选中的选项
    function rollbackSelection() {
        const selectedSwatches = Array.from(swatches).filter(swatch => swatch.hasAttribute('selected_time')); // 获取所有被标记的选项
        if (selectedSwatches.length < 2) return; // 如果少于 2 个选项被标记，则不处理

        // 按 selected_time 排序
        selectedSwatches.sort((a, b) => {
            return b.getAttribute('selected_time') - a.getAttribute('selected_time');
        });

        // 获取倒数第二个选中的选项（即上一个选中的选项）
        const previousSelected = selectedSwatches[1];

        // 取消当前选中的选项
        selectedSwatches[0].classList.remove('wd-active'); // 假设 wd-active 是选中状态的类
        selectedSwatches[0].removeAttribute('selected_time'); // 移除标记

        // 选中上一个选项
        //previousSelected.classList.add('wd-active'); // 假设 wd-active 是选中状态的类
        //const touchStartEvent = new Event('touchstart', { bubbles: true });
				 //previousSelected.dispatchEvent(touchStartEvent);
				 //// 模拟点击上一个选项
        if (previousSelected) {
            previousSelected.click(); // 触发点击事件
        }
    }
});
/* {解決產品詳情頁滑動頁面時觸發選項被誤選中的問題 } */

Thank you for providing a solution to your issue, which may be helpful for other clients. We will consider your request as a feature request for a future theme update. We also suggest you describe your issue in detail and leave a feature request here https://woodmart.canny.io/feature-requests, so our developers can take it into account.

Kind Regards

[Author]

Posts