Jump to content

FAQ style document


cqpbert

Recommended Posts

Thanks, Yes that would work. I was thinking about being able to have just the questions with the answers collapsed, then the user could click the question to open the answer.

Funny with tunnel vision I didn't even think about just having a doc in paragraph style with Q & A

Link to comment
Share on other sites

Is it within the scope of the forum to point me in the direction to fiqure out how? I am just lost as to even how to start that. Will it be all in a signle document with hyper links for questions that somehow link to a specific section further down?

Link to comment
Share on other sites

Yes.

In admin, Documents, click Create Document tab. On the new page, for the Title, enter FAQ. For Status, click the checkbox.

On the Content tab, in the editor window, (as an example) enter:

Q1. How do I link to a paragraph in a document?

A1. How do I link to a paragraph in a document?
Highlight A1. Click the 'Anchor' toolbar button (looks like a flag).
A dialog window will show. The Anchor Name is A1. Click OK. Select Q1.
Click the 'Link' toolbar button. A dialog window will show.
The Link Type is 'Link to anchor'. Select the A1 anchor name. Click OK. Click Save.
(Click the Clear Cache button that is lit in the upper-right corner.)
Reload the storefront Homepage. Click the FAQ document link. Click on Q1.
Note the page scrolls so that A1 is at the top of the screen.

 

Link to comment
Share on other sites

There are many ways to solve this.

One solution is to have CubeCart give a "colorbox" popup window with the answer in it when having clicked on a question.

Another is to contain the document content within an immovable location which then requires the content to scroll within it.

Another is to slide open the answer just below the question.

Link to comment
Share on other sites

All the ideas sound great. I am going to work on the second one. Sometimes for myself I am happy to be able to scroll through the list of FAQ's on a site, so that is what I foolishly assume others want to do also. LMAO

Thank you for the pointers, I will be back if/when I can not figure out how to do it.

Link to comment
Share on other sites

The first thing to do is determine if the skin you are using is loading jQuery-UI. If not, we need to incorporate it into the skin. jQuery-UI has the accordion.

What skin are you using?

Then, in the skin code, we need to activate the accordion.

The document contents will then be structured as follows:

Q1. How do I create an accordion list of Q&A in a document?

A1. Highlight the entire Q1 line.
Click the 'Format' toolbar selector (bottom row, second button).
Select 'Heading 3'.
Then highlight this whole A1 line.
Make this whole line a 'Normal' formatted paragraph.

Q2. Make this whole line a 'Heading 3'.

A2. Make this whole line a 'Normal' formatted paragraph.

Q3. Make this whole line a 'Heading 3'.

A3. Make this whole line a 'Normal' formatted paragraph.

Q4. Make this whole line a 'Heading 3'. What's next?

A4. Make this whole line a 'Normal' formatted paragraph.
Then enclose the entire document contents in a DIV.
To do this, highlight the entire document contents.
Then click the DIV toolbar button (looks like a DIV word on
top of </> next to the quote mark button). A dialog box will
popup. On the Advanced tab, ID field, enter faq_accordion and
click OK. Save the document.
Click the Clear Cache button that is lit in the upper-right corner.

 

Link to comment
Share on other sites

Foundation does not come with jQuery-UI. Go here to get it:
https://jqueryui.com/download/

Put the CSS file in /skins/foundation/css/ folder, and put the JS file in /skins/foundation/js/vendor/ folder.

Make this edit:

In /skins/foundation/templates/element.js_head.php, find:

{assign var=js_head value=[ 'skins/{$SKIN_FOLDER}/js/vendor/modernizr.js',
                            'skins/{$SKIN_FOLDER}/js/vendor/jquery.js']}

Change to:

{assign var=js_head value=[ 'skins/{$SKIN_FOLDER}/js/vendor/modernizr.js',
                            'skins/{$SKIN_FOLDER}/js/vendor/jquery.js',
                            'skins/{$SKIN_FOLDER}/js/vendor/jquery-ui.min.js']}

In /skins/foundation/templates/element.css.php, find:

                                'skins/{$SKIN_FOLDER}/css/jquery.bxslider.css',
                                'skins/{$SKIN_FOLDER}/css/jquery.chosen.css']}

Change to:

                                'skins/{$SKIN_FOLDER}/css/jquery.bxslider.css',
                                'skins/{$SKIN_FOLDER}/css/jquery.chosen.css',
                                'skins/{$SKIN_FOLDER}/css/jquery-ui.min.css']}

Then, return to editing the FAQ document. Switch to Source mode (click the Source toolbar button).

After the final </div>, add the following:

<script>$('#faq_accordion').accordion({ collapsible:true });</script>

Save and clear the cache.

View the FAQ document on the storefront. The first Q will be open. Click on any other Q.

Note: This is now a customized Foundation skin. We suggest you copy it under a different name (and edit the config.xml file), and have CubeCart use the copy. When upgrading, CubeCart replaces the entire Foundation skin with the new version.

Link to comment
Share on other sites

Well, I ran into an instance where the $ of $('#faq_accordion') wasn't recognized. This happens when the browser doesn't have jQuery already up and running while the browser is rendering the page, and sees this script in CubeCart's 'main content' area of the page. (jQuery is loaded at the bottom of the webpage code.)

The browser tries to execute the script, but jQuery isn't loaded until later in the page.

So, the following edit is needed to (effectively, but not actually) tell the browser to wait until the page has finished rendering, all the images are in place, all the CSS rules have been applied, all the javascript libraries have been fetched and executed, all the iframes have been fetched and put in place, etc, etc. This is the (browser) window 'load' event.

Return to editing the FAQ document. Switch to Source mode (click the Source toolbar button).

After the final </div>, add the following:

<script>window.addEventListener("load", function(){ $('#faq_accordion').accordion({ collapsible:true }); }, false);</script>
Link to comment
Share on other sites

  • 1 month later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...