在Shopify中实现JQuery存储定位器插件

Question

I am attempting to setup the following jQuery store locator plugin into Shopify: https://github.com/bjorn2404/jQuery-Store-Locator-Plugin

I have managed to do the initial setup and the map works well.

At the moment I have a static json file which pulls in the locations of the stores for the plugin. This is the format of my json file:

[
  {
    "id": "1",
    "name": "Store One",
    "lat": "-38.944094",
    "lng": "110.824870",
    "address": "Address of store",
    "address2": "",
    "city": "City",
    "state": "WA",
    "postal": "90210",
    "phone": "9555 5555",
    "hours1": "Mon-Sun 11am-10pm",
    "hours2": "",
    "hours3": ""
  }
]

Here is the code to pull in the locations:

$('#bh-sl-map-container').storeLocator({
    'slideMap': false,
    'fullMapStart': true,
    'lengthUnit': 'km',
    'distanceAlert': -1,
    'dataType': 'json',
    'dataLocation': 'locations.json'
});

What I'm having trouble with is dynamically creating the json file so the locations can be updated by the cms. At the moment I have fields setup for the page under "Customise" as seen below:

What I would like to do is to have these fields pull through into the json file. My questions are:

• Am I approaching this the right way?
• And how do I dynamically create the json file to display the information thats needed?

Any help would be appreciated.

Answer 1

It might not be the best solution but I found a solution which worked and I thought I might share here to help others and maybe improve the code.

I couldn't find a way to post data to the json file in Shopify in the format I needed so I output the XML on the page and called in the raw data (which the jQuery plugins allows).

var markers = $('.markers').html();

  $('#bh-sl-map-container').storeLocator({
    'slideMap': false,
    'fullMapStart': true,
    'lengthUnit': 'km',
    'distanceAlert': -1,
    'dataType': 'xml',
    'regionID': 'AU',
    'dataRaw': markers,
    'listTemplatePath': '[PATH OF LIST TEMPLATE]',
    'infowindowTemplatePath' :'[PATH OF INFO WINDOW]',
    'mapSettings': { 
      zoom : 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
    }
  });     

Then I setup my custom fields to be edited by the client in the customise section:

{% schema %}
{
"name": "Store Locations",
"settings": [],
"blocks": [
  {
    "type": "Location",
    "name": "Location",
    "settings": [
      {
        "id": "google_location_store",
        "type": "text",
        "label": "Store"
      },
      {
        "id": "google_lat",
        "type": "text",
        "label": "Latitude"
      },
      {
        "id": "google_lng",
        "type": "text",
        "label": "Longitude"
      },
      {
        "id": "google_address",
        "type": "text",
        "label": "Address"
      },
      {
        "id": "google_city",
        "type": "text",
        "label": "City"
      },
      {
        "id": "google_state",
        "type": "text",
        "label": "State"
      },
      {
        "id": "google_postcode",
        "type": "text",
        "label": "Postcode"
      },
      {
        "id": "google_phone",
        "type": "text",
        "label": "Phone"
      },
      {
        "id": "google_opening_hours",
        "type": "textarea",
        "label": "Opening Hours"
      }
    ]
  }
]
}
{% endschema %}

Followed by the liquid code at the top of the template to pull through the xml data:

{% capture data %}
{% for block in section.blocks %}
  <marker name="{{ block.settings.google_location_store }}" lat="{{ block.settings.google_lat }}" lng="{{ block.settings.google_lng }}" address="{{ block.settings.google_address }}" city="{{ block.settings.google_city }}" state="{{ block.settings.google_state }}" postal="{{ block.settings.google_postcode }}" phone="{{ block.settings.google_phone }}" email="{{ block.settings.email }}" hours1="{{ block.settings.google_opening_hours }}" />
{% endfor %}
{% endcapture %}


<div class="markers">
  <?xml version="1.0" encoding="utf-8"?>
  <markers>
    {{ data }}
  </markers>
</div>

If anyone had any improvements on the code to call it through the json I still feel that would be the best way but this is the only solution I could find.