Edycja rozwijanego menu kategorii – poradnik Shoper

shoper_logo kopiaWitajcie po dłuższej przerwie 🙂 dzisiejszy wpis stworzyłem na prośbę pana Patryka C. i mam nadzieję, że efekt końcowy będzie zadowalający. Efekt nad którym popracujemy to „Kurtyna kategorii” czyli trochę większe menu rozwijane od tego które jest dostępne w standardzie.

Oczywiście efekt końcowy jest kompromisem pomiędzy tym co chciałbym osiągnąć a tym co można zrobić edytując tylko i wyłącznie kod CSS. Jak wiecie z poprzednich poradników należy unikać edycji plików HTML (.tpl) gdyż po ich edycji nie będą już podlegać automatycznej aktualizacji co może prowadzić do późniejszych problemów.

Czytaj dalej Edycja rozwijanego menu kategorii – poradnik Shoper

Rozbudowa modułu koszyka w Shoper

W dzisiejszym poradniku zamierzam wam zaprezentować prosty sposób na rozbudowanie standardowego modułu koszyka dostępnego w systemie Shoper (rozwiązanie działa również w sklepach ClickShop więc jak posiadacie tą wersje oprogramowania to również możecie włączyć się do zabawy 🙂 ).

Jak wiecie moduł koszyk w Shoper 5 składa się z kilku linii tekstu informującego klienta o tym ile produktów dodał do koszyka oraz ile będą go kosztowały. Niby wszystkie ważne informacje są ale…

Czytaj dalej Rozbudowa modułu koszyka w Shoper

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 – 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.