Implementierung JQuery Store Locator-Plugin in Shopify

Ich versuche, die folgende jQuery Store Locator-Plugin in Shopify Setup: https://github.com/bjorn2404/jQuery-Store-Locator-Plugin Implementierung JQuery Store Locator-Plugin in Shopify

ich es geschafft haben, die Ersteinrichtung und die Karte zu tun, funktioniert gut.

Im Moment habe ich eine statische JSON-Datei, die für das Plugin in den Positionen der Läden zieht. Dies ist das Format meiner JSON-Datei:

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

Hier ist der Code in den Orten zu ziehen:

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

Was ich mit Mühe, ist die JSON-Datei dynamisch zu schaffen, damit die Standorte können durch das CMS aktualisiert werden. Im Moment habe ich Felder Setup für die Seite unter „Anpassen“ wie unten zu sehen:

Was würde ich tun, wie diese Felder haben, durchziehen in die JSON-Datei. Meine Fragen sind:

Bin ich das der richtige Weg?
Und wie erstelle ich dynamisch die JSON-Datei die Informationen angezeigt werden thats, benötigt?

Jede Hilfe wäre willkommen.

Quelle

2017-10-12 pedz

Es ist vielleicht nicht die beste Lösung sein, aber ich eine Lösung gefunden, die gearbeitet, und ich dachte, ich könnte hier teilen, anderen zu helfen und vielleicht den Code zu verbessern.

Ich konnte keinen Weg finden, um Daten in der JSON-Datei in Shopify in dem Format, das ich benötigte, so dass ich die XML auf der Seite ausgeben und die Rohdaten (die die jQuery-Plugins ermöglicht).

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

Dann habe ich mein Setup benutzerdefinierte Felder durch den Kunden im besonders anfertigen Abschnitt bearbeitet werden:

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

durch den Flüssigkeits Code am Anfang der Vorlage Gefolgt durch die XML-Daten zu ziehen:

Wenn jemand irgendwelche Verbesserungen am Code hatte, um es über den JSON zu nennen, habe ich immer noch das Gefühl, das wäre der beste Weg, aber das ist die einzige Lösung, die ich finden könnte.

Quelle

2017-10-13 07:15:30 pedz

Implementierung JQuery Store Locator-Plugin in Shopify

Antwort

Verwandte Themen