实施JQuery的商店定位器插件安装到Shopify

问题描述：

我试图设置下面的jQuery商店定位器插件安装到Shopify： https://github.com/bjorn2404/jQuery-Store-Locator-Plugin 实施JQuery的商店定位器插件安装到Shopify

我已成功地做初始设置和地图效果很好。

目前我有一个静态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文件来显示所需的信息？

任何帮助，将不胜感激。

答

它可能不是最好的解决方案，但我找到了一个解决方案，我认为我可以在这里分享来帮助他人，也许改进代码。

我找不到在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调用它，我仍然认为这将是最好的方式，但这是我能找到的唯一解决方案。

实施JQuery的商店定位器插件安装到Shopify

相关推荐