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可以更新位置。目前我在＆＃34; Customize＆＃34;下面的页面设置了字段。如下所示：

我想要做的是让这些字段进入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调用它，我仍然认为这是最好的方法，但这是我能找到的唯一解决方案。

在Shopify中实现JQuery商店定位器插件

1 个答案: