Magento 2- Add custom container into product listing page

Question

I've search for some answers to this but unfortunately I can't seem to find anything. I would really appreciate some help about this.

I have created a custom container using XML in 'catalog_category_view.xml' file and then move other blocks (elements) in there. The idea is to display the container on the product listing page (category page) just next to the product grid. However, I find difficulties with the placement for my new container. I would like to move the container next to the products into the products grid. Is it possible to insert a custom container inside the products listing (ol > li) as a first element.

My idea is to have a grid which has 4 products per row (25% per product) and to start with custom section. So the 4 columns grid and rows would look like this:

50% custom container + 25% product + 25% product

25% product + 25% product + 25% product + 25% product

25% product + 25% product + 25% product + 25% product

Right now I have added the custom container just before the product listing section using XML and then using simple jQueary move the container into the product listing using the following code:

$('.custom-container').detach().prependTo('ol.product-items');

I understand that this is not a perfect solution and that's why I am asking here, any help would be appreciated. Thank you in advance!

Answer 1

It doesn't possible move container in block.. Becuase Container is grouping of blocks. I think it is better that using block. You can render child block in template using getChildHtml method of Block class.

ref) https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-instructions.html ref) https://www.simicart.com/blog/magento-getchildhtml/