Magento2: เปลี่ยนลำดับของแท็บบนหน้าผลิตภัณฑ์


16

ฉันพยายามที่จะเปลี่ยนลำดับของแท็บในหน้าสินค้าในวีโอไอพี 2. Details|More Information|Reviewsเริ่มต้นคือ

ฉันเหนื่อย:

ผู้ขาย / ธีม / Magento_Catalog / รูปแบบ / 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>

แต่นั่นไม่ได้ผลและนั่นเป็นวิธีที่แนะนำสำหรับองค์ประกอบการเคลื่อนไหว ฉันสามารถย้ายแท็บออกจากพื้นที่แท็บและไปยังพื้นที่อื่น ๆ รวมถึงเพิ่มแท็บใหม่ แต่ฉันไม่สามารถควบคุมลำดับของแท็บได้

ฉันเดาว่ามันมีบางอย่างที่เกี่ยวข้องกับgroup="detailed_info"; ดูเหมือนว่าวีโอไอพีจะจับองค์ประกอบเลย์เอาต์ด้วยคุณลักษณะนี้ใน XML และวนซ้ำผ่านมันเพื่อสร้างแท็บ

มีวิธีการเปลี่ยนลำดับของแท็บโดยไม่ต้องเขียนโมดูลใหม่หรือไม่?


คุณพบคำตอบสำหรับสิ่งนี้หรือไม่? ฉันมีปัญหาเดียวกัน
อเล็กซ์

ฉันยังไม่มีคำตอบขอโทษ
andyjv

ฉันลองใช้องค์ประกอบย้ายและมาถึงข้อสรุปเดียวกันกับคุณพวกเขาสามารถเคลื่อนย้ายอยู่นอกแท็บ แต่ไม่ได้สั่งภายในพวกเขา
Ben Crook

มันสามารถทำได้โดยการจัดวางเพียงเล็กน้อยเท่านั้น แสดงที่นี่: magento.stackexchange.com/questions/106412/…
skymeissner

@andyjv โปรดหาวิธีแก้ปัญหาที่นี่ซึ่งอาจช่วยให้คุณบรรลุผลลัพธ์ที่คุณต้องการ magento.stackexchange.com/a/242709/52244
Kanhaiya lal

คำตอบ:


22

แนวทางของฉันแตกต่างกันเล็กน้อย แต่อาจเป็นข้อพิสูจน์เพิ่มเติมในอนาคตในกรณีที่เพิ่มแท็บใหม่ในภายหลังและเปลี่ยนลำดับความสำคัญ / ลำดับของแท็บเหล่านี้

ฉันผ่านการโต้แย้งสำหรับแต่ละแท็บผ่านไฟล์ XML ในไฟล์ XML ธีมของฉัน

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

ดังนั้นไฟล์ XML ของธีมของฉันจึงมีลักษณะดังนี้:

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

ยิ่งไปกว่านั้นเราต้องปรับตัวdetails.phtmlเพื่อคัดลอกจาก

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

ถึง

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

โปรดจำไว้ว่าวีโอไอพีของตัวเองdetails.phtmlอาจมีการเปลี่ยนแปลงในเวอร์ชั่นวีโอไอพีหรือแพทช์ในอนาคต การเปลี่ยนแปลงเหล่านี้ควรนำไปใช้กับธีมของคุณด้วยdetails.phtml

ตอนนี้เราต้องได้รับความสำคัญซึ่งเราส่งผ่านทางไฟล์ 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; ?>

ดังนั้นคุณจะเห็น: คุณเพียงแค่เพิ่มสองสามบรรทัดและสามารถเปลี่ยนลำดับความสำคัญ / ลำดับของแท็บผ่านไฟล์ xml คุณไม่จำเป็นต้องเปลี่ยนdetails.phtmlอีกต่อไปในอนาคต


เราจะแสดงเนื้อหาของแท็บ "รายละเอียด" ที่ด้านล่างของด้านล่างของแท็บ "ข้อมูลเพิ่มเติม" ได้อย่างไร?
อึ๊ง

คำถามของคุณไม่ได้อ้างถึงคำถามเดิม คุณควรเปิดตั๋วใหม่ ต่อไป: คุณสามารถอ้างอิงถึงไฟล์ phtml ใหม่ใน catalog_product_view.xml ธีมของธีมของคุณ (เช่น description-attributes-combination.phtml) และวางเนื้อหาจากต้นฉบับ descrption.phtml และ attributes.phtml
juhanix

ฉันวางเนื้อหาของไฟล์ทั้งสองในไฟล์เดียวและเรียกใช้ในไฟล์ xml เป็น: <referenceBlock name = "product.info.details"> <block class = "Magento \ Catalog \ Block \ Product \ View \ Description \ ชื่อ" = "product.info .description.attributes "template =" ผลิตภัณฑ์ / มุมมอง / คำอธิบายคุณลักษณะรวมกัน .phtml "กลุ่ม =" detail_info "> <arguments> <อาร์กิวเมนต์แปล =" true "ชื่อ =" ชื่อ "xsi: type =" string "> เพิ่มเติม ข้อมูล </argument> </arguments> </block> </referenceBlock> แต่ไซต์เปล่าและแสดงเฉพาะเนื้อหาของแท็บ สิ่งที่ขาดหายไป?
ใจ

ฉันเพิ่มคำถามที่นี่: magento.stackexchange.com/q/157376/29175
Jai

@juhanix สิ่งนี้ต้องการให้คุณดึงแม่แบบที่สามารถแก้ไขได้ใน Magento patches ในภายหลัง ดูคำตอบของฉันซึ่งไม่ได้แก้ไขไฟล์หลักใด ๆ หวังว่านี่เป็นปัญหาหลักที่สามารถแก้ไขได้
LordZardeck

14

สำหรับเปลี่ยนตำแหน่งของการแท็บในหน้ารายละเอียดการใช้ไฟล์การกำหนดค่า XML หลังหรือก่อนแอตทริบิวต์ไม่ได้ช่วยในกรณีนี้

คุณต้องเปลี่ยนจากไฟล์เทมเพลต

คัดลอก details.phtml ไฟล์จากแกนไปยังธีมของคุณ

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

ภายในไฟล์นี้คุณสามารถเรียกชื่อแท็บทั้งหมดโดยใช้print_r ($ detailsInfoGroup) ที่คุณต้องรับค่าเช่น

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

คุณต้องตั้งค่าตามความต้องการของคุณในอาเรย์ใหม่ก่อนที่จะลงบันทึก

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

เพิ่ม<?php foreach ($newOrderTab as $name):?>,

กรอกรหัสใน details.phtml เหมือนด้านล่าง

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

ขอบคุณ Rakesh Jesadiya มันใช้งานได้อย่างมีเสน่ห์ ... !
Sarfaraj Sipai

13

ใน Magento 2.3.1 หรือสูงกว่าเราสามารถใช้sort_orderอาร์กิวเมนต์ในการกำหนดค่า " app/design/frontend/Packagename/themename/Magento_Catalog/layout/catalog_product_view.xml" 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>

ตรวจสอบให้แน่ใจว่าได้อัปเดตวิธี " getGroupChildNames" ด้วย " getGroupSortedChildNames" ในไฟล์เทมเพลต ( หากคุณกำลังเอาชนะ ) " app/design/frontend/Packagename/themename/Magento_Catalog/templates/product/view/details.phtml"

วิธีเก่า

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

วิธีการปรับปรุง

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

ถ้าคุณกำลังเอาชนะMagento\Catalog\Block\Product\View\Details.phpคลาสบล็อกดังนั้นคลาสบล็อกของคุณก็ควรมีวิธีที่ปรับปรุงใหม่getGroupSortedChildNamesเช่นกัน" "


1
นี่เป็นคำตอบที่ถูกต้องตั้งแต่ 2.3.1 เป็นต้นไป
Geat

มันใช้งานได้สำหรับฉันใน 2.3.2 ขอบคุณมาก!
Jared Chu

3

ฉันรู้ว่ามีคำตอบอื่น ๆ สำหรับคำถามนี้ แต่พวกเขาทั้งหมดนั้นรุกรานเกินไปสำหรับรสนิยมของฉัน เมื่อมองถึงปัญหาวีโอไอพีจะเพิ่มแอททริบิวต์ "กลุ่ม" แยกต่างหากให้กับองค์ประกอบและเพิ่มเด็ก ๆ ไปยังแอททริบิวต์ตามลำดับที่โหลดในโครงร่างโดยแยกออกจากอาเรย์ลูกที่มีองค์ประกอบเรียงลำดับ เพื่อที่จะแก้ไขปัญหานี้ฉันได้เขียนปลั๊กอินที่ง่าย ๆ ที่แก้ไขการเรียงเมื่อดึงกลุ่มลูก ๆ :

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

ตอนนี้จะช่วยให้คุณสามารถสั่งซื้อแท็บโดยใช้มาตรฐานbeforeและafterคุณลักษณะในเค้าโครง XML ตามที่คุณคาดหวังและอาจไม่จำเป็นต้องแก้ไขในแพทช์ Magento ในอนาคต


LordZardeck อันยิ่งใหญ่และมีเกียรติได้ให้คำตอบที่ถูกต้อง การเพิ่มตรรกะจำนวนมากให้กับเทมเพลตซึ่งเป็นคำตอบที่กล่าวมาข้างต้นส่วนใหญ่เป็นเพียงการถามถึงปัญหาเมื่ออัปเดตเป็นเวอร์ชั่นวีโอไอพีที่ใหม่กว่า
Nathan Toombs

ใช้สำหรับร้านขาย Magento 2.2.4 ของฉัน! ทำงานเหมือนเวทมนตร์!
ishu

3

อีกวิธีหนึ่งโดยใช้อาร์กิวเมนต์ลำดับการจัดเรียง

เส้นทางไฟล์ - app\design\frontend\<companyNAme>\<ThemeName>\Magento_Catalog\layout\catalog_product_view.xml

เพิ่มอาร์กิวเมนต์การเรียงลำดับภายใน product.info.details คอนเทนเนอร์บล็อกอ้างอิง

รหัสตัวอย่าง

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

เปลี่ยนค่าการเรียงลำดับอาร์กิวเมนต์เป็น 10, 20, 30 ตามคำสั่งของคุณ


1
คำตอบที่สมบูรณ์แบบด้วยตัวอย่างsort_orderเป็นสิ่งสำคัญสำหรับผม +1 ทำวันของฉัน :)
SagarPPanchal

2

ฉันคิดว่าคุณต้องการเพียงเพิ่มพวกเขาในลำดับที่คุณเลือก สำหรับฉันฉันใช้ 4 แท็บตามลำดับนี้:

  1. รายละเอียด
  2. แท็กสินค้า
  3. แท็บที่กำหนดเอง 1
  4. แท็บที่กำหนดเอง 2

ในโมดูลที่กำหนดเองของฉันฉันสร้างไฟล์เลย์เอาต์นี้: catalog_product_view.xml พร้อมเนื้อหานี้:

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

คุณจะเห็นว่าฉันได้เพิ่มเพียง 3 แท็บเพราะมีแท็บรายละเอียดอยู่แล้ว ดังนั้นฉันมีแท็บตามลำดับนี้:

  1. แท็กสินค้า
  2. แท็บที่กำหนดเอง 1
  3. แท็บที่กำหนดเอง 2
  4. รายละเอียด

ซึ่งไม่ใช่สิ่งที่ฉันต้องการตอนนี้โซลูชันของฉันคือเพิ่มแท็บ Details อีกครั้งดังนั้นไฟล์เลย์เอาต์ของฉันจะเป็นดังนี้:

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

ตอนนี้ฉันมีคำสั่งที่ฉันต้องการ :) ป้อนคำอธิบายรูปภาพที่นี่


1

วิธีที่ง่ายที่สุดและดีที่สุดคือในความคิดของฉันทางออกของ LordZardeckกับปลั๊กอิน หลังจากอัพเดตผู้ขาย / โมดูล / 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>

ทุกอย่างทำงานตามที่ต้องการ

ขอบคุณ @LordZardeck สำหรับรหัสที่สะอาด!


0

นี่คือทางออกที่ฉันใช้ มันจะสลับแท็บคำอธิบายและคุณลักษณะหากมีทั้งคู่ นี่คือการใช้ชุดรูปแบบ Ultimo แต่คุณจะได้รับคะแนน จูบ.

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

วิธีแก้ไขปัญหาของฉันคือการแก้ไขเทมเพลตdetails.phtmlเพื่อให้บล็อกลูกจากเลย์เอาต์

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

ด้วยการทำเช่นนี้มันจะเคารพคำสั่งที่กำหนดโดยหลังและก่อนการดัดแปลง

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

ฉันยังคงใช้อาร์เรย์ที่มีให้โดยgetGroupChildNamesเพื่อตรวจสอบว่าบล็อกอยู่ในกลุ่มหรือไม่

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


0

ฉันไม่ต้องการทำงานกับธีมฉันต้องการแก้ไขพฤติกรรมของเมธอด 'getGroupChildNames' วิธีการนี้ควรใช้งานได้แม้ว่าแม่แบบจะได้รับการแก้ไข

ฉันเพิ่มสิ่งนี้ไปยัง 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>

จากนั้นสร้างบล็อกเพื่อเปลี่ยนพฤติกรรม '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);
    }
}

นั่นคือทั้งหมดที่


0

LordZardeck มีคำตอบที่ดีที่สุด แต่นี่เป็นข้อผิดพลาดและควรแก้ไขในแกนกลาง

ทางออกที่ง่ายที่สุดสำหรับปัญหาที่ฉันพบมีดังต่อไปนี้: แทนที่แม่แบบMagento_Catalog :: product / view / details.phtmlและหลังเงื่อนไข php แรกในบรรทัดที่ 10:

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

เพิ่มรหัสต่อไปนี้เพื่อแก้ไขคำสั่ง:

$_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);
    }
}

สิ่งนี้จะเปลี่ยนลำดับและผลักดันแท็บทั้งหมดที่แสดงใน$ _prependไปยังจุดเริ่มต้นของอาร์เรย์ในลำดับที่กำหนดไว้


0

ดูเหมือนว่าทั้งหมดข้างต้นจะไม่เกี่ยวข้องกันอีกต่อไป ณ Magento 2.3.1 เราสามารถใช้sort_orderอาร์กิวเมนต์ใน xml config


0

ปลั๊กอินเป็นทางออกที่ดี แต่คุณยังสามารถปรับปรุงได้ คุณไม่ต้องการเขียนปลั๊กอินอื่นทุกครั้งที่คุณต้องการเรียงลำดับแท็บใหม่ สิ่งที่คุณต้องการทำคือตั้งค่าลำดับใน xml แบบนี้:

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

จากนั้นแทนที่จะสร้างแม่แบบให้สร้างปลั๊กอินที่จะทำให้ Magento เข้าใจ priorityอาร์กิวเมนต์ที่ใช้ในการกำหนดค่า xml:

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

และสุดท้ายต้องใช้ปลั๊กอินกับMagento\Catalog\Block\Product\View\Descriptionคลาสในไฟล์ di.xml


0

สำหรับ Magento 2 เปลี่ยนลำดับของแท็บในหน้าผลิตภัณฑ์

คุณสามารถปรับแต่งลำดับของแท็บได้อย่างง่ายดาย

  1. สร้างไฟล์ details.phtml ใน

app / ออกแบบ / ส่วนหน้า / ผู้ขาย / ธีม / Magento_Catalog / แม่ / สินค้า / มุมมอง /

หากไฟล์ details.phtml มีอยู่แล้วโปรดอัปเดต

  1. เพิ่มรหัสนี้ก่อน foreach loop กำหนดอาร์เรย์ "$ detailInfoGroup"

รหัสเดิม:

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

หลังจากเพิ่มรหัส:

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

และเพิ่มแท็บที่กำหนดเองในหน้าผลิตภัณฑ์ตรวจสอบลิงค์นี้

Magento 2 - สร้างแท็บผลิตภัณฑ์ที่แสดงแอตทริบิวต์ที่กำหนดเอง

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.