Briefly the module will do the following task once installed on your drupal 8 site ;
- Ask the user to input the fruit he desires ( either apple , orange or banana)
- Display the price of the chosen fruit
- Ask the user about the quantity wanted of that particular fruit desired
- Calculate the total cost for the chosen quantity
- Output the total cost and thank the user
Note ; The codes have been written in such a way that inputs are case-sensitive . Therefore entering “Apple” or “APPLE” instead of “apple” will display an error .
The coding process
In an attempt to promote understanding , i will break the process into different steps and provide screenshots of my codes as required and necessary.
Step 1 : Create the module ‘s folder
The first step is to create a module folder where you will place all the folders and files related to your module.
On a general note , It is the common practice to give your ‘module name’ to your module folder.
P.S ; Since i decided to call my module “fruit” , i labelled this module’s folder as “fruit” as shown below
Step 2 : Create an info.yml file
You should create an info file using YAML ( YAML is a human-readable data-serialisation language.) That file will provide meta-data about your module to Drupal.
In simple words ,it will provide Drupal with details about the module namely ; name, description ,core , version and so on .
The naming convention to be followed is ;
Here is a screenshot of my fruit.info.yml file
So …what does all that mean ?
Broadly ,we are telling Drupal about the module’s name , the version of Drupal being used and a brief description of the module.
Note ; Indentation is important , a text-editor like mine (Atom or even Sublime ) will normally do it for you.
Step 3: Create a library file (.libraries. yml)
As you guys can see ,i have specified the version of the library to be used as well as included the dependencies .
On a technical note :
scripts.jswill be loaded from the
Step 4: Create a route file (.routing. yml)
By definition , A route determines which code should be run to generate the response when a URI is requested
This file will be used to tell Drupal about the different paths to be used not only while running the codes but equally when accessing the required contents on our Drupal site
Here is a screenshot of my fruit.routing.yml file
As you can see , all the required routes have been included .
The name of the route is fruit.content .
Therefore when a user enters
www.example.com/fruits , this particular route will decide on the codes to run to generate a response.
The controller will tell Drupal on the methods to call when this routeSte has been accessed .
The title (default page title) to be displayed when the user goes to
www.drupal.com/fruits has also been included as you can see.
With that done , we can now proceed to actually coding our module …
Step 5 : Code the controller
Ok , we firstly have to create a folder called “src” within the module (“fruit) folder . Inside that folder , create another folder called “Controller” and it is inside that folder that we are going to place the Controller.php file
Code your controller with respect to your needs and requirements.
Here is a screenshot of mine ; (FruitController.php)
Be careful with the class name . As you can this , I have also created a class in my div “btn” for my button to be displayed on the page
Lastly create a “js” folder if you have not yet . It is inside of that , that you are going to place your .js file. While it is not required , it is considered good programming practice to label your .js file as scripts.js as I have labelled it .
Basically , user enters “desired fruit” and this gets stored in the variable “fruit”. I have made use of basic if …else statements so match each fruit with their respective prices and output total cost.
Installing the module
Next you have to install the module on your Drupal 8 site.
Place it in your modules directory .
I personally uploaded it to my Drupal site found on pantheon using Cyberduck .
Here is a screenshot ;
Install it like any other module on
As you can see , the module has been enabled .
To test it ,lets go to
/fruits as mentioned in the fruit.routing.yml.
As you can see , the module is working fine.
I have encircled
/fruits to show you that the specified route is working.
When user clicks on “click for prices” , the user is prompted and needs to fill in the above … entered data will be processed to show total price of fruits…
To Sum Up
Thanks for your read
With all that said , bye guys and have fun Drupalling
Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share…