Responsive search-banner

[marmarquez]

Hello community! This time I have a question regarding the search-banner, is it possible that it is responsive? Can you create a banner for mobile and another for desktop?

reference:

Search

[georgebrindeiro]

I found this paragraph in the documentation you shared:

Now, you can add the last three search blocks: search-banner, did-you-mean and search-suggestions.

Those blocks, differently from autocomplete-result-list.v2, need to be added under the search-result-layout.desktop or the search-result-layout.mobile blocks, according to the Search Results block hierarchy.

I didn’t test it, but from that I understand that the answer is yes:

• search-result-layout.desktop should be used for the desktop layout
• search-result-layout.mobile should be used for the mobile layout

Each search-banner should be listed as one of the children for those blocks. The example below the paragraph I highlighted above illustrates that:

{
  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#did-you-mean",
      "flex-layout.row#suggestion",
      "flex-layout.row#banner-one",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "preventRouteChange": true,
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },

  "flex-layout.row#did-you-mean": {
    "children": ["did-you-mean"]
  },
  "flex-layout.row#suggestion": {
    "children": ["search-suggestions"]
  },
  "flex-layout.row#banner-one": {
    "children": ["search-banner#one"]
  },

  "search-banner#one": {
    "props": {
      "area": "one",
      "blockClass": "myBanner",
      "horizontalAlignment": "center"
    }
  }
}

[marmarquez]

Hi George.

Thanks for answering!

Yes you’re right. And that I did, but that only guarantees that the banner is also displayed for mobile, I can’t differentiate the image that is displayed on mobile from the one that is displayed on desktop, or at least I don’t know how to do it.

When configuring the banner in the admin I can only place an image.

https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/4ViKEivLJtJsvpaW0aqIQ5#

[marmarquez]

I already found the solution:
The block lets you put in html code, so I set it up out there by doing…

<style type="text/css">
@media screen and (max-width:800px) {
       .desktop{
            display: none;
        }
}    
@media screen and (min-width:800px) {
   .mobile{
        display: none;
   }       
}    
</style>
<a href="/"><img class="mobile" src="/arquivos/banner-nike-mob-test.png"/>
<img class="desktop" src="/arquivos/banner-nike-test.png"/></a>

[georgebrindeiro]

Awesome! Great job investigating, thanks for sharing your solution with us!