Way to store data in shopify

Question

I have a requirement, where in I have 4 different drop down on shopify home page. The First drop-down, let's name it city-drop-down, will show list of city. Based on the city selected in city-drop-down, the second drop down, lets name it category-drop-down, will show list of categories available for particular city. Similarly the third drop down should show the value based on the 2nd drop down and 4th drop down should show the value based on 3rd drop down.

Basically, I need to store list of categories available for each city. Similarly I have to store values available for each categories. How can I store this value, so that the moment a value is selected on webpage, I can use a AJAX call to get the available data for next drop down.

Edited *****

Do let me know, if I am doing it totally wrong. Included the scripts. Please note, initially I uploaded the files under "Files". However I moved it to Assets folder as it was easier to edit the file in Assets folder.

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);
}

}

And the JSON file is -

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

Answer 1

One simple way if the data size isn't too large would be to generate your data as a JSON file and simply store it as a file and then edit your theme to include the file's url. A file that is too large might be 100k. Smaller is better but if you don't have a back end to handle the AJAX calls the static file certainly provides a low cost proof of concept.

There are two ways to do this.Either as an asset or a file. Assets are part of your theme so even though you'll be altering your templates to manage this I'd tend to go with a file. (Assets are just files located under the theme but the are dealt with slightly differently)

• go to your Shopify Admin control panel
• Click Settings
• Click Files
• Click "Upload Files"

After upload you'll have a file. The next step uses the file's name not its URL.

Go to your theme editor:

• Shopify Admin control panel
• Online Store
• Themes
• click Customize Theme
• drop-down Theme Options and select HTML/CSS

I'm guessing you are going to select the template product.liquid to edit. do that and decide where you want to introduce your javascript file. If your script file was named cities_etc.js you'd import it as below:

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

Answer 2

This method seems a bit slow if all that you are trying to do is create a tiered menu. Using Ajax requests will mean there are several round trips and it will be visually slow for the user waiting for the ajax request to complete.

You can create a linklist

I know you have already found your method but I would strongly urge you to give this a go. Here is an example of some liquid markup that will created a tiered menu. The parent linklists handle is main-menu then you need to create a linklist for each of the children where the handle matches the title in the main-menu. For example if you have an 'About Us' link in the main menu create a linklist also with the handle 'about-us'. Then just use some simple css or javascript to hide and show the menus on hover.

    {% 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 %}