QDM商店加入下方導覽列

-

因為最近學弟有需求想要在網站上加入像APP一樣的下方導覽列，所以就在幫忙找方法處理。

以下參考w3school的下方導覽列範例 ，並為了QDM商店的設計界面下面我們會做一點修改。

修改部份

  1. 將頁尾改成下方導覽列
  2. 因為QDM在商品顯示時會有1或2個按鈕, 所以這種頁面我們會將導覽列移到比較上面一點的位置(位移56px)
  3. 因為下導覽列是希望在手機裝置時顯示，這裡假設跟QDM的按鈕設定相同為1000px以下顯示下方導覽列 

1. 頁尾改下方導覽列


我們自訂下方導覽列，會與頁尾的功能有所重疊，所以就改掉原有的頁尾。

  • QDM管理界面的左方選單，點擊 設定->版面->商店頁尾
  • 進入之後要把"啟用完全自訂頁尾編輯器(HTML/CSS)"啟用，(啟用的狀態圓圈會在右方)
接著在編輯器上點擊原始碼，把下面的html貼上去
<div class="navbar mirochiu-btm-nav">
<a href="#home" class="active">首頁</a>
<a href="#news">大家</a>
<a href="#news">快給我</a>
<a href="#contact">設計稿</a>
</div>

2. 加入CSS

QDM管理界面的左方選單，點擊 設定->版面->自訂商店樣式(Global CSS)

這裡CSS都是w3school的下方導覽列範例 的內容，只改3個地方

1. 改class名稱成mirochiu-btm-nav
2. 將下導覽列固定位置在螢幕左下方的位置
3. 加入@media，並設定寬度1000px以內顯示下導覽列

.mirochiu-btm-nav {
background-color: #333;
overflow: hidden;
position: fixed;
left: 0;
width: 100%;
bottom: 0;
margin-bottom: 0;
}
.mirochiu-btm-nav a {
float: left;
display: none;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.mirochiu-btm-nav a:hover {
background-color: #ddd;
color: black;
}
.mirochiu-btm-nav a.active {
background-color: #04AA6D;
color: white;
}
@media screen and (max-width:1000px) {
.mirochiu-btm-nav a {
display: block;
}
}

3. 加入javascript


QDM管理界面的左方選單，點擊 設定->版面->自訂程式碼(Global javascript)

如果頁面中存在'直接購買'表示在寬度變小時會顯示該按鈕，我們的下導覽列就需要調整顯示位置，因為與DOM掛勾，所以這裡要用js來改設定。

if(document.querySelector('.button-quick-checkout')){
console.debug('pad'); //確認本功能可用後可移除
document.querySelector('.mirochiu-btm-nav').style.bottom='56px'; //位移56px
}


完成!

成果展示








留言

張貼留言