Magento 2小部件–相册小部件应用–客户推荐展示

本内容转载自maxiaoke.com，magento专区。

继我们之前关于Magento图库小部件的文章（其中我们解释了如何构建图像库）之后，我们想展示这个小部件的另一种可能用途。因为它基于Fotorama插件，所以画廊小部件不仅可以处理图像，还可以处理其他HTML内容。我们将通过构建客户推荐库来演示如何，我们将在网店的页脚中显示该库。

我们需要的第一件事是带有实际推荐的 HTML。我们可以选择两个地方之一来存储我们的HTML内容。

### 模板文件中的库内容

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

<-- 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>

在上面的代码中，与我们上一篇文章相比，图片库的唯一区别是组的内容。与图像库不同，其中组指定图像的路径，这里的组包含我们之前解析并保存在数组中的HTML内容（作为对象数组）。datadatadatadata

由于我们已经提到我们希望推荐显示在网站页脚中，因此我们将文件放在主题的文件夹中，并通过内部文件夹引用它：testimonials.phtmlMagento_Theme/templatedefault.xmlMagento_Theme/layout

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

对于初学者，我们需要将我们的 HTML 标记（从）复制/粘贴到我们的静态块中。至于javascript，我们建议不要将其放在静态块中，因为js脚本中的非自愿和意外更改或拼写错误可能会破坏整个图库。这就是为什么最好将javascript保存为我们主题文件夹中的单独文件并声明它是使用requireJs的配置文件的原因。

testimonials.phtmlweb/jsrequirejs-config.js
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>

至于功能，我们的内容库已经完成。剩下要做的就是参考网站的风格指南并开始使用 （s）css 来添加一些样式并在视觉上增强它。

### 总结

希望在这个关于Magento画廊小部件的迷你两部分系列中，我们为您提供了足够的输入来构建自己的画廊，图像或HTML内容的天气。正如我们已经提到的，小部件基于Fotorama插件，因此继承了它的所有优点和缺点。

我们认为使用此小部件的最大缺点是它仅限于每张幻灯片的一个项目（图像）。另外值得注意的是，Fotorama插件不再被维护，Magento团队可能会决定在未来的软件版本中放弃使用它，并在其他插件上构建他们的画廊小部件。

但是，目前，此小部件可以安全使用;如果不在生产阶段，则处于开发阶段，以便于原型设计和布局试验。