Jump to content
Sign in to follow this  
cqpbert

FAQ style document

Recommended Posts

How do I create a FAQ style document? I was thinking maybe each question is a product with detail as the answer or something? But I don't see how that would look good at all.

Share this post


Link to post
Share on other sites

Unless you have something different in mind, a document created in admin, Documents, with contents of Q and A seems to be what you want.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

I have seen FAQ documents with a table of contents at the top, each item is a link to the full answer further down the document.

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites
Posted (edited)

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.

 

Edited by bsmither
  • Thanks 1

Share this post


Link to post
Share on other sites

That works really well bsmither! Now is there an easy way to have only the document scroll instead of the entire page? You know so the header stays and the footer stays?

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

The third one - an accordion - is very easy to implement.

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

I would not have gotten there. THANK YOU!!!

I am using foundation mostly out of the box. a couple things like logo size changed but nothing else.

How do I check for the jquery-ui?

Share this post


Link to post
Share on other sites
Posted (edited)

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.

Edited by bsmither
Fixed typo as mentioned in the following post.

Share this post


Link to post
Share on other sites

That is simply genuis!!! Thank you! thank you! thank you!

I had to make this adjustment:

/skins/foundation/css/element.css.php,

was actually here instead:

/skins/foundation/template/element.css.php

Share this post


Link to post
Share on other sites
Posted (edited)

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>
Edited by bsmither

Share this post


Link to post
Share on other sites

Thank you for this has helped me 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...