- 浏览: 13627992 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
magento添加fancy页面 Creating fancy FAQ page in Magento – an easier approach
Introduction
Just keep reading this tutorial which will teach how to create a fancy FAQ with expandable/collapsible feature in an easier approach.
In short, creating a fancy FAQ section can be easily achieved in Magento by using CMS page & jQuery.
Steps
Go to Admin > CMS Pages > Add New Page and implement the following steps:
1. Add FAQ contents
Add the following content in the ‘Content’ > ‘Content’ section of CMS page:
<div class="expand_wrapper"> <h2 class="expand_heading"><a href="#">1. WordPress Theme Development</a></h2> <div class="toggle_container"> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </div> <h2 class="expand_heading"><a href="#">2. Magento E-commerce</a></h2> <div class="toggle_container"> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </div> <h2 class="expand_heading"><a href="#">3. Website Development</a></h2> <div class="toggle_container"> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </div> <h2 class="expand_heading"><a href="#">4. PHP MySql Development</a></h2> <div class="toggle_container"> <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </div> </div>
2. Inject jQuery code
Add the following xml code in ‘Design’ > ‘Layout Update XML’ field of CMS page:
<reference name="head"> <block type="core/text" name="google.cdn.jquery"> <action method="setText"> <text><![CDATA[ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript">jQuery.noConflict();</script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".toggle_container").slice(1).hide();//expands first FAQ content jQuery(".expand_heading:first").addClass("active");//add active class to first FAQ title jQuery("h2.expand_heading").click(function(event){ event.preventDefault() jQuery(this).toggleClass("active"); jQuery(this).next(".toggle_container").slideToggle("slow"); }); }); </script> ]]></text> </action> </block> </reference>
3. You’re done
Go to the frontend and open the FAQ page, you will see as:
来源: http://www.blog.magepsycho.com/creating-fancy-faq-page-in-magento-an-easier-approach/
发表评论
-
Magento: 后台显示图片不能找到 Image file was not found on product tab
2016-08-30 02:22 2879I was uploading some images f ... -
理解WordPress的PingBack和TrackBack
2016-08-26 02:21 5666pingback和trackback的功 ... -
零基础 Amazon Web Services (AWS) 入门教程图文版(四)
2016-06-07 11:40 980自上一篇之后,5天过去了,这篇文章总算是挤出来了... 其实 ... -
零基础 Amazon Web Services (AWS) 入门教程图文版(三)
2016-06-07 11:41 1999原则上WDCP安装好了,就可以直接使用了,FTP、MySQL ... -
零基础 Amazon Web Services (AWS) 入门教程图文版(二)
2016-06-07 01:33 948上一篇讲到,主机正常运转了。但是此时如果直接访问公网IP是 ... -
零基础 Amazon Web Services (AWS) 入门教程图文版(一)
2016-06-07 01:31 21544现在小站唯一的流量都靠AWS这个关键词了,刚好要用AWS重新 ... -
零基础 Amazon Web Services (AWS) 入门教程 (列表)
2016-06-07 01:32 2031在 Amazon Web Services 上托 ... -
Magento 1.9:新订单通知 Admin Order Notifier
2016-06-02 02:48 798Here is a little Mag ... -
Magento 1.9.X 系列教程
2016-05-14 02:44 2243Magento安装下载教学: Magento教程 1 ... -
Magento: 产品页面下jquery change函数失效 Call javascript function onchange product option
2016-05-05 06:39 1693明显的原因是change函数跟magento默认的oncha ... -
Magento: 判断是否为手机浏览 Optimise Web's Mobile Detect Class for Magento
2016-04-29 07:01 1118项目地址:Optimise Web's Mobile Det ... -
Magento: Gird 和 form 区域 Module Development Series – Magento Admin Module
2016-04-28 02:39 632In this tutorial, we are goi ... -
Magento: addAttributeToFilter 和 addFieldToFilter 的区别 Difference between addAttri
2016-04-28 02:34 982addAttributeToFilter is use ... -
Magento: 后台获取menu链接 Getting the admin panel urls
2016-04-28 02:34 733The url for customer page in t ... -
Magento : 调用文件上传 upload file frontend
2016-04-27 01:25 1315bool mkdir ( string $pathname ... -
Magento: 自定义用户登录导向页面 Redirect Customer to Previous Page After Login
2016-04-26 02:45 1815Configuration Settings – L ... -
Magento: 代替flash上传 How to disable Flash uploader in Magento (product images and
2016-04-06 05:04 10831. 替换产品页flash上传按钮 - 使用 Du ... -
Magento: 在客户账户中添加自定义链接 My Account Add Link
2016-04-05 14:05 1193This extension add new link an ... -
Magento: 根据产品属性加载产品信息 Load A Category or Product by an Attribute
2016-03-26 01:35 894Load a Product by ID <?ph ... -
Magento模块开发之数据库SQL操作方法说明
2016-03-26 01:31 1288今天主要来看Magento中的Mysql4/Resource ...
相关推荐
NULL 博文链接:https://justcoding.iteye.com/blog/1711166
In Magento 2, the Full Page Cache (FPC) can be handled by Varnish to give your store a performance boost. There are also external services that you can use as a cache. Chapter 4, Creating Catalogs ...
magento程序添加多个表运费,可以自行设置运费计算公式
In Magento 2, the Full Page Cache (FPC) can be handled by Varnish to give your store a performance boost. There are also external services that you can use as a cache. Chapter 4, Creating Catalogs ...
如何给产品描述里的关键字、字词批量添加链接?我想大家一直在的这样的插件。说实话,我也找了很久,也没有找到。可是由于需要,不得不自己开发一个这样的插件。并支持到Magento1.6.2 说明请查看:...
You’ll start by getting a general understanding of what Magento is, why and how you should use it, and whether it is possible and feasible to migrate from an old web store to Magento 2. As you work ...
NULL 博文链接:https://hudeyong926.iteye.com/blog/1608792
Magento-中文开发教程, 欢迎大家指出错误。 深入理解Magento-第一章 – Magento强大的配置系统 深入理解Magento-第二章 – Magento请求分发与控制器 深入理解Magento-第三章 –...Magento如何重写或新建后台的页面
magento数据结构分析 magento数据字典
NULL 博文链接:https://justcoding.iteye.com/blog/2100394
magento的SMTP插件magento的SMTP插件magento的SMTP插件
NULL 博文链接:https://hudeyong926.iteye.com/blog/1728074
Ability to place any block in any position by easily changing CMS page layout Unlimited number of blocks inside each position Unlimited number of content items inside each block Block items can ...
magik shoes magento 模板, magento 1.7 模板
Magento插件开发手册 Magento Extension Developers Guide
深入理解Magento 由精东博客下载下来制作成pdf
Athlete Magento主题,兼容Magento 1.9.x, 1.8.x, 1.7.x ,特点:完全自适应(响应式布局),自定义子主题,无限颜色,完全自定义,一键安装演示,小工具化横幅系统,颜色选择,MEGA菜单,多商店支持,自定义产品...
Magento Faq插件,用于常见问题解答和收集用户反馈的产品问题
主要包括的内容有:magento的常用设置、Magento模板制作教程、Magento商城_目录结构说明、Magento中文教程实用文档、常用的xml的文件的作用以及自定义模块的应用