Údržba CSS v Prestashopu

Stránka údržby webu je velmi důležitým aspektem, protože existují chvíle, kdy z různých důvodů (problémy s dodavateli, aktualizace zdrojového kódu, vstup nových komerčních předpisů v platnost) musíme na okamžik naši stránku dočasně pozastavit. pohled uživatele a potenciálního klienta musí odrážet veškerou profesionalitu osoby, která za ním stojí.
maintenance.css
Při vstupu do režimu údržba v našem internetovém obchodě Prestashop, naši uživatelé uvidí následující, pokud používáme výchozí motiv:

Zdaleka to není něco personalizovaného, ​​ale díky souboru maintenance.css jej můžeme upravit a přizpůsobit tak, aby byl v souladu s naší image.
Podívejme se na obsah tohoto souboru:

 *, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; okraj: 35px auto 0 auto; polstrování: 12px 0; pozadí: #fff; zarovnání textu: střed; textová transformace: žádná; font-weight: normal; mezera mezi písmeny: 0; barva: # C73178} #message {šířka: 450px; margin-top: 35px; polstrování: 12px 15px; horní okraj: 1px tečkovaný # 666; spodní okraj: 1px tečkovaný # 666; pozadí: # F9E3EE; zarovnání textu: zarovnat; písmo: 90% / 1em 'Lucida Grande', Verdana, bezpatkové; textová transformace: žádná; font-weight: normal; mezera mezi písmeny: 0; color: # C73178} #message img {padding: 30px} 

Při vyhodnocování kódu si uvědomujeme, že máme 3 velké voliče, což jsou ty, které dávají strukturu naší stránce údržby. Podívejme se nyní na následující obrázek, abychom mohli vizuálně lokalizovat každý volič:

Všimli jsme si, že volič #údržba je obecný kontejner, ve kterém máme #zpráva img který reguluje obraz zprávy a pak máme #zpráva což je text se zprávou, kterou chceme ukázat.
maintenace.tpl
Soubory CSS z Prestashop kontrolní soubory .tpl co jsou šablony Chytrý„Použití šablon zlepšuje a usnadňuje práci, proto musíme šablonu znát maintenance.tpl Podívejme se na kód, který mu rozumí:

 {$ meta_title | escape: 'htmlall': 'UTF-8'} {if isset ($ meta_description)} {/ if} {if isset ($ meta_keywords)} {/ if}


{l s = 'V ***** za účelem údržby stránek byl náš online obchod dočasně vyřazen z provozu. Omlouváme se za nepříjemnosti a žádáme vás, abyste to zkusili znovu později! '}

Jak vidíme každý z voličů CSS je obsažen v tomto souboru, takže každá změna, kterou provedeme, bude mít vliv na tuto sekci.
Například v sekci zprávy:

{l s = 'V ***** za účelem údržby webu byl náš online obchod dočasně vyřazen z provozu. Omlouváme se za nepříjemnosti a žádáme vás, abyste to zkusili znovu později! '}

Můžeme to změnit na následující:

{l s = 'Tento web je v údržbě. Kontaktujte prosím následující obchod ABC Store Online Limited 33 W. 111 Street, New York, NY 10001, USA Telefon: (212) 210-2100 '}

Poté můžeme upravit CSS s následujícím:

 #údržba {šířka: 750px; okraj: 35px auto 0 auto; polstrování: 12px 0; pozadí: #fefefe; zarovnání textu: střed; textová transformace: žádná; font-weight: bold; mezera mezi písmeny: 0; barva: # 3FCA66} #message {šířka: 450px; margin-top: 35px; polstrování: 12px 15px; horní okraj: 1px tečkovaný # 666; spodní okraj: 1px tečkovaný # 666; pozadí: # 2EE6F3; zarovnání textu: zarovnat; písmo: 90% / 1em 'Lucida Grande', Verdana, bezpatkové; textová transformace: žádná; font-weight: normal; mezera mezi písmeny: 0; color: # 000} #message img {padding: 10px} 

S těmito malými změnami, které zvýrazníme tučně, přidanými ke změně provedené v šabloně .tpl, můžeme dosáhnout něčeho podobného jako na následujícím obrázku:

Jak vidíme, tento mocný nástroj spolu s naší kreativitou nám pomáhá dosáhnout docela zajímavých výsledků.
Tímto ukončíme tutoriál a získáme znalosti o tom, jak upravit naši stránku údržby, a díky níž budou naši klienti vědět, že když nejsme na vzduchu, naše kvalita bude stejná.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod