Bir süredir OpenCart 4 için bazı modüller geliştirmekteyim. Türkçe kaynak oluşturmak adına bir yazı yazmaya karar verdim.
Bu yazıda çok basit bir modül geliştireceğiz. Geliştireceğimiz modül içerisinde ihtiyacımız olabilecek olan controller, model, view ve language için birer örnek yer alacak.
Modülümüz basit bir HTML içerik oluşturmamıza yardımcı olacak. Hemen başlayalım..
Öncelikle Admin panelinde ihtiyacımız olan yerden başlayalım. Bunun için bir controller dosyası oluşturalım.
|
1 |
touch extension/sustartx/admin/controller/module/html_content.php |
sustartx yazan yere şirketinizin veya kendinizin ismini yazabilirsiniz.
İçeriğini aşağıdaki gibi yazabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<?php namespace Opencart\Admin\Controller\Extension\SuStartX\Module; /** * Class HTMLContent * * @package Opencart\Admin\Controller\Extension\Opencart\Module */ class HTMLContent extends \Opencart\System\Engine\Controller { /** * @return void */ public function index(): void { $this->load->language('extension/sustartx/module/html_content'); $this->document->setTitle($this->language->get('heading_title')); $data['breadcrumbs'] = []; $data['breadcrumbs'][] = [ 'text' => $this->language->get('text_home'), 'href' => $this->url->link('common/dashboard', 'user_token=' . $this->session->data['user_token']) ]; $data['breadcrumbs'][] = [ 'text' => $this->language->get('text_extension'), 'href' => $this->url->link('marketplace/extension', 'user_token=' . $this->session->data['user_token'] . '&type=module') ]; if (!isset($this->request->get['module_id'])) { $data['breadcrumbs'][] = [ 'text' => $this->language->get('heading_title'), 'href' => $this->url->link('extension/sustartx/module/html_content', 'user_token=' . $this->session->data['user_token']) ]; } else { $data['breadcrumbs'][] = [ 'text' => $this->language->get('heading_title'), 'href' => $this->url->link('extension/sustartx/module/html_content', 'user_token=' . $this->session->data['user_token'] . '&module_id=' . $this->request->get['module_id']) ]; } if (!isset($this->request->get['module_id'])) { $data['save'] = $this->url->link('extension/sustartx/module/html_content.save', 'user_token=' . $this->session->data['user_token']); } else { $data['save'] = $this->url->link('extension/sustartx/module/html_content.save', 'user_token=' . $this->session->data['user_token'] . '&module_id=' . $this->request->get['module_id']); } $data['back'] = $this->url->link('marketplace/extension', 'user_token=' . $this->session->data['user_token'] . '&type=module'); if (isset($this->request->get['module_id'])) { $this->load->model('setting/module'); $module_info = $this->model_setting_module->getModule($this->request->get['module_id']); } if (isset($module_info['name'])) { $data['name'] = $module_info['name']; } else { $data['name'] = ''; } if (!empty($module_info['content'])) { $data['content'] = $module_info['content']; } else { $data['content'] =''; } if (isset($module_info['status'])) { $data['status'] = $module_info['status']; } else { $data['status'] = ''; } if (isset($this->request->get['module_id'])) { $data['module_id'] = (int)$this->request->get['module_id']; } else { $data['module_id'] = 0; } $data['user_token'] = $this->session->data['user_token']; $data['header'] = $this->load->controller('common/header'); $data['column_left'] = $this->load->controller('common/column_left'); $data['footer'] = $this->load->controller('common/footer'); $this->response->setOutput($this->load->view('extension/sustartx/module/html_content', $data)); } /** * @return void */ public function save(): void { $this->load->language('extension/sustartx/module/html_content'); $json = []; if (!$this->user->hasPermission('modify', 'extension/sustartx/module/html_content')) { $json['error']['warning'] = $this->language->get('error_permission'); } if ((oc_strlen($this->request->post['name']) < 3) || (oc_strlen($this->request->post['name']) > 64)) { $json['error']['name'] = $this->language->get('error_name'); } if (!$this->request->post['name']) { $json['error']['name'] = $this->language->get('error_name'); } if (!$this->request->post['content']) { $json['error']['content'] = $this->language->get('error_content'); } if (!$json) { $this->load->model('setting/module'); $data = $this->request->post; if (!$this->request->post['module_id']) { $json['module_id'] = $this->model_setting_module->addModule('sustartx.html_content', $data); } else { $this->model_setting_module->editModule($this->request->post['module_id'], $data); } $json['success'] = $this->language->get('text_success'); } $this->response->addHeader('Content-Type: application/json'); $this->response->setOutput(json_encode($json)); } } |
Bu controller dosyasında dil ve model ihtiyaçlarımızı karşılayan kodları da yazdık.
|
1 |
touch extension/sustartx/admin/language/en-gb/module/html_content.php |
Bu komutta dil adını ve kullanıcı adını değiştirmeniz gerekiyor. Eğer Türkçe dil desteği kurulu ise tr-tr yazmanız gerekiyor. Farklı dillere desteğinizin olmasını istiyorsanız her dil için aynı dosyayı oluşturmalısınız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php // Heading $_['heading_title'] = 'SuStartX - HTML Content Module'; // Text $_['text_extension'] = 'Extensions'; $_['text_success'] = 'Success: You have modified HTML Content module!'; $_['text_edit'] = 'Edit HTML Content Module'; // Entry $_['entry_name'] = 'Module Name'; $_['entry_content'] = 'Content'; $_['entry_status'] = 'Status'; // Error $_['error_permission'] = 'Warning: You do not have permission to modify featured single product type 2 module!'; $_['error_name'] = 'Module Name must be between 3 and 64 characters!'; $_['error_content'] = 'Content required!'; |
Gerekli dil değişkenlerini oluşturduktan sonra model dosyamızı oluşturalım.
|
1 |
touch extension/sustartx/admin/model/html_content.php |
Örnek olarak aşağıdaki gibi içeriğini doldurabilirsiniz. Daha sonra ihtiyacınıza uygun şekilde geliştirme yapabilirsiniz.
|
1 2 3 4 5 6 7 8 9 |
<?php class HTMLContent extends Model { public function example($data) { $this->db->query("select * from ..."); } } |
Biz bu örnekte HTMLContent modelini kullanmadık ama $this->load->model('setting/module'); satırında gerekli olan diğer model dosyamızı çağırdığımız gibi bu model dosyasını da ilgili yolla çağırarak modülümüzün ihtiyacı olan diğer veritabanı özelliklerini katabiliriz.
Admin paneli için gerekli olan son dosyamız ise view dosyası. Aşağıdaki gibi bir view oluşturalım.
|
1 |
touch extension/sustartx/admin/view/template/module/html_content.twig |
İçeriğini aşağıdaki gibi dolduralım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<style type="text/css"> /* CSS kodları */ </style> {{ header }}{{ column_left }} <div id="content"> <div class="page-header"> <div class="container-fluid"> <div class="float-end"> <button type="submit" form="form-module" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa-solid fa-save"></i></button> <a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a></div> <h1>{{ heading_title }}</h1> <ol class="breadcrumb"> {% for breadcrumb in breadcrumbs %} <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li> {% endfor %} </ol> </div> </div> <div class="container-fluid"> <div class="card"> <div class="card-header"><i class="fa-solid fa-pencil"></i> {{ text_edit }}</div> <div class="card-body"> <form id="form-module" action="{{ save }}" method="post" data-oc-toggle="ajax"> <div class="row mb-3"> <label for="input-name" class="col-sm-2 col-form-label">{{ entry_name }}</label> <div class="col-sm-10"> <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control"/> <div id="error-name" class="invalid-feedback"></div> </div> </div> <div class="row mb-3"> <label for="input-content" class="col-sm-2 col-form-label">{{ entry_content }}</label> <div class="col-sm-10"> <textarea name="content" placeholder="{{ entry_content }}" id="input-content" class="form-control" rows="10">{{ content }}</textarea> <div id="error-content" class="invalid-feedback"></div> </div> </div> <div class="row mb-3"> <label for="input-status" class="col-sm-2 col-form-label">{{ entry_status }}</label> <div class="col-sm-10"> <div class="form-check form-switch form-switch-lg"> <input type="hidden" name="status" value="0"/> <input type="checkbox" name="status" value="1" id="input-status" class="form-check-input"{% if status %} checked{% endif %}/> </div> </div> </div> <input type="hidden" name="module_id" value="{{ module_id }}" id="input-module-id"/> </form> </div> </div> </div> </div> <script type="text/javascript"> // JS kodları.. </script> {{ footer }} |
Bu aşamaya kadar geldiyseniz artık catalog kodlarına geçebiliriz. Şimdiye kadar oluşturduğumuz dosyalar admin panelinde ihtiyacımız olsan sayfayı görüntülememize yetiyor. Başka ihtiyaçlar varsa onlar için ek dosyalar oluşturabilirsiniz. Örneğin CSS ve JavaScript kodlarını ayrı dosyalara yazıp view içinde veya controller içinde çağırabilirsiniz.
Catalog için 2 dosya oluşturacağız. Öncelikle controller dosyamızı oluşturalım.
|
1 |
touch extension/sustartx/catalog/controller/module/html_content.php |
İçeriğini aşağıdaki gibi doldurabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php namespace Opencart\Catalog\Controller\Extension\SuStartX\Module; /** * Class HTMLContent * * @package */ class HTMLContent extends \Opencart\System\Engine\Controller { /** * @param array $setting * * @return string */ public function index(array $setting): string { // $this->load->language('extension/sustartx/module/html_content'); $data['content'] = html_entity_decode($setting['content'], ENT_QUOTES, 'UTF-8'); $data['status'] = $setting['status']; return $this->load->view('extension/sustartx/module/html_content', $data); } } |
Son olarak view dosyamızı oluşturalım.
|
1 |
touch extension/sustartx/catalog/view/template/module/html_content.twig |
İçeriğini basitçe şu şekilde oluşturabiliriz.
|
1 2 3 |
<div> {{ content }} </div> |
Artık bir modül için gerekli olan en temel ihtiyaçlarımızı karşılamış olduk. Bundan sonraki geliştirmeler tamamen ihtiyaca uygun şekilde yapılmalı. Eğer başka dosyalara ihtiyacımız varsa olması gereken doğru dosya yolunda oluşturduğumuz takdirde hatasız çalışacaktır.
Şimdi sıra geldi bu eklentiyi yükleyip çalıştırmaya. Burası ise en sıkıntılı aşama. OpenCart diğer açık kaynak projeler gibi dosyaları ilgili yerlere koyduğumuz an tanıyıp çalıştırmıyor. Bunun yerine oluşturduğumuz dosyaları kendi istediği biçimde sıkıştırıp eklenti yükleme sayfasından yüklememizi ve aktif etmemizi bekliyor.
NOT : Böyle bir yapısı olmasından dolayı eklenti geliştirme biraz eziyet gibi gelebiliyor. Eklentimize her eklediğimiz dosya için mutlaka eklentiyi silip yeniden yüklememiz gerekiyor.
Şimdilik biz bir kereye mahsus gerekli dosyalarımızı oluşturduğumuz için artık geliştirme yaparken sürekli silip yüklemek zorunda değiliz. Sıra yükleme aşamasında.
OpenCart eklentilerini yükleyebilmemiz için
eklenti.ocmod.zip olarak sıkıştırmamız gerekiyor. Sıkıştırma işlemini özellikle eklentinizin klasörüne girdikten sonra içeriden yapmanızda fayda var. Bazen eklentiyi klasör olarak sıkıştırıp adını değiştirdiğimiz zaman OpenCart bunu göremiyor. Bu durumun önüne geçebilmek için terminalde çalışıyorsanız klasörün içindeyken aşağıdaki komutu çalıştırmanız yeterli.Ben macOS kullandığım için
__MACOSX klasörünü dışladım. Siz Windows veya Linux kullanıyorsanız komutu kendinize göre değiştirmelisiniz.|
1 |
zip -r sustartx.ocmod.zip . -x '**/.*' -x '**/__MACOSX' |
Terminalden sıkıştırma yapmak istemiyorsanız pencere yöneticinizden ilgili klasöre giderek içeride tüm dosyaları seçip sıkıştırma yazılımızla sıkıştırabilirsiniz. Burada önemli olan noktalar ise dosya uzantısının mutlaka .zip olması ve dosya adının .ocmod içermesi. Eğer başka bir sorun çıkmazsa OpenCart eklentiyi kurulabilir formatta tanıyacaktır.
Şimdi kuruluma geçebiliriz. Aşağıdaki adımları sırasıyla uygulayın.
1. OpenCart panelinize girin.
2. Sol menüdeki Extensions ana menüsünün altındaki Installer linkine tıklayın.
3. Sağ üstteki yükleme butonuna tıklayın.
4.
.ocmod.zip ile biten eklenti dosyanızı seçip yükleyin.5. Eklentiniz listede görününce Action bölümündeki artı simgesine tıklayarak yükleyin.
Buraya kadar herhangi bir sorun ile karşılamadıysanız eklenti artık kullanılabilir şekilde yüklenmiş demektir.
Geliştirmeye devam ederken burada karşılaşabileceğiniz basit bir sorun var. Eğer eklentinize yeni bir dosya eklediyseniz ve yeniden yüklemek istiyorsanız öncelikle o eklentiye ait tüm modülleri silmeniz ve bu listedeki eklentinizi önce eksi butonuyla kaldırmanız ardından silme butonuyla tamamen silmeniz gerekiyor. Eğer silmezseniz bir önceki yüklemenizden kalan zip dosyası OpenCart içinde saklanacağından eskisini tekrar yüklemiş olursunuz. Bu nedenle geliştirme aşamasında silmeyi özenle yapmakta fayda var.
Artık kurulu eklentimizi kullanabiliriz. Bunun için öncelikle Extensions menüsü altındaki Extensions linkine tıklayalım. Açılsan sayfada
Choose the extension type bölümünden Modules‘i seçelim.Açılan listede modülümüzün adını göreceğiz. Bu aşamadan sonraki işlemler artık geliştirme sürecinin değil kullanım sürecinin aşamaları olduğu için yazıyı burada tamamlıyoruz. Artık herhangi bir OpenCart kullanıcısı gibi eklentiyi açıp içeriğini girdikten sonra gerekli sayfalarda kullanabilirsiniz.
Geliştirme süreci tamamlanana kadar bu adımları sık sık yapacağınız için bir süre sonra ezberleyecek ve hızlanacaksınız ama yine de OpenCart için eklenti geliştirmek can sıkıcı bir süreç.
Herhangi bir sorunuz veya özel bir modül geliştirme ihtiyacınız varsa yorum bölümünden veya iletişim sayfasından benimle iletişime geçebilirsiniz.
Bir sonraki yazıda görüşmek dileğiyle.
İlk Yorumu Siz Yapın