如何将jquery readmore函数（展开/折叠）添加到magento CMS页面 [英] How to add jquery readmore function (expand/collapse) to magento CMS pages

问题描述

我需要在我的Magento CMS页面中阅读更多按钮链接。

我收到了一些长的cms文本。我需要一个阅读更多链接来折叠它们。

阅读更多链接必须始终位于第一段或250字符或任何其他限制之后。但是，通过添加某种简码，我可以将链接自己放入magento后端，这样会更好。像[readmore]或其他东西。无所谓。

这是我试图做的一个例子。
http://www.feestding.nl/themakleding/ beste-thema-s / halloween-kostuums /

特征示例
http://jedfoster.com/Readmore.js/

我该怎么做？

解决方案

您可以通过实现自定义扩展来实现此功能。我会告诉你我们需要采取的步骤来实现这一目标。所以我们的扩展应该有一个名字 Programmerrkt_AdvancedCms 。

第一步是激活我们的模块。为此，在etc / modules中添加此文件

位置： app / etc / modules / Programmerrkt_AdvancedCms.xml

 < config> 
<模块> 
< Programmerrkt_AdvancedCms> 
< active> true< / active> 
< codePool>本地< / codePool> 
< / Programmerrkt_AdvancedCms> 
< / modules> 
< / config> 
  

下一步是定义模块的配置。让我们做到这一点。

位置： app / code / local / Programmerrkt / AdvancedCms / etc / config.xml

 < config> 
<模块> 
< Programmerrkt_AdvancedCms> 
< version> 1.0.0< / version> 
< / Programmerrkt_AdvancedCms> 
< / modules> 
< frontend> 
< layout> 
<更新> 
< programmerrkt_advancedcms> 
< file> programmerrkt_advancedcms.xml< / file> 
< / programmerrkt_advancedcms> 
< /更新> 
< / layout> 
< / frontend> 
< / config> 
  

这个文件告诉Magento我们的模块有一个用于前端部分的布局文件。而已。我们的布局文件是我们模块的核心。它将持有我们模块的重要部分。让我们定义我们的布局文件。

位置： app / design / frontend /< your_package> /< your_theme> / layout / programmerrkt_advancedcms。 xml

 < layout> 
< cms_page> 
< reference name =head> 
< action method =addItem> 
< type> skin_css< / type> 
< name> css / customcss / readmore.css< / name> 
< / action> 
< action method =addItem> 
< type> skin_js< / type> 
< name> js / jquery1.js< / name> 
< / action> 
< action method =addItem> 
< type> skin_js< / type> 
< name> js / customjs / readmore.js< / name> 
< / action> 
< / reference> 
< reference name =before_body_end> 
 < / reference> 
< / cms_page> 
< / layout> 
  

所以我们在这里定义了 cms_page 处理程序的布局。 Magento会在请求CMS页面时寻找这个布局处理程序。所以这个处理程序对我们来说是个完美的处理程序接下来，我们在标题部分添加了jquery和readmore.js。最后，我们定义了一个模板文件 script.phtml 来保存我们自定义的javascript代码。请注意，我们在页面底部包含了该模板。这将确保我们的自定义代码将被完美地调用。

现在我们的script.phtml应该是这样的。

位置： app / design / frontend /< yourpackag> /< your_theme> /template/programmerrkt/advancedcms/readmore/script.phtml

 < script type =text / javascript> 
 //<！[CDATA [
 $ j（'＃readomore-demo'）。readmore（{
 moreLink：'< a href =＃>更多示例和选项< / a>'，
 maxHeight：100，
 afterToggle：function（trigger，element，expanded）{
 if（！expanded）{//单击关闭链接$ （{html，body'）。animate（{scrollTop：element.offset（）。top}，{duration：100}）; 
} 
} 
}） ; 
 //]]> 
< / script> 
  

您可以看到 readmore（）方法在ID为 readomore-demo 的元素上调用。因此，需要将您的cms页面的所有内容都包含在此ID内。演示如下。

我们完成了。我们的输出将如下所示。

>

因此，您只需要根据需要修改 script.phtml 文件。

注意：请记住，您需要添加jquery才能正确使用此模块。如果你安装了jquery，那么删除在布局文件中添加jquery的代码。您还需要下载 readmore.js ，并且必须将其包含在 skin / frontend /< your_package /< your_theme> / js / customjs / readmore.js 。同样，在 skin / frontend /< your_package /< your_theme> /css/customcss/readmore.css 中添加css文件。您可以使用此css文件来修饰出现在您网页的链接。

/ code>要求jquery大于1.7.0

希望它有帮助。

I need a read more button link in my Magento CMS pages.

I got some long cms texts. I need a Read More link to collapse them.

The Read More link has to be always after the first paragraph or ofter 250 character or any other limitation. But it is better when I can place the link myself in the magento backend by adding some kind of shortcode. like [readmore] or something. Doesn't matter what.

this is an example what im trying to do. http://www.feestding.nl/themakleding/beste-thema-s/halloween-kostuums/

example of the feature http://jedfoster.com/Readmore.js/

how can i do it?

解决方案

You can achieve this functionality by implementing a custom extension. I will show you the steps that we need to take to achieve this. So our extension should have a name Programmerrkt_AdvancedCms.

First step is activating our module. For this add this file in etc/modules

Location : app/etc/modules/Programmerrkt_AdvancedCms.xml

<config>
    <modules>
        <Programmerrkt_AdvancedCms>
            <active>true</active>
            <codePool>local</codePool>
        </Programmerrkt_AdvancedCms>
    </modules>
</config>

Next step is to define configuration of our module. Let us do that.

Location : app/code/local/Programmerrkt/AdvancedCms/etc/config.xml

<config> 
    <modules>
        <Programmerrkt_AdvancedCms>
            <version>1.0.0</version>
        </Programmerrkt_AdvancedCms>
    </modules>
    <frontend>
        <layout>
            <updates>
                <programmerrkt_advancedcms>
                    <file>programmerrkt_advancedcms.xml</file>
                </programmerrkt_advancedcms>
            </updates>
        </layout>
    </frontend>
</config>

This file tells to Magento that our module has a layout file for frontend section. That's it. Our layout file is the heart of our module. It is going to hold the important parts of our module. Let us define our layout file.

Location : app/design/frontend/<your_package>/<your_theme>/layout/programmerrkt_advancedcms.xml

<layout>
    <cms_page>
        <reference name="head">
            <action method="addItem">
                <type>skin_css</type>
                <name>css/customcss/readmore.css</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/jquery1.js</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/customjs/readmore.js</name>
            </action>
        </reference>
        <reference name="before_body_end">
            <block type="core/template" name="readmore.script.template" template="programmerrkt/advancedcms/readmore/script.phtml" />
        </reference>
    </cms_page>
</layout>

So here we defined layout for cms_page handler. Magento will look for this layout handler whenever a request for CMS page is made. So this handler would be a perfect handler for us. Next we added jquery and readmore.js in header section. Then at last we defined a template file script.phtml for holding our custom javascript code. Note that we included this template at the bottom of page. This will ensure that, our custom code will invoked perfectly.

Now our script.phtml should look like this.

Location : app/design/frontend/<yourpackag>/<your_theme>/template/programmerrkt/advancedcms/readmore/script.phtml

<script type="text/javascript">
//<![CDATA[
$j('#readomore-demo').readmore({
    moreLink: '<a href="#">More examples and options</a>',
    maxHeight: 100,
    afterToggle: function(trigger, element, expanded) {
      if(! expanded) { // The "Close" link was clicked
        $j('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
      }
    }
  });
//]]>
</script>

As you can see readmore() method is called on an element with an id readomore-demo. So it is required that, you need to enclose all the content your cms page inside this id. Demo is shown here.

We are done. Our output will look like this.

So only thing you need to change is edit script.phtml file according to your needs.

Note: Remember you need to add jquery for proper working of this module. If you have jquery installed, then remove the code that add jquery in layout file. Also you need to download readmore.js and has to include it in skin/frontend/<your_package/<your_theme>/js/customjs/readmore.js. Similarly add css file in skin/frontend/<your_package/<your_theme>/css/customcss/readmore.css. You can use this css file to decorate links appear in your cms page.

Additional Note: readmore.js requires jquery greater than 1.7.0

Hope it helps.

这篇关于如何将jquery readmore函数（展开/折叠）添加到magento CMS页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！