MageParts

Skip to Main Content »

User Guides

My Cart

You have no items in your shopping cart.

Community Poll

What do you think of our support service?
 
 
 
 

Newsletter

Newsletter
 

MageParts CMS (version 2.x)   -   User Guide

Chapter 1: Working with MageParts CMS

This chapter will cover how to use MageParts CMS (Content Management System) in Magento.
The CMS is accessible from the top menu CMS → Pages.

1.1CMS overview

Access the CMS through the top menu: CMS → Pages. Here you will find a list of all the pages that can be edited in the CMS.

List of pages in the CMS
  1. Click on the Add new page button to create a new page.
  2. Click on any of the pages in the list to open and edit it.

Once you click on the Add new page button or click on a page in the list the page will be opened for editing.

CMS overview
  1. ButtonAction
    BackClose the current page and go back to the list of pages
    Delete pageDelete the current page
    Save pageSave the current page and go back to the list of pages
    Save and continue editSave the current page but do not close it
    PreviewPreview the current page
  2. The tabs on the left hand side controls various aspects of the page:
    General Information contains general information like title and status options.
    Contents holds the actual content for the page.
    Custom Design allows you to make layout updates manually to the page.
    Meta Data holds the meta data for the page.
    JavaScript allows you to load and execute custom javascript code on the current page.
    CSS allows you to make changes to the stylesheet on the current page.
  3. The main area is where you edit the page information and content.

In addition to the main controls the Content tab also has three tabs: Left Column, Middle Column and Right Column. These tabs represent the three columns on the page in your webshop.

CMS contents overview

1.2Create a new page

Click on the Add new page button above the CMS page list (CMS → Pages). Your new page will now be created, and opened for editing.

General information

The first thing you need to do is give the new page a title and set the page status. All new pages are disabled (not published) by default, which means your new page will not be displayed in your webshop until you change the page status to Enabled.

You may also specify a URL for this page manually (if the URL field is left empty a URL will be automatically generated for you). The URL must be unique, meaning that two pages cannot share the same URL.

If you have several store views, you will also be given the option to choose in which store views this page should be displayed.

1.3Edit a page

With the page open, click on the Contents tab to display the contents of this page. The contents of a page is divided into three columns: Left, Middle and Right. Each of the three columns represents a corresponding column on the page in your webshop.

Columns

The Left and Right columns can be turned on or off by changing the "Active" status on each of the columns. The main column cannot be inactivated.

Active status on the Left and Right columns

Each of the columns are constructed as a set of blocks. At the bottom of the page you will find the Add button and a drop-down list which you will be using to add new blocks to your page.

Add block dropdown

There are several types of blocks divided into four different groups:

OptionDescription
GeneralVarious block types, such as Text & Media
Data blocksBlocks which can be used to display (amongst other things) products, dynamic texts and callouts
Sidebar blocksOnly available for the Left and Right column. Contains blocks such as "Subscribe to newsletter" and "Poll"
Static blocksA list of all blocks created under Static Blocks CMS → Static Blocks in the top menu

You can preview the page you are editing by clicking on the Preview button at any time. You do not have to save the page to preview it.

1.4Block types

1.4.1 Text & Media block

A Text & Media block is a WYSIWYG (What You See Is What You Get) container which you can fill with text, links, images, video clips and more.

As of MageParts CMS 2.0 the standard Magento WYSIWYG is used (included in Magento 1.4 and above).

1.4.2 Data blocks

Data blocks are basically dynamic collections of data, like the 10 most popular products or products in a specific category. Each data block may have block-specific configuration options like the number of products to be displayed, how they should be displayed and so on. Data blocks can only be added in the Middle column.

For the Products in Category data block to work you need a category ID. To find the ID of the category you want to use, navigate to (don't forget to save your page first) Catalog → Manage Categories in the top menu, and click on the category you want to display. The ID of the category is now displayed next to the name of the category.

For information on how to create a custom data block see Chapter 3

1.4.3 Sidebar blocks

Sidebar blocks are information boxes which you can see on the left and right side of your webshop, like the shopping cart, compare products, popular tags and so on. Sidebar blocks can only be added in the Left and Right columns.

For information on how to create a custom sidebar block see Chapter 3

1.4.4 Static blocks

Static blocks are meant to hold information that does not change dynamically, like a set of links in the footer. You can add any block you create under Static Blocks CMS → Static Blocks in the top menu.

1.5Sorting and and deleting blocks

On each of the blocks you add there are three buttons that allows you to change the position and delete the block.

Block header
ButtonAction
Move upMove block upwards (if possible)
Move downMove block downwards (if possible)
DeleteDelete block

1.6Edit the Meta data for a page

With the page open, click on the Metadata tab to display the metadata for this page. Metadata (meta data, or sometimes metainformation) is "data about data", which in this case means information about your page. This information is used by search engines like Google and Yahoo to index your page and present information about it. The chances of someone finding your page through a search engine depends on the quality of the Metadata. For more information on how to write good metadata we recommend a search on Google on the subject.

Meta data
  1. A list of keywords separated by a comma that describes the contents of the page
  2. A description of the contents on the page

1.7Add custom JavaScript to a page

With the page open, click on the JavScript tab. This view has two containers:
Custom JavaScript Code: Allows insertion of arbitrary JavaScript code into a page. The code will not be added directly to the source of the page, but saved to a file that will then be loaded. Do not include <script>-tags in the code.
External JavaScript Files: Allows loading of external JavaScript files. Each file should be entered on a separate line as a URL to the file . <script>-tags will be added automatically.

JavaScript
  1. Custom JavaScript Code will be saved to a file which is then loaded into the page. Do not include <script>-tags.
  2. External JavaScript Files (one per line). <script>-tags will be added automatically.

1.8Add custom CSS to a page

With the page open, click on the CSS tab. This view has two containers:
Custom CSS Code: Allows insertion of arbitrary CSS code into a page. The code will not be added directly to the source of the page, but saved to a file that will then be loaded. Do not include <style>-tags in the code.
External CSS Files: Allows loading of external CSS files. Each file should be entered on a separate line as a URL to the file . <link>-tags will be added automatically.

CSS
  1. Custom CSS Code will be saved to a file which is then loaded into the page. Do not include <style>-tags.
  2. External CSS Files (one per line). <link>-tags will be added automatically.

1.9Custom layout changes of the page

With the page open, click on the Custom Design tab. This view allows you to take precise control over the layout on the page using XML layout updates. For more information on how to use XML layout updates, please see Intro to Layouts on magentocommerce.com.

Custom Design

Chapter 2: Configuration options for MageParts CMS

This chapter will cover how to configure MageParts CMS in Magento.

2.1Configuration overview

The CMS configuration is accessible from the top menu System → Configuration on the tab MageParts → CMS.

Config overview
  1. Navigate to System → Configuration in the top menu.
  2. Click on CMS in the MageParts section of the left menu.

2.2General Settings

General Settings

The XML Layout Update field removes blocks that already exists on a Magento webshop, allowing the CMS to take care of them instead. The default configuration removes the predefined blocks that comes out of the box on a Magento installation. If you have added any custom blocks that you wish to remove you can do so here.

2.3Sorting Settings

Sorting Settings

Setting Sortable to No disables sorting of the blocks on pages in the CMS. Setting it to Yes enables sorting of the blocks on pages in the CMS.

2.4TinyMCE Settings

These configuration options affect the WYSIWYG area on Text & Media blocks:

TinyMCE Settings
OptionDescription
WidthThe width of the WYSIWYG area in pixels
HeightThe height of the WYSIWYG area in pixels

2.5Preview Settings

These configuration options affects the preview window:

Preview Settings
OptionDescription
WidthThe width of the preview window in pixels
HeightThe height of the preview window in pixels

Chapter 3: Creating custom Data & Sidebar blocks

This chapter will cover how to create custom Data & Sidebar blocks that you can later use in the CMS. This requires a bit of knowledge on PHP and a basic understanding of how Magento works.

Be adviced that if you choose to use any information in this chapter you do so at your own risk. MageParts takes no responsibility for the information in this chapter or any damage it may cause.

3.1Adding custom data blocks

From the Magento folder, navigate to app/code/community/MageParts/CmsGui/Model/Page/. Copy the file Document Middle.php.

Next navigate to app/code/local/. Create the following directory structure in this directory:

  • MageParts
    • CmsGui
      • Model
        • Page

Paste the file Document Middle.php inside the Folder Page directory you just created. Open the file and locate the getDataBlockTypes function. The first entry in the array represents the Popular products data block. There are no parameter requirements, which may seem weird at first, but looking at the code you will see the following parameters (amongst others): template, display_mode and type. These parameters will create the following XML string after they have been compiled: {{template="VALUE" type="VALUE" display_mode="VALUE"}} VALUE will be replaced by the value inserted by the user. The parameters are defined by a list of available properties.

ParameterDescription
valueMixed; defined as a string this represents the default value of the property. Defined as an array this creates a select box with available options
labelThe title of the data block displayed in the CMS
editableWether or not this property value can be edited by the user
selectedDefault option selection (only used when the value property is defined as an array)
classClassname(s) assigned to the input box in the CMS. This can be used for styling, validation etc

3.2Adding custom sidebar blocks

From the Magento folder, navigate to app/code/community/MageParts/CmsGui/Model/Page/. Copy the file Document Sidebar.php.

Next navigate to app/code/local/. Create the following directory structure in this directory:

  • MageParts
    • CmsGui
      • Model
        • Page

Paste the file Document Sidebar.php inside the Document Page directory you just created. Open the file and locate the getBlockTypes function. The first entry in the array represents the Newsletter sidebar block. The principles when adding custom sidebar blocks are the same as for the data blocks. The big difference between the two is that static blocks has no properties which can be defined by CMS users. So they are a little bit easier to manage.

ParameterDescription
labelThe title of the sidebar block displayed in the CMS.
paramsThese parameters are used when the XML string is compiled. As an example, here is what the compiled XML string from a newsletter block looks like: <block type="newsletter/subscribe" template="newsletter/subscribe.phtml" name="custom.newsletter.1"/> Note the .1 at the end of the name parameter in the compiled string. This is the blocks unique ID number, which keeps the blocks separated.
imageDeprecated parameter which should be ignored for now
actionsUsed to assign actions to the XML, like template and method. As an example you can take a look at the actions parameter in the tags_popular entry which produces the following XML code: <block type="tag/popular" template="tag/popular.phtml" name="custom.tag.popular.1">
    <action method="setTemplate">
        <template>tag/popular.phtml</template>
    </action>
</block>