Przejdź do głównej zawartości

Mapa z lokalizacją sklepu stacjonarnego

Aplikacja umożliwia wstawienie mapy z zaznaczoną lokalizacją sklepu stacjonarnego.

Film instruktażowy​

Ograniczenia i wymagania​

  1. Aplikacja umożliwia zaznaczenie tylko jednego sklepu stacjonarnego.
  2. Aplikacja do działania wymaga aktywnego stylu w technologii RWD lub Storefront.

Instalacja aplikacji​

  1. Zaloguj się do panelu administracyjnego sklepu.
  2. W zakładce Dodatki i integracje → Aplikacje wyszukaj aplikację Mapa z lokalizacją sklepu stacjonarnego i kliknij przycisk Zainstaluj aplikację.

  1. Zaakceptuj regulamin appstore i kliknij przycisk Zamawiam.

Aplikacja po instalacji jest wyłączona.

Włączanie i wyłączanie aplikacji​

Aplikację możesz włączyć lub wyłączyć w każdej chwili bez konieczności jej odinstalowywania i ponownego instalowania.

  1. W zakładce Dodatki i integracje → Moje aplikacje wyszukaj Mapa z lokalizacją sklepu stacjonarnego i kliknij ikonę aplikacji.

  1. Aby włączyć aplikację:
    • Ustaw opcję Włącz aplikację jako aktywną.
    • Wybierz rodzaje powiadomień e-mail, które chcesz otrzymywać.
    • Kliknij przycisk Zapisz.
  2. Aby wyłączyć aplikację:
    • Ustaw opcję Włącz aplikację jako nieaktywną.
    • Kliknij przycisk Zapisz.

Współrzędne geograficzne sklepu​

Wprowadź lub wybierz współrzędne geograficzne Twojego sklepu stacjonarnego.

  1. W zakładce Dodatki i integracje → Moje aplikacje wyszukaj Mapa z lokalizacją sklepu stacjonarnego i kliknij ikonę aplikacji.

  1. W sekcji Współrzędne geograficzne sklepu:
    • Wprowadź Szerokość geograficzną i Długość geograficzną, w której znajduje się Twój sklep stacjonarny lub wybierz na mapie:
      • Kliknij przycisk Wybierz lokalizację na mapie.
      • Wyszukaj adres lub znajdź na mapie lokalizację sklepu.
      • Kliknij lewym przyciskiem myszy na mapie, aby zmienić pozycję znacznika.
      • Kliknij przycisk Wybierz.
    • Kliknij przycisk Zapisz.

Ustawienia mapy​

Dostosuj wygląd mapy.

  1. W zakładce Dodatki i integracje → Moje aplikacje wyszukaj Mapa z lokalizacją sklepu stacjonarnego i kliknij ikonę aplikacji.

  1. Przejdź do zakładki Ustawienia mapy.
  2. Wybierz Silnik mapy.
  3. Jeśli wybrałeś/aś Mapy Google, wprowadź Klucz API. Przejdź do działu Rejestracja nowego klucza API do Google Maps, aby dowiedzieć się jak utworzyć nowy klucz API.
  4. Wybierz Znacznik lub wgraj własny plik graficzny.
  5. Opcjonalnie włącz opcję Dodaj obramowanie i wybierz Kolor obramowania.
  6. Dostosuj wygląd mapy dla różnych urządzeń (telefon, tablet, laptop, desktop):
    • Wybierz Format mapy.
    • Ustaw Poziom powiększenia.
    • Jeśli włączyłeś/aś opcję Dodaj obramowanie, ustaw Rozmiar obramowania.
  7. Kliknij przycisk Zapisz.
Ważne

Dopuszczony format znacznika to: JPG, JPEG, PNG lub WEBP. Dopuszczalny maksymalny rozmiar znacznika to 1 MB.

Dodawanie mapy do sklepu​

Mapę możesz dodać w dowolnym miejscu. Na stronie informacyjnej, we wpisie bloga, w opisie produktu lub module szablonu.

Wstawianie mapy​

  1. Przejdź do edycji treści, w której chcesz umieścić mapę np. strony informacyjnej.
  2. Wstaw w treści znacznik [store-map] w wybranym przez Ciebie miejscu.

  1. Kliknij przycisk Zapisz.

Wstawianie mapy z animacją ładowania​

  1. Przejdź do edycji treści, w której chcesz umieścić mapę np. strony informacyjnej.
  2. W edytorze treści wyłącz edytor i wklej poniższy kod HTML w wybranym przez Ciebie miejscu.
<div class="box loading">[store-map]</div>

  1. Kliknij przycisk Zapisz.
Ważne

Animacja ładowania dostępna tylko w szablonie RWD.

Wstawianie mapy w Shoper Visual Editor​

  1. Przejdź do Wygląd i treści → Wygląd sklepu → Szczegóły szablonu.
  2. Kliknij przycisk Edytuj układ i styl szablonu.
  3. W Edytorze układu strony wybierz Edytowaną stronę, w której chcesz wstawić mapę np. Pozostałe strony → Kontakt
  4. Przejdź do zakładki Dodaj moduł.
  5. Na liście modułów znajdź i rozwiń moduł Mapa z lokalizacją sklepu stacjonarnego.

  1. Przeciągnij moduł Dodaj nowy w wybrane miejsce w sklepie.
  2. Dostosuj Ustawienia mapy.

  1. Kliknij przycisk Zapisz.
  2. Kliknij przycisk Zapisz i opublikuj zmiany w układzie.

Rejestracja nowego klucza API do Google Maps​

  1. Przejdź na stronę https://developers.google.com/maps/documentation/javascript/get-api-key?hl=pl
  2. Kliknij przycisk Rozpocznij.
  3. Zaloguj się lub utwórz nowe konto.
  4. Wybierz lub dodaj nowy projekt.

  1. Zaakceptuj warunki usługi i kliknij przycisk Zgadzam się i chcę przejść dalej.
  2. Wprowadź Nazwę projektu.
  3. Kliknij przycisk Utwórz.
  4. Kliknij przycisk Zakończ konfigurację konta.
    • Kliknij przycisk Zgadzam się, kontynuuj.
    • Wprowadź dane do płatności.
    • Kliknij przycisk Zacznij bez opłat.

  1. Przejdź do Interfejsy API i usługi.
    • Znajdź usługę Maps JavaScript API.
    • Włącz usługę klikając w przycisk Enable.

  1. Przejdź do Klucze i dane uwierzytelniające.
    • Kliknij przycisk Utwórz dane logowania.
    • Wybierz Klucz interfejsu API.

  1. Klucz API został utworzony.

  1. Skopiuj klucz i wklej go w ustawieniach map aplikacji.

  1. Kliknij w nazwę klucza, aby przejść do edycji.
  2. W sekcji Ustaw ograniczenie aplikacji wybierz opcję Witryny.
  3. W sekcji Ograniczenia dostępu do witryn dodaj wszystkie domeny sklepu oraz domenę panelu administracyjnego.

  1. W sekcji Ograniczenia interfejsów API wybierz opcję Ogranicz klucz.
  2. W polu Select APIs wybierz Maps JavaScript API.
  3. Kliknij przycisk Zapisz.
Ważne

Ograniczanie dostępu klucza API tylko do swojego sklepu jest ważnym krokiem w zabezpieczeniu go przed nieautoryzowanym wykorzystaniem.

Przykłady wykorzystania mapy​

Kontakt i dane firmy w szablonie RWD​

Kod HTML do wklejenia w edytorze treści:

<div class="f-row">
    <div class="f-grid-6">
        <p>Tutaj wprowadź informacje kontaktowe i dane firmy.</p>
    </div>
    <div class="f-grid-6">
        <div class="box loading">[store-map]</div>
    </div>
</div>

Kontakt i dane firmy w szablonie Storefront​

Kod HTML do wklejenia w edytorze treści:

<div class="grid">
    <div class="grid__row">
        <div class="grid__col grid__col_xs-12 grid__col_lg-6">
            <p>Tutaj wprowadź informacje kontaktowe i dane firmy.</p>
        </div>
        <div class="grid__col grid__col_xs-12 grid__col_lg-6">[store-map]</div>
    </div>
</div>