FAQ CMS block - Configuring and using PrestaShop - PrestaShop

Jump to content

Photo

FAQ CMS block

faq cms block

#1

Posted 21 December 2013 - 07:17 PM

srjacob

    PrestaShop Apprentice

  • Members
  • PipPip
  • 68 Active Posts

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



#2

Posted 21 December 2013 - 09:55 PM

El Patron

    PrestaShop Member

  • Members
  • PipPipPipPipPipPip
  • 14219 Active Posts

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.presta...faq-module.html



#3

Posted 21 December 2013 - 10:12 PM

vekia

    PrestaShop Legend

  • Ambassadors
  • 53043 Active Posts

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}

free tutorials, free templates, free addons, responsive prestashop modules MndfRK4.png


#4

Posted 21 December 2013 - 10:20 PM

El Patron

    PrestaShop Member

  • Members
  • PipPipPipPipPipPip
  • 14219 Active Posts

vekia rocks...



#5

Posted 22 December 2013 - 06:04 AM

Paulito

    PrestaShop Fanatic

  • Global Moderators
  • 3326 Active Posts

Good morning

 

Another great tutorial from Milos, if you want to see this in action click HERE

 

It took all of ten minutes to achieve

 

Paul


It is better to give more than you receive

aissia.co.uk under construction (be aware this is an adult site)


#6

Posted 22 December 2013 - 03:18 PM

vekia

    PrestaShop Legend

  • Ambassadors
  • 53043 Active Posts

oops, i forgot about images/active-header.gif :)

it's a image for "active" header displayed in the right hand side of header section


free tutorials, free templates, free addons, responsive prestashop modules MndfRK4.png


#7

Posted 22 December 2013 - 05:31 PM

srjacob

    PrestaShop Apprentice

  • Members
  • PipPip
  • 68 Active Posts

Good morning

 

Another great tutorial from Milos, if you want to see this in action click HERE

 

It took all of ten minutes to achieve

 

Paul

Where can I find the tutorial?



#8

Posted 22 December 2013 - 05:34 PM

Paulito

    PrestaShop Fanatic

  • Global Moderators
  • 3326 Active Posts

Just look at #3

 

It tells you all

 

Paul


It is better to give more than you receive

aissia.co.uk under construction (be aware this is an adult site)


#9

Posted 22 December 2013 - 09:36 PM

srjacob

    PrestaShop Apprentice

  • Members
  • PipPip
  • 68 Active Posts

Where would I put the content code?



#10

Posted 22 December 2013 - 11:06 PM

vekia

    PrestaShop Legend

  • Ambassadors
  • 53043 Active Posts

to define content in cms editor use code like this:

you have to use code in CMS editor.


free tutorials, free templates, free addons, responsive prestashop modules MndfRK4.png


#11

Posted 13 January 2015 - 12:21 AM

Cansa

    PrestaShop Newbie

  • Members
  • Pip
  • 14 Active Posts

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).



#12

Posted 13 January 2015 - 05:26 AM

BarryH

    PrestaShop Apprentice

  • Members
  • PipPip
  • 72 Active Posts

vekia rocks...

 

Abso-frickin'-lutely.



#13

Posted 25 May 2016 - 06:19 PM

Maxhrc

    PrestaShop Apprentice

  • Members
  • PipPip
  • 64 Active Posts

Hi Vekia, in my site don't work this accordion? I'm on 1.6.1.4

 

Can I solve this?



#14

Posted 30 July 2016 - 11:44 AM

jgd24

    PrestaShop Apprentice

  • Members
  • PipPip
  • 50 Active Posts

 

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.



#15

Posted 07 December 2016 - 10:52 AM

casadelvigile

    PrestaShop Newbie

  • Members
  • Pip
  • 10 Active Posts

Hello Everyone,

 

Is possible to put this block in product description exactly in More Info??

 

I tried but the animation does not work

 

Thank you




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cookies help us deliver our services. By using our services, you agree to use our cookies.     Learn more