MIGX: Setting Up A FAQ Page

A step by step guide on setting up a FAQ page using MIGX:

Initial setup

1.1. Install MIGX via the Package Manager

1.2. Go to MIGX in the Components menu

1.3. In the Package Manager tab give the Package Name: faqs (keep it lowercase)

1.4. Click the Create Package button

You should get a Success alert message

1.5. Go to the Xml Schema tab and add this code:

<?xml version="1.0" encoding="UTF-8"?>
<model package="faqs" baseClass="xPDOObject" platform="mysql" defaultEngine="MyISAM" version="1.1">
<object class="Faq" table="faqs" extends="xPDOSimpleObject">
   <field key="question" dbtype="text" phptype="string" null="false" default=""/>
   <field key="answer" dbtype="text" phptype="string" null="false" default=""/>
   <field key="deleted" dbtype="int" precision="1" attributes="unsigned" phptype="integer" null="false" default="0"/>
   <field key="published" dbtype="int" precision="1" attributes="unsigned" phptype="integer" null="false" default="0"/>
</object>
</model>

(Notice the class name is Faq ie singular and capitalised whereas the package and table names are both lowercase and plural)

1.6. Click the button Save schema

This will save file faqs.mysql.schema.xml in folder core/components/faqs/model/schema/

1.7. Go to parse Schema tab and click the parse Schema button. This creates the xpdo-classes in core/components/faqs/model/faqs

1.8. Go to the create Tables tab and click the create Tables button. This will create a table modx_faqs

Part 2: Giving MIGX all the settings it needs to display your tables, and make them update-able

Now go to the MIGX tab and click Add Item

In the Settings tab fill out the fields as so:

Name: faqs

"Add Item" Replacement: Add a new frequently asked question

unique MIGX ID: faqs

Then go to the CMP-Settings tab and fill out the fields as follows:

Main Caption: FAQ

Tab Caption: All our frequently asked questions

Tab Description: Add, view or edit a FAQ using the forms below

Then go to the MIGXdb-Settings tab and fill out the fields as follows:

Package: faqs

Classname: Faq

Click the done button

...

Again go to Components > MIGX

Choose the MIGX tab, right click the faqs item and choose edit

Choose the Actionbuttons tab, and select additem

Then choose the Contextmenus tab and select update, duplicate, publish, unpublish and remove

Next go to Columns, under the column tab choose Add Item and add these values:

Header: Question

Field: question

Select Done, then add another item

Header: Answer

Field: answer

Select Done, then add another item

Header: Published?

Field: published

Column width: 30

Then choose the Renderer tab then from the Renderer dropdown menu select this.rendererCrossTick

Select Done, then add another item

Header: ID

Field: id

Column width: 30

Select Done and Done again

Now select the Formtabs tab, select Add Item, fill in the field:

Caption: A frequently asked question

Then in the same popup select the Add Item, fill in the fields:

Fieldname: question

Caption: What is the question?

Input TV type: richtext

Select Done then add another:

Fieldname: answer

Caption: What is the answer?

Input TV type: richtext

Select Done then add another:

Fieldname: published

Caption: Published?

Input TV type: checkbox

For this item go to the Input Options tab and set the values:

Input Option Values: yes==1

Default Value: 1

Select Done, and Done again

(PS. Once you have done this once you can right click your faq item in MIGX and view all the configuration settings as a JSON file. You can then just copy this and paste it into any new sites you are setting up. Should save you a bit of time.)

Part 3: Create the custom manager page in MODX

Now go to System > Actions in the main menu

Right click on the Top Menu folder icon on the right hand side and choose Create Menu

In thepop-up dialogue box set the values

Lexicon Key: FAQ

Action: migx - index

Parameters: &configs=faqs

Save

If you then refresh the manager page you should now see the FAQ menu item in the top menu.

Go to FAQ in the menu bar you should be able add question and answer items.

Part 4: Rendering to the front end

Create a resource and add this to the content field:

<ul id="FAQ">
   [ [ !migxLoopCollection?
     &packageName=`faqs`
     &classname=`Faq`
     &tpl=`templateFAQ`
     &where=`{"published":"1"}` ] ]
</ul>

<li class="faq">
     [ [+question] ]
     [ [+answer] ]
</blockquote>
</li>

You might also try this css:

/*** FAQ ***/
ul#FAQ {
     padding:0;
     margin:0;
     list-style-type: none;
}
li.faq {
background: transparent url('/assets/images/question-mark.png') no-repeat scroll top left;
border:1px solid #eeeef4;
margin:10px 0;
padding:10px;
}
li.faq blockquote{
     display:none;
padding:10px;
}
li.faq {
     padding:0 0 0 36px;
}
li.faq p:first-child {
     cursor:pointer;
}

Here's the question-mark.png :

And a bit of jQuery for slide up and slide down interaction:

$( document ).ready(function() {
     $(".faq p:first-child").click(function(e){
     blockQuote = $(this).siblings("blockquote")
     hideAnswers(blockQuote)
     blockQuote.slideToggle();
     })
})
hideAnswers = function(item){
     $("blockquote").each( function(index){
          if(item[0] !== $(this)[0] && $(this).css("display") != "none"){
          $(this).slideUp(300)
     }
     })
}

Extra

You can use the same process to set up a testimonial page but you would use a slightly different schema:

<?xml version="1.0" encoding="UTF-8"?>
<model package="testimonials" baseClass="xPDOObject" platform="mysql" defaultEngine="MyISAM" version="1.1">
<object class="Testimonial" table="testimonials" extends="xPDOSimpleObject">
   <field key="name" dbtype="varchar" precision="250" phptype="string" null="false" default=""/>
   <field key="url" dbtype="varchar" precision="250" phptype="string" null="false" default=""/>
   <field key="email" dbtype="varchar" precision="100" phptype="string" null="false" default=""/>
   <field key="comment" dbtype="text" phptype="string" null="false" default=""/>
   <field key="deleted" dbtype="int" precision="1" attributes="unsigned" phptype="integer" null="false" default="0"/>
   <field key="published" dbtype="int" precision="1" attributes="unsigned" phptype="integer" null="false" default="0"/>
</object>
</model>

You don't have to use all the fields, you can set which ones you use in MIGX and add others later if needed, rather than having to rebuild the table and map files.

Hope that's of some help