如何添加嵌套导航以购物主题

Keir Witaker. 经过 Keir Witaker.  |  君。2014年25日

在本文中,我们将讨论如何在a中实现完全内容的管理多级导航系统 购物 theme.

购物主题使用 液体,灵活和强大的模板语言,将存储器从商店输出到模板中。如果你aren.’熟悉液体,并一般购物主题建设然后我建议签出官方 购物主题文档.

 

入门

如果您曾与WordPress这样的平台合作,您可能熟悉管理接口,允许您创建多级导航。当模板文件中的输出时,这些通常会导致嵌套的无序列表,使用CSS,我们可以在各种设计模式中进行风格。例如,下拉菜单或侧边栏菜单,显示在单击顶层菜单或悬停过来时更详细过滤。所有方法都让我们提供更深入导航到我们的地点的能力,而无需过多并发症。

shopify-Editions-theme

首先检查Shopify中的导航功能,您可能会认为它没有’T为我们提供了这种能力。然而,武装有一点液体知识,我们可以在我们的主题中轻松实现多级菜单。通过使用导航功能,我们可以为我们的客户提供一种简单的方法来管理他们的菜单,同时给我们,作为主题设计师,所需的CSS样式的所需的嵌套无序列表。

我们在本教程中的目标是创建一个嵌套的无序列表,我们可以完全从Shopify管理区域内完全控制,并在我们的商店中反映这些更改。

和这里’s the end result:

<ul>
<li><a href="/">Home</a></li>
<li><a href="/collections/cups">Coffee Cups</a>
<ul>
<li><a href="/products/edible-coffee-cup">Edible Coffee Cup</a></li>
<li><a href="/products/moustache-mug">Moustache Mug</a></li>
</ul>
</li>
<li><a href="/collections/all">All Products</a></li>
<li><a href="/pages/about">About</a></li>
<li><a href="/blogs/news">Blog</a></li>
</ul>

与其他平台购物不同’T有一个选择“super menu”我们可以嵌套我们的子菜单项。那说了’没有一个复杂的程序来实现这项工作。通过遵循简单的命名公约’可以生成多级菜单结构。

如果您希望与教程一起编写,那么最简单的方法就是免费注册 购物合作伙伴 帐户并创建免费“dev shop”。这些都是完全特色,并允许您在将主题交给客户之前尝试您的主题或启动您自己的商店。

您可以在主题中的任何模板中尝试代码示例“templates”主题文件夹,或者我会建议使用默认布局文件的主题 主题.Liquid. 因此,这将意味着您的代码将在每个页面上默认出现。

 

创造菜单

让’首先通过创建新菜单,父菜单,通过向Shopify Admin中的导航选项卡标题。要创建一个菜单,我们需要打开shopify管理员界面并前往“Navigation”左侧的标签。

所有商店都有一个调用预定义的默认菜单“Main Menu”。要将物品添加到列表中只需单击“add another link”按钮并为您的新项目提供一个“link name”和目的地。选择下拉将允许您轻松链接到内部部分,例如特定产品或集合。或者,您可以通过选择输入您自己的URL(内部或外部)“web address” from the options.

导航管理员

It’易于在Shopify管理员中创建和编辑菜单。

一旦我们在适当的地方,我们就可以开始考虑在我们的主题中输出这一点的液态代码。

为了在我们的主题文件中输出菜单’ll need to know the “handle”菜单。手柄是内部的唯一标识符 购物 对于产品,集合,链接列表(用于购物主题中的菜单的术语)和页面。它们通常是项目名称或标题的URL安全版本。例如主菜单会导致句柄 主菜单。虽然它们是自动生成的,但您可以通过管理界面来更改它们。

主菜单

我们的默认主菜单提供咖啡杯集合的链接。

 

单级导航

让’s开始从我们的所有项目输出“main menu”。为了做到这一点,我们可以使用简单“for loop”在这里输出所有链接列表项’s how:

<ul>
{% for link in linklists.main-menu.links %}
<li><a href="{{ link.url | escape }}">{{ link.title | escape }}</a></li>
{% endfor %}
</ul>

让’S更详细地看看这一点。打开我们后 <ul> we start our Liquid “for loop”。这将输出包含在内的每个项目“main-menu”链接列表。语法在这里有点长,但我们真正的只是在将链接列表中的每个项目的属性分配给变量 关联。使用此变量,我们可以访问我们的菜单项的属性,在这种情况下 URL.标题.

为了输出URL和标题属性,我们使用双卷曲括号的液体输出语法,例如 {{}}。在我们上面的例子中 {{link.url}} 将输出我们在admin中输入或生成的URL和 {{link.title}} 将输出我们归因于链接的文本。

你可能会注意到 |逃脱 我避风港的代码部分’T解释。这是一个 液体过滤器。 过滤器是以某种方式更改输入值的函数。作为一个例子让’s look at the 辅饰 filter:

{{ 'Keir Whitaker' | upcase }}

输出时,这将在我们的HTML文件中呈现Keir Witaker。

过滤器拍摄输入,在此示例中我的名称作为文本字符串并相应地更改。在...的情况下 辅饰 过滤器它将输出转换为大写字符。在我们的示例中,ESCAPE过滤器获取URL和标题的输入,并逃离文本和URL,以便正确输出。

 

多级导航

现在我们在我们的控制下有基础知识我们需要一种与我们的辅助子菜单创建关系的方式。幸运的是这不是’这很难,它只是需要更多的液体代码。首先,我们需要返回Shopify管理员并创建我们的子菜单。

我们需要一种与我们的两个菜单相关的方式,所以我们的模板知道如何输出它们。手柄再次来到我们的救援。它’S不是100%清晰最初,但每个链接除了菜单本身之外还有一个我们可以访问的独特句柄。

让’S通过从我们的子菜单创建子菜单来查看一个例子“Coffee Cups”关联。我们可以安全地假设我们的菜单项调用“Coffee Cups”自动生成的手柄将是“coffee-cups”。您真正需要做的就是删除任何标点符号,用小写和空格用小写替换大写字符。如果我们希望这个菜单项有一个子菜单,我们只需确保我们的子菜单也有一个句柄“coffee-cups”. It’值得注意的是,菜单的标题可以是任何东西,这里的重要因素是手柄。

子菜单

我们的子菜单有咖啡杯的手柄,让我们将我们的菜单联系在一起。

 

现在我们所需要的只是一点额外的液态代码,以帮助我们在模板中输出子菜单:

<ul>
{% for link in linklists.main-menu.links %}
<li><a href="{{ link.url| escape }}">{{ link.title | escape }}</a>
{% if linklists[link.handle].links.size > 0 %}
<ul>
{% for sublink in linklists.[link.handle].links %}
<li><a href="{{ sublink.url }}">{{ sublink.title | escape }}</a></li>
{% endfor %}
</ul>
{% endif %} 
</li>
{% endfor %}
</ul>

在第一次检查中,这可能有点令人生畏。我们’已经越过了大多数人’检查新代码’S为我们做大部分新工作:

{% if linklists[link.handle].links.size > 0 %}

在父菜单链接输出后出现此,但在列表项关闭之前 </li> 标记(我们代码示例中的第4行)。这“if statement”检查是否存在具有与我们当前链接项相同的句柄的链接列表,如果确实存在,以查看它是否具有与之关联的任何链接项。如果答案是肯定的,模板会打开一个新的无序列表,并根据我们的第一个例子将每个子菜单项作为列表项输出。如果答案否,则模板携带输出下一个父菜单项。

输出菜单

我们代码的最终结果是嵌套无序列表的菜单项。

 

此检查每个父菜单的每个迭代都会出现具有相同句柄的子菜单的存在。你’我还注意到我们的“if statement”用液体代码关闭 {%结束%} 和 our “for loop” with {%结束%}。当这些完成工作时,这会警告模板继续前进。

 

包起来

有点规划它 ’实际上很容易创建彼此依赖的菜单。当然你不’必须一起输出它们–如果您希望在模板中的任何位置均愿意独立地输出子菜单。

我希望这已经让您了解在Shopify主题中创建多功能菜单系统的内容。