cqpbert Posted June 3, 2019 Share Posted June 3, 2019 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. Link to comment Share on other sites More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 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. Link to comment Share on other sites More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 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 More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 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. Link to comment Share on other sites More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 Yes, Is that possible with CC? Link to comment Share on other sites More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 Yes. Link to comment Share on other sites More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 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 More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 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 More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 WOW Thanks!!! Link to comment Share on other sites More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 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? Link to comment Share on other sites More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 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 More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 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 More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 The third one - an accordion - is very easy to implement. Link to comment Share on other sites More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 Ok that sounds fun, How do I do that? Link to comment Share on other sites More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 Ok, I am looking at accordion html stuff. I think I can get this! Link to comment Share on other sites More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 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 More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 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? Link to comment Share on other sites More sharing options...
bsmither Posted June 3, 2019 Share Posted June 3, 2019 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 More sharing options...
cqpbert Posted June 3, 2019 Author Share Posted June 3, 2019 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 Link to comment Share on other sites More sharing options...
bsmither Posted June 4, 2019 Share Posted June 4, 2019 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 More sharing options...
Angie Posted July 25, 2019 Share Posted July 25, 2019 Thank you for this has helped me Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.