Magento中从商品详情页返回列表页时定位原位置需求实现

嘿，这个问题我在Magento开发中碰到好多次了，给你分享两个实用的解决办法，帮你实现从商品详情页返回时，自动定位到进入详情页前的列表位置：

方法1：利用SessionStorage记录滚动位置 #

这个方法通过前端JS存储当前滚动位置，返回列表页时读取并恢复，简单直接：

1. 在商品列表页的模板（比如catalog/product/list.phtml）底部添加以下脚本：

document.addEventListener('DOMContentLoaded', function() {
    // 页面加载时，检查是否有保存的滚动位置并恢复
    const savedScroll = sessionStorage.getItem('magento_list_scroll');
    if (savedScroll) {
        window.scrollTo(0, parseInt(savedScroll));
        // 恢复后清除存储，避免下次进入列表页重复滚动
        sessionStorage.removeItem('magento_list_scroll');
    }

    // 监听所有商品详情链接的点击事件，保存当前滚动位置
    const productLinks = document.querySelectorAll('.product-item-link');
    productLinks.forEach(link => {
        link.addEventListener('click', function() {
            sessionStorage.setItem('magento_list_scroll', window.scrollY.toString());
        });
    });
});

2. 保存并刷新Magento缓存，测试效果：点击商品进入详情页，再返回列表页，就能回到之前的位置了。

方法2：通过URL参数传递滚动位置 #

如果你的站点有特殊的路由规则，或者需要支持刷新列表页也保留位置，可以用这个方法：

1. 修改商品列表页的链接生成逻辑，在catalog/product/list.phtml中找到商品链接的代码，添加scroll_pos参数：

<?php
// 获取当前URL中的滚动位置参数，默认0
$currentScroll = $this->getRequest()->getParam('scroll_pos', 0);
// 生成带滚动位置参数的商品详情链接
$productUrl = $_product->getUrlModel()->getUrl($_product, [
    '_query' => ['scroll_pos' => $currentScroll]
]);
?>
<a href="<?= $productUrl ?>" class="product-item-link">
    <?= $_product->getName() ?>
</a>

2. 同样在列表页底部添加脚本，读取URL参数并滚动：

document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const targetScroll = urlParams.get('scroll_pos');
    if (targetScroll) {
        window.scrollTo(0, parseInt(targetScroll));
    }

    // 可选：监听滚动事件，实时更新URL中的scroll_pos参数，刷新页面也能保留位置
    window.addEventListener('scroll', function() {
        const currentPos = window.scrollY;
        const url = new URL(window.location);
        url.searchParams.set('scroll_pos', currentPos);
        window.history.replaceState({}, '', url);
    });
});

注意事项 #

• 如果你的主题使用AJAX加载商品（比如无限滚动），需要在AJAX加载完成后重新绑定商品链接的点击事件，确保新加载的商品也能触发滚动位置保存。
• 执行bin/magento cache:clean清除Magento缓存后再测试，避免模板修改不生效。

内容的提问来源于stack exchange，提问作者kinjal setblue.com