shopify存储数据的方式

Question

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

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

已编辑 *****

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

function readcityfile(){
var xmlhttp = new XMLHttpRequest();
var url = "/assets/city_type.txt";
alert("hi");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  try{
    var myArr = JSON.parse(xmlhttp.responseText);
    alert(myArr);   
    //myFunction(myArr);
  }
  catch(err) {
    alert(err.message);
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

function myFunction(arr) {
var i;
for(i = 0; i < arr.length; i++) {
    alert(arr[i].city);
}

}

JSON 文件是 -

[{"city": "Jamshedpur","types": "Sweets@Savories@Cake"},{"city": "Ranchi","types": "Sweets@Savories@Cake"}]

Answer 1

如果数据量不太大，一种简单的方法是将数据生成为 JSON 文件并将其存储为文件，然后编辑主题以包含文件的 url.太大的文件可能有 100k。越小越好，但是如果您没有后端来处理 AJAX 调用，那么静态文件当然可以提供低成本的概念证明。

有两种方法可以 this.Either 作为资产或文件。资产是您主题的一部分，因此即使您将更改模板来管理它，我也倾向于使用文件。（资产只是位于主题下的文件，但处理方式略有不同）

转到您的 Shopify 后台控制面板
点击设置
单击文件
点击"Upload Files"

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

转到您的主题编辑器：

Shopify 后台控制面板
在线商店
主题
单击自定义主题
下拉主题选项和 select HTML/CSS

我猜您要select 模板product.liquid 进行编辑。这样做并决定要在何处引入 javascript 文件。如果您的脚本文件名为 cities_etc.js，您将按如下方式导入它：

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

Answer 2

如果您只是想创建一个分层菜单，此方法似乎有点慢。使用 Ajax 请求将意味着有多次往返，用户等待 ajax 请求完成时视觉上会很慢。

您可以创建 linklist

我知道你已经找到了你的方法，但我强烈建议你试一试。这是将创建分层菜单的一些液体标记的示例。 parent link 列表句柄是 main-menu 那么您需要为每个 children 创建一个 link 列表，其中句柄与 main-menu。例如，如果您在主菜单中有一个 'About Us' link，则创建一个 link 列表也使用句柄 '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存储数据的方式

Way to store data in shopify

liquid

shopify