Moje zakázka na “Vylepšení vzhledu eshopu”

Dostal se mi pod ruku eshop od klienta, který ho chtěl oživit a poslal mi základ informace, oživit eshop, udělat hezčí HP, na šabloně mít 3 produkty vedle sebe. Pustil jsem se do práce a v průběhu jsem s klientem ladil co by rád upravil nebo přidal, z pohledu klienta se ledasco může zdát banálním zákrokem, ale mnohdy se musí zasáhnout do struktury CSS, která pak ovlivňuje jiná zobrazení.

Začal jsem tedy studovat eshop a našel jsem několik nedostatků, tady popíši co jsem s nimi dělal.

Na homepage eshopu je slider s bannery, ty jsem musel všechny sjednotit, měly totiž každý jinou výšku a při střídání tak rozhazovaly vzhled, bohužel se ke mě nedostaly zdrojové obrázky, na které byla použita zřejmě špatná komprese a tak jsem se je snažil lehce opravit chytrým doostřením a doplněním výšky retuší. Vždy je totiž potřeba nahrát všechny slidery ve stejném rozměru, šířka je stanovená a to 1200px, na výšce tolik nezáleží, ale když bude mít jeden slider 300px a druhý 500px, bude to nepříjemně přeskakovat.

Celý příspěvek “Moje zakázka na “Vylepšení vzhledu eshopu””

Neviditelné pozadí u fotografií produktu

Poslední roky se u produktové fotografie “tlačí” na produkty v bílém pozadí, co když ale nemáte na eshopu bílé pozadí nebo chcete dokonce použít tmavé? Je jasné, že výsledný efekt změny CSS stylu nemusí být podle Vašich představ a dost pravděpodobně za to budou moci produkty v bílých čtverečkách, následné předělání pozadí u každé fotografie zvlášť by bylo pak časově náročné. Vyhnout se tomu můžete hned na začátku zadávání vyhotovení produktové fotografie. Pokud si necháte nafotografované produkty ořezat v softwaru a poté uložit do formátu .png, tak se tyto fotografie přizpůsobí pozadí prostředí, ve kterém jsou.

Pro tuto ukázku jsem vytvořil eshop a na něm předvedu výsledný efekt. Původní šablona měla světlé pozadí, ale já chtěl tmavé. Posuďte sami:

Celý příspěvek “Neviditelné pozadí u fotografií produktu”

Automatický hromadný překlad produktů a nevalidní kódy

Ukážeme si jak se zbavit nevalidního kódu v automatickém překladu textů z předešlého článku.

Pokud se Vám v překladu zobrazí v textovém poli kód, v tabulkách google ho můžete snadno hromadně odstranit.

Chybný kód si tedy zkopírujete, v mém případě se jedná o: < span style = “font-family: Calibri, sans-serif”>

Celý příspěvek “Automatický hromadný překlad produktů a nevalidní kódy”

Úprava tlačítek v popupu po přidání do košíku

Budu využívat některé pojmy z předchozího návodu.

Změna barvy
Pro podrobnější vysvětlení se podívejte na předchozí návod.

Pokud nechcete měnit obě vlastnosti, stačí vynechat jeden z řádků background-color: a color:.

Vybral jsem si barvu #b50a16 pro pozadí a #ffffff pro text.
Levé tlačítko (Zpět do obchodu)
Pro levé tlačítko se používá selektor .added_to_cart_popup .btn.btn-default.

.added_to_cart_popup .btn.btn-default {
    background-color: #b50a16;
    color: #ffffff;
}

Pravé tlačítko
Pro pravé tlačítko se používá selektor .added_to_cart_popup .btn.btn-primary

Celý příspěvek “Úprava tlačítek v popupu po přidání do košíku”

Jak změnit barvu tlačítka Přidat do košíku

CSS si můžete doplnit v nastavení vzhledu Vašeho eshopu v záložce Vaše doplňkové CSS, svůj kód pište do stejnojmenného pravého textového pole.

Níže Vám prakticky ukážu jak si změnit barvu tlačítka Přidat do košíku, nyní Vám zbežně představím syntaxi CSS.

CSS slouží zejména k upravování vzhledu stránek, základní syntaxe by se dala napsat takto:

selektor {
    vlastnost: hodnota;
    další_vlastnost: hodnota !important;
}

Selektor označuje na co se mají aplikovat pravidla napsaná uvnitř závorek. Vlastnost může být v podstatě cokoliv, co se týče vzhledu (velikost, barva, odsazení, …). Hodnota se pak různí, je závislá na zvolené vlastnosti. Na konci jednoho řádku můžete vidět !important, je to nepovinný zápis, který řekne prohlížeči, aby upřednostnil hodnotu vlastnosti v tomto řádku před ostatními. Středník (;) poté rozděluje jednotlivé vlastnosti.

Celý příspěvek “Jak změnit barvu tlačítka Přidat do košíku”

Role zaměstnanců

V nastavení Zaměstnanců můžete zvolit, jakou roli mají v systému mít. Od toho se odvíjí i jejich práva a to, co v administraci uvidí. Navíc jim můžete určité sekce (Statistiky, Sklad) skrýt a určit, do jakých eshopů/stavů mají přístup.

  • Role Admin má stejné možnosti jako majitel účtu.
  • Role Expedice vidí Objednávky (i Expedici a Pokladnu), Sklad, v Globálním nastavení pak Stavy objednávek a API propojení.
  • Role Překladatel a Grafik vidí Sklad a Obchody – pro překládaní produktů, textů na eshopech.
  • Role Partner vidí Zákazníky, Sklad a Obchody. Můžete mu navíc nastavit procentuální provizi, která se mu bude přičítat (můžete vidět ve Statistikách) za objednávky v “jeho” eshopech, případně za objednávky kde byl použit jeho slevový kód.