1

I want to have a block (contains a image and some text, nothing overly fancy) appear on the top of the products in a category page when it is on desktop, then on mobile I want it to be on the bottom of the products in the category page. I have figured out that how to put the block on the top with this XML:

<referenceContainer name="category.product.list.additional">
   <block class="Magento\Cms\Block\Block" name="cat_arista">
       <arguments>
            <argument name="block_id" xsi:type="string">cat_arista</argument>
       </arguments>
   </block>
</referenceContainer>

But how would I adjust this to show up on the bottom for mobile? I was thinking another layout update call, but I'm not sure if that will lead to it showing up twice. I am using Magento 2, and the pearl theme.

Edit:

I don't know what container would be the bottom the of the product list. I am using this list from github, but I'm not sure which one to use.

I also don't think that I can do any css magic because it still will show up in both places?

New edit: The container for the bottom of the product list is content.bottom . I'll post my css magic as an answer if I figure it out!

  • were you able to show it at the bottom? If so, I think you can play it with your custom css – fmsthird Apr 22 at 20:06
  • Hmmm and have something like if it's desktop don't show the bottom one and vice versa? – Morgan Smith Apr 22 at 20:13
  • 1
    yeah exactly. maybe not a Magento standard but I think it will do what you want. – fmsthird Apr 22 at 20:16
  • 1
    Thanks, I'll try that then update the question! – Morgan Smith Apr 22 at 20:18
  • Updated the question – Morgan Smith Apr 23 at 14:40
1

I can think of 3 methods that would work (depending on your DOM structure):


Using two layout blocks You can create two blocks each with a unique name and then hide/display the relevant one using CSS media queries. To add a unique class to each block you can wrap it in another container, something like this:

<referenceContainer name="category.product.list.additional">
    <container name="some.container.top" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container some-container--top">
        <block class="Magento\Cms\Block\Block" name="cat_arista_top">
           <arguments>
                <argument name="block_id" xsi:type="string">cat_arista</argument>
           </arguments>
       </block>
    </container> 
</referenceContainer>

<referenceContainer name="content.bottom">
    <container name="some.container.bottom" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container some-container--bottom">
        <block class="Magento\Cms\Block\Block" name="cat_arista_bottom">
           <arguments>
                <argument name="block_id" xsi:type="string">cat_arista</argument>
           </arguments>
       </block>
    </container> 
</referenceContainer>

Then you can target some-container--bottom and some-container--top with CSS to hide/show the relevant element.

Using Javascript Another method would be to use Javascript alongside the built in matchMedia (JS media queries) to move the element.

Using Flexbox/CSS Grid The cleanest way would be to use Flexbox or CSS Grid and use the order property to position your element, but this depends on your DOM structure.

  • I was trying to avoid creating two blocks, cause I have a lot of pages with unique stuff so I would end making like ~100 blocks to do that way. I'll look into the JS option, because I don't know enough about the DOM for this section of magento to use Flexbox (which I'm using inside the blocks) to order it. Thanks! – Morgan Smith May 1 at 17:13
  • 1
    The top solution worked for me after working on it for a while – Morgan Smith May 1 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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