Jak rozbudować stronę kontaktu w Shoper 5?

shoper_logo kopia

Oprogramowanie Shoper, które jak wiecie przeglądam, testuje, rozkładam i składam tak często jak to możliwe ma raczej słabo rozwiniętą kwestię strony „kontaktu”. Standardowa strona z formularzem kontaktowym działa doskonale ale ma jedną dużą wadę. Na stronie tej jest widoczny jedynie formularz kontaktowy i nic poza tym. Niestety wprowadzanie jakichkolwiek dodatkowych treści na tej stronie wymaga edycji pliku HTML zarządzającym jej wyglądem co oczywiście kończy się zablokowaniem automatycznych aktualizacji tego pliku. Tworzenie dodatkowej strony informacyjnej z wszelkimi informacjami kontaktowymi i dodawanie na niej linku do formularza nie wydaje się być zbyt optymalnym. Utrudnianie znalezienia kontaktu może i się przydaje na stronach wielkich korporacji (gdzie każdy kontakt to dodatkowy koszt związany z obsługą) ale w sklepach może jedynie odstraszyć potencjalnych klientów.

W dzisiejszym poradniku zaprezentuje łatwy sposób rozbudowania strony kontaktu i w dodatku wszystko można zrobić bez potrzeby edytowania plików HTML standardowego stylu graficznego Shoper.

Zacznijmy zatem:

 

Krok 1 – określenie potrzeb:

Zakładam że w moim wyimaginowanym sklepie na stronie kontaktu chcę mieć sekcję tekstową z informacjami takimi jak adres sklepu, telefony itp. Następnie chcę mieć sekcję z formularzem dla tych którzy nie chcą dzwonić tylko wolą wysłać wiadomość bezpośrednio ze strony a na koniec dodam małą mapkę od brata gugla by klienci mogli mnie namierzyć w razie potrzeby.

Krok 2 – sprawdzamy ustawienia bezpieczeństwa

w dziale Konfiguracja/Administracja, system/Bezpieczeństwo sprawdzamy zaznaczamy by system nie czyścił kodu HTML (w przeciwnym razie nie dodacie formularza do strony informacyjnej bo kod zwyczajnie nie zadziała)

pski1

 

Krok 3 – tworzymy miejsce

w panelu administracji sklepu w dziale Zawartość/Strony informacyjne dodaje nową stronę i nazywam ją „Kontakt” (Jak ją macie to oczywiście pomijacie ten krok przechodząc do jej edycji)

 

Krok 4 – dodajemy treść

Do każdej z sekcji dodaje mały nagłówek typu „Dane kontaktowe” i korzystając z edytora tekstu dostępnego w Shoper ustawiam tekst jako „Nagłówek 2”

Na zrzucie zaznaczyłem elementy edytora które używałem przy tworzeniu tekstu:
pski2

 

W sekcji w której chcecie dodać formularz musicie wkleić kod formularza który zamieszczam poniżej. Aby wkleić skopiowany kod do strony pamiętajcie by wyłączyć edytor tekstu. Zrobicie to klikając na przycisk w prawym górnym rogu edytora. Dzięki temu wklejony kod nie ulegnie uszkodzeniu i formularz będzie działał.

[code lang=”html”]

<form class="formprotect" action="/pl/contact" method="post">
<fieldset>
<div class="none bottest"><!– <input name="bottest1" value="1" /> –> <input name="bottest2" type="text" /></div>
<div class="shaded_inputwrap"><input id="contact1" name="name" size="30" type="text" value="" /></div>
<div class="shaded_inputwrap"><input id="contact2" name="mail" size="30" type="text" value="" /></div>
<div class="shaded_inputwrap"><input id="contact3" name="subject" size="30" type="text" value="" /></div>
<div class="shaded_textareawrap"><textarea id="contact4" cols="30" name="text" rows="5"></textarea></div>
<table>
<tbody>
<tr>
<td class="label"><label for="contact1">Imię i nazwisko:</label></td>
</tr>
<tr>
<td class="label"><label for="contact2"><em class="color">*</em> Adres e-mail:</label></td>
<td class="label"><label for="contact3">Temat:</label></td>
<td class="label"><label for="contact4"><em class="color">*</em> Treść:</label></td>
</tr>
</tbody>
</table>
<div class="bottombuttons centertext"><button class="button send" type="submit">Wyślij</button></div></fieldset>
</form>&nbsp;

[/code]

Dla tych którzy zastanawiają się skąd go wziąłem podpowiem że znajduje się on na standardowej stronie formularza więc wystarczyło skopiować 🙂

 

Ostatnia sekcja treści to sekcja z mapką google. Tu sprawa również jest uproszczona gdyż google maps pozwala skopiować kod wyświetlający mapkę na naszej stronie. Wystarczy zatem wklepać adres w maps.google.pl a następnie kliknąć na ikonę linku znajdującą się w z lewej strony mapy.

Będziemy mieć dwie możliwości dodania kodu mapy do naszej strony.

Albo kopiujemy cały kod iframe jaki udostępni nam google a następnie klikamy na prawy górny róg edytora tekstu w Shoper tak by podglądnąć kod podobnie jak to zrobiliśmy przy dodawaniu formularza kontaktowego, wklejamy kod od google i zapisujemy zmiany.

Inna opcja to dodanie kodu poprzez funkcje „dodaj media” w edytorze tekstu w Shoper (taka ikonka taśmy filmowej). Jak klikniemy na tą ikonę to z menu możemy wybrać format „iframe” a następnie musimy wkleić adres mapki jaką chcemy wstawić.

 

Krok 5 – sprawdzamy czy wszystko działa.

 

19 odpowiedzi do “Jak rozbudować stronę kontaktu w Shoper 5?”

  1. Sposób dobry, ale wydaje mi się, że po wysłaniu formularza user i tak trafi na oryginalną, pustą stronę z formularzem kontaktowym. Lepiej byłoby, gdyby pojawiał się tylko komunikat o wysłanej wiadomości na nowej, lepszej stronie kontaktowej….

    1. Zdecydowanie lepiej by było gdyby system nie przenosił na stronę kontaktu z tym że akcja wysłania musi zostać wykonana przez skrypt systemu sklepu i to ten skrypt przenosi nas po wysłaniu formularza na standardową stronę.

  2. Dzień dobry,

    nie wiedziałem, gdzie zadać to pytanie, a ten wpis wydaje się być najbliżej tematu 🙂 Stworzyłem sklep na platformie Click Shop (czyli de facto Shoper). Ze względu na jego specyfikę potrzebuję formularza kontaktowego, za pomocą którego klienci mogliby przesyłać na zdefiniowany adres e-mail zdjęcia w formie załącznika. Idealnym rozwiązaniem byłoby uruchamianie zmodyfikowanego formularza w okienku na karcie produktu (http://sklep.renes.com.pl/pl/p/Warhol-Marylin-23-ed.Sunday-B-Morning/316 -> Zapytaj o dzieło). Czy jest to możliwe poprzez modyfikację formularza obecnego już na stronie?

    Będę bardzo wdzięczny za odpowiedź!

    1. niestety nie znam prostego sposobu na umieszczenie takiego pola. Niestety samo wstawienie pola w formularzu może nie wystarczyć bo od strony PHP coś ten formularz musi obsłużyć a do plików PHP dostępu nie masz.

  3. Dzięki za odpowiedź! Będę w takim razie próbował innymi sposobami.

    A co do właściwego tematu posta – czy nie lepszym rozwiązaniem jest edycja właśnie pliku .tpl z formularzem kontaktowym? 🙂 Wtedy otrzymujemy w pełni funkcjonalną stronę z formularzem, który nigdzie nas nie przenosi. Dziś trochę pokombinowałem i uzyskałem całkiem zadowalający efekt: http://sklep.renes.com.pl/pl/contact.

    PS. Grzegorzu, czy wiesz może, dlaczego na niektórych podstronach (formularz, koszyk, rejestracja) nie ma zdefiniowanych znaczników ?

  4. Witam.
    Panie Grzegorzu – czy jest szansa, aby idąć śladami kontktu z Klientem zaimplementować do Shopera( ClickShopa ) okienko z chatem ? Chat z konsultantem staje sięcoraz powszechniejszy, Presta ma własne rozwiązania – a my ? 🙂
    Czy ma Pan pomysł, w jaki sposób dodać okienku chatu ? Np. w wysuwanym panelu bocznym ?

  5. Witam
    Chciałbym nawiązać do podobnego tematu tzn czy istnieje możliwość dodania formularza strony z własnymi opiniami np mamy stronę opinie o firmie gdzie znajdują sie opinie dodane przez klientów a poniżej okienko do ich dodania tzn takie własne opineo
    Pozdrawia
    Radek

  6. Witam Panie Grzegorzu,

    chcialem dodac element iframe do strony informacyjnej, ale dzieje sie dziwna rzecz. Gdy wstawie pusty iframe bez atrybutu src i klikne zapisz to mi sie zapisuja zmiany, jak tylko dodam src czy to recznie, czy przez dodaj element po kliknieciu zapis strona sie przeladowuje ale nie ma wniesionych zmian. Korekcja kodu html jest wylaczona.

    Prosze o pomoc

Skomentuj Grzegorz Rusin Anuluj pisanie odpowiedzi