Store Locator Code

Technical Q&A
, , , ,
1

Hello, good morning!

I need to create a store locator for my client, I have told her that we may need to use an app for it. However, I really wanted to do it without an app, just codes.

I have tried doing it, and so far this is what I have

{% comment %}
  Dealer Locator - Two Column Layout with Image
{% endcomment %}

  

    
    

      {% if section.settings.dealer_image %}
        {{ section.settings.dealer_image | image_url: width: 800 | image_tag: 
          alt: section.settings.image_alt_text,
          class: "dealer-image"
        }}
      {% endif %}
    

    
    
      ## {{ section.settings.heading | default: 'Dealer Locator' }}

      
        
        

        
        

        
        

        BACK TO HOMEPAGE
      

    

  

{% schema %}
{
  "name": "Dealer Locator",
  "settings": [
    {
      "type": "image_picker",
      "id": "dealer_image",
      "label": "Dealer Image"
    },
    {
      "type": "text",
      "id": "image_alt_text",
      "label": "Image Alt Text",
      "default": "Dealer Location Map"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "Dealer Locator"
    }
  ],
  "blocks": [
    {
      "type": "province",
      "name": "Province",
      "settings": [
        {
          "type": "text",
          "id": "province_name",
          "label": "Province Name"
        },
        {
          "type": "textarea",
          "id": "city_data",
          "label": "City & Dealer Data (JSON Format)",
          "default": "{ \"City Name\": [\"Dealer 1\", \"Dealer 2\"] }"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Dealer Locator",
      "blocks": [
        {
          "type": "province",
          "settings": {
            "province_name": "Metro Manila",
            "city_data": "{ \"Makati\": [\"Dealer 1\", \"Dealer 2\"], \"Quezon City\": [\"Dealer 3\"] }"
          }
        },
        {
          "type": "province",
          "settings": {
            "province_name": "Cebu",
            "city_data": "{ \"Cebu City\": [\"Dealer 4\", \"Dealer 5\"] }"
          }
        }
      ]
    }
  ]
}
{% endschema %}

This is the current look, however the cities & dealers are not showing up

Mabinibooks_0-1739376223604.png
Mabinibooks_0-1739376223604.png1625×687 181 KB

This may be something complex, hence I’m willing to pay $12 for it if your code would work and be able to guide me how to fix it. $12 may not be much, but it’s already one day minimum wage from where I’m from.

I’m still a beginner, please assist.

Thank you!

1 Like
2

Sorry I posted in the wrong thread and I’m unable to delete this comment, hence I’m leaving this message. Best of luck with solving your problem!