Question

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

我收到了一些很长的短信。我需要一个Read More链接来折叠它们。

“阅读更多”链接必须始终位于第一段或250字符或任何其他限制之后。但是，当我可以通过添加某种短代码将链接自己放在magento后端时更好。喜欢[readmore]或者其他什么。无所谓。

这是我试图做的一个例子。 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页面，类别页面或产品页面中显示，您必须在这些页面中相应地添加以下readmore脚本。您也可以在后端的编辑器中添加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中。演示在这里显示。

enter image description here

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

enter image description here

因此，您需要更改的是根据您的需要编辑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

希望它有所帮助。

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

2 个答案: