How to move an extension's product tab sort order?

Magento 2 Frontend Design
1

I’ve been wrestling with this all day and it’s driving me crazy. I am using bss commerce’s extension for customer product image uploads. I can’t really find any other options for this. For some reason, they have made this so the tab is the first tab on the product page. I would like to move it to the last position. I have read the below article, among many others: https://magento.stackexchange.com/questions/110796/magento2-change-order-of-tabs-on-product-page

I would think that you could change/force a position within the extension’s config_product_view.xml file. I have tried adding the following two arguments into the file, however it has so far been a complete failure. Must I really also override the details.phtml and/or details.php files to accomplish?

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Bss_ProductImagesByCustomer::js/fancybox/dist/jquery.fancybox.css" />
        <css src="Bss_ProductImagesByCustomer::js/OwlCarousel2-2.2.1/dist/assets/owl.carousel.css" />
        <css src="Bss_ProductImagesByCustomer::js/OwlCarousel2-2.2.1/dist/assets/owl.theme.default.css" />
    </head>
    <body>
        <referenceBlock name="product.info.details">
            <block class="Bss\ProductImagesByCustomer\Block\SliderTabProduct" ifconfig="bss_product_image_by_customer/bss_product_image_by_customer_general/enable" name="bss_productimagesbycustomer_tab" template="Bss_ProductImagesByCustomer::SliderTabProduct.phtml" group="detailed_info"/>
            <arguments>
    			<argument translate="true" name="title" xsi:type="string">SliderTabProduct</argument>  
    			<argument name="sort_order" xsi:type="string">60</argument>
    		</arguments>
        </referenceBlock>
    </body>
</page>
2

I dealt with moving blocks a few times this year. Finding the block it get’s attached to can be a bit of trial and error.

To make changes to the Product Page XML Blocks, you’ll need to create/edit the following file:

app/design/frontend/THEME/CHILD_THEME/Magento_Catalog/layout/catalog_product_view.xml

Then (as I mentioned), it’s a bit of trial and error. I’d start by inserting the afformentioned lines into the <body> section of that file:

        <referenceBlock name="product.info.details">
            <block class="Bss\ProductImagesByCustomer\Block\SliderTabProduct" ifconfig="bss_product_image_by_customer/bss_product_image_by_customer_general/enable" name="bss_productimagesbycustomer_tab" template="Bss_ProductImagesByCustomer::SliderTabProduct.phtml" group="detailed_info"/>
            <arguments>
    			<argument translate="true" name="title" xsi:type="string">SliderTabProduct</argument>  
    			<argument name="sort_order" xsi:type="string">60</argument>
    		</arguments>
        </referenceBlock>

It’s also best to turn of FPC, Layout and Block HTML output caches during testing so that you don’t have to keep refreshing the cache to test changes.

Those are the only tips I have for you.

3

I appreciate it. Every little bit helps!

4

I was so close on the first attempt. I decided to let the BSS team figure it out or at least tell me they would or wouldn’t. My solution likely would have worked, but I needed to keep the arguments within the “block” tags. Currently the block tag is self closing. Here is the solution. This is the ONLY change that had to be made. No messing with other files.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Bss_ProductImagesByCustomer::js/fancybox/dist/jquery.fancybox.css" />
        <css src="Bss_ProductImagesByCustomer::js/OwlCarousel2-2.2.1/dist/assets/owl.carousel.css" />
        <css src="Bss_ProductImagesByCustomer::js/OwlCarousel2-2.2.1/dist/assets/owl.theme.default.css" />
    </head>
    <body>
        <referenceBlock name="product.info.details">
            <block class="Bss\ProductImagesByCustomer\Block\SliderTabProduct" ifconfig="bss_product_image_by_customer/bss_product_image_by_customer_general/enable" name="bss_productimagesbycustomer_tab" template="Bss_ProductImagesByCustomer::SliderTabProduct.phtml" group="detailed_info">
            <arguments>  
    			<argument name="sort_order" xsi:type="string">100</argument>
    		</arguments>
    		</block>
        </referenceBlock>
    </body>
</page>
1 Like
5

Thanks for the update. Can you clarify which file you updated for that? If it was a “core” module file then I imagine your changes could be overwritten during an update. Whereas, the file I recommended would be best practice - Albeit, I’m aware you may not have tested your solution by editing that particular file yet.

6

So… I would typically agree with you to change the default tabs, however…

This tab was created through an extension that allows customers to upload images so they can show the product. Upon approval they get added to the product page they uploaded them on. This created a fourth tab (Images, details, additional information, reviews). It was placed first. I figured the position had to be able to be configured within the extension’s files. The file I went straight to was: vendor/bsscommerce/product-images-by-customer/view/frontend/layout/catalog_product_view.xml

This was the file that needed changed. The update will be included in future releases of this extension as it should never be in the first position. Prior to magento 2.3.1, tab handling was either not working properly or was different. This is where the issues arises since my dev store is on 2.3.5-p2.

Unrelated:
Yes, I have been working on this site forever, lol. I’ve gone through 3 designs and am so glad I ended up just manipulating Luma as a child theme. I’m just trying to tie up loose ends before preparing for launch. Through optimization, I have the page sizes down to 600-750kb and 20% of that is probably jquery that is loading through amazon pay, which should be changed when I update to 2.4.1. That will provide a very nice boost to pagespeed and responsiveness.

1 Like
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.