How to Make a New Content Module, Example 2

From Phoenix User Guide
Back
FAQ Tips & Tricks

In this example a new navigation content module is made to show some text.

This new module is made by copying (cloning) the existing cm_i_text_main module which performs a similar function (that is displaying some text) to make a cm_nav_message module

The module has a main file, a template file and a language file so a clone is made of each.




Main File

  • On your local computer, find and open the downloaded and unzipped (extracted) CE Phoenix folder or download and unzip a new one.
  • Go to /includes/modules/content/index/
  • Find the cm_i_text_main.php file.
  • Copy it.
  • Go to /includes/modules/content/navigation/
  • Paste it and rename it cm_nav_message.php
  • Open the file in a file editor - in this example Visual Studio Code is used.

Nav-content-module-1.png

  • Make the following changes to the code referring to the screenshot above - line numbers may differ slightly in your file.
  • Change on (line 13) - this code is the same as the name of the file:
 cm_i_text_main
 to 
 cm_nav_message
  • Change on (line 15):
 MODULE_CONTENT_TEXT_MAIN_
 to
 MODULE_CONTENT_NAV_MESSAGE_
  • Delete (line 22) - this code would define the width of the module displayed in the shop but the new module will show full width so this is not needed:
 $content_width = MODULE_CONTENT_TEXT_MAIN_CONTENT_WIDTH;
  • Change on (line 24)
 MODULE_CONTENT_TEXT_MAIN_TEXT
 to
 MODULE_CONTENT_NAV_MESSAGE_TEXT
  • Change on (line 32)
 MODULE_CONTENT_TEXT_MAIN_STATUS
 to
 MODULE_CONTENT_NAV_MESSAGE_STATUS'
  • Change on (line 33)
 Enable Main Text Module
 to
 Enable Nav Message Module
  • Delete (lines 38, 39, 40, 41, 42, 43) - this code would set the width of the module displayed in the shop but the new module will show full width so this is not needed:
  'MODULE_CONTENT_TEXT_MAIN_CONTENT_WIDTH' => [
  'title' => 'Content Width',
  'value' => '12',
  'desc' => 'What width container should the content be shown in? (12 = full width, 6 = half width).',
  'set_func' => "tep_cfg_select_option(['12', '11', '10', '9', '8', '7', '6', '5', '4', '3', '2', '1'], ",
   ],
  • Change on (line 44)
 MODULE_CONTENT_TEXT_MAIN_SORT_ORDER
 to
 MODULE_CONTENT_NAV_MESSAGE_SORT_ORDER
  • Change on (line 46)
 200
 to
 5
  • The file should now look like this:

Nav-content-module-4.png

  • In the file editor menu, click Save




Template File

  • Now back in the downloaded and unzipped (extracted) CE Phoenix folder.
  • Go to /includes/modules/content/index/templates/
  • Find the tpl_cm_i_text_main.php file.
  • Copy it.
  • Go to /includes/modules/content/navigation/templates/
  • Paste it and rename it tpl_cm_nav_message.php
  • Open the file in a file editor.

Nav-content-module-2.png

  • Change on (line 1)
 class="col-sm-<?php echo $content_width; ?> cm-i-text-main"
 to
 class="cm-nav-message"
  • Change on (line 2)
 MODULE_CONTENT_TEXT_MAIN_TEXT
 to
 MODULE_CONTENT_NAV_MESSAGE_TEXT
  • The file should now look like this:

Nav-content-module-5.png

  • In the file editor menu, click Save




Language File

  • Now back in the downloaded and unzipped (extracted) CE Phoenix folder.
  • Go to /includes/languages/english(or other language if installed)/modules/content/index/
  • Find the cm_i_text_main.php file.
  • Copy it.
  • Go to /includes/languages/english/modules/content/navigation/
  • Paste it and rename it cm_nav_message.php
  • Open the file in a file editor.

Nav-content-module-3.png

  • Change on (line 17)
 MODULE_CONTENT_TEXT_MAIN_TITLE       = 'Main Text';
 to
 MODULE_CONTENT_NAV_MESSAGE_TITLE       = 'Nav Message';
  • Change on (line 18)
 MODULE_CONTENT_TEXT_MAIN_DESCRIPTION = 'Shows the "Text" module on your Index page.';
 to
 MODULE_CONTENT_NAV_MESSAGE_DESCRIPTION = 'Shows the Nav Message module on your shop.';
  • Change on (line 20)
 MODULE_CONTENT_TEXT_MAIN_TEXT        = ' ';
 to
 MODULE_CONTENT_NAV_MESSAGE_TEXT        = 'Example Message';
  • The file should now look like this:

Nav-content-module-6.png

  • In the file editor menu, click Save




  • Using FTP software, upload the new files to the host server - ensure they are uploaded to the correct locations.

then install the new module.

  • From admin go to Modules → Content
  • Click Install Module
  • You should now see Nav Message listed in the Modules column as navigation in the Group column.
  • Click the Nav Message row or Action icon.
  • Click Install Module
  • Click Edit
  • Set the Sort Order as required although this module is designed to show above the Navigation Bar.
  • Click Save

You should now see the new module displayed in your shop above the Navigation Bar (make sure you scroll to the top of the page to see it!)

Nav-content-module-7.png


So, we've done it but now let's do it with some style!

  • Go back to includes → modules → content → navigation → templates
  • Find and open tpl_cm_nav_message.php

CE Phoenix has lots of Bootstrap styles that can be easily used to style elements so have a play.

So change on (line 1)

<div class="cm-nav-message">
 to
<div class="alert-info text-center lead p-2 cm-nav-message">


alert-info gives a pale blue background

text-center does what you would expect

lead gives a stand out style the font display

p-2 sets the padding space inside the div container


  • In the file editor menu, click Save and use FTP to upload and overwrite the file on your host server.

The module will now show like this:

Nav-content-module-8.png


Alternatively, if you wish to apply your own styles instead of Bootstrap styles, leave line 1 as it is and add your own styles to .cm-nav-message in your user.css file - read Change Style and Colour




The same result can be obtained by creating a hook although modules can be enabled or disabled (turned on or off) as required, a hook is always on.

See - How to Make a New Hook



Construction.png
This page is in progress
Please visit again soon for additions and changes

Phoenix User Guide is a continuing work in progress.
If you have any suggestions for content correction, improvement or inclusion please email us:
Contact.png
not a clickable link to prevent spam

Phoenix Cart User Guide, like CE Phoenix Cart, is free to use but is maintained by unpaid volunteers.
If you have found it useful, please donate to the coffee pot!
Use this link to donate whatever you want.

Donate with Paypal

"Phoenix" and the Phoenix Logo are copyright G. Burton.
Code references are licensed under a Commons Attribution-NonCommercial-ShareAlike 2.0 UK: England & Wales License.
All other content is the reserved Intellectual Property and Copyright of phoenixcart.org
PROTECTED BY COPYSCAPE ANTI-PLAGIARISM
uk-unlimited-728x90.gif