Magento2 产品页面添加自定义Tab2

在Magento 2中关于定制产品信息选项卡的第一篇博文的后续文章中，我们将讨论重新排序选项卡（标签）。同样，这是一项相当容易的任务。我们已经知道，我们将在Magento目录模块中查看产品页面布局和模板文件。

用于在网页周围重新排序和重新排列元素的标准Magento方法是修改布局（xml）文件，为此，我们将 move 指令与一些属性一起使用，所需的属性是：

element- 用于选择要移动的元素
destination- 用于表示目标元素

可选的，before和after被用于在同一父级下放置目标元素的特定元素之前或之后。

虽然这个布局处理程序有用且易于使用，但是当我们面对重新排序产品选项卡的问题时，它毫无帮助，因此我们需要找到另一种方法。

我们的产品标签的HTML标记存储在module-catalog/view/frontend/templates/product/view文件夹中的details.phtml文件中。检查代码，我们将发现我们的选项卡式导航是根据$detailedInfoGroup数组中的元素位置进行排序的，我们找到了我们想要的，现在我们可以将文件复制到我们的主题范围，只需在foreach循环之前重新声明数组。

// Reposition elements in array
   $detailedInfoGroup = ["reviews.tab", "product.info.description", "product.attributes"]

就是这样！

在上面的示例中，我们移动reviews.tab到数组中的第一个位置，在浏览器中查看产品页面，我们可以看到选项卡式导航的顺序$detailedInfoGroup与模板文件中数组中定义的顺序相同。

这种简单而容易的数组操作可以更改几乎所有情况的标签排序。但是当服务器端脚本我们无法使用时，有一两种情况我们需要依赖javascript或jQuery。

Javascript来救援

作为客户端语言，javascript适用于我们想要根据某些用户代理设置或屏幕分辨率等功能重新排序选项卡的情况。

要编写我们的.js脚本，我们首先来看看选项卡式导航的HTML结构。我们可以看到标签标题和标签内容都是div元素和所有兄弟节点，这意味着它们共用同一个父节点。

在脚本的第一部分中，我们将以一种将选项卡标题和选项卡内容对存储在一个数组元素中的方式在一个数组中获取作为容器div的子类的所有div，即div类=“产品数据项”：

在我们脚本的第一部分中，我们将获得所有div的子元素，即div class="product data items"在一个数组中，这样标签标题和标签内容对就存储在一个数组中:

// Get tab title and tab content pairs in one array
   var container = document.getElementsByClassName('product data items');
   var elements = container[0].children;
   var tabs = []; // declare array to hold our elements
 
   for (var i = 0; i < elements.length; i += 2) {
     var tabTitle   = (elements[i]).outerHTML;
     var tabContent = (elements[i + 1]).outerHTML;
 
     tabs.push(tabTitle + tabContent);
   }

我们脚本的第二部分是一个根据输入对选项卡数组进行排序的函数:

// Function to reorder tabs based on newOrder array
   var result = [];        
   function reorder(tabs, newOrder) {
     for(var i = 0; i < tabs.length; i++) {
       result[i] = tabs[newOrder[i] - 1];
     }
     return result;
   }

最后，我们的第三个代码块是我们声明具有任意元素位置的新数组并调用我们的函数：

// Output reordered elements     
   var newOrder = [3, 1, 2]; // new elements' position
   container[0].innerHTML = null;
   container[0].innerHTML = reorder(tabs, newOrder).join("");

显然，(重新)在模板文件中声明php数组是这两种方法中更简单、更方便的一种。但是，在处理终端用户设备上的不同设置或特性时，我们别无选择，只能使用javascript。