Cum creezi o tema personalizata in Opencart 3 – Tutorial

Incerc prin acest tutorial sa ajut persoane care intampina probleme in crearea unei noi teme pe platforma Opencart.
Tutorialul se refera la versiunea 3.0.2.0.
Platforma are standard o tema „Default” pe care o vom copia si redenimi acolo unde va fi necesar.

Pasi de urmat:

Pasul 1. Faceti o copie a continutului folderului catalog/view/theme/default si redenumiti folderul default cu numele dorit al temei, ex: catalog/view/theme/mytheme.

Pasul 2. Faceti o copie pentru urmatoarele trei fisiere dupa cum urmeaza:

Fisierul cu traducerea site-ului. Daca aveti site-ul multilanguage, faceti operatia pentru fiecare fisier al limbi respective.

Engleza
admin/language/en-gb/extension/theme/default.php > creaza un fisier cu numele temei admin/language/en-gb/extension/theme/mytheme.php
In interiorul fisierului sunt cateva linii de text ce pot fi modificate pentru noua tema( heading_title, text_theme, edit_text etc.). Nu e absolut necesara modificarea acum, puteti reveni.

admin/view/template/extension/theme/default.twig > copiaza fisierul default.twig in locatia:  admin/view/template/extension/theme/mytheme.twig, apoi in interiorul lui, utilizand o funtie „search and replace” trebuie schimbate toate textele „theme_default” cu „theme_mytheme„. Cateva exemple de expresii pe care le veti gasi:

theme_default_directory
theme_default_status
theme_default_image_category_height
……………………………………………………….

Veti gasi aproximativ 37 de experesii ce vor contine „theme_default

Urmatorul fisier se gaseste in Controller:

admin/controller/extension/theme/default.php > faceti o copie a fisierului default.php dupa care deschideti-l si inlocuiti toate expresiile( Pentru a nu gresi va recomand sa utilizati o functie search and replace):

  • theme_default” cu „theme_mytheme„, aproximativ 192 de expresii vor fi gasite;
  • modificati numele clasei: ControllerExtensionThemeDefault cu ControllerExtensionThemeMytheme;
  • modificati calea: „theme/default” cu „theme/mytheme” – 5 aparitii;
  • la linia 128 modificati valoarea variabilei: $data[‘theme_usite_directory’] = ‘default’ cu $data[‘theme_usite_directory’] = ‘mytheme’.

Mergeti acum in urmatoarea locatie:

catalog/view/theme/mytheme/template/common/header.twig si modificati calea catre fisierul css:

din: <link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
in: <link href="catalog/view/theme/mytheme/stylesheet/stylesheet.css" rel="stylesheet">

Pasul 3. Acum mergeti in panoul de administrare la optiunea:

Extensions > Extensions > selectati din lista cu Filtre > Theme si apasati butonul „+” din dreaptul temei, apoi pe butonul editare si activati tema, dupa care salvati.

Pasul 4. Mergeti tot in panoul de administrare la optiunea:

System > Settings > Click pe butonul de editare, selectati tema din formular si salvati.

In acest moment ar trebui ca noua tema sa fie vizibila pe site, dar avand in vedere ca este o copie a temei ” Default”, nu vor fi schimbari de aspect.

Acum pentru a customiza tema puteti modifica fisierul css si fisierele html care fac parte din design.

Important: Dupa toate modificarile, stergeti continutul folderului „storage/cache„, care se gaseste in folderul principal al site-ului.

Mult succes!

Tutorial creat de Click

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *