在Shopify中實現JQuery存儲定位器插件

Question

我正在嘗試將以下jQuery商店定位器插件安裝到Shopify中： https : //github.com/bjorn2404/jQuery-Store-Locator-Plugin

我已經完成了初始設置，並且地圖運行良好。

目前，我有一個靜態json文件，該文件提取插件存儲位置。 這是我的json文件的格式：

[
  {
    "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": ""
  }
]

這是放置位置的代碼：

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

我遇到的麻煩是動態創建json文件，以便可以通過cms更新位置。 目前，我在“自定義”下為頁面設置了字段，如下所示：

我想做的就是讓這些字段進入json文件。 我的問題是：

• 我是否采用正確的方法？
• 以及如何動態創建json文件以顯示所需的信息？

任何幫助，將不勝感激。

Answer 1

它可能不是最好的解決方案，但我找到了一個可行的解決方案，我想我可以在這里分享以幫助他人，並可能改善代碼。

我找不到一種以所需格式將數據發布到Shopify中的json文件中的方法，因此我在頁面上輸出XML並調用了原始數據（jQuery插件允許）。

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

然后，我在定制部分中設置要由客戶端編輯的定制字段：

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

隨后是模板頂部的液體代碼以遍歷xml數據：

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

如果有人對通過json調用它的代碼有任何改進，我仍然認為這是最好的方法，但這是我能找到的唯一解決方案。