[NÁVOD] – Odpočítávání v EXITSHOPU

Milí éšopáři,

množí se dotazy, jak přidat odpočítávání na Vaše eshopy, rozhodl jsem se, že Vám sem dám návod.

Samo o sobě to není složité, jen musíte dodržet návod. K naprostému usnadnění, Vám doporučuji odpočítávání věnovat sekci “Sekce 2 Popis”. Usnadní Vám to případný trable, hlavně pokud moc nerozumíte HTML a CSS.

Takže jdeme na to!

1) Vytvoříme skript, který pojmenujeme “Odpočítávání” a do něj vložíme tento kód (a uložíme):

<script>(function (e) {
 e.fn.countdown = function (t, n) {
 function i() {
 eventDate = Date.parse(r.date) / 1e3;
 currentDate = Math.floor(e.now() / 1e3);
 if (eventDate <= currentDate) {
 n.call(this);
 clearInterval(interval)
 }
 seconds = eventDate - currentDate;
 days = Math.floor(seconds / 86400);
 seconds -= days * 60 * 60 * 24;
 hours = Math.floor(seconds / 3600);
 seconds -= hours * 60 * 60;
 minutes = Math.floor(seconds / 60);
 seconds -= minutes * 60;
 days == 1 ? thisEl.find(".timeRefDays").text("den") : thisEl.find(".timeRefDays").text("dní");
 hours == 1 ? thisEl.find(".timeRefHours").text("hodina") : thisEl.find(".timeRefHours").text("hodin");
 minutes == 1 ? thisEl.find(".timeRefMinutes").text("minuta") : thisEl.find(".timeRefMinutes").text("minut");
 seconds == 1 ? thisEl.find(".timeRefSeconds").text("sekunda") : thisEl.find(".timeRefSeconds").text("sekund");
 if (r["format"] == "on") {
 days = String(days).length >= 2 ? days : "0" + days;
 hours = String(hours).length >= 2 ? hours : "0" + hours;
 minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
 seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
 }
 if (!isNaN(eventDate)) {
 thisEl.find(".days").text(days);
 thisEl.find(".hours").text(hours);
 thisEl.find(".minutes").text(minutes);
 thisEl.find(".seconds").text(seconds)
 } else {
 alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
 clearInterval(interval)
 }
 }
 thisEl = e(this);
 var r = {
 date: null,
 format: null
 };
 t && e.extend(r, t);
 i();
 interval = setInterval(i, 1e3)
 }
 })(jQuery);
 $(document).ready(function () {
 function e() {
 var e = new Date;
 e.setDate(e.getDate() + 60);
 dd = e.getDate();
 mm = e.getMonth() + 1;
 y = e.getFullYear();
 futureFormattedDate = mm + "/" + dd + "/" + y;
 return futureFormattedDate
 }
 $("#countdown").countdown({
 date: "26 May 2014 23:40:00", // Zde nastavíte datum do kterého odpočítáváte
 format: "on"
 });
});</script>

Zeleně jsem označil řádek, kde budete v angličtině nastavovat datum vypršení.

2) Následně přejdeme do Seznam obchodů/obchod kam chcete dát odpočítávaní/Obsah a galerie

3) Sekci 2(popis) vyprázdníme, texty, které zde máte, přesuňte do sekce 3.

4) V sekci 2 (popis) klikneme hned na první ikonku, která se jmenuje “Zdroj”, celý obsah vymažeme a vložíme tento kód:

<style>
#predstaveni-produktu .description {
padding: 1px;
background: rgb(185, 40, 139);
border-top: 3px solid rgb(253, 253, 253);
}#countdown p {
display: inline-block;
padding: 5px;
margin: 0 0 20px;
font-size: 30px;
color: white;
font-family: PT Sans Caption;
font-weight: 800;
}

</style>
<div id="countdown" style="
  margin-top: 8px;
 text-align: center;
">
<p>Do konce akce zbývá:</p>

<p class="days">0</p>

<p class="timeRefDays">days</p>

<p class="hours">0</p>

<p class="timeRefHours">hodin</p>

<p class="minutes">0</p>

<p class="timeRefMinutes">minutes</p>

<p class="seconds">0</p>

<p class="timeRefSeconds">sekund</p>
</div>

<div class="clearfix"></div>

5) Uložíme..

Změna pozadí odpočítávání:

1. Jistě jste si všimli, že v druhém kódu je zvýrazněná, zelená řádka:

   background: rgb(185, 40, 139);

    

2. Pamatujte: Nikdy neměňte hodnotu před dvojtečkou, nikdy nesmí chybět středník na konci, formát barvy musí mít přesný formát.
3. Nejjednodušší, jak zjistit správnou barvu, kterou si přejete je tak, že si zapnete Google Chrome a půjdete na Váš eshop.
4. Na odpočítávání kliknete pravým tlačítkem myši a dáte “zkontrolovat prvek”.
5. Naskočí Vám panel, na levé straně klikněte na řádek “<div class=”description”>”.
6. Na pravé straně uvidíte hodnotu “background: rgb(185, 40, 139);” ano, je to stejný řádek, který je v bodě jedna, u něj uvidíte kostičku, která má stejné pozadí jako pozadí Vašeho odpočítávání, klikněte na ni.
   
7. Naskočí Vám paleta barev, teď už si stačí jen hrát a vybrat barvu.
8. Samozřejmě, až vyberete barvu, tak se Vám neuloží do exitshopu, ačkoliv vy změnu uvidíte. Pokud jste našli barvu, kterou chcete, tak klikněte do řádku, kde ta barva je, viz obrázek a zkopírujte si jí do schránky.
   
9. Nyní hodnotu v bodě 1 upravíme, nezapomeňte na bod 2! 
10. Uložit a Enjoy.

Nepoužívejte odpočítávání jako způsob jak donutit k nákupu, to moc nefunguje, spusťte akci na omezenou dobu, prodlužte maximálně jedno nebo dvakrát.

Použili jste počítadlo? Hoďte mi alespoň komentář, ať vím, že to je k něčemu dobré. Jsem hrozná žena a určitě bych si za chvíli myslel, že mé návody nečtete a tak bych s tím brzy přestal. :))

Máte-li otázky, ptejte se, jsem tu pro Vás!