Question

我有一个要求，我在shopify主页上有4个不同的下拉菜单。第一个下拉列表，让我们将其命名为city-down-down，将显示城市列表。根据在城市下拉菜单中选择的城市，第二个下拉列表，让它命名为类别 - 下拉列表，将显示特定城市可用的类别列表。同样，第三次下拉应显示基于第二次下拉的值，第四次下拉应显示基于第三次下拉的值。

基本上，我需要存储每个城市可用的类别列表。同样，我必须存储每个类别可用的值。如何存储此值，以便在网页上选择值时，我可以使用AJAX调用来获取下一个下拉列表的可用数据。

已编辑 *****

如果我完全错了，请告诉我。包含脚本。请注意，最初我将文件上传到＆＃34; Files＆＃34;。但是我将它移动到Assets文件夹，因为在Assets文件夹中编辑文件更容易。

initial

JSON文件是 -

[{＆＃34; city＆＃34;：＆＃34; Jamshedpur＆＃34;，＆＃34; types＆＃34;：＆＃34; Sweets @ Savories @ Cake＆＃34;}，{＆＃34 ;城市＆＃34;：＆＃34;兰奇＆＃34;，＆＃34;类型＆＃34;：＆＃34;糖果@Savories @ Cake＆＃34;}]

Answer 1

如果数据大小不是太大，一种简单的方法是将数据生成为JSON文件，只需将其存储为文件，然后编辑主题以包含文件的网址。文件太大可能是100k。更小更好但是如果你没有后端来处理AJAX调用，静态文件肯定提供了低成本的概念证明。

有两种方法可以做到这一点。无论是资产还是文件。资产是您主题的一部分，因此，即使您要更改模板以管理这些内容，我也倾向于使用文件。（资产只是位于主题下的文件，但处理方式略有不同）

转到Shopify管理控制台
点击设置
点击文件
点击＆＃34;上传文件＆＃34;

上传后，您将拥有一个文件。下一步使用文件名而不是其URL。

转到主题编辑器：

Shopify管理员控制面板
在线商店
主题
点击自定义主题
下拉主题选项并选择HTML / CSS

我猜你要选择要编辑的模板product.liquid。这样做，并决定你要在哪里介绍您的JavaScript文件。如果您的脚本文件名为cities_etc.js，则按以下方式导入：

{{ 'cities_etc.js' | file_url | script_tag}}

Answer 2

如果你要做的就是创建一个分层菜单，这个方法似乎有点慢。使用Ajax请求意味着有几次往返，对于等待ajax请求完成的用户来说，视觉上会很慢。

您可以创建linklist

我知道你已经找到了你的方法，但我强烈建议你这样做。以下是一些创建分层菜单的液体标记示例。父链接列表句柄为main-menu，然后您需要为句柄与主菜单中的标题匹配的每个子项创建链接列表。例如，如果主菜单中有“关于我们”链接，请创建一个链接列表，其中包含“about-us”句柄。然后只需使用一些简单的CSS或javascript来隐藏并在悬停时显示菜单。

    {% for link in linklists.main-menu.links %}
      {% assign child_list_handle = link.title | handleize %}
      {% if linklists[child_list_handle].links != blank %}
        <li class="dropdown" aria-haspopup="true" data-id="{{ child_list_handle}}">
          <a href="{{ link.url }}" class="nav-link {% if link.active %} active{% endif %}">
            {{ link.title }}
          </a>
          <ul class="dropdown_menu hidden" id="{{ child_list_handle }}">
            {% for childlink in linklists[child_list_handle].links %}
              <li>
                <a href="{{ childlink.url }}" class="nav-link{% if childlink.active %} active{% endif %}">{{ childlink.title | escape }}</a>
              </li>
            {% endfor %}
          </ul>
        </li>
      {% else %}
        <li>
          <a href="{{ link.url }}" class="nav-link{% if link.active %} active{% endif %}">{{ link.title }}</a>
        </li>
      {% endif %}
    {% endfor %}

在shopify中存储数据的方法

2 个答案: