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í:
- Jistě jste si všimli, že v druhém kódu je zvýrazněná, zelená řádka:
background: rgb(185, 40, 139);
- 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.
- Nejjednodušší, jak zjistit správnou barvu, kterou si přejete je tak, že si zapnete Google Chrome a půjdete na Váš eshop.
- Na odpočítávání kliknete pravým tlačítkem myši a dáte „zkontrolovat prvek“.
- Naskočí Vám panel, na levé straně klikněte na řádek „<div class=“description“>“.
- 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.
- Naskočí Vám paleta barev, teď už si stačí jen hrát a vybrat barvu.
- 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.
- Nyní hodnotu v bodě 1 upravíme, nezapomeňte na bod 2!
- 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!
Diky moc za navod. Jen mam ted problem, s textem pod odpocitavanim casu, ktery ma stejnou barvu pozadi jako odpocitavadlo. Jak to vyresim?
V jiné sekci? Nebo v té sekci 2 popis? Pokud v této sekci, je nutné si nastudovat css styly a trochu to pochopit do hloubky, proto jsem psal, že je nutné tuto sekci věnovat počítadlu. Pokud Vám to ovlivnilo i jinou sekci, pošlete mi odkaz na Váš eshop, mrknu na to.
Ovšem ostatní sekce by neměla být ovlivněny.
Uz jsem si s celou veci poradil a vsechno funguje, jak ma. Jeste jednou diky za navod.
Paráda, ať to slouží!
Funguje perfektně! Děkuji
Paráda, ať to slouží!
Super návod 🙂 Už si s tím hraju. Děkuji
Paráda, ať to slouží!
Díky za super návod 🙂
k cemu slouzi
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = „//connect.facebook.net/cs_CZ/all.js#xfbml=1&appId=247043465319313“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‚script‘, ‚facebook-jssdk‘));
?
Díky za dotaz, samozřejmě nesmysl – je to zbytek kódu od facebooku, přehlídl jsem.
Super, zvládol som to aj ja absolútny laik.