Move “Cross Selling” products inside the “Related Product” tab in Product Page

magento.stackexchange https://magento.stackexchange.com/questions/313177

Question

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>
Was it helpful?

Solution

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');
?>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top