Magento2 / 前端開發 | 如何避免點擊目錄頁的篩選器時產生的畫面跳動情形

在Magento2 目錄頁底下，使用左邊的篩選器時、偶爾會發生畫面跳一下的情況，這是因為篩選器使用的javascript有這樣子的設定：當展開的區塊處於螢幕以外的時候、畫面就要滾到可以看到展開的區塊的地方。

接下來我們要來跟大家分享如何避免這個"跳一下"的情況。

在開始之前、先用力跟大家宣告一下這篇文章的測試版本是 Magento 2.4.3，如果你使用的Magento版本不一樣的話，有可能會有一些差異。

首先我們先來看一下Magento collapsible.js，原始檔的位置在：magento_root/lib/web/mage/collapsible.js

在第67 – 71行的地方：

this.element.on('dimensionsChanged', function (e) {

    if (e.target && e.target.classList.contains('active')) {

        this._scrollToTopIfNotVisible();

    }

}.bind(this));

這一段就是讓畫面滾動的原始碼。我們只要移掉這一段就可以避免掉"跳一下"的情況了。

方法一：直接在主題包裡覆寫原生js。

假設你的主題包是AstralWeb/theme

把magento_root/lib/web/mage/collapsible.js 複製到 magento_root/app/design/frontend/AstralWeb/theme/web/mage/collapsible.js
打開magento_root/app/design/frontend/AstralWeb/theme/web/mage/collapsible.js，直接把第67-71行刪掉。

方法二：使用JavaScript mixins

javascript mixins可以寫在主題包裡也可以寫在自訂的module裡，這裡分享的是寫在主題包裡的方法。

一樣先假設你的主題包是AstralWeb/theme。

新增一個magento_root/app/design/frontend/AstralWeb/theme/requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/collapsible': {
                'js/mage/collapsible-mixin': true
            }
        }
    }
};

新增magento_root/app/design/frontend/AstralWeb/theme/web/js/mage/collapsible-mixin.js

define(["jquery"], function($) {
  return function(widget) {
    $.widget("mage.collapsible", widget, {
      _create: function() {
        this.storage = $.localStorage;
        this.icons = false;
 
 
        if (typeof this.options.icons === "string") {
          this.options.icons = $.parseJSON(this.options.icons);
        }
 
 
        this._processPanels();
        this._processState();
        this._refresh();
 
 
        if (this.options.icons.header && this.options.icons.activeHeader) {
          this._createIcons();
          this.icons = true;
        }
 
 
        this._bind("click");
        this._trigger("created");
      }
    });
    return $.mage.collapsible;
  };
});

其實就是重新定義collapsible.js裡的 _create function，把滾動畫面的那一段移掉就好了。

方法三：從HTML的部份修改。

前面2種方法都是直接修改js，影響到的是所有套用到collapsible.js的地方。如果你想要修改的只是某個特定的地方，而不是全站的話，那麼可以試試從HTML方面著手。

this.element.on('dimensionsChanged', function (e) {
    if (e.target && e.target.classList.contains('active')) {
        this._scrollToTopIfNotVisible();
    }
}.bind(this));

 
 
        this._bind("click");
        this._trigger("created");
      }
    });
    return $.mage.collapsible;
  };
});

從原生的這一段原始碼我們可以看出，當展開的區塊包含了"active"這個樣式時，畫面才會滾動。所以我們只要換一個開啟時的樣式名稱就好了。

Magento 總共有3個 Jquery widgets 與 collapsible.js相關分別是 accordion.js, tabs.js 還有collapsible.js本身。所以如果要修改HTML的話、就要先確定使用的是哪個widget。

以目錄頁的篩選器為例：

將magento_root/vendor/magento/theme-frontend-luma/Magento_LayeredNavigation/templates/layer/view.phtml複製到magento_root/app/design/frontend/AstralWeb/theme/Magento_LayeredNavigation/templates/layer/view.phtml
第53行的地方 “openedState": “active" 改為 “openedState": “open"
因為樣式名稱改了，少了相對應的CSS設定，因此篩選器展開時的箭頭不會改變方向、所以要記得去調整css喔。
不管是accordion.js, tabs.js 還是 collapsible.js，調整的都是 openedState 這個參數。如果需要更多的 widget資訊、可以參考官方的文件：https://developer.adobe.com/commerce/frontend-core/javascript/jquery-widgets/accordion/ , https://developer.adobe.com/commerce/frontend-core/javascript/jquery-widgets/collapsible/ , https://developer.adobe.com/commerce/frontend-core/javascript/jquery-widgets/tabs/

前端開發, Magento

Magento2 / 前端開發 | 如何避免點擊目錄頁的篩選器時產生的畫面跳動情形