How to Create a Drupal 8 module
In this tutorial I am going to teach you how to create a Drupal 8 module
First you need to create a folder with your module name under the modules/custom folder
Then you need to create a your_module_name.info.yml file that contain information about your module, here is a sample content
name: Commerce Amazon Slider description: Provides custom product slider that looks and behaves like the Amazon slider type: module package: Commerce Custom dependencies: - commerce:commerce core: 8.x
If you navigate to YourSiteName.com/admin/modules you should find your new module listed, enable your module and follow through with the tutorial to add features to your module
To include javascript and css files in your module you need to create a yourmodulename.libraries.yml file, here is an example
commerce_amazon_slider: js: js/commerce_amazon_slider.js: {} dependencies: - core/jquery - core/drupalSettings css: layout: css/commerce_amazon_slider.css: {}
If your module will require specific permissions you can create a yourmodulename.permissions.yml file, here is an example
administer commerce_amazon_slider: title: 'Administer Commerce Amazon Slider' description: 'View, edit and update Commerce Amazon Slider configurations'
After clearing your cache, You should then see your permissions listed under YourSiteName.com/admin/people/permissions
To create a configuration form you first need to create a route for the form, you do that by adding a your_module_name.routing.yml file, here is an example
commerce_amazon_slider.configure_slider_settings: path: '/admin/commerce/config/commerce-amazon-slider/configure-slider-settings' defaults: _form: '\Drupal\commerce_amazon_slider\Controller\ConfigureSliderSettingsForm' _title: 'Configure Amazon Slider Settings' requirements: _permission: 'administer commerce_amazon_slider'
Then you need to create the Form class under modules/custom/your_module_name/src/Controller/FormClassName.php, The file name and class name should match the entries added in your .routing.yml file, like the following example
<?php namespace Drupal\commerce_amazon_slider\Controller; use Drupal\Core\Form\FormBase; use Drupal\Core\Form\FormStateInterface; class ConfigureSliderSettingsForm extends FormBase { public function getFormId() { return 'commerce_amazon_slider_slider_settings_form'; } public function buildForm(array $form, FormStateInterface $form_state) { return $form; } public function submitForm(array &$form, FormStateInterface $form_state) { } }
To add a link to the menu for the form route, you need to create a yourmodulename.links.menu.yml file like the following example
commerce_amazon_slider.configure_slider_settings: title: Configure Amazon Slider Settings parent: commerce.store_configuration description: '' route_name: commerce_amazon_slider.configure_slider_settings weight: -30
After Clearing your cache, you should see your menu link listed as follows
Then to make the form functional we need to add form fields and save the data on form submit, the code will be modified as follows
public function buildForm(array $form, FormStateInterface $form_state) { $form['show_on_pages'] = [ '#type' => 'textarea', '#title' => $this->t('Show the Slider on the following pages'), '#description' => $this->t('Enter the path of the pages you want the slider to render on, each path on a separate line'), '#default_value' => $this->config('commerce_amazon_slider.settings')->get('show_on_pages'), ]; $form['actions'] = [ '#type' => 'actions', ]; $form['actions']['submit'] = [ '#type' => 'submit', '#value' => $this->t('Save Settings'), ]; return $form; } public function submitForm(array &$form, FormStateInterface $form_state) { $show_on_pages = $form_state->getValue('show_on_pages'); \Drupal::configFactory()->getEditable('commerce_amazon_slider.settings')->set('show_on_pages', $show_on_pages)->save(); }
Then when you navigate to the form from your link you should see the following page, and when you save the values are updated in the form
Thank you and looking forward to help you do more with Drupal