Showing banners in between search results

Hi VTEX Community I want to show the banners in between the search results. How can I do that? I have tried something but its not working please suggest the way to display banners in between the search result products

{

  "store.search": {

    "blocks": [

      "search-result-layout"

    ],

    "props": {

      "context": {

        "skusFilter": "ALL",

        "simulationBehavior": "skip"

      }

    }

  },

  "store.search#brand": {

    "blocks": [

      "search-result-layout"

    ],

    "props": {

      "context": {

        "orderByField": "OrderByReleaseDateDESC",

        "hideUnavailableItems": true,

        "maxItemsPerPage": 10,

        "skusFilter": "ALL",

        "simulationBehavior": "skip"

      }

    }

  },

  "store.search#department": {

    "blocks": [

      "search-result-layout"

    ],

    "props": {

      "context": {

        "skusFilter": "ALL",

        "simulationBehavior": "skip"

      }

    }

  },

  "store.search#category": {

    "blocks": [

      "search-result-layout"

    ],

    "props": {

      "context": {

        "skusFilter": "ALL",

        "simulationBehavior": "skip"

      }

    }

  },

  "store.search#subcategory": {

    "blocks": [

      "search-result-layout"

    ],

    "props": {

      "context": {

        "skusFilter": "ALL",

        "simulationBehavior": "skip"

      }

    }

  },

  "search-result-layout": {

    "blocks": [

      "search-result-layout.desktop",

      "search-result-layout.mobile",

      "search-not-found-layout"

    ]

  },

  "search-result-layout.desktop": {

    "children": [

      "image#example",

      "rich-text#heading1",

      "rich-text#body1",

      "flex-layout.row#searchbread",

      "flex-layout.row#searchtitle",

      "flex-layout.row#result",

      "flex-layout.row#Demobanner"

    ],

    "props": {

      "pagination": "show-more",

      "preventRouteChange": false,

      "defaultGalleryLayout": "grid"

    }

  },

  "flex-layout.row#Demobanner": {

    "children": [

      "search-banner#Demobanner"

    ]

  },

  "search-banner#Demobanner": {

    "props": {

      "area": "two",

      "blockClass": "myBanner",

      "horizontalAlignment": "center"

    }

  },

  "rich-text#heading1": {

    "props": {

      "text": "**MEN'S PRESCRIPTION GLASSES**",

      "font": "t-heading-4"

    }

  },

  "rich-text#body1": {

    "props": {

      "text": "Don't let anything stop your kids from keeping their eye on the ball. Youth baseball sunglasses and glasses will allow your kiddos to see better and play better. Kids baseball sunglasses will deliver eye protection and a clear vision. With SportRx's wide variety of brands and styles, your kids will find a pair of glasses that fit their cute little faces without compromising the cool-kid factor. Shop best youth baseball sunglasses online at SportRx to find your perfect fit"

    }

  },

  "image#example": {

    "props": {

      "src": "https://www.sportrx.com/media/wysiwyg/seo/SEO_Banners/prescription-eyeglasses-glasses.jpg",

      "maxHeight": 500

    }

  },

  "flex-layout.row#searchbread": {

    "children": [

      "breadcrumb.search"

    ],

    "props": {

      "preserveLayoutOnMobile": true,

      "fullWidth": true

    }

  },

  "flex-layout.row#searchtitle": {

    "children": [

      "search-title.v2"

    ]

  },

  "flex-layout.row#result": {

    "children": [

      "flex-layout.col#filter",

      "flex-layout.col#content"

    ],

    "props": {

      "preventHorizontalStretch": true,

      "fullWidth": true

    }

  },

  "flex-layout.col#filter": {

    "children": [

      "filter-navigator.v3"

    ],

    "props": {

      "blockClass": "filterCol"

    }

  },

  "flex-layout.col#content": {

    "children": [

      "flex-layout.row#searchinfo",

      "flex-layout.row#fetchprevious",

      "flex-layout.row#products",

      "flex-layout.row#fetchmore"

    ],

    "props": {

      "width": "grow",

      "preventVerticalStretch": true

    }

  },

  "flex-layout.row#searchinfo": {

    "children": [

      "flex-layout.col#productCount",

      "flex-layout.row#orderByAndSwitcher"

    ]

  },

  "flex-layout.row#orderByAndSwitcher": {

   

     "children": ["order-by.v2", "gallery-layout-switcher"],

    "props": {

      "horizontalAlign": "right",

      "preventHorizontalStretch": true,

      "blockClass": "orderByAndSwitcher",

      "colGap": 3

    }

  },

  "order-by.v2": {

    "props": {

      "hiddenOptions": [

        "OrderByBestDiscountDESC",

        "OrderByNameASC",

        "OrderByNameDESC"

      ]

    }

  },

  "flex-layout.col#productCount": {

    "children": [

      "total-products.v2"

    ],

    "props": {

      "blockClass": "productCountCol"

    }

  },

  "flex-layout.row#fetchprevious": {

    "props": {

      "marginBottom": 3

    },

    "children": [

      "search-fetch-previous"

    ]

  },

  "flex-layout.row#fetchmore": {

    "props": {

      "marginTop": 3

    },

    "children": [

      "search-fetch-more"

    ]

  },

  "search-fetch-previous": {

    "props": {

      "htmlElementForButton": "a"

    }

  },

  "search-fetch-more": {

    "props": {

      "htmlElementForButton": "a"

    }

  },

  "flex-layout.row#products": {

    "children": [

      "search-content"

    ]

  },

  "search-content": {

    "blocks": [

      "gallery",

      "not-found"

    ]

  },

  "search-result-layout.mobile": {

    "children": [

      "image#example",

      "rich-text#heading1",

      "rich-text#body1",

      "flex-layout.row#searchinfomobile",

      "flex-layout.row#searchbread",

      "flex-layout.row#productCountMobile",

      "flex-layout.row#fetchprevious",

     

      "flex-layout.row#fetchmore"

    ],

    "props": {

      "pagination": "show-more",

      "mobileLayout": {

        "mode1": "small",

        "mode2": "normal"

      },

      "defaultGalleryLayout": "grid"

    }

  },

  "flex-layout.row#contentmobile": {

    "children": [

      "search-content"

    ],

    "props": {

      "preserveLayoutOnMobile": true

    }

  },

  "flex-layout.row#searchinfomobile": {

    "children": [

      "flex-layout.col#orderByMobile",

      "flex-layout.col#filterMobile",

      "flex-layout.col#switcherMobile"

    ],

    "props": {

      "preserveLayoutOnMobile": true,

      "colSizing": "auto",

      "colJustify": "around"

    }

  },

  "flex-layout.col#orderByMobile": {

    "children": [

      "order-by.v2"

    ],

    "props": {

      "blockClass": "orderByMobileCol"

    }

  },

  "flex-layout.row#productCountMobile": {

    "children": [

      "total-products.v2"

    ],

    "props": {

      "blockClass": "productCountMobileRow"

    }

  },

  "flex-layout.col#filterMobile": {

    "children": [

      "filter-navigator.v3"

    ],

    "props": {

      "blockClass": "filterMobileCol"

    }

  },

  "flex-layout.col#switcherMobile": {

    "children": [

      "gallery-layout-switcher"

    ],

    "props": {

      "verticalAlign": "middle"

    }

  },

  "search-not-found-layout": {

    "children": [

      "flex-layout.row#searchbread",

      "flex-layout.row#Demobanner",

      "flex-layout.col#content",

      "flex-layout.row#notfound"

    ]

  },

  "flex-layout.row#notfound": {

    "children": [

      "not-found"

    ],

    "props": {

      "fullWidth": true

    }

  },

  "breadcrumb": {

    "props": {

      "showOnMobile": true

    }

  },

  "gallery": {

    "props": {

      "layouts": [

        {

          "name": "grid",

          "component": "GridSummary",

          "itemsPerRow": {

            "(min-width:1300px)": 4,

            "desktop": 3,

            "tablet": 3,

            "phone": 2

          }

        },

        {

          "name": "list",

          "component": "ListSummary",

          "itemsPerRow": 1

        }

      ],

      "ListSummary": "product-summary.shelf#listLayout",

      "GridSummary": "product-summary.shelf",

      "customSummaryInterval":3,

      "CustomSummary":"flex-layout.row#Demobanner"

    }

  },

  "gallery-layout-switcher": {

    "children": [

        

      "gallery-layout-option#grid",

      "gallery-layout-option#list"

    ],

    "props":{

      "customSummaryInterval":3,

      "CustomSummary":"flex-layout.row#Demobanner"

    }

  },

  "gallery-layout-option#grid": {

    "props": {

      "name": "grid"

    },

    "children": [

      "icon-grid",

      "responsive-layout.desktop#textOptionGrid"

    ]

  },

  "gallery-layout-option#list": {

    "props": {

      "name": "list"

    },

    "children": [

      "icon-inline-grid",

      "responsive-layout.desktop#textOptionList"

    ]

  },

  "responsive-layout.desktop#textOptionGrid": {

    "children": [

      "rich-text#option-grid"

    ]

  },

  "responsive-layout.desktop#textOptionList": {

    "children": [

      "rich-text#option-list"

    ]

  },

  "rich-text#option-grid": {

    "props": {

      "text": "Grid",

      "textColor": "c-auto",

      "blockClass": "layout-option"

    }

  },

  "rich-text#option-list": {

    "props": {

      "text": "List",

      "textColor": "c-auto",

      "blockClass": "layout-option"

    }

  }

}
1 Like

Hey @Karishma! You could add a Flex Layout on your search/category page and declare a banner as a children. Here you have the link to our documentation about Flex Layout → Flex Layout

1 Like

Hi SofiaDIaz,
Thanks for response! But i want to show the banner in between result search. Consider my search result contains 12 products then I want to show 6 products in a row first then banner in second row and then remaining products in last row and so on for which i need to use something else i guess. Because search result gets displayed continuously. We can add banner at starting or at the end of search but i want to display it in middle or in between product list. It will be great if you could follow some links of such type of intelligent search examples.

@SofiaDiaz Any suggestions on this? to understanding what I want to show you can refer below link and please note that i want to show the banner in between search result

I want to use customSummaryInterval but its not working for this you can refer Search Result

I Have already shared my code above. Thanks in advance!

Hey @Karishma! Sorry for the delay, I guess you will need to develop a custom app in order to have this behavior because as you mentioned, our native component displays the search result continuously, so I don’t see how you could achieve this behavior without a custom app.

2 Likes