在 Shopify 上創建第二個（替代）header（2.0 Dawn 主題）

Question

所以我想要實現的是，創建一個與全局 header 不同的第二個 header。

因此，在我的示例中，我已經將代碼更改為透明且具有粘性。 同樣在我的示例中，“關於頁面”將有一個較暗的背景圖像（通過透明標題顯示），因此不是使用紅色/黑色公司徽標，而是紅色/白色徽標，因此它與 bg 圖像形成對比。 此外，主 header 將具有黑色導航菜單項，第二個 header 將具有較淺的顏色。 這只是從下拉菜單中選擇的。

所以我所做的是我在 header.liquid 上創建了一個{% unless template == 'page.about-page' %}並將其全部包裹起來。 所以在關於頁面上...... 原來的 header 剛剛沒了。

好的，太好了。 我的關於頁面是免費的 header。

我復制了 header.liquid 並將其重命名為 header-alternative.liquid。

然后我把它放在標題替代品上的其他地方。 液體，它說的

{%- if request.page_type == 'index' -%}

我把它改成

{%- if request.page_type == 'index' or 'page.about-page' -%}

對於新模板。

所以它會起作用。 不知道/記得為什么我仍然有“索引”，但無論如何。

對於為 about 頁面創建的新模板。 我在架構部分中添加了調用它（與使用部分標簽{% section 'header' %}從theme.liquid 調用的原始部分不同，它是 static 和任何地方。）

所以基本上就是這樣。

• 新模板
• 復制 header 全局部分並將其重命名，它成為常規動態部分，架構更新為新模板，因此它顯示出來。
• 確保這些請求中的任何一個都包括關於頁面，而不僅僅是索引。

所以這一切都有效，除了我認為存在某種 JS 問題。 如果我：

• 單擊搜索圖標，它會使 header 崩潰幾秒鍾，然后一切都變得不透明。
• 子菜單導航欄不可點擊在此處輸入圖像描述檢查員在控制台中拋出這些錯誤：

about:769 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at about:769:39 (anonymous) @ about:769 about:1 Unchecked runtime.lastError: 監聽器通過返回 true 指示異步響應，但是消息通道在收到響應之前關閉 about:1 Uncaught (in promise) 錯誤：偵聽器通過返回 true 指示異步響應，但消息通道在收到響應之前關閉

如果我向您展示 header-alternative.liquid 中的一個功能（用於搜索）（請記住它是 99%）與原始功能相同。

document.getElementById("header-search").addEventListener('click',function () {
var search = document.getElementById('template-index');
var header = document.getElementById('site-header');
var main = document.getElementById('MainContent');
var height = document.getElementById('site-header').offsetHeight;
if ( window.pageYOffset < height ) {
if (search.classList.contains('overflow-hidden')) {
header.classList.remove('site-header-transparent');
main.classList.add('site-header-transition');
} else {
header.classList.add('site-header-transparent');
main.classList.remove('site-header-transition');
}
}
});

我可以將 getElementById 視為“模板索引”，但這只是頁面上的 CSS class 。

我不擅長 JS，更不擅長 DOM，所以……我只想知道如何開始解決這些問題，這樣我就可以為 About 頁面提供這個獨特的 header。

2個標題的故事

Answer 1

這是錯誤的：

{%- if request.page_type == 'index' or 'page.about-page' -%}

這是對的：

{%- if request.page_type == 'index' or request.page_type == 'page.about-page' -%}

您可以在此處查看文檔中使用or運算符的示例https://shopify.github.io/liquid/basics/operators/

---

For the javascript function, it's built to select elements by id, assuming that you have an id called template-index & site-header & MainContent you can check on the old theme, where the function was working fine, what the HTML elements that have這些 id 是，並確保它們仍然存在並且沒有被刪除。

您還可以使用getElementsByClassName而不是getElementById通過這些新類而不是 id 為這些元素和 select 添加新類

所以而不是：

var search = document.getElementById('template-index');
var header = document.getElementById('site-header');
var main = document.getElementById('MainContent');
var height = document.getElementById('site-header').offsetHeight;

如果將是：

var search = document.getElementsByClassName('new-class-for-template-index');
var header = document.getElementsByClassName('new-class-for-site-header');
var main = document.getElementsByClassName('new-class-for-MainContent');
var height = document.getElementsByClassName('new-class-for-site-header').offsetHeight;