shopify 二次开发 如何开发一个可以自定义下拉菜单内容的导航

shopify 如何开发一个可以自定义下拉菜单内容的导航

本人 兼职 shopify、店匠二次开发、仿站、定制等开发服务，有需要的可以加我微信 abc939039210，备注 shopify

摘要

随着互联网的发展，网页的展现形式也越来越丰富。经常浏览网站的你或许会发现很多新网站或者经常更新网站的的站点的导航由比较老土的文本下拉菜单变成了 图片 + 文本 的展现形式，甚至是 图片 + 文本 + 视频的展现形象。效果图如下，其实像这种效果 有一个 专业属于叫 超级菜单只不过是很少人知道而已，所以一般人说超级菜单也很少人能清楚的知道是说什么

像这种效果上面效果我们又应该如何在shopify实现他们呢？

讲解

以最后一张效果图为例

注：我的写法比较注重可扩展性，即每个下拉菜单都可以根据自身的需要进行开发

1、首先 我们先确认下我们要开发的位置和内容

很明显、我们要开发的位置是header，即 section/header.liquid。内容则是：Logo、导航、搜索、用户、购物车

像上面这种结构我们可以轻松的把他们划分为三个部分：Logo、导航、工具栏（搜索、用户、购物车），结构怎么划分怎么写我就不讲了，这应该是一个前端工程师必备的能力，我们重心是在导航上

2、导航设计

后台自定义的设计

在shopify的免费主题上导航的设置方式往往是采用地图导航来设置，在自定义里面自已一个菜单的设置，这显然不能满足我们超级菜单的要求，所以我需要转变思路，通过自定义来自定义设置我们的菜单，每个菜单通过使用 header 添加 block 的方式来添加，每个block 都是一个菜单，而block组合在一起就是一个导航

上图是我已经开发好的header。如上图，我把logo、工具栏的自定义设置放到了设置里面，因为它们的内容是确定的。而导航由于想要实现可以自定义下拉菜单的展现形式和内容，所以我把它放到自定义内容里面。这里其实是利用的模块的思想，选择添加内容的时候，我们可以选择想用使用的下拉菜单模板，而内容的数据则可以根据我们的需求去对应的进行设计，如下

这里只是数据的一小部分

前端数据获取和遍历

后台的数据设置好后我们前端又应该如何获取和遍历数据?

这里我把导航和下拉菜单分为两个独立的部分，然后通过js/jq 来控制下来菜单的显示隐藏，这里是为了我们的灵活使用，当然你也可以把他们放一起

代码结构大致如下

<header>
	<div>
        LOGO
    </div>
    <nav>
    	导航
    </nav>
    <div>
        工具栏
    </div>
    <div>
        下拉菜单
    </div>
</header>

导航数据的遍历

<nav>
    <ul>
	{% for block in section.blocks%}
    	<!-- 假如你的block 不全为菜单，你也可以通过 if 来判断 block.type 是否包含 特定字段来过滤 -->
        <!-- 在 li 中我们需要给它判断特定的数据用来检索其对应的下拉菜单，这里我是直接用了 forloop.index0 你们也可以根据自身需要设置对应的数据 -->
    	<li class="nav-menu" data-index="{{forloop.index0}}">{{ block.settings.title }}</li>
    {% endif %}
    </ul>
</nav>

下拉菜单的遍历

<div id="nav-down-menus">
	<ul>
      {% for block in section.blocks%}
		{% assign type = block.type %}
        <!-- 数据： block.settings -->
       	{% if type == 'menu-model-1' %}
        <li>
        	<!-- 超级菜单 模板一 的 html --> 
        </li>
        {% elsif type == 'menu-model-2'%}
        <li>
        	<!-- 超级菜单 模板二 的 html --> 
        </li>
        {% else %}
        <!-- 不存在 -->
        {% endif %}
      {% endfor %}
    </ul>
</div>

至于超级菜单可以写到什么样子就看您个人发挥了，我主要的讲了如何设置数据和获取数据

加油吧！ 打工人！！