Indywidualne czcionki w sklepie – część I

Jak pewnie część z was wie, fonty (czcionki) stosowane na stronach www (czy też w sklepach internetowych) najczęściej sprowadzają się do krótkiej listy tzw. bezpiecznych fontów. Bardzo często spotykam się z irytacją klientów którzy oczekują, że z czcionkami w internecie jest tak jak z czcionkami na komputerze. Czasami długo muszę tłumaczyć, że niestety jak stworzymy sobie opis produktu np w programie Microsoft Word i wybierzemy „fikuśną” czcionkę to po wgraniu opisu do sklepu klienci zobaczą go tak jak byśmy chcieli.

Wszystko sprowadza się do jednego głównego problemu. Przeglądarki internetowe wyświetlając teksty w sklepach internetowych w standardzie korzystają z czcionek, które mamy już zainstalowane na urządzeniu na którym przeglądamy dany sklep.

Czytaj dalej Indywidualne czcionki w sklepie – część I

Pin it – Shoper 5

Dzisiejszy wpis poświęcam serwisowi, który dla ecommerce może znaczyć więcej niż sam Facebook 🙂 Mowa o niepozornym Pinterest.com który w ciekawy sposób pozwala dzielić się zdjęciami (np ulubionych produktów). Oczywiście zasięgiem póki co daleko mu do wielkiego brata (fb) ale dynamika z jaką zdobywa popularność jest imponująca i warto brać go pod uwagę przy planowaniu działań social marketingowych.

Czytaj dalej Pin it – Shoper 5

Shoper 5 – Newsletter Pop Up

Prace nad tym wpisem przeciągały mi się w nieskończoność. Wiem, że kilka osób czekało na ten poradnik i mam nadzieję że znajdziecie tu to na co liczyliście. Aby zbytnio nie przedłużać zapraszam do testowania funkcji Pop up z newsletterem systemu Shoper 5. Jeżeli dysponujecie zewnętrznymi systemami obsługi waszych newsletterów możecie dokonać odpowiednich zmian (o których napisze poniżej) i zamienić formularz zapisu.

Nie przestraszcie się zbytnio wyglądem i treścią zaproszenia do newslettera. Wszystko możecie edytować zgodnie z waszym upodobaniem. Czytaj dalej Shoper 5 – Newsletter Pop Up

Shoper – slajder produktów na stronie głównej

Już od dłuższego czasu sklepy internetowe Shoper 5 dysponują funkcjonalnością slajdera/rotatora produktów w modułach promocji, nowości, bestsellerów oraz od niedawna ostatnio dodanych,

Moduły mają możliwość ustalenia sposobu wyświetlania oraz uruchomienia automatycznej rotacji.

Wszystko byłoby super gdyby nie mała niedogodność. Moduły te zaprogramowane są tak by z włączoną funkcją slajdera wyświetlać tylko jeden produkt. Gdy umieszczamy moduły w lewej lub prawej kolumnie wszystko wygląda super ale po wstawieniu ich do części centralnej osiągamy kiepsko wyglądający moduł z jednym produktem.

UWAGA! – Aktualizacja skryptu jest już dostępna, proszę pobrać plik z linku znajdującego się w treści wpisu.

Czytaj dalej Shoper – slajder produktów na stronie głównej

Shoper 5 – aktualizacja 5.3.4

Aktualizacja oprogramowania Shoper nr 5.3.4 jest już dostępna w sklepach na licencji SaaS (licencje Life Time standardowo muszą jeszcze poczekać kilka dni).

Szczegółowe informacje o zmianach dostępne są w changelog`u na stronie producenta.

Najważniejsza w mojej opinii zmiana to wprowadzenie integracji z iFirmą oraz wFirmą czyli zewnętrznymi systemami księgowości internetowej. Czytaj dalej Shoper 5 – aktualizacja 5.3.4

Shoper 5 – formularz zapytania o produkt – poradnik

W dzisiejszym poradniku podejmuję upragniony temat formularza kontaktowego w którym klient będzie miał możliwość wysłania zapytania do sklepu z poziomu konkretnego produktu. Odrobinę przyspieszyłem powstanie poradnika gdyż kolejne osoby prosiła o pomoc w tej sprawie (a ja już taki jestem, że lubię pomagać 🙂 ).

 

UWAGA! wpis nieaktualny, po aktualizacji 5.4 formularz dostępny jest w Shoper jako funkcja standardowa.

Ponieważ założenie jest takie by stworzyć formularz, który sam pobierze informację o tym jakiego produktu dotyczy zapytanie będziemy musieli edytować plik skórki zarządzający kartą produktu.

UWAGA! plik edytowany nie podlega automatycznej aktualizacji (pamiętajcie o tym)…Na początek zobaczcie co będziemy robić, jak wam się nie spodoba to zaoszczędzicie trochę czasu 🙂

Oczywiście formularz ten nie jest idealnym rozwiązaniem. Ponieważ korzystam z funkcji formularza kontaktowego występuje kilka efektów ubocznych. Po wysłaniu formularza system przenosi nas  na stronę formularza gdzie pojawia się info o pomyślnym wysłaniu maila. Podobnie jest przy błędnym wypełnieniu formularza. Możecie go jednak odrobinę dopracować 🙂

Z wyglądu poza ciekawym efektem zaciemnienia reszty sklepu pozwoliłem sobie na całkowitą prostotę ale tu też macie pole do popisu bo style CSS można dowolnie zmodyfikować.

Zacznijmy zatem :):

Krok 1: Kopiujemy aktualną skórkę i przechodzimy do jej edycji. Wchodzimy na zakładkę „Edycja zaawansowana” i klikamy na ikonę edycji przy pliku product/index.tpl.

Krok 2: Dodajemy blok który będzie naszym „ciemnym płaszczem” zacieniającym widok sklepu:
<div id="black"  class="black_content" style="display: none;">&nbsp;</div> kod ten należy umieścić zaraz po rozpoczęciu <body> a przed{include file='body_head.tpl'}

Krok 3: Dodajemy kod skryptu zarządzający efektem zaciemnienia, np tuż po dodaniu wcześniejszego kodu:

{literal}
<script>
function AskOn()
{
document.getElementById("white").style.display = "block";
document.getElementById("black").style.display = "block";
}
function AskOff()
{
document.getElementById("white").style.display = "none";
document.getElementById("black").style.display = "none";
}
function  checkEmail($email) {
var email = document.getElementById('askform2');
var check = true;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Podaj poprawny adres');
email.focus;
check = false;
return false;
}
}
</script>
{/literal}

Krok 4: Dodajemy kod formularza (umiejscowieni kodu podobnie jak wcześnie):

<div id="white" class="white_content" style="display: none;">
<form method="post" action="{route key='contact'}">
<fieldset>
{include file='formantispam.tpl'}
<table>
<tbody>
<tr>
<td colspan="2"><h3>{translate key="Pytanie o produkt:"}</h3><button onclick="AskOff();" id="afx">{translate key="x"}</button></td>
</tr>
<tr>
<td colspan="2"><h4><b>{$product->translation->name|escape}</b></h4></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>
<label for="askform1">{translate key="Name and surname:"}</label>
</td>
<td>
<div>
<input id="askform1" type="text" name="name" value="{$data.name|escape}" size="30" />
</div>
{if $data_error.name}
<ul>
{foreach from=$data_error.name item=err_text}
<li>{$err_text|escape}</li>
{/foreach}
</ul>
{/if}
</td>
</tr>
<tr>
<td>
<label for="askform2"><em>*</em> {translate key="E-mail address:"}</label>
</td>
<td>
<div>
<input id="askform2" type="text" name="mail" value="{$data.mail|escape}" size="30" />
</div>
{if $data_error.mail}
<ul>
{foreach from=$data_error.mail item=err_text}
<li>{$err_text|escape}</li>
{/foreach}
</ul>
{/if}
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="askform3" type="hidden" name="subject" value='{translate key="Pytanie o produkt:"} {$product->translation->name|escape} | id: {$product->product->product_id}' size="30" />
</td>
</tr>
<tr>
<td>
<label for="contact4"><em>*</em> {translate key="Message:"}</label>
</td>
<td>
<div>
<textarea rows="5" cols="30" id="contact4" name="text">{translate key="Tu wpisz swoje pytanie:"}</textarea>
</div>
{if $data_error.text}
<ul>
{foreach from=$data_error.text item=err_text}
<li>{$err_text|escape}</li>
{/foreach}
</ul>
{/if}
</td>
</tr>
</tbody>
</table>
<div>
<button type="submit">
<img src="{baseDir}/public/images/1px.gif" alt="" />
<span>{translate key="Send"}</span>
</button>
</div>
</fieldset>
</form>
</div>

Jakbyście otworzyli plik z formularzem kontaktowym to zobaczycie spore podobieństwo. Większość kodu skopiowałem, dodając jedynie blok o id „white”, przycisk wyłączenia formularza oraz ukryłem pole z tematem listu wymuszając by pojawiła się w nim zarówno nazwa produktu o który klient pyta jak i jego ID (jakbyście mieli w sklepie podobne nazwy).

Krok 5: Teraz pozostaje nam dodać link wywołujący formularz, ja zdecydowałem się dodać go obok innych linków tego typu, czyli w sekcji o klasie „additionalinfo„. Elementem wywołyjącym może być zarówno link jak i przycisk, ważne by wywoływał funkcje AskOn. Ja skopiowałem  fragment listy z linkiem polecającym stronę przyjacielowi i zamieniłem ten link na przycisk:

<li  class="mailfriend">
<button onclick="AskOn();" id="askform_b">{translate key="+ zapytaj o produkt"}</button>
</li>

 

Krok 6: Ostatnim krokiem jest dodanie kodu CSS:

.black_content {
background-color: black;
display: block;
height: 100%;
left: 0;
opacity: 0.5;
position: fixed;
top: 0;
width: 100%;
z-index: 10001;
}
.white_content {
background-color: white;
border: 0;
display: block;
height: 400px;
left: 50px;
overflow: auto;
padding: 20px;
position: absolute;
top: 0;
width: 500px;
z-index: 10002;
}
.white_content h3{
font-family: 'Bitstream Charter','Century Schoolbook L','Liberation Serif',Georgia,Times,serif;
font-weight: normal;
line-height: 37px;
font-size: 18px;
float: left;
}
.white_content .askform td.label{
min-width: 200px;
}
#afx{
font-weight: bold;
font-size: 22px;
line-height: 37px;
float: right;
padding: 0 10px;
border: 1px solid #ddd;
}

Starałem się dodawać elementy tekstowe jako frazy językowe tak byście mogli później dodać je do systemy by móc obsługiwać inne języki.

I tak mamy np  {translate key=”Pytanie o produkt:”} co oznacza, że dodając frazę językową do języka polskiego, podajcie jako „klucz” dokładną frazę „Pytanie o produkt:” i polskie tłumaczenie „Pytanie o produkt:„. Jak będziecie dodawać np wersje angielską dodajcie w języku angielskim frazę o kluczu „Pytanie o produkt:” + odpowiednie tłumaczenie w języku angielskim…
Wchodząc na stronę sklep.szablonsklep.pl możecie zobaczyć jak wygląda formularz w rzeczywistości.

Aktualizacja Shoper 5.3

Nowa aktualizacja oprogramowania Shoper jest już dostępna dla właścicieli systemu na licencji abonamentowej (SaaS).

Zmian jest kilka choć niestety nie wszystko co było zapowiadane 🙂

Z nowych funkcjonalności najbardziej podoba mi się umożliwienie sprzedaży produktów cyfrowych, dzięki temu Shoper staje się dostępny dla kolejnej grupy e-sklepikarzy.

Kolejnym ciekawym dodatkiem jest możliwość tworzenia poziomego (rozwijanego) menu z kategoriami w nagłówku. System umożliwia wybranie kilku lub wszystkich kategorii i umieszczenie ich w menu w którym dotychczas mogły znajdować się tylko linki do stron informacyjnych. Czytaj dalej Aktualizacja Shoper 5.3

Shoper 5 – liczbowa informacja o wielkości promocji

Zapraszam na kolejny wpis omawiający drobne dodatki do oprogramowania Shoper 5. Tym razem na tapetę wziąłem tzw. „tagi promocji” lub też „flagi promocji„.

W standardowej wersji oprogramowania Shoper 5 produkt będący w danej chwili w promocji jest automatycznie wyróżniony poprzez dodanie odpowiedniej informacji zarówno graficznej jak i tekstowej.

Taki zabieg prowadzi do zwiększenia widoczności produktów w promocji co oczywiście prowadzi w prostej linii do zwiększenia sprzedaży.

Czytaj dalej Shoper 5 – liczbowa informacja o wielkości promocji

Shoper 5 – Rozwijany narożnik reklamowy

Dzisiejsza odsłona  poradnika edycji standardowego oprogramowania Shoper 5 to odrobina kodu i kilkanaście minut pracy by osiągnąć  efekt rozwijania narożnika sklepu.

Oczywiście istnieje takie prawdopodobieństwo, że kiedyś podobne „fajerwerki” znajdą się w standardowej odsłonie programu ale póki co jeszcze ich nie ma więc jeżeli kiedyś chcieliście dodać taki element do swojego sklepu, zapraszam do zapoznania się z  krótkim poradnikiem.

Czytaj dalej Shoper 5 – Rozwijany narożnik reklamowy

Shoper 5 – lupka powiększająca na liście produktów – poradnik

Witam ponownie w dziale porad dla systemu Shoper. Tym razem podejmuje temat stworzenia dodatkowego efektu lupy dla produktów na liście produktów oraz na stronie głównej sklepu.

Jak dobrze wiecie większość klientów kupuje wzrokiem także jakość zdjęć ma spore znaczenie w procesie zakupowym. Nie ma jednak sensu wyświetlanie dużego zdjęcia przy każdym z produktów na liści, lista produktów nie do tego służy i prawdę mówiąc osobiście nie lubię takiego podejścia. Czytaj dalej Shoper 5 – lupka powiększająca na liście produktów – poradnik