Magento2: Thay đổi thứ tự các Tab trên Trang sản phẩm


15

Tôi đang cố gắng thay đổi thứ tự các tab trên trang sản phẩm trong Magento 2. Mặc định là Details|More Information|Reviews.

Tôi đã thử:

Nhà cung cấp / chủ đề / Magento_Catalog / layout / catalog_product_view.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="product.info.description" destination="product.info.details" after="-" />
    </body>
</page>

Nhưng điều đó không hiệu quả, và đó là cách được khuyến nghị cho các yếu tố di chuyển. Tôi đã có thể di chuyển các tab ra khỏi khu vực tab và vào các khu vực khác, cũng như thêm các tab mới, nhưng tôi không thể kiểm soát thứ tự của các tab.

Tôi đoán là nó có cái gì đó để làm với group="detailed_info"; Có vẻ như Magento lấy các thành phần bố cục với thuộc tính này trong XML và lặp qua nó để tạo các tab.

Có cách nào để thay đổi thứ tự các tab mà không cần viết lại mô-đun không?


Bạn đã tìm thấy một câu trả lời cho điều này? Im có cùng một vấn đề.
Alex

Tôi chưa có câu trả lời, xin lỗi.
andyjv

Tôi đã thử sử dụng phần tử di chuyển và đi đến kết luận giống như bạn, chúng có thể được di chuyển ra ngoài các tab nhưng không được đặt hàng bên trong chúng.
Ben Crook

Nó có thể được thực hiện bằng cách bố trí chỉ với một mẹo nhỏ. Hiển thị ở đây: magento.stackexchange.com/questions/106412/ từ
skymeissner

@andyjv vui lòng tìm giải pháp ở đây, điều này có thể giúp bạn đạt được kết quả mong muốn. magento.stackexchange.com/a/242709/52244
Kanhaiya lal

Câu trả lời:


22

Cách tiếp cận của tôi hơi khác một chút nhưng có lẽ là bằng chứng trong tương lai hơn, trong trường hợp thêm các tab mới sau này và thay đổi mức độ ưu tiên / thứ tự của các tab này.

Tôi đã chuyển một đối số cho mỗi tab thông qua Tệp XML trong tệp XML chủ đề của mình

...
<arguments>
    <argument name="priority" xsi:type="string">REPLACE WITH SOME NUMBER</argument>
</arguments>
...

Vì vậy, tệp XML chủ đề của tôi trông giống như thế này:

<referenceBlock name="product.info.details">
        <referenceBlock name="product.info.description">
            <arguments>
                <argument name="priority" xsi:type="string">1</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="product.attributes">
            <arguments>
                <argument name="priority" xsi:type="string">3</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="reviews.tab">
            <arguments>
                <argument name="priority" xsi:type="string">4</argument>
            </arguments>
        </referenceBlock>
        <!-- MY OWN CUSTOM BLOCK ON THE SECOND POSITION -->
        <block class="Magento\Catalog\Block\Product\View\Description" name="product.features" as="features" template="product/view/features.phtml" group="detailed_info">
            <arguments>
                <argument translate="true" name="title" xsi:type="string">Features</argument>
                <argument name="priority" xsi:type="string">2</argument>
            </arguments>
        </block>
        <!-- MY OWN CUSTOM BLOCK ENDS HERE -->
    </referenceBlock>

Hơn nữa chúng ta phải điều chỉnh details.phtml, vì vậy hãy sao chép nó từ

<magento_root>/vendor/magento-catalog-view/frontend/templates/product/view/details.phtml

đến

<magento_root>/app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/details.phtml

Xin lưu ý rằng bản thân của magento details.phtmlcó thể được thay đổi trong các phiên bản hoặc bản vá Magento trong tương lai. Những thay đổi này cũng nên được áp dụng cho chủ đề của bạndetails.phtml

Bây giờ chúng ta cần có mức độ ưu tiên mà chúng ta đã chuyển qua tệp XML.

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <?php
            # We create a new array;
            $newPriority = array();
            # forEach the original $detailedInfoGroup Array;
            foreach ($detailedInfoGroup as $name){
                $alias = $layout->getElementAlias($name);
                # Get the priority which we applied via xml file
                # If no priority is applied via xml file then just set it to 10
                $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '10';
                # variables pushed into new two-dimensional array
                array_push($newPriority, array($name, $priority));
            }
            # Sort array by priority
            usort($newPriority, function($a, $b) {
                return $a['1'] <=> $b['1'];
            });
        ?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php
            # Delete the original forEach statement
            #foreach ($detailedInfoGroup as $name)
            foreach ($newPriority as $name):?>
                <?php
                    # rename $name[0] to $name because it's a two-dimensional array
                    # No further changes to this file, it works as explained
                    $name = $name[0];
                    $html = $layout->renderElement($name);
                    if (!trim($html)) {
                        continue;
                    }
                    $alias = $layout->getElementAlias($name);
                    $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title"
                     aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"
                     data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?php /* @escapeNotVerified */ echo $alias; ?>"
                       id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">
                        <?php /* @escapeNotVerified */ echo $label; ?>
                    </a>
                </div>
                <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">
                    <?php /* @escapeNotVerified */ echo $html; ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

Vì vậy, bạn thấy: Bạn chỉ cần thêm một vài dòng và luôn có thể thay đổi mức độ ưu tiên / thứ tự của các tab thông qua tệp xml, bạn không phải thay đổi details.phtmltrong tương lai nữa.


Làm cách nào chúng tôi có thể hiển thị nội dung của tab "Chi tiết" ở cuối tab "Thông tin thêm"?
Jai

câu hỏi của bạn không đề cập đến câu hỏi ban đầu. bạn nên mở một vé mới Dù sao: Bạn có thể tham chiếu đến một tệp phtml mới trong danh mục catalog_product_view.xml của chủ đề của bạn (ví dụ: mô tả-thuộc tính kết hợp.) Và dán nội dung từ descrption.phtml và thuộc tính gốc.
juhanix

Tôi đã dán nội dung của cả hai tệp trong một và gọi trong các tệp xml là: <ReferenceBlock name = "product.info.details"> <block class = "Magento \ Catalog \ Block \ Product \ View \ Mô tả" name = "sản phẩm.info .descrip.attribut "template =" sản phẩm / view / description-thuộc tính-merg.phtml "group =" detail_info "> <argument> <argument transl =" true "name =" title "xsi: type =" string "> Khác Thông tin </ argument> </ argument> </ block> </ ReferenceBlock> Nhưng trang web trống và chỉ hiển thị nội dung của các tab. Cái gì còn thiếu?
Jai

Tôi đã thêm câu hỏi ở đây: magento.stackexchange.com/q/157376/29175
Jai

@juhanix Điều này đòi hỏi bạn phải chuyển tiếp một mẫu có thể được sửa đổi trong các bản vá Magento sau này. Xem câu trả lời của tôi không sửa đổi bất kỳ tập tin cốt lõi. Hy vọng, đây là một vấn đề cốt lõi có thể được vá.
LordZardeck

14

Đối với Thay đổi vị trí của Tab trong trang chi tiết, Sử dụng tệp cấu hình XML sau hoặc trước thuộc tính không giúp ích trong trường hợp này.

Bạn phải thay đổi từ tập tin mẫu.

Sao chép tập tin chi tiết. Từ lõi vào chủ đề của bạn,

app/design/frontend/Packagename/themename/Magento_Catalog/templates/product/view/details.phtml

Trong tệp này, bạn có thể tìm nạp tất cả tên tab bằng cách sử dụng print_r ($ chi tiếtInfogroup) mà bạn phải nhận giá trị như,

Array
(
    [0] => product.info.description
    [1] => product.attributes
    [2] => reviews.tab
)

Bạn phải đặt theo yêu cầu của bạn trong mảng mới trước khi tìm kiếm trong tệp,

<?php $newOrderTabbing = array('product.info.description',,'reviews.tab','product.attributes'); //custom add ?>,

thêm <?php foreach ($newOrderTab as $name):?>,

Mã hoàn chỉnh trong chi tiết. Tml giống như dưới đây,

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <?php $newOrderTabbing = array('product.info.description','reviews.tab','product.attributes'); //custom added position ?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php foreach ($newOrderTabbing as $name): //custom arrayname?>
                <?php
                    $html = $layout->renderElement($name);
                    if (!trim($html)) {
                        continue;
                    }
                    $alias = $layout->getElementAlias($name);
                    $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title"
                     aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"
                     data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?php /* @escapeNotVerified */ echo $alias; ?>"
                       id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">
                        <?php /* @escapeNotVerified */ echo $label; ?>
                    </a>
                </div>
                <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">
                    <?php /* @escapeNotVerified */ echo $html; ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

Cảm ơn Rakesh Jesadiya, nó hoạt động như một bùa mê ...!
Sarfaraj Sipai

13

Trong Magento 2.3.1 trở lên, chúng ta có thể sử dụng sort_orderđối số trong app/design/frontend/Packagename/themename/Magento_Catalog/layout/catalog_product_view.xmlcấu hình " " xml

<referenceBlock name="product.info.description">
    <arguments>
        <argument name="title" translate="true" xsi:type="string">Description</argument>
        <argument name="sort_order" xsi:type="string">20</argument>
    </arguments>
</referenceBlock>

Đồng thời đảm bảo cập nhật phương thức " getGroupChildNames" với " getGroupSortedChildNames" trong tệp mẫu ( Nếu bạn ghi đè lên nó ) " app/design/frontend/Packagename/themename/Magento_Catalog/templates/product/view/details.phtml".

Phương pháp cũ

<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>

Phương pháp cập nhật

<?php if ($detailedInfoGroup = $block->getGroupSortedChildNames('detailed_info', 'getChildHtml')):?>

Nếu bạn đang ghi đè Magento\Catalog\Block\Product\View\Details.phplớp khối thì lớp khối của bạn cũng sẽ có phương thức cập nhật " getGroupSortedChildNames" đó.


1
Đây chắc chắn là câu trả lời đúng từ 2.3.1 trở đi.
Geat

Nó hoạt động với tôi vào ngày 2.3.2, cảm ơn rất nhiều!
Jared Chu

3

Một cách khác bằng cách sử dụng đối số thứ tự sắp xếp.

Đường dẫn tập tin - app\design\frontend\<companyNAme>\<ThemeName>\Magento_Catalog\layout\catalog_product_view.xml

Thêm đối số thứ tự sắp xếp bên trong thùng chứa khối tham chiếu sản phẩm.info.details.

Mã ví dụ

<block class="Magento\Catalog\Block\Product\View" name="shipping_tab" template="Magento_Catalog::product/view/shipping.phtml" group="detailed_info" >
    <arguments>
    <argument translate="true" name="title" xsi:type="string">Shipping</argument>
    <argument name="sort_order" xsi:type="string">10</argument>
    </arguments>
</block>

Thay đổi giá trị đối số thứ tự sắp xếp thành 10, 20, 30 theo đơn đặt hàng của bạn.


1
câu trả lời hoàn hảo với một ví dụ sort_orderrất quan trọng đối với tôi, +1 đã tạo nên ngày của tôi :)
SagarPPanchal

2

Tôi biết rằng đã có câu trả lời khác cho câu hỏi này, nhưng tất cả chúng đều quá xâm lấn vào sở thích của tôi. Nhìn vào vấn đề, Magento thêm một thuộc tính "nhóm" riêng cho một thành phần và thêm con vào thuộc tính đó theo thứ tự được tải trong bố cục, tách biệt hoàn toàn với mảng con chứa mảng các phần tử được sắp xếp. Để khắc phục điều này, tôi đã viết một plugin đơn giản xung quanh việc sửa lỗi sắp xếp khi truy xuất nhóm trẻ:

class Structure
{
    /**
     * Re-orders the array of group children based on the sort order defined on the parent's children
     *
     * @param \Magento\Framework\Data\Structure $subject
     * @param callable $proceed
     * @param $parentId
     * @param $groupName
     * @return array
     */
    function aroundGetGroupChildNames( \Magento\Framework\Data\Structure $subject, callable $proceed, $parentId, $groupName )
    {
        $sortedList = [];

        // Go ahead and get all the children
        $groupChildNames = $proceed( $parentId, $groupName );

        // If there was no group children, just leave early
        if (empty( $groupChildNames ))
        {
            return $groupChildNames;
        }

        // Go through the order of the parent's children and if it's in the list of group children aggregated above,
        // add it to our own list
        foreach ($subject->getElement( $parentId )['children'] as $childId => $childAlias)
        {
            if (!in_array( $childId, $groupChildNames ))
            {
                continue;
            }

            array_push( $sortedList, $childId );
        }

        return $sortedList;
    }
}

Điều này bây giờ sẽ cho phép bạn đặt hàng các tab bằng cách sử dụng tiêu chuẩn beforeafterthuộc tính trong bố cục XML như bạn mong đợi và có thể sẽ không cần phải sửa đổi trên các bản vá Magento trong tương lai.


LordZardeck hùng mạnh và đáng kính đã đưa ra câu trả lời chính xác. Thêm rất nhiều logic vào một mẫu, như hầu hết các câu trả lời ở trên, chỉ là vấn đề khi cập nhật lên các phiên bản magento mới hơn.
Toombs Nathan

2

Tôi nghĩ bạn chỉ cần thêm chúng theo thứ tự bạn chọn. Đối với tôi, tôi đang sử dụng 4 tab theo thứ tự này:

  1. Chi tiết
  2. Thẻ sản phẩm
  3. Tab tùy chỉnh 1
  4. Tab tùy chỉnh 2

Trong mô-đun tùy chỉnh của tôi, tôi đã tạo tệp bố cục này: catalog_product_view.xml với nội dung này:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\View" name="tab.tags" template="Godogi_Utilities::catalog/product/tab_tags.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Product Tags</argument>
                </arguments>
            </block>
            <block class="Magento\Catalog\Block\Product\View" name="tab.custom.tab.one" template="Godogi_Utilities::catalog/product/custom_tab_1.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab 1</argument>
                </arguments>
            </block>
            <block class="Magento\Catalog\Block\Product\View" name="tab.custom.tab.n" template="Godogi_Utilities::catalog/product/custom_tab_n.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab N</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Bạn có thể thấy rằng tôi đã thêm chỉ 3 tab vì tab chi tiết đã tồn tại. Kết quả là tôi đã có các tab theo thứ tự này:

  1. Thẻ sản phẩm
  2. Tab tùy chỉnh 1
  3. Tab tùy chỉnh 2
  4. Chi tiết

Đó không phải là điều tôi muốn, bây giờ giải pháp của tôi cho việc này là thêm tab Chi tiết một lần nữa, vì vậy tệp bố cục của tôi sẽ như thế này:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
                <arguments>
                    <argument name="at_call" xsi:type="string">getDescription</argument>
                    <argument name="at_code" xsi:type="string">description</argument>
                    <argument name="css_class" xsi:type="string">description</argument>
                    <argument name="at_label" xsi:type="string">none</argument>
                    <argument name="title" translate="true" xsi:type="string">Details</argument>
                </arguments>
            </block>
            <block class="Magento\Catalog\Block\Product\View" name="tab.tags" template="Godogi_Utilities::catalog/product/tab_tags.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Product Tags</argument>
                </arguments>
            </block>
            <block class="Magento\Catalog\Block\Product\View" name="tab.custom.tab.one" template="Godogi_Utilities::catalog/product/custom_tab_1.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab 1</argument>
                </arguments>
            </block>
            <block class="Magento\Catalog\Block\Product\View" name="tab.custom.tab.n" template="Godogi_Utilities::catalog/product/custom_tab_n.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab N</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Bây giờ tôi có thứ tự mà tôi muốn :) nhập mô tả hình ảnh ở đây


1

Theo tôi, cách dễ nhất và tốt nhất là giải pháp của LordZardeck với một plugin. Sau khi cập nhật nhà cung cấp / mô-đun / etc / frontend / di.xml

    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    ...

        <type name="Magento\Framework\Data\Structure">
            <plugin name="vendor_sort_tabs" type="Vendor\Module\Plugins\Structure" sortOrder="0"/>
        </type>

   ...

    </config>

mọi thứ làm việc như mong muốn.

Cảm ơn @LordZardeck về mã sạch!


0

Đây là giải pháp tôi đã sử dụng. Nó sẽ trao đổi tab mô tả và thuộc tính nếu cả hai đều có sẵn. Đây là sử dụng chủ đề Ultimo. Nhưng bạn sẽ nhận được điểm. HÔN.

<?php 
$detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml');

if ($detailedInfoGroup[0] == 'product.info.description' && $detailedInfoGroup[1] == 'product.attributes') {
    $detailedInfoGroup[0] = 'product.attributes';
    $detailedInfoGroup[1] = 'product.info.description';
}

// rest of the code to look through $detailedInfoGroup
?>

0

Giải pháp của tôi cho vấn đề này là sửa đổi các chi tiết mẫu.phtml để nó có được các khối con từ bố cục.

$blocks = $layout->getChildBlocks($block->getNameInLayout());

Bằng cách thực hiện theo cách này, nó tôn trọng thứ tự được đưa ra sautrước khi sửa đổi.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <?php $blocks = $layout->getChildBlocks($block->getNameInLayout());?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php foreach($blocks as $alias=>$child_block):?>
                <?php if(in_array($child_block->getNameInLayout(),$detailedInfoGroup)):?>
                    <?php
                        $html = $child_block->toHtml();
                        if (!trim($html)) {
                            continue;
                        }       
                        $label = $child_block->getData('title');
                    ?>
                    <div class="data item title"
                         aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
                         data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
                        <a class="data switch"
                           tabindex="-1"
                           data-toggle="switch"
                           href="#<?= /* @escapeNotVerified */ $alias ?>"
                           id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
                            <?= /* @escapeNotVerified */ $label ?>
                        </a>
                    </div>
                    <div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
                        <?= /* @escapeNotVerified */ $html ?>
                    </div>
                <?php endif; ?>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

Tôi vẫn sử dụng mảng được cung cấp bởi getgroupChildNames để xác thực nếu khối thuộc về nhóm.

if(in_array($child_block->getNameInLayout(),$detailedInfoGroup))


0

Tôi không muốn làm việc với chủ đề này, tôi muốn sửa đổi hành vi phương thức 'getgroupChildNames'. Cách tiếp cận này sẽ hoạt động ngay cả khi mẫu được sửa đổi.

Tôi đã thêm cái này vào catalog_product_view.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
    <!-- CODE TO REORDER PRODUCT TABS -->
    <block class="Dsy\Ton\Block\Product\View\Description" name="product.info.details.new" template="Magento_Catalog::product/view/details.phtml">
        <!-- ADD MORE BOCKS IF NEEDED -->
    </block>
    <move element="product.info.details.new" destination="content" after="product.info.details"/> 

    <move element="product.info.description" destination="product.info.details.new" after="-"/>
    <move element="product.attributes" destination="product.info.details.new" after="-"/> 

    <referenceBlock name="product.info.details" remove="true"/>
    <!-- CODE TO REORDER PRODUCT TABS -->
  </body>

Sau đó, tạo một khối để thay đổi hành vi 'getgroupChildNames':

<?php

namespace My\Module\Block\Product\View;

use Magento\Catalog\Model\Product;

class Description extends \Magento\Catalog\Block\Product\View\Description
{
    public function getGroupChildNames($groupName)
    {
        if ('detailed_info' === $groupName) {
            return [
                // here you can change the order
                'product.attributes',
                'product.info.description',
            ];
        }

        return parent::getGroupChildNames($groupName);
    }
}

Đó là tất cả.


0

LordZardeck có câu trả lời tốt nhất, nhưng về cơ bản đây là một lỗi và cần được sửa trong lõi.

Giải pháp đơn giản nhất cho vấn đề tôi tìm thấy như sau: Ghi đè lên mẫu Magento_Catalog :: sản phẩm / chế độ xem / chi tiết. Sau điều kiện php đầu tiên trên dòng 10:

if ($detailedInfoGroup = $block->getGroupChildNames(...

thêm mã sau để sửa đổi thứ tự:

$_prepend = array_reverse(['product.overview.description']);
foreach ($_prepend as $_name) {
    $k = array_search($_name,$detailedInfoGroup);
    if ( $k !== false) {
        unset($detailedInfoGroup[$k]);
        array_unshift($detailedInfoGroup,$_name);
    }
}

điều này sẽ thay đổi thứ tự và đẩy tất cả các tab được liệt kê trong $ _prepend vào đầu mảng theo thứ tự được xác định.


0

Hình như tất cả những điều trên không còn phù hợp nữa. Kể từ Magento 2.3.1, chúng ta có thể sử dụngsort_order đối số trong cấu hình xml.


0

Một plugin là một giải pháp tốt đẹp. Nhưng bạn vẫn có thể cải thiện nó. Bạn không muốn viết một plugin khác nhau mỗi lần bạn cần sắp xếp lại các tab. Những gì bạn muốn làm là đặt thứ tự trong xml. Như thế này:

<referenceBlock name="product.info.details">
        <referenceBlock name="product.info.description">
            <arguments>
                <argument name="priority" xsi:type="number">1</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="product.attributes">
            <arguments>
                <argument name="priority" xsi:type="number">3</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="reviews.tab">
            <arguments>
                <argument name="priority" xsi:type="number">4</argument>
            </arguments>
        </referenceBlock>
        <!-- MY OWN CUSTOM BLOCK ON THE SECOND POSITION -->
        <block class="Magento\Catalog\Block\Product\View\Description" name="product.features" as="features" template="product/view/features.phtml" group="detailed_info">
            <arguments>
                <argument translate="true" name="title" xsi:type="string">Features</argument>
                <argument name="priority" xsi:type="number">2</argument>
            </arguments>
        </block>
        <!-- MY OWN CUSTOM BLOCK ENDS HERE -->
    </referenceBlock>

và sau đó, thay vì sửa đổi mẫu, hãy tạo một plugin giúp Magento hiểu priority đối số được sử dụng trong xml config:

class TabOrder
{
    const TABS_BLOCK_NAME = 'product.info.details';
    const ORDER_ARGUMENT_NAME = 'priority';

    public function afterGetGroupChildNames(
        \Magento\Catalog\Block\Product\View\Description $subject,
        array $result
    ) {
        if ($subject->getNameInLayout() === self::TABS_BLOCK_NAME) {
            foreach ($result as $blockName) {
                // get priority for each block and include it in modifiedResult
                $alias = $subject->getLayout()->getElementAlias($blockName);

                // 100 default value guarantees the tab without priority argument goes last
                $blockPosition =
                    $subject->getChildData($alias, self::ORDER_ARGUMENT_NAME) ?? 100;
                $modifiedResult[] = array(
                    $blockName,
                    $blockPosition);
            }

            // order elements from $modifiedResult by priority
            usort($modifiedResult, function ($a, $b) {
                return $a[1] <=> $b[1];
            });

            // remove priority and leave original values only
            array_walk($modifiedResult, function (&$value, $key) {
                $value = $value[0];
            });

            return $modifiedResult;
        }

        return $result;
    }
}

Và cuối cùng, plugin phải được áp dụng cho Magento\Catalog\Block\Product\View\Descriptionlớp trong tệp di.xml.


0

Đối với Magento 2 thay đổi thứ tự các tab trên trang sản phẩm.

Bạn có thể dễ dàng tùy chỉnh thứ tự của tab theo cách đơn giản.

  1. Tạo tập tin chi tiết.

ứng dụng / thiết kế / frontend / nhà cung cấp / chủ đề / Magento_Catalog / mẫu / sản phẩm / view /

Nếu tập tin chi tiết đã tồn tại, vì vậy hãy cập nhật nó.

  1. Thêm mã này trước vòng lặp foreach. Xác định mảng "$ detailInfogroup".

Mã gốc:

<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php foreach ($detailedInfoGroup as $name):?>
                <?php
                    $html = $layout->renderElement($name);
                    if (!trim($html)) {
                        continue;
                    }
                    $alias = $layout->getElementAlias($name);
                    $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title"
                     aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
                     data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?= /* @escapeNotVerified */ $alias ?>"
                       id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
                        <?= /* @escapeNotVerified */ $label ?>
                    </a>
                </div>
                <div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
                    <?= /* @escapeNotVerified */ $html ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?> 

Sau khi thêm mã:

<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>
        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php $detailedInfoGroup = ["product.info.description", "product.attributes", "reviews.tab"]; ?>
            <?php foreach ($detailedInfoGroup as $name):?>
                <?php
                    $html = $layout->renderElement($name);
                    if (!trim($html)) {
                        continue;
                    }
                    $alias = $layout->getElementAlias($name);
                    $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title"
                     aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
                     data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?= /* @escapeNotVerified */ $alias ?>"
                       id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
                        <?= /* @escapeNotVerified */ $label ?>
                    </a>
                </div>
                <div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
                    <?= /* @escapeNotVerified */ $html ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>

Và thêm tab tùy chỉnh trong trang sản phẩm kiểm tra liên kết này

Magento 2 - Tạo tab sản phẩm hiển thị thuộc tính tùy chỉnh

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.