Magento2 Widget – gallery小部件介绍2

在上一篇关于Magento2 Widget – Gallery小部件介绍的博客（在这篇博客中，我们解释了如何构建图像gallery）的基础上，我们还想展示这个小部件可能有另一种的用途。因为它基于Fotorama插件，所以gallery小部件不仅可以处理图像，还可以处理其他HTML内容。我们将通过构建一个客户评价库来演示如何将其显示在web商店的页脚。

我们需要的第一件事是HTML与实际的证明。我们可以选择两个位置中的一个来存储HTML内容。

模板文件中的Gallery内容

构建我们的推荐滑块的一种方法是将所有HTML标记放在一个模板文件中; 我们可以将其命名为client-testimonials.phtml。以便于编辑和自定义，我们将把调用gallery小部件的脚本也放在同一个文件中，所以我们的模板将有以下代码：

<-- Container for testimonials -->
<ul class="testimonials">
 	<li>Testimonial #1</li>
 	<li>Testimonial #2</li>
 	<li>Testimonial #3</li>
 	<li>...</li>
</ul>
<-- Script that calls gallery widget -->
<script>
require ([
'jquery',
'mage/gallery/gallery'
], function ($, Gallery) {
 
    $(function () {
        // parse HTML to get client testimonials in array of objects
        var testimonialsList = document.querySelectorAll(".testimonials li");
        var data = [];
        var i;
        for (i = 0; i < testimonialsList.length; i++) {
            var obj = { html: testimonialsList[i].outerHTML};
            data.push(obj);
        }
 
        $('.testimonials') // we expect that page contains markup tag with class .testimonials
            .each(function (index, element) {
                Gallery({
                    options: {
                        "nav": "dots",
                    },
                    data: data, // contains previously parsed testimonials
                    fullscreen: {}
                }, element); // 'element' is simgle DOM node.
        });
    });
});
</script>

在上面的代码中，image gallery与我们之前博客的唯一区别是data group的内容。与image gallery不同，这里的data group包含我们之前解析并保存在data数组中的HTML内容(作为对象数组)。

由于我们已经提到我们想要在网站页脚中显示推荐，我们将把testimonials.phtml文件放在我们主题的Magento_Theme/template文件夹中并通过default.xml内部Magento_Theme/layout文件夹引用它：

<referenceContainer name="footer-container">
    <block class="Magento\Framework\View\Element\Template" name="testimonials" template="Magento_Cms::testimonials.phtml" before="-"></block>
</referenceContainer>

静态块中的Gallery内容

对于初学者，我们需要将HTML标记（从testimonials.phtml）复制/粘贴到我们的静态块中。至于javascript，我们建议不要把它放在静态块中，因为js脚本中无意的和偶然的变化或输入会破坏整个图库。这就是为什么最好将javascript作为单独的文件保存在主题的web/js文件夹中，并在requirejs-config.js中声明它使用requireJs配置。

var config = {

  "map": {
    "*": {
      "testimonials": "js/testimonials",
    },
  },
};

但是，我们仍然需要在静态块中调用脚本，Magento 2的方法是使用data-mage-init属性：

<ul class="testimonials" data-mage-init='{"testimonials":{}}'>
    <!-- Client testimonials -->
</ul>

我们差不多完成了。在最后一步中，我们需要更新default.xml文件中的指令，因为我们调用的是静态块而不是模板文件，该模版文件不再使用，可以从我们的代码库中删除：

<referenceContainer name=“footer-container">
  <block class="Magento\Cms\Block\Block" name="testimonials" before="-">
    <arguments>
      <argument name="block_id" xsi:type=“string">testimonials</argument>
    </arguments>
   </block>
</referenceContainer>

至于功能，我们的内容库已经完成，之后可以使用css来添加一些风格以在视觉上增强它。