Ocstore - utilizați blocul html al modulului 3

De foarte multe ori trebuie să aducem codul nostru la paginile magazinului online, dar cum? Voi încerca să vă spun despre asta într-o nouă serie de articole. În acest articol vom instala modulul Html bloc 3.3.1 pe site-ul dvs. și vom afișa cu ajutorul acestuia informații utile despre magazinul nostru pe pagina de pornire a magazinului nostru.







Ocstore - utilizați blocul html al modulului 3

Lista sarcinilor pentru ziua de azi:

1. Descărcați și instalați modulul

2. Conectați fontul iconic la site

3. Lucrăm cu modulul

4. Precizați stilurile CSS

1. Descărcați cea mai recentă versiune a modulului prin acest link - bloc html

2. Pentru muncă avem nevoie de un bun font iconic, după cum știți, cel mai adesea folosesc acest font: Font Awesome nu va rupe tradiția.

Fontul este foarte ușor de conectat, deschideți fișierul header.tpl al șablonului și adăugați-l în bloc această linie:

citiți mai multe despre acest lucru în acest articol: OcStore 1.5.5.1.2 adăugați panoul de jos

3. Despachetați arhiva descărcată și transferați toate folderele modulului nostru pe ftp-ul dvs. la rădăcina magazinului dvs. online:

Ocstore - utilizați blocul html al modulului 3
Ocstore - utilizați blocul html al modulului 3
Ocstore - utilizați blocul html al modulului 3
Ocstore - utilizați blocul html al modulului 3

dacă nu aveți un șablon standard (nu implicit, ci, de exemplu, producătorul de bani), conținutul directorului implicit (catalog \ view \ theme / default) al modulului trebuie copiat nu numai în directorul implicit, ci și în folderul șablonului.

Acum mergeți la zona de administrare a site-ului nostru și instalați modulul:

Ocstore - utilizați blocul html al modulului 3
Ocstore - utilizați blocul html al modulului 3

Felicitări, modulul este instalat, acum puteți începe munca.

3.1. Accesați setările modulului:

Admin - Adăugări - Module - Bloc HTML - Editați

Ocstore - utilizați blocul html al modulului 3

Accesați fila Blocări:

Ocstore - utilizați blocul html al modulului 3

și faceți clic pe butonul Adăugare blocare:

Ocstore - utilizați blocul html al modulului 3

De-a lungul timpului, avem o grămadă de module diferite și pentru a nu se confunda, adăugăm titlul blocului, să-i dăm un nume:

Ocstore - utilizați blocul html al modulului 3

Ocstore - utilizați blocul html al modulului 3

Acum putem crea conținutul de care avem nevoie, de multe ori am fost rugat să scriu mai multe despre html și css, așa că voi scrie pas cu pas, mai întâi vom face o împachetare:

acum vom crea primul element din pachet, de exemplu:







Garanție pentru bunuri 14 zile

vom avea mai multe pukturi cu design diferit, vom împacheta textul nostru într-un ambalaj personal:

Garanție pentru bunuri 14 zile

deja mai bine, dar cu siguranță ne dorim 14 zile să ne așezăm pe linia de jos și să obținem o culoare mai mare, mai puțin grasă și poate o culoare diferită? Noi facem:

Garanție pentru bunuri
14 zile

bine, textul este decorat, dar cum rămâne cu icoana? Doar textul nu este interesant, nu? Mergem la site-ul fontului iconic și selectăm o pictogramă, de exemplu, o pictogramă cu un calendar:

Ocstore - utilizați blocul html al modulului 3

faceți clic pe el și mergeți la pagina cu codul pictogramei selectate, copiați codul:

Ocstore - utilizați blocul html al modulului 3

Vom completa codul nostru cu pictograma:

Garanție pentru bunuri
14 zile

Primul element este gata, tot codul arată astfel:

Garanție pentru bunuri
14 zile

codul este citit prost, să îl formatăm ușor:


Garanție pentru bunuri
14 zile

și adăugați al doilea element:


Garanție pentru bunuri
14 zile

gratuit
Închiderea mărfurilor

apoi al treilea element:


Garanție pentru bunuri
14 zile

gratuit
Închiderea mărfurilor

Livrarea comenzii
a doua zi


Garanție pentru bunuri
14 zile

gratuit
Închiderea mărfurilor

Livrarea comenzii
a doua zi

Căi convenabile
plată

Modulul este gata, rămâne să îl scoateți în locul cerut și după finalizarea ieșirii:

Admin - Adăugări - Module - Bloc html - Editați

Ocstore - utilizați blocul html al modulului 3

dați clic pe butonul Adăugați modulul

Ocstore - utilizați blocul html al modulului 3

Ocstore - utilizați blocul html al modulului 3

Faceți clic pe butonul Salvați:

Ocstore - utilizați blocul html al modulului 3

Trecem la fereastra magazinului nostru:

Ocstore - utilizați blocul html al modulului 3

Codul nostru a apărut, Hooray! Dar fără stilurile CSS nu arată foarte bine, trecem la pasul următor.

4. Deschideți fișierul ../catalog/view/theme/default/stylesheet/stylesheet.css (dacă nu utilizați șablonul implicit standard du-te la dosarul său) și de a crea noi stiluri de la sfârșitul fișierului:

/ * info_shop * /
#info_shop padding: 10px;
text-align: centru;
font: bold 12px Arial;
>
# info_shop_1, # info_shop_2, # info_shop_3, # info_shop_4 afișare: inline-block;
padding: 20px;
frontieră: 1px solid # 777;
raza de graniță: 3 pixeli;
>
# info_shop_1: fundal hover: #BBDEFB;
>
# info_shop_2: fundal hover: # 90CAF9;
>
# info_shop_3: fundal hover: # 64B5F6;
>
# info_shop_4: fundal hover: # 42A5F5;
>
#info_shop div: hover, #info_shop div: hover .fa culoare: #fff;
>
#info_shop .fa font-size: 35px;
culoare: # 777;
afișare: bloc;
padding-bottom: 20px;
>

Să spunem puțin despre stiluri:

#info_shop - învelișul de conținut, centrează divurile blocurilor noastre, stabilește linii mici și stabilește un singur stil pentru toate inscripțiile blocurilor noastre

# Info_shop_1, # info_shop_2, # info_shop_3, # info_shop_4 - atribuie aceleași stiluri pentru unitățile noastre, construiește toate blocurile într-o linie, se adaugă un chenar pe toate laturile cutiei cu colțuri rotunjite și un efect de frontieră se mută de conținutul intern

# info_shop_1: hover. # info_shop_2: hover. # info_shop_3: hover. # info_shop_4: hover - atribuiți fiecărui bloc individual propriul fundal atunci când mutați mouse-ul peste bloc

#info_shop div: hover, #info_shop div: hover .fa - când plasați mouse-ul peste orice bloc, reparați pictograma și inscripția în alb

#info_shop .fa - stabilește mărimea și culoarea pictogramei, arată browserul că pictograma ar trebui afișată separat de text, adaugă o indentare din pictogramă în text

Rezultatul activității noastre poate fi văzut mai jos:

Ocstore - utilizați blocul html al modulului 3
Ocstore - utilizați blocul html al modulului 3

Decorare, dimensiuni, etc. puteți să-l schimbați dacă doriți să arătați câteva exemple de design într-un articol separat și să arătați cum să faceți inscripția o legătură cu un articol sau cu un anumit produs.

Pentru astăzi, totul, la întâlniri noi.

Împărtășește "OcStore 1.5.5.1.2 folosim blocul html al modulului (1 parte)"







Articole similare

Trimiteți-le prietenilor: