1

I'm using the Magento_Catalog/layout/catalog_product_view.xml and I'm trying to move the Product Details tabs to the top of the page, what is the best practise for this? Move elements through xml or rearrange the blocks in containers? The closest I have gotten so far made them all move to the right side of the page taking up 50% with along with the pricing block. enter image description here

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="mage/gallery/gallery.css"/>
    </head>
    <update handle="catalog_product_opengraph" />
    <update handle="page_calendar"/>
    <body>
        <attribute name="itemtype" value="http://schema.org/Product" />
        <attribute name="itemscope" value="itemscope"/>
        <referenceBlock name="head.components">
            <block class="Magento\Framework\View\Element\Js\Components" name="checkout_page_head_components" template="Magento_Catalog::js/components.phtml"/>
        </referenceBlock>
        <referenceBlock name="page.main.title">
            <arguments>
                <argument name="css_class" xsi:type="string">product</argument>
                <argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="root">
            <arguments>
                <argument name="add_attribute" xsi:type="string">itemscope itemtype="http://schema.org/Product"</argument>
            </arguments>
        </referenceBlock>
        <referenceContainer name="content">
            <container name="product.info.main" htmlTag="div" htmlClass="product-info-main" before="-">
                <container name="product.info.price" label="Product info auxiliary container" htmlTag="div" htmlClass="product-info-price" after="product.info.review">
                    <container name="product.info.stock.sku" label="Product auxiliary info" htmlTag="div" htmlClass="product-info-stock-sku">
                        <container name="product.info.type" before="-"/>
                        <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type">
                            <arguments>
                                <argument name="at_call" xsi:type="string">getSku</argument>
                                <argument name="at_code" xsi:type="string">sku</argument>
                                <argument name="css_class" xsi:type="string">sku</argument>
                                <argument name="at_label" xsi:type="string">default</argument>
                                <argument name="add_attribute" xsi:type="string">itemprop="sku"</argument>
                            </arguments>
                        </block>
                    </container>
                    <block class="Magento\Catalog\Block\Product\View" name="product.info.review" template="product/view/review.phtml" after="product.info.stock.sku" />
                    <block class="Magento\Catalog\Pricing\Render" name="product.price.final" after="product.info.sku">
                        <arguments>
                            <argument name="price_render" xsi:type="string">product.price.render.default</argument>
                            <argument name="price_type_code" xsi:type="string">final_price</argument>
                            <argument name="zone" xsi:type="string">item_view</argument>
                        </arguments>
                    </block>
                </container>
                <block class="Magento\Catalog\Pricing\Render" name="product.price.tier" after="product.info.price">
                    <arguments>
                        <argument name="price_render" xsi:type="string">product.price.render.default</argument>
                        <argument name="price_type_code" xsi:type="string">tier_price</argument>
                        <argument name="zone" xsi:type="string">item_view</argument>
                    </arguments>
                </block>
                <container name="alert.urls" as="alert_urls" label="Alert Urls" after="product.price.tier"/>
                <block class="Magento\Catalog\Block\Product\View" name="product.info" template="product/view/form.phtml" after="alert.urls">
                    <container name="product.info.form.content" as="product_info_form_content">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="product/view/addtocart.phtml"/>
                    </container>
                    <block class="Magento\Framework\View\Element\Template" name="product.info.form.options" as="options_container">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper" as="product_options_wrapper" template="product/view/options/wrapper.phtml">
                            <block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="product/view/options.phtml">
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType" as="default" template="product/view/options/type/default.phtml"/>
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\Text" as="text" template="product/view/options/type/text.phtml"/>
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\File" as="file" template="product/view/options/type/file.phtml"/>
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\Select" as="select" template="product/view/options/type/select.phtml"/>
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\Date" as="date" template="product/view/options/type/date.phtml"/>
                            </block>
                            <block class="Magento\Framework\View\Element\Html\Calendar" name="html_calendar" as="html_calendar" template="Magento_Theme::js/calendar.phtml"/>
                        </block>
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="product/view/options/wrapper/bottom.phtml">
                            <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="product/view/addtocart.phtml"/>
                        </block>
                    </block>
                </block>
                <container name="product.info.extrahint" as="extrahint" label="Product View Extra Hint">
                    <container name="product.info.social" label="Product social links container" htmlTag="div" htmlClass="product-social-links" after="product.info.overview">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="product/view/addto.phtml"/>
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.mailto" template="product/view/mailto.phtml"/>
                    </container>
                </container>
                <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.overview" template="product/view/attribute.phtml" group="detailed_info" after="product.info.extrahint">
                    <arguments>
                        <argument name="at_call" xsi:type="string">getShortDescription</argument>
                        <argument name="at_code" xsi:type="string">short_description</argument>
                        <argument name="css_class" xsi:type="string">overview</argument>
                        <argument name="at_label" translate="true" xsi:type="string">none</argument>
                        <argument name="title" translate="true" xsi:type="string">Overview</argument>
                        <argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
                    </arguments>
                </block>
            </container>
            <container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
                <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="product/view/gallery.phtml"/>
            </container>
            <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="product/view/details.phtml" after="product.info.media">
                <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\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
                    <arguments>
                        <argument translate="true" name="title" xsi:type="string">More Information</argument>
                    </arguments>
                </block>
            </block>
            <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
                <arguments>
                    <argument name="triggers" xsi:type="array">
                        <item name="compareProductLink" xsi:type="string">.action.tocompare</item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
        <referenceContainer name="content.aside">
            <block class="Magento\Catalog\Block\Product\ProductList\Related" name="catalog.product.related" template="Magento_Catalog::product/list/items.phtml">
                <arguments>
                    <argument name="type" xsi:type="string">related</argument>
                </arguments>
            </block>
            <block class="Magento\Catalog\Block\Product\ProductList\Upsell" name="product.info.upsell" template="Magento_Catalog::product/list/items.phtml">
                <arguments>
                    <argument name="type" xsi:type="string">upsell</argument>
                </arguments>
            </block>
            <block class="Magento\Catalog\Block\Product\View\Additional" name="product.info.additional" as="product_additional_data"/>
        </referenceContainer>
        <referenceBlock name="product.info.addtocart">
            <block class="Magento\Catalog\Block\ShortcutButtons\InCatalog" name="addtocart.shortcut.buttons"/>
        </referenceBlock>
        <referenceBlock name="product.info.addtocart.additional">
            <block class="Magento\Catalog\Block\ShortcutButtons\InCatalog" name="addtocart.shortcut.buttons.additional"/>
        </referenceBlock>
    </body>
</page>
1

2 Answers 2

1

Best Effort is use to move element. You can simple call inside default.xml file using move element. No need to rearrange your block inside container.

<move element="sourcename" destination="destinationname" after|before="">

This is the best practice in magento 2.

5
  • There are multiple blocks that make up that part and I'm not sure how to move them all, they are also grouped. Commented May 17, 2016 at 8:06
  • Sorry, that didn't work. Commented May 24, 2016 at 12:51
  • @Rakesh Sir.. i had removed my wishlist by using above method. How can i restore that?
    – Jarnail S
    Commented Dec 12, 2016 at 10:31
  • which code have you keep in your xml file? please show that Commented Dec 12, 2016 at 10:39
  • I replaced deafult.xml file from LUMA theme but it didnt restore wishlist. I put the deafult xml file in Magento_Catalog/layout/deafult.xml and expecting it to restore Wishlist
    – Jarnail S
    Commented Dec 12, 2016 at 10:53
0

My solution was to create a new container and add the blocks in the layout xml referencing that new container.

            <referenceContainer name="content">
        <container name="top.details" before="-">
            <block class="Magento\Catalog\Block\Produ...

... In Context:

        <referenceContainer name="content">
        <container name="top.details" before="-">
            <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="product/view/details.phtml" after="product.info.media">
                <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\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
                    <arguments>
                        <argument translate="true" name="title" xsi:type="string">More Information</argument>
                    </arguments>
                </block>
            </block>
        </container>
        <container name="product.info.main" htmlTag="div" htmlClass="product-info-main" before="-">
            <container name="product.info.price" label="Product info auxiliary container" htmlTag="div" htmlClass="product-info-price" after="product.info.review">
                <container name="product.info.stock.sku" label="Product auxiliary info" htmlTag="div" htmlClass="product-info-stock-sku">
                    <container name="product.info.type" before="-"/>
                    <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type">
                        <arguments>
                            <argument name="at_call" xsi:type="string">getSku</argument>
                            <argument name="at_code" xsi:type="string">sku</argument>
                            <argument name="css_class" xsi:type="string">sku</argument>
                            <argument name="at_label" xsi:type="string">default</argument>
                            <argument name="add_attribute" xsi:type="string">itemprop="sku"</argument>
                        </arguments>
                    </block>
                </container>
                <block class="Magento\Catalog\Block\Product\View" name="product.info.review" template="product/view/review.phtml" after="product.info.stock.sku" />
                <block class="Magento\Catalog\Pricing\Render" name="product.price.final" after="product.info.sku">
                    <arguments>
                        <argument name="price_render" xsi:type="string">product.price.render.default</argument>
                        <argument name="price_type_code" xsi:type="string">final_price</argument>
                        <argument name="zone" xsi:type="string">item_view</argument>
                    </arguments>
                </block>
            </container>
            <block class="Magento\Catalog\Pricing\Render" name="product.price.tier" after="product.info.price">
                <arguments>
                    <argument name="price_render" xsi:type="string">product.price.render.default</argument>
                    <argument name="price_type_code" xsi:type="string">tier_price</argument>
                    <argument name="zone" xsi:type="string">item_view</argument>
                </arguments>
            </block>
            <container name="alert.urls" as="alert_urls" label="Alert Urls" after="product.price.tier"/>
            <block class="Magento\Catalog\Block\Product\View" name="product.info" template="product/view/form.phtml" after="alert.urls">
                <container name="product.info.form.content" as="product_info_form_content">
                    <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="product/view/addtocart.phtml"/>
                </container>
                <block class="Magento\Framework\View\Element\Template" name="product.info.form.options" as="options_container">
                    <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper" as="product_options_wrapper" template="product/view/options/wrapper.phtml">
                        <block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="product/view/options.phtml">
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType" as="default" template="product/view/options/type/default.phtml"/>
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\Text" as="text" template="product/view/options/type/text.phtml"/>
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\File" as="file" template="product/view/options/type/file.phtml"/>
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\Select" as="select" template="product/view/options/type/select.phtml"/>
                            <block class="Magento\Catalog\Block\Product\View\Options\Type\Date" as="date" template="product/view/options/type/date.phtml"/>
                        </block>
                        <block class="Magento\Framework\View\Element\Html\Calendar" name="html_calendar" as="html_calendar" template="Magento_Theme::js/calendar.phtml"/>
                    </block>
                    <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="product/view/options/wrapper/bottom.phtml">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="product/view/addtocart.phtml"/>
                    </block>
                </block>
            </block>
            <container name="product.info.extrahint" as="extrahint" label="Product View Extra Hint">
                <container name="product.info.social" label="Product social links container" htmlTag="div" htmlClass="product-social-links" after="product.info.overview">
                    <block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="product/view/addto.phtml"/>
                    <block class="Magento\Catalog\Block\Product\View" name="product.info.mailto" template="product/view/mailto.phtml"/>
                </container>
            </container>
            <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.overview" template="product/view/attribute.phtml" group="detailed_info" after="product.info.extrahint">
                <arguments>
                    <argument name="at_call" xsi:type="string">getShortDescription</argument>
                    <argument name="at_code" xsi:type="string">short_description</argument>
                    <argument name="css_class" xsi:type="string">overview</argument>
                    <argument name="at_label" translate="true" xsi:type="string">none</argument>
                    <argument name="title" translate="true" xsi:type="string">Overview</argument>
                    <argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
                </arguments>
            </block>
        </container>
        <container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
            <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="product/view/gallery.phtml"/>
        </container>
        <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
            <arguments>
                <argument name="triggers" xsi:type="array">
                    <item name="compareProductLink" xsi:type="string">.action.tocompare</item>
                </argument>
            </arguments>
        </block>
    </referenceContainer>
1
  • plz add code in your answer so another users of community will helpful. Commented May 24, 2016 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.