實施JQuery的商店定位器插件安裝到Shopify

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調用它，我仍然認爲這將是最好的方式，但這是我能找到的唯一解決方案。