Jump to content

FAQ CMS block

srjacob

By srjacob
in Configuring and using PrestaShop

 Share

Recommended Posts

srjacob Newbie

srjacob

Posted
Posted

Does anyone know, within the context of CMS, how to build a frequently asked questions list?  What I would like to do is have the questions with a + sign in front of them.  When the + is clicked, the questions expands with the anserer given. 

 

If anyone knows of a better way to do frequently asked questions, I would be glad to hear of it.

 

Thanks in advance.

 

Steve

Link to comment
Share on other sites
El Patron Mentor

El Patron

Posted
Posted

this is more of a module function.  I don't want to discourage you from searching for a CMS solution.

 

I would search for modules 'prestashop module faq'.  (also keep an eye out for modules in 'other languages'.)  You might find a nice free one or buy a paid solution.

 

here is an example of module from addon's

http://addons.prestashop.com/en/content-management/8141-lof-faq-module.html

Link to comment
Share on other sites
vekia Apprentice

vekia

Posted
Posted

it's easy to achieve. take a look what i created: http://codepen.io/hrbj/pen/ylswC

 

to define content in cms editor use code like this:

<div id="accordion-container"> 
     <h2 class="accordion-header">Section 1</h2> 
     <div class="accordion-content"> 
          <p>Section 1 Content</p> 
     </div> 
     <h2 class="accordion-header">Section 2</h2> 
     <div class="accordion-content"> 
          <p>Section 2 Content</p> 
     </div> 
</div>

to global.css paste this code:
 

#accordion-container {
	font-size: 13px;
	background: #ffffff;
	padding: 5px 10px 10px 10px;
	border: 1px solid #cccccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 5px 15px #cccccc;
	-webkit-box-shadow: 0 5px 15px #cccccc;
	box-shadow: 0 5px 15px #cccccc;
}

.accordion-header {
	font-size: 16px;
	background: #ebebeb;
	margin: 5px 0 0 0;
	padding: 5px 20px;
	border: 1px solid #cccccc;
	cursor: pointer;
	color: #666666;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.active-header {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	background: url(images/active-header.gif) #cef98d;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.active-header:hover {
	background: url(images/active-header.gif) #c6f089;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header {
	background: url(images/inactive-header.gif) #ebebeb;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header:hover {
	background: url(images/inactive-header.gif) #f5f5f5;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.accordion-content {
	display: none;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-top: 0;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

and in header.tpl file between <header></header> tags use this:

{literal}
<script>$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');


//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });


//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}


else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});


return false;
});</script>
{/literal}
  • Like 4
  • Thanks 2
Link to comment
Share on other sites
  • 1 year later...
Cansa Newbie

Cansa

Posted
Posted

Is it possible to do this accordion style for the products page as well?  So the main categories are listed on the same page with the products under each parent category.

 

Category 1

      (and subcategories slide out which can display the products in that category).

 

Category 2

      (and subcategories slide out which can display the products in that category).

 

Category 3

      (and subcategories slide out which can display the products in that category).

Link to comment
Share on other sites
  • 1 year later...
  • 2 months later...
jgd24 Newbie

jgd24

Posted
Posted

 

it's easy to achieve. take a look what i created: http://codepen.io/hrbj/pen/ylswC

 

to define content in cms editor use code like this:

<div id="accordion-container"> 
     <h2 class="accordion-header">Section 1</h2> 
     <div class="accordion-content"> 
          <p>Section 1 Content</p> 
     </div> 
     <h2 class="accordion-header">Section 2</h2> 
     <div class="accordion-content"> 
          <p>Section 2 Content</p> 
     </div> 
</div>

to global.css paste this code:

 

#accordion-container {
	font-size: 13px;
	background: #ffffff;
	padding: 5px 10px 10px 10px;
	border: 1px solid #cccccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 5px 15px #cccccc;
	-webkit-box-shadow: 0 5px 15px #cccccc;
	box-shadow: 0 5px 15px #cccccc;
}

.accordion-header {
	font-size: 16px;
	background: #ebebeb;
	margin: 5px 0 0 0;
	padding: 5px 20px;
	border: 1px solid #cccccc;
	cursor: pointer;
	color: #666666;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.active-header {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	background: url(images/active-header.gif) #cef98d;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.active-header:hover {
	background: url(images/active-header.gif) #c6f089;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header {
	background: url(images/inactive-header.gif) #ebebeb;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header:hover {
	background: url(images/inactive-header.gif) #f5f5f5;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.accordion-content {
	display: none;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-top: 0;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

and in header.tpl file between <header></header> tags use this:

{literal}
<script>$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');


//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });


//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}


else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});


return false;
});</script>
{/literal}

Hy, Great, it works perfectly on prestashop 1.6.

I'd like to change a little thing, but i d'ont know how to do that. Is there anybody to help me?

I'd like that the open tabs doesn't close automaticly. I'd like it to close only on click. Is it possible? and how make that possible?

Thank for any help.

Link to comment
Share on other sites
  • 4 months later...
  • 1 year later...
  • 5 months later...
  • 10 months later...
notsureabout Newbie

notsureabout

Posted
Posted
On 7/30/2016 at 12:44 PM, jgd24 said:

and in header.tpl file between <header></header> tags use this: 


{literal}
<script>$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');

Sorry, I'm dumb...
Where to put this in prestashop 1.7.6.2
Classic default theme?
Thanks

Link to comment
Share on other sites
notsureabout Newbie

notsureabout

Posted
Posted (edited)

 OK,
after some tryes I made it work.
Had to put the script in
classic/templates/_partials/javascript.tpl

just after
  

{foreach $javascript.external as $js}
  <script type="text/javascript" src="{$js.uri}" {$js.attribute}></script>
{/foreach}

{foreach $javascript.inline as $js}
  <script type="text/javascript">
    {$js.content nofilter}
  </script>
{/foreach}

In this way accordion works but I have always an annoying

Uncaught ReferenceError: $ is not defined

in chrome console.

Any suggestions?
Thank you.
 

Edited by maicolstaip (see edit history)
Link to comment
Share on other sites
  • 8 months later...
RhinoRudi Newbie

RhinoRudi

Posted
Posted
On 9/19/2020 at 10:43 AM, Yulia Vitun said:

how to make images added to accordion change width according to the devise screen resolution?

I had to comment out the width of the .accordian-content class in the javascript and then make adjustments in the custom CSS file in my theme/assets/css

I had to put this is themes/core.js and comment out there.

I am not sure how your folder structure works, but I hope this helps.

 

Screen Shot 2020-09-21 at 11.37.44 AM.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...