如何将 jquery readmore 功能（展开/折叠）添加到 magento CMS 页面

Question

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

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

阅读更多链接必须始终位于第一段或超过 250 个字符或任何其他限制之后。但是，当我可以通过添加某种短代码将链接自己放置在 magento 后端时会更好。像 [阅读更多] 什么的。没关系。

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

功能示例 http://jedfoster.com/Readmore.js/

我该怎么做？

Answer 1

下载 readmore.js 并将其添加到模板的 page.xml 中。确保你的路径是正确的，并且你已经使用了正确的 jquery，如果没有，那么也链接 jquery 文件。

    <action method="addJs"><script>readmore.js</script></action>

在后端，始终将您的内容放在具有特定类的 div 中，如下所示，以显示阅读更多链接

    <div class="readmore">.......</div>

根据您希望阅读更多内容在 cms 页面、类别页面或产品页面中显示的位置，您必须在这些页面中相应地添加以下阅读更多脚本。您还可以从后端的编辑器将脚本添加到您的 CMS 页面中。

    <script type="text/javascript">
         jQuery('.readmore').readmore({maxHeight:40});  
    </script>

我们可以在 readmore.js 中使用几个选项，请遵循文档here

当心 jQuery 冲突，您可能需要使用 noConflict() 来使这个 readmore 脚本工作。 希望你能完成这项工作。

Answer 2

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

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

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

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

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

位置：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>

这个文件告诉 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">
            <block type="core/template" name="readmore.script.template" template="programmerrkt/advancedcms/readmore/script.phtml" />
        </reference>
    </cms_page>
</layout>

所以我们在这里为cms_page 处理程序定义了布局。每当请求 CMS 页面时，Magento 都会查找此布局处理程序。所以这个处理程序对我们来说是一个完美的处理程序。接下来我们在标题部分添加了 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="#">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>

如您所见，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 文件来装饰出现在您的 cms 页面中的链接。

补充说明：readmore.js 要求 jquery 大于 1.7.0

希望对您有所帮助。