给 Shopify 添加移动端 APP 风格的底部导航栏

木子兮
350 阅读4分钟

shopify的转化一直都是各位跨境人操心的一个点，而从移动端进来的流量高达70%多，所以怎么做好移动端的优化成为了重中之重。在移动端，底部导航栏是增强用户体验的一个重要元素。它能够帮助用户快速访问常用功能，提升交互效率。开始我也准备在网上cv一下就好了，结果发现居然都要收费，这又不是什么很高深的东西，学习前端一两个月的小白都可以搞定，为啥还要收费。。。于是我自己手搓了一个，复制粘贴到theme.liquid中就可以用。

image.png

第一步：引入 Font Awesome 图标库

为了给导航栏添加图标，我们需要使用 Font Awesome 图标库。可以通过以下链接在 Shopify 中引入 Font Awesome：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">

第二步：定义基本的 CSS 样式

接下来，我们需要编写一些基础的 CSS 样式，以确保导航栏在移动端显示良好。我们将使用媒体查询来控制导航栏在特定屏幕宽度下显示，并为导航栏和图标定义样式。

@import url('https://fonts.googleapis.com/css?family=Roboto');

:root {
  --my-app-background-color: rgba(93, 72, 182, 1);
  --my-app-navigation-container-color: #f0f0f0;
  --my-app-current-color: grey;
  --my-app-current-bg-color: grey;
}

body {
  background: var(--my-app-background-color, #1B0A78);
  font-family: 'Roboto', sans-serif;
  transition: background 0.3s linear;
}

.my-app-icon__container {
  display: none; /* 默认隐藏导航栏 */
}

@media only screen and (max-width: 1024px) {
  .my-app-icon__container {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    flex-flow: row nowrap;
    background: var(--my-app-navigation-container-color, #f0f0f0);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
  }

  .my-app-icon__container a {
    text-decoration: none; /* 去掉下划线 */
  }

  .my-app-icon {
    flex: 1 1 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    user-select: none;
    transition: flex-basis 0.5s ease-in-out;
  }

  .my-app-icon i {
    padding-right: 5px;
    font-size: 24px;
  }

  .my-app-icon #my-app-icon-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 10px;
    color: grey;
    width: 0;
    transition: all 0.5s ease-in-out;
  }

  .my-app-icon:focus {
    flex-basis: 125px;
    outline: none;
  }

  .my-app-icon.active {
    flex-basis: 125px;
  }

  .my-app-icon.active #my-app-icon-content {
    background: var(--my-app-current-bg-color);
    width: 60%;
    border-radius: 30px;
    color: var(--my-app-current-color, grey);
  }

  .my-app-icon:focus #my-app-content::after {
    opacity: 1;
    content: attr(data-content);
  }
}

解析：

  1. :root 定义主题颜色：我们定义了几种 CSS 变量，用来控制导航栏的背景颜色和当前激活图标的颜色。

  2. 隐藏导航栏：默认情况下，导航栏是隐藏的，只有当屏幕宽度小于 1024px 时才会显示。

  3. 导航栏容器：我们使用 display: flex 将图标水平排列，并设置容器固定在屏幕底部。

  4. 图标样式：每个图标占据导航栏的 25% 宽度，并设置了基本的样式和过渡效果。

第三步：添加 HTML 结构

接下来，我们需要在 Shopify 的模板文件中添加导航栏的 HTML 结构。导航栏包含四个链接，分别指向首页、购物车、搜索和个人账户页面。

<div class="my-app-icon__container">
  <a
    href="/"
    tabindex="0"
    class="my-app-icon my-app-icon--one"
    data-color="rgba(93, 72, 182, 1)"
    data-bg="rgba(93, 72, 182, 0.2)">
    <span id="my-app-icon-content">
      <i class="fas fa-home"></i>
      <p id="my-app-content" data-content="Home"></p>
    </span>
  </a>
  <a
    href="/cart"
    tabindex="0"
    class="my-app-icon my-app-icon--two"
    data-color="rgba(202, 80, 156, 1)"
    data-bg="rgba(27, 10, 120, 0.2)">
    <span id="my-app-icon-content">
      <i class="fas fa-shopping-cart"></i>
      <p id="my-app-content" data-content="Cart"></p>
    </span>
  </a>
  <a
    href="/search"
    tabindex="0"
    class="my-app-icon my-app-icon--three"
    data-color="rgba(225, 145, 47, 1)"
    data-bg="rgba(225, 145, 47, 0.2)">
    <span id="my-app-icon-content">
      <i class="fas fa-search"></i>
      <p id="my-app-content" data-content="Search"></p>
    </span>
  </a>
  <a
    href="/account"
    tabindex="0"
    class="my-app-icon my-app-icon--four"
    data-color="#3895ab"
    data-bg="rgba(56, 149, 171, 0.2)">
    <span id="my-app-icon-content">
      <i class="fas fa-user-circle"></i>
      <p id="my-app-content" data-content="Profile"></p>
    </span>
  </a>
</div>

解析：

每个图标都被放在一个 <a> 标签内，包含一个图标 (<i>) 和一个文本 (<p>)。data-color 和 data-bg 属性用于指定激活状态下的图标和背景颜色。

第四步：编写 JavaScript 交互逻辑

为了让导航栏能够在不同页面加载时自动激活当前页面对应的图标，我们需要编写一些 JavaScript 逻辑。

var root = document.documentElement;

function addEventsToIcons() {
  var navigationIcons = document.querySelectorAll('.my-app-icon');
  const numberOfIcons = navigationIcons.length;

  for (let i = 0; i < numberOfIcons; i++) {
    navigationIcons[i].addEventListener('click', makeIconActive);
    navigationIcons[i].addEventListener('focus', makeIconActive);
  }
  setActiveIcon(); // 在页面加载时设置当前激活的图标
}

function makeIconActive() {
  var currentIconColor = this.getAttribute('data-color');
  var currentBgColorForSpan = this.getAttribute('data-bg');
  console.log('Activating icon with color:', currentIconColor, 'and background:', currentBgColorForSpan);

  root.style.setProperty('--my-app-current-color', currentIconColor);
  root.style.setProperty('--my-app-current-bg-color', currentBgColorForSpan);
}

function setActiveIcon() {
  var currentPath = window.location.pathname;
  console.log('Current Path:', currentPath);

  var iconMap = {
    '/account': '.my-app-icon--four',
    '/search': '.my-app-icon--three',
    '/cart': '.my-app-icon--two',
    '/': '.my-app-icon--one'
  };

  var matched = false;

  for (var key in iconMap) {
    var regex = new RegExp('^' + key);
    if (regex.test(currentPath)) {
      var activeIconClass = iconMap[key];
      var activeIcon = document.querySelector(activeIconClass);
      console.log('Matched Path:', key, 'Activating:', activeIconClass);
      if (activeIcon) {
        activeIcon.classList.add('active');
        console.log('Added active class to:', activeIcon.className);
        makeIconActive.call(activeIcon);
        matched = true;
        break;
      }
    }
  }

  if (!matched) {
    console.log('No match found for current path.');
  }
}

window.onload = addEventsToIcons;

解析：

  1. 添加事件监听器：addEventsToIcons 函数为每个图标添加点击和焦点事件监听器，以在用户点击或聚焦时激活图标。

  2. 设置激活状态：makeIconActive 函数根据当前激活图标的 data-color 和 data-bg 属性，设置全局 CSS 变量，以便更新激

活图标的颜色和背景。

  1. 页面加载时激活图标：setActiveIcon 函数根据当前页面路径，自动激活对应的图标。

里面的图标如果觉得不好看自行更换就好了，主页哪里你也使用自己的logo，大家自己diy吧。

avatar
文章
阅读
粉丝