1.0.4

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 1.0.4
+- added language selection 
+- fixed issue #7 plugin working with Shopware 6.4.13.0
+- fixed issue #6 show Popup Content only if content is set
+- actualised Mapbox codebase versions 
+- changed default map location to London 
+
 # 1.0.3
 - added API key check
 - added a new CMS block 

README.md

@@ -21,7 +21,8 @@ Now you can use your maps element within your shopping experience.
 
 ![](https://res.cloudinary.com/dtgdh7noz/image/upload/v1584603445/Bildschirmfoto_2020-03-19_um_09.37.01_pfajbs.png)
 
-![](https://res.cloudinary.com/dtgdh7noz/image/upload/v1584603448/Bildschirmfoto_2020-03-19_um_09.37.12_e7x3fu.png)
+![](https://res.cloudinary.com/dto7szezw/image/upload/v1661122897/github/MapsSetting1.0.0.4_t3h21k.png)
+
 
 ## Changes
 ##### Changes 1.0.3
@@ -30,3 +31,10 @@ Now you can use your maps element within your shopping experience.
 - We also added a block for the CMS element.
 
 ![](https://res.cloudinary.com/dtgdh7noz/image/upload/v1591095915/Bildschirmfoto_2020-06-02_um_13.52.05_znc9pj.png)
+
+##### Changes 1.0.4
+- Added language selection 
+- Fixed issue #7 plugin working with Shopware 6.4.13.0
+- Fixed issue #6 show Popup Content only if content is set
+- Actualised Mapbox codebase versions 
+- Changed default map location to London 

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "sas/maps",
   "description": "Maps plugin",
-  "version": "v1.0.3",
+  "version": "v1.0.4",
   "type": "shopware-platform-plugin",
   "license": "proprietary",
   "authors": [

src/Resources/app/administration/package.json

@@ -1,11 +1,19 @@
 {
-    "name": "administration",
-    "version": "1.0.0",
-    "private": true,
-    "author": "Shape & Shift",
-    "license": "ISC",
-    "dependencies": {
-        "mapbox-gl": "^1.8.1",
-        "mapbox-gl-geocoder": "^2.0.1"
-    }
+  "name": "administration",
+  "version": "1.0.0",
+  "private": true,
+  "author": "Shape & Shift",
+  "license": "ISC",
+  "dependencies": {
+    "@mapbox/mapbox-gl-language": "^1.0.0",
+    "@mapbox/mapbox-gl-geocoder": "^5.0.1",
+    "mapbox-gl": "^2.9.2"
+  },
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "description": ""
 }

src/Resources/app/administration/src/module/sw-cms/elements/maps/component/index.js

@@ -2,10 +2,11 @@ import template from './sw-cms-el-maps.html.twig';
 import './sw-cms-el-maps.scss';
 
 import mapboxgl from 'mapbox-gl';
-import MapboxGeocoder from 'mapbox-gl-geocoder';
+import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import MapboxLanguage from '@mapbox/mapbox-gl-language';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
-import 'mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
+import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
 
 const { Mixin } = Shopware;
 
@@ -65,22 +66,28 @@ Shopware.Component.register('sw-cms-el-maps', {
                     mapboxgl.accessToken = token;
 
                     const map = new mapboxgl.Map({
-                        container: 'map',
-                        style: 'mapbox://styles/mapbox/streets-v11',
+                        container: this.element.id,
+                        style: this.element.config.mapboxStyle.value,
                         center: [this.element.config.geoLat.value, this.element.config.geoLong.value],
-                        zoom: 13
+                        zoom: this.element.config.zoom.value 
                     });
 
+		map.addControl(new MapboxLanguage({
+			  defaultLanguage: this.element.config.language.value 
+			  }));
+
                     const marker = new mapboxgl.Marker().setLngLat([this.element.config.geoLat.value, this.element.config.geoLong.value]).addTo(map);
 
                     const geocoder = new MapboxGeocoder({
                         accessToken: mapboxgl.accessToken,
                         mapboxgl: mapboxgl
                     });
 
+
                     map.addControl(geocoder, 'top-left');
 
                     map.on('load', () => {
+
                         geocoder.on('result', (ev) => {
                             this.element.config.geoLat.value = ev.result.geometry.coordinates[0];
                             this.element.config.geoLong.value = ev.result.geometry.coordinates[1];
@@ -89,15 +96,20 @@ Shopware.Component.register('sw-cms-el-maps', {
                         });
                     });
 
+		if (this.element.config.description.value){
                     const popup = new mapboxgl.Popup({ closeOnClick: false, offset: 40 })
                         .setLngLat([this.element.config.geoLat.value, this.element.config.geoLong.value])
                         .setHTML(this.element.config.description.value)
                         .addTo(map);
+			};
+
                 })
                 .catch((error) => {
                     this.isEmpty = true;
                     this.isLoading = false;
                 });
+
+
         }
     }
 });

src/Resources/app/administration/src/module/sw-cms/elements/maps/component/sw-cms-el-maps.html.twig

@@ -1,4 +1,5 @@
 {% block sw_cms_element_maps %}
+
     <div class="sw-cms-el-maps">
 
         <sw-card :hero="true" :isLoading="isLoading" :large="false" v-if="isEmpty">
@@ -18,8 +19,7 @@
             </sw-alert>
 
         </sw-card>
-
-        <div id="map" v-else></div>
+        <div :id="element.id" v-else></div>
 
     </div>
 {% endblock %}

src/Resources/app/administration/src/module/sw-cms/elements/maps/config/sw-cms-el-config-maps.html.twig

@@ -29,6 +29,23 @@
                     <option value="14">14</option>
                     <option value="15">15</option>
                 </sw-select-field>
+
+		<!-- https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/#name-text--name_lang-code-text -->
+                <sw-select-field :placeholder="$tc('sas-maps.elements.mapsElement.languageLevelSelect')" :label="$tc('sas-maps.elements.mapsElement.languageLevel')" v-model="element.config.language.value">
+                    <option value="ar">Arabic</option>
+                    <option value="en">English</option>
+                    <option value="es">Spanish</option>
+                    <option value="fr">French</option>
+                    <option value="de">German</option>
+                    <option value="it">Italian</option>
+                    <option value="pt">Portuguese</option>
+                    <option value="ru">Russian</option>
+                    <option value="zh-Hans">Simplified Chinese</option>
+                    <option value="zh-Hant">Traditional Chinese</option>
+                    <option value="ja">Japanese</option>
+                    <option value="ko">Korean</option>
+                    <option value="vi">Vietnamese</option>
+                </sw-select-field>
 
                 <sw-text-field :label="$tc('sas-maps.elements.config.label.mapbox-style')" placeholder="mapbox://styles/mapbox/light-v10" v-model="element.config.mapboxStyle.value" :copyable="false" :copyableTooltip="false"></sw-text-field>
 

src/Resources/app/administration/src/module/sw-cms/elements/maps/index.js

@@ -11,15 +11,19 @@ Shopware.Service('cmsService').registerCmsElement({
     defaultConfig: {
         geoLat: {
             source: 'static',
-            value: 0
+            value: -0.15833
         },
         geoLong: {
             source: 'static',
-            value: 0
+            value: 51.52333
         },
         zoom: {
             source: 'static',
-            value: 10
+            value: 9
+        },
+        language: {
+            source: 'static',
+            value: 'en'
         },
         mapboxStyle: {
             source: 'static',

src/Resources/app/administration/src/module/sw-cms/snippet/de-DE.json

@@ -21,7 +21,9 @@
             "mapsElement": {
                 "label": "Maps Element",
                 "zoomLevel": "Zoom level",
-                "zoomLevelSelect": "Zoom Level auswählen"
+                "zoomLevelSelect": "Zoom Level auswählen",
+		"languageLevel": "Sprache der Karte",
+		"languageLevelSelect": "Sprache auswählen"
             }
         },
         "blocks": {

src/Resources/app/administration/src/module/sw-cms/snippet/en-GB.json

@@ -21,7 +21,9 @@
             "mapsElement": {
                 "label": "Maps Element",
                 "zoomLevel": "Zoom level",
-                "zoomLevelSelect": "Select zoom level"
+                "zoomLevelSelect": "Select zoom level",
+		"languageLevel": "Language",
+		"languageLevelSelect": "Select language"
             }
         },
         "blocks": {