HTML kódok

Fontos: ez az oldal olyan felhasználók számára készült, akik gyakorlattal rendelkeznek a weboldalak készítésében és jártasak a HTML, CSS, esetleg a Javascript használatában. Amennyiben nem ért a beállításhoz, úgy a módosításaival megzavarhatja a webáruház működését. Például a jQuery beszúrásával minden jQuery plugin működését, illetve az összes JavaScript oldalra történő beolvasását megzavarhatja.

HTML kód szerkesztése

A HTML kódszerkesztő a Megjelenés és Tartalom → Szerkesztő → HTML kód menüpontban található.

A Fejléc szekcióba (a lezáró HEAD tag elé) kerülnek beillesztésre a meta tagek, a CSS hivatkozások, a JavaScriptek. Erre a helyre beszúrt tagek a <head></head> jelek közötti kódban jelennek meg. Kellőképpen mérlegelje ezekben a szekciókban történő módosítást, hogy ne szúrjon be a kódba valamilyen olyan funkcionalitást, ami árthatna önnek. Például ledobhatná a keresőkben a helyéről. A Footer szekcióba (a BODY lezáró tag elé) egyes JavaScriptet beszúrhat.

Amennyiben a webáruháza fejlécének a megjelenését akarja szerkeszteni (azaz logó, kép), olvassa el a Webáruház fejléce súgót. A láblécbe Ikonok és Hivatkozások is beilleszthetők.

A Befejezett megrendelés szekció a konverzió követésére szolgál. A kódok csak a megrendelési folyamat köszönőoldalán érvényesülnek. Ehelyett a lehetőség helyet a Google Tag Manager használatát javasoljuk, ami lehetővé teszi a megrendelésre vonatkozó információk kezelését.

A robots.txt szekcióba általában olyan direktívák kerülnek beillesztésre, melyekkel a kereső robotok a webáruházának kiválasztott oldalaihoz történő hozzáférését korlátozhatja. A beillesztett szöveg a robots.txt fájl végére kerül.

HTML kód hosszúsága

Mind a négy szekcióba (Fejléc, Footer, Köszönet oldal és robots.txt) legfeljebb 8192 karakter hosszúságú valid HTML kód illeszthető be. A határérték átlépése után az elvégzett módosítás nem menthető el.

Amennyiben hosszabb kódot akar elhelyezni, az ügyfél FTP-jén keresztül kell betölteni a fájlt a kóddal, és a kódok adott részére kell hivatkozni. Részletes információkat a betöltésnek erről a módjáról az FTP bejegyzésben talál.

Fájlok kóddal történő beillesztésének szabályai

Általános útmutatás

JavaScript esetén a hosszabb kóddal rendelkező fájlra történő hivatkozás így nézhet ki: <script src="/user/documents/modification.js" type="text/javascript"></script>

CSS esetén pedig így: <link href="/user/documents/style.css" rel="stylesheet" />

Olyan fájl szerkesztésénél, amit be szeretne tölteni és hivatkozni akar rá, győződjön meg arról, hogy a szerkesztőjében be van-e állítva az UTF-8 kódolás. Ezzel megakadályozza a  karakterek � formában történő megjelenését.

Fájlverziók

?v=VERZIÓSZÁM  fájlhoz történő hozzáadásával az aktuális fájl beolvasódik. Például az aktuális JavaScript negyedik verziójához így írja hozzá a hivatkozást: <script src="/user/documents/modification.js?v4" type="text/javascript"></script>

Az új CSS vagy JavaScriptu hangolásánál a DEBUG_TIMESTAMP placeholdert is használhatja, mellyel elérheti az aktuális fájl betöltését az oldal minden egyes frissítésekor:

 <script src="/user/documents/modification.js?v=#DEBUG_TIMESTAMP#"></script>

DEBUG_TIMESTAMP működőképességéhez debugTimestamp cookie létrehozására van szükség. Adminisztrákorként bejelentkezve adja meg a konzolban a következőket:

 shoptet.cookie.create('debugTimestamp', 1, {days: 1});

JS fájlok

Ne használja a JavaScript fájlban a document.write() jelzést, mivel blokkolja a script sima betöltődését. Amennyiben szerveren generálja a CSS vagy a JavaScript fájlt (pl.: PHP scripttel), javasoljuk a fájl előre történő létrehozását és pendrive-ra mentését, hogy a mentett parancsfájl (stílus) közvetlenül megjelenjen a kérés feldolgozásakor és ne késleltesse a generációt.

JavaScriptu (JS) fájl beillesztésekor a fájlban csak maga a JavaScript lehet. Azaz csak az, ami a <script>``</script> jelek között van. Csak ezek a jelek önmagukban; még HTML megjegyzés sem lehet a fájlban.

Ne használjon lebutított JavaScriptet. A Google az ilyen kódokat tartalmazó webáruházakat gyanúsnak tartja, és nem hivatkozik rájuk a hirdetésekben.

Javaslat a gyors betöltődéshez

Az FTP tárhelyről történő gyorsabb betöltődéshez javasoljuk az URL cím CDN prefix-szel együtt történő kitöltését.

<script src="https://cdn.myshoptet.com/usr/www.domain-nev.hu/user/documents/common.js" type="text/javascript"></script>  
<link href="https://cdn.myshoptet.com/us/www.domain-nev.hu/user/documents/style.css?v=1" rel="stylesheet" />

Javaslat a gyors betöltődéshez (partnerek számára)

A partnerek sorába tartozó kódolóknak a  CSS és JS fájlok tárhelyeként a saját partner webáruházukon az FTP /user/documents/ használatát javasoljuk. Ezzel biztosítja a fájl kézbesítésének optimális gyorsaságát, azonban egyben korlátozza a más hosting providertől való függőséget. Az URL, beleértve a CDN prefixet is, használatát javasoljuk, ami biztosítja, hogy nem következik be CORS miatti probléma.

<script src="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/common.js" type="text/javascript"></script>  
<link href="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/#TEMPLATE#.css" rel="stylesheet" />  
<link href="https://cdn.myshoptet.com/usr/demo-partner.myshoptet.com/user/documents/addon_1/#HOST#/style.css?v=1" rel="stylesheet" />

Megjegyzés a kódban

A HTML kód áttekinthetősége érdekében javasoljuk, hogy helyezzen bele információkat tartalmazó megjegyzéseket. Ezeket a megjegyzéseket csak az adminisztrátorban a HTML szerkesztőbe helyezze el. A beillesztett CSS a JS (JavaScript) fájlokban ne használjon megjegyzést.

A megjegyzésnek köszönhetően jobban el tud igazodni abban, hogy a kód adott része mire szolgál, a kód hol kezdődik és végződik stb. Ezeket a megjegyzéseket a kereső figyelmen kívül hagyja, azaz csak azt látja, hogy ki a kód szerkesztője. Az ilyen megjegyzést <!--``--> taggel helyezze be.

Vagyis például:

<!-- kód címe -->  
<sctipt></sctipt>  
<!-- kód szerzője -->