Adding New Boxes, Links and Pages

• We will now look into adding our own custom boxes, as well as adding/changing links, pages and graphics to boxes.
• In addition, we will learn how to add items to the columns, outside of the actual boxes.
• All of these modifications are fairly easy to perform, but they are not entirely intuitive (understatement!).

Let’s jump right in. The files involved are: /catalog/includes:

• column_left.php
• column_right.php

/catalog/includes/boxes: ALL files in this directory

1. Open /catalog/includes/boxes/information.php in a text editor and save it as /catalog/includes/boxes/test.php.
2. Then in column_left.php, add this line:

require(DIR_WS_BOXES . 'test.php');

 require(DIR_WS_BOXES . 'information.php');

1. Save column_left.php to your server, and reload the main catalog page in your browser. You will now see two information boxes on the left. The second one we just added with one line of code. That is the easy part.

The next step is to customize that box, and to do it, we need to modify a few more files. I want to change the title bar of our new box, as well as make links to new, custom pages that I will also create. This process is a bit more clunky than it should be, but we will have to make due. Here we go!

• For this example, I will be creating four links to pages called testpage1.php, testpage2.php testpage3.php and testpage4.php in the new information block we created in the previous step.

• I am using the original shipping.php files as my base template. Use this example to familiarize yourself with the procedure. The process is the same for other blocks, you just need to identify the proper files to copy and modify. Confused? Good. Read on … it will be come clearer!

• Open the following files in WordPad or some other text editor that will not modify code without you telling it to, and will allow you to search and replace:

1. /catalog/includes/filenames.php
2. /catalog/includes/languages/english.php
3. /catalog/includes/languages/english/shipping.php
4. /catalog/shipping.php
5. /catalog/includes/boxes/test.php

In the file /catalog/includes/filenames.php, find the section marked define filenames used in the project. In this section, copy any one of the file definitions, and paste it to a new line, just after the one you copied. Now you need to modify the newly pasted line to point to testpage1 See the example below:

Copy the first file definition listed:

       define('FILENAME_ACCOUNT', 'account.php');

       define('FILENAME_TESTPAGE1', 'testpage1.php');
       define('FILENAME_TESTPAGE2', 'testpage2.php');
       define('FILENAME_TESTPAGE3', 'testpage3.php');
       define('FILENAME_TESTPAGE4', 'testpage4.php');

• Now, save /catalog/includes/filenames.php.
• This is the step that creates the filename definitions so that osCMax can build links.

Next, in the file /catalog/includes/languages/english.php, find the section marked information box text. Copy the entire section and paste it below the original section.

Change the section to look like this:

 // information box text in includes/boxes/test.php
       define('BOX_HEADING_TEST', 'Test Box');
       define('BOX_TEST_LINK1', 'Test Link 1');
       define('BOX_TEST_LINK2', 'Test Link 2');
       define('BOX_TEST_LINK3', 'Test Link 3');
       define('BOX_TEST_LINK4', 'Test Link 4');

In the file /catalog/includes/languages/english/shipping.php edit the following:

      define('NAVBAR_TITLE', 'Shipping & Returns');
      define('HEADING_TITLE', 'Shipping & Returns');
      define('TEXT_INFORMATION', 'Enter your shipping info here');

      define('NAVBAR_TITLE', 'Test Page 1');
      define('HEADING_TITLE', 'Test Page 1');
      define('TEXT_INFORMATION', 'This is an added sample page');

• Save as /catalog/includes/languages/english/testpage1.php

• Repeat the above steps three more times, creating testpage2, testpage3, and testpage4. This is the step that actually creates the text that will be on each of your new pages, and in the process, creates four new files.

In the file: /catalog/shipping.php using the replace feature of you text editor

• Replace this: FILENAME_SHIPPING

• With this: FILENAME_TESTPAGE1

• Save As /catalog/testpage1.php

• Repeat this three more times, changing FILENAME_TESTPAGE1 to FILENAME_TESTPAGE2, FILENAME_TESTPAGE3 and FILENAME_TESTPAGE4 and saving as testpage2.php, testpage3.php and testpage4.php.
• This step creates the actual pages that will be loaded by the links.

Finally, edit the file /catalog/includes/boxes/test.php to look like this:

 <?php
  $boxHeading = BOX_HEADING_TEST;
  $corner_left = 'square';
  $corner_right = 'square';
  $boxContent = ('<a href="' . tep_href_link (FILENAME_TESTPAGE1, '', 'NONSSL') . '">' . BOX_TEST_LINK1 . '</a><br>' .
               '<a href="' . tep_href_link (FILENAME_TESTPAGE2, '', 'NONSSL') . '">' . BOX_TEST_LINK2 . '</a><br>' .
               '<a href="' . tep_href_link (FILENAME_TESTPAGE3, '', 'NONSSL') . '">' . BOX_TEST_LINK3 . '</a><br>' .
               '<a href="' . tep_href_link (FILENAME_TESTPAGE4, '', 'NONSSL') . '">' . BOX_TEST_LINK4 . '</a>');
  require(DIR_WS_TEMPLATES . TEMPLATENAME_BOX);
 ?>

• This changes the text that is output in the browser. You are finished editing files at this point.
• Make sure you upload the files to the proper directories, as some of them have the same filenames.
• View your catalog in your browser and the new links should show up in your new block! See the example below: