Aktualizacja Shoper 5.4

Długo oczekiwana aktualizacja oprogramowania Shoper jest już dostępna. Dla mnie szczególnie istotna gdyż wprowadza kilka nowości na których mi zależało. Szczegółowe informacje znajdziecie oczywiście na stronach producenta, ja chciałbym wspomnieć jedynie tych kilku zmianach które przypadły mi do gustu.

W nowej wersji Shoper zostało dodane między innymi: Czytaj dalej Aktualizacja Shoper 5.4

Shoper 5 – darmowa przesyłka

Nie zamierzam rozdawać dzisiaj kuponów na darmowe paczki więc nie ostrzcie sobie zębów. Niestety jedyne co chcę Wam dzisiaj opisać to niewielka (choć jak dla mnie przydatna) funkcja informacyjna. W Shoper 5 od jakiegoś czasu dostępna jest funkcja umożliwiająca uzależnienie wielkości opłaty za przesyłko od wartości zamówienia. Dzięki czemu jesteśmy w stanie premiować większe zakupy u oferować np darmową dostawę zakupów. Czytaj dalej Shoper 5 – darmowa przesyłka

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.

Shoper 5 – funkcja wydruku karty produktu – poradnik

Dzisiejszy  poradnik poświęcam jednemu z tematów poruszany przez was. Jakiś czas temu poproszono mnie o dodanie funkcji wydruku strony karty produktu w sklepie. Osobiście nie uważam by komukolwiek była potrzebna taka funkcja (przeglądarki mają wbudowane funkcje druku) ale moje subiektywne poglądy nie mają tu znaczenia 🙂

Skoro ktoś z was może potrzebować takiej funkcji to czemu jej nie dodać.

Zaprezentowany w tym wpisie sposób bazuje na kodzie JavaScript i wykorzystuje funkcje tworzenia dodatkowych modułów w sklepie Shoper tak by nie było problemów z późniejszymi aktualizacjami.

Dla ułatwienia pracy przygotowałem kilka ikon które możecie wykorzystać do stworzenia waszego przycisku drukowania. Czytaj dalej Shoper 5 – funkcja wydruku karty produktu – poradnik