0

I modified the catalog_product_view.xml to created a "Related Product" tab, and show related product in the tab. Also, there is a cross sell section show under Every tab. How do I move the Cross-selling product into the "Related Product" tab?

enter image description here

<?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">
    <head>
        <script src="Amasty_Faq::js/section/product-url.js"/>
    </head>
    <body>

        <referenceContainer name="content">
            <block class="Infortis\Base\Block\Product\View" name="product-view-wrapper" template="product/view.phtml" before="-">
                <container name="container_product_image_1" label="Product View, Image Column" />
                <container name="container_product_primary_1" label="Product View, Primary Column, Container 1" />
                <container name="container_product_primary_2" label="Product View, Primary Column, Container 2" />
                <container name="container_product_secondary_1" label="Product View, Secondary Column, Container 1" />
                <container name="container_product_secondary_2" label="Product View, Secondary Column, Container 2" />
                <container name="container_product_lower_primary_1" label="Product View, Lower Primary Column, Container 1" />
                <container name="container_product_lower_primary_2" label="Product View, Lower Primary Column, Container 2" />
                <container name="container_product_lower_secondary_1" label="Product View, Lower Secondary Column, Container 1" />
                <container name="container_product_lower_secondary_2" label="Product View, Lower Secondary Column, Container 2" />

                <!-- Static blocks -->
                <block class="Magento\Cms\Block\Block" name="block_product_secondary_bottom">
                    <arguments>
                        <argument name="block_id" xsi:type="string">block_product_secondary_bottom</argument>
                    </arguments>
                </block>
            </block>
        </referenceContainer>

        <!-- Insert product view blocks into the new product view wrapper -->
        <move element="product.info.main" destination="product-view-wrapper" />
        <move element="product.info.media" destination="product-view-wrapper" />
        <move element="bundle.options.container" destination="product-view-wrapper" />
        <move element="product.info.details" destination="product-view-wrapper" />
        <!--<move element="catalog.product.related" destination="product-view-wrapper" />-->            <!-- removed infortis ultimo related product section-->     
        <referenceBlock name="catalog.product.related" remove="true"/> <!-- remove magento default related section-->
        <referenceBlock name="product.info.upsell" remove="true"/> <!-- remove magento default upsell section-->        


        <!-- Move some blocks to new positions -->
        <!-- <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final" /> -->
        <!-- <move element="product.info.social" destination="product.info.main" after="-" /> -->
        <move element="product.info.overview" destination="product.info.main" before="product.info.price" />
        <referenceBlock name="product.info.overview" remove="true"/>
        <move element="product.info.description" destination="product.info.main" before="product.info.price" />
        <move element="container_product_primary_1" destination="product.info.main" before="product.info.price" />
        <!-- <move element="container_product_primary_2" destination="product.info.main" after="-" /> -->

        <!-- Move some blocks outside the "product.info.main" to manipulate their position inside template file -->
        <move element="page.main.title" destination="product-view-wrapper" />
        <move element="product.info.review" destination="product-view-wrapper"/>

        <!-- Product collateral data (tabs) -->
        <referenceBlock name="product.attributes" remove="true"/> <!-- remove more information tab-->
        <referenceBlock name="product.info.details" template="Infortis_Base::product/view/details.phtml" >
            <!--Adding custom main tab Tab-->
            <block class="Magento\Catalog\Block\Product\View" name="product.info.xxxx.description" as="xxxxdetail" template="product/view/xxxx_main_details.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Overview</argument>
                </arguments>
            </block>
            <!--End of custom main tab Tab-->
            <!--Adding custom tech-Specification Tab-->
            <block class="Magento\Catalog\Block\Product\View" name="xxxxspec.tab" as="xxxxspec" template="product/view/xxxx_specs_tab.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Specifications</argument>
                </arguments>
            </block>
            <!--End custom requirement Tab-->
                        <!--Adding custom tech-Specification Tab-->
            <block class="Magento\Catalog\Block\Product\View" name="xxxxrequirement.tab" as="xxxxrequirement" template="product/view/xxxx_requirement_tab.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Requirement/Contents</argument>
                </arguments>
            </block>
            <!--End custom requirement Tab-->
            <!--channel code block-->
            <referenceBlock name="product.info.details">
                <block class="Magento\Catalog\Block\Product\View\Description" name="channel_codes" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info">
                    <arguments>
                        <argument name="at_call" xsi:type="string">getChannelCodes</argument>
                        <argument name="at_code" xsi:type="string">channelcodes</argument>
                        <argument name="css_class" xsi:type="string">channel_codes</argument>
                        <argument name="at_label" xsi:type="string">channel_codes</argument>
                        <!--<argument name="add_attribute" xsi:type="string">itemprop="channel_codes"</argument>-->
                        <argument name="title" translate="true" xsi:type="string">Channel Codes</argument>
                    </arguments>
                </block>
            </referenceBlock>
            <!--end of channel code block-->
            <!--download block-->
            <block class="Magento\Catalog\Block\Product\View" name="download.tab" as="download" template="Kw_Removetab::download_info.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Downloads</argument>
                </arguments>
            </block>
            <!--end of download block-->
            <arguments>
                <argument name="show_tabs" xsi:type="helper" helper="Infortis\Base\Helper\Template\Catalog\Product\View::showTabs" />
            </arguments>
            <!-- Custom static blocks as tabs -->
            <block class="Magento\Cms\Block\Block" name="product_cms_block1" group="detailed_info">
                <arguments>
                    <argument name="block_id" xsi:type="string">block_product_tab1</argument>
                    <argument name="title" xsi:type="helper" helper="Infortis\Base\Helper\Template\Catalog\Product\View::getStaticBlockTitle">
                        <param name="id">block_product_tab1</param>
                    </argument>
                </arguments>
            </block>
            <block class="Magento\Cms\Block\Block" name="product_cms_block2" group="detailed_info">
                <arguments>
                    <argument name="block_id" xsi:type="string">block_product_tab2</argument>
                    <argument name="title" xsi:type="helper" helper="Infortis\Base\Helper\Template\Catalog\Product\View::getStaticBlockTitle">
                        <param name="id">block_product_tab2</param>
                    </argument>
                </arguments>
            </block>
        </referenceBlock>

        <!-- removed infortis ultimo related product section-->
        <!--
        <referenceBlock name="catalog.product.related">
            <action method="setTemplate">
                <argument name="template" xsi:type="helper" helper="Infortis\Base\Helper\Template\Catalog\Product\View::getRelatedProductsTemplate" />
            </action>
        </referenceBlock>
        -->

        <!-- related product tab-->
        <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\ProductList\Related" name="product.info.related" template="Magento_Catalog::product/list/items.phtml" group="detailed_info">
                <arguments>
                    <argument name="type" xsi:type="string">related</argument>
                    <argument translate="true" name="title" xsi:type="string">Related Products</argument>
                    <argument name="sort_order" xsi:type="string">40</argument>
                </arguments>                
            </block>
        </referenceBlock>   

        <!--cross sell-->
            <referenceContainer name="content.aside">
                <block class="Magento\Catalog\Block\Product\ProductList\Crosssell" name="catalog.product.crosssell" template="Magento_Catalog::product/list/items.phtml">
                    <arguments>
                        <argument name="type" xsi:type="string">crosssell</argument>
                    </arguments>
                    <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="crosssell.product.addto" as="addto">
                    <!--<block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                           name="crosssell.product.addto.compare" as="compare"
                           template="Magento_Catalog::product/list/addto/compare.phtml"/>-->
                    </block>
                </block>
            </referenceContainer>
        <!-- end of cross sell-->

    </body>
</page>
Improve this question
2
  • i am not sure but try two <move element="catalog.product.crosssell" destination="product.info.related" after="-"/> and second <move element="catalog.product.crosssell" destination="product.info.details" after="-"/>
    – Mohit Patel
    Commented May 20, 2020 at 4:12
  • I tried both of them, and i actually tried something similar earlier. It just make the Cross Sell section disappeared from the page. I think it is something due to the difference between referenceBlock and referenceContainer? i haven't understand them quite well.
    – Mage Explorer
    Commented May 20, 2020 at 4:30

1 Answer 1

Reset to default
2

If you want to add related product and cross sale product in tab then use below code.

First, create a file with name: catalog_product_view.xml and save it under: app/design/frontend///Magento_Catalog/layout/catalog_product_view.xml. Add the following code into the file

<?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>
        <referenceContainer name="content.aside">
            <block class="Magento\Catalog\Block\Product\ProductList\Crosssell" name="catalog.product.crosssell" template="Magento_Catalog::product/list/items.phtml">
                <arguments>
                    <argument name="type" xsi:type="string">crosssell</argument>
                </arguments>
                <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="crosssell.product.addto" as="addto">
                </block>
            </block>
        </referenceContainer>
        <referenceBlock name="product.info.details">
          <block class="Magento\Framework\View\Element\Template" name="product.info.related" template="info.phtml" group="detailed_info">
            <arguments>
              <argument translate="true" name="title" xsi:type="string">Related Products</argument>
              <argument name="sort_order" xsi:type="string">40</argument>
            </arguments>
          </block>
        </referenceBlock>
        <move element="catalog.product.related" destination="product.info.related" after="-" />
        <move element="catalog.product.crosssell" destination="product.info.related" after="-" />
</body>
</page>

Second, create a file with name: info.phtml and save it under: app/design/frontend///Magento_Catalog/templates/info.phtml. Add the following code into the file

<?php
 echo $block->getChildHtml('catalog.product.related');
 echo $block->getChildHtml('catalog.product.crosssell');
?>
Improve this answer
1
  • thank you! it works with minor modifications!
    – Mage Explorer
    Commented May 26, 2020 at 20:02

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.