Premium add-on for Bricks Builder

AJAX Search Form

AJAX Search Form
AJAX Search Form

AJAX Search Form is the Bricks element which is searching the content via AJAX from your site. It is very flexible and you can easily customize it from the bricks editor. The search result layout is not fixed. You can make any kind of design for your result. It is compatible with any CPTs and WooCommerce.

You should get this element under the Bricks->BricksUltimate ->General Elements tab. By default, this element is disabled.

This element will work inside the query loop builder, products element, related products element, and up-sells products element.

Creating The Search Result Layout

Search result template
Search result template

#1: Click on the Bricks -> Templates -> Add New

#2: Enter the title and select “BricksUltimate – Ajax search result” from the template type dropdown.

#3: Click on the Publish button.

#4: Click on the EDIT WITH BRICKS yellow button and open the builder editor.

Settings of the Template

Editor settings
Editor settings

JSON CODE

{"id":430,"name":"header-search-results","title":"Header search results","date":"2024-01-03 18:41:27","date_formatted":"January 3, 2024","author":{"name":"wooclassic","avatar":"https:\/\/secure.gravatar.com\/avatar\/8403be1c34754fd414f538c8b3524a06?s=60&d=mm&r=g","url":"https:\/\/products.bricksultimate.com\/classic"},"permalink":"https:\/\/products.bricksultimate.com\/classic\/template\/header-search-results\/","thumbnail":false,"bundles":[],"tags":[],"type":"bu_as_result","content":[{"id":"frzoii","name":"section","parent":0,"children":["gqzbgs","tlxgks"],"settings":{"_widthMax":"1000"}},{"id":"tlxgks","name":"container","parent":"frzoii","children":["rofnpm","yutaqx"],"settings":{"_display":"grid","_gridTemplateColumns":"repeat(3, 1fr)","_padding":{"left":"0","right":"0"},"_gridGap":"1","_background":{"color":{"hex":"#ededed"}},"_gridTemplateColumns:desktop_landscape":"1fr 1fr"}},{"id":"gqzbgs","name":"div","parent":"frzoii","children":["tunejb","dzkdfy"],"settings":{"fetchType":"post","_width":"100%","_display":"flex","_alignItems":"center","_justifyContent":"space-between","_background":{"color":{"hex":"#f5f5f5"}},"_padding":{"top":"10","right":"15","bottom":"10","left":"15"}},"label":"Top Bar"},{"id":"tunejb","name":"heading","parent":"gqzbgs","children":[],"settings":{"text":"Products","tag":"h4","_typography":{"font-size":"14","color":{"hex":"#737373"},"text-transform":"uppercase"}}},{"id":"dzkdfy","name":"text-basic","parent":"gqzbgs","children":[],"settings":{"text":"{query_results_count:rofnpm} Items","tag":"span","_typography":{"color":{"hex":"#858585"},"font-weight":"600","font-family":"Poppins","text-transform":"uppercase","font-size":"14"}}},{"id":"rofnpm","name":"block","parent":"tlxgks","children":["hlmorw","jofwmg"],"settings":{"query":{"post_type":["product"],"posts_per_page":"12","ignore_sticky_posts":true,"disable_query_merge":true,"no_results_text":"No products found."},"_conditions":[[{"id":"vdlbad","key":"dynamic_data","dynamic_data":"{query_results_count:rofnpm}","compare":">","value":"0"}]],"_direction":"row","_alignItems":"flex-start","_padding":{"top":"15","right":"15","bottom":"15","left":"15"},"_columnGap":"15","_background:hover":{"color":{"hex":"#f7f7f7"}},"_cssTransition":"all 0.3s ease-in","_background":{"color":{"hex":"#ffffff","id":"augvuj","name":"Color #3"}},"_cssCustom":"#brxe-rofnpm:nth-child(3n-1):nth-last-of-type(1) {\n  grid-column: span 2;\n}\n\n#brxe-rofnpm:nth-child(3n-2):nth-last-of-type(1) {\n  grid-column: span 3;\n}","hasLoop":true},"label":"Loop - Products"},{"id":"yutaqx","name":"block","parent":"tlxgks","children":["kuvgaz","fjcjjy"],"settings":{"_gridItemColumnSpan":"span 3","_alignItems":"center","_justifyContent":"center","_padding":{"top":"30","bottom":"30"},"_direction":"row","_columnGap":"12","_conditions":[[{"id":"yfzorv","key":"dynamic_data","dynamic_data":"{query_results_count:rofnpm}","value":"0","compare":"<="}]],"_background":{"color":{"hex":"#ffffff","id":"augvuj","name":"Color #3"}},"_width":"100%","_gridItemColumnSpan:desktop_landscape":"span 2"},"label":"Empty Message"},{"id":"fjcjjy","name":"heading","parent":"yutaqx","children":[],"settings":{"text":"No Products Found","tag":"h3","_typography":{"text-transform":"uppercase","letter-spacing":"2","font-size":"20","color":{"hex":"#969696"}}}},{"id":"kuvgaz","name":"icon","parent":"yutaqx","children":[],"settings":{"icon":{"library":"themify","icon":"ti-bag"},"fetchType":"post","iconSize":"25","iconColor":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"}}},{"id":"hlmorw","name":"image","parent":"rofnpm","children":[],"settings":{"image":{"useDynamicData":"AJAX Search Form","size":"woocommerce_thumbnail"},"_widthMax":"60","_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#f0f0f0"}},"link":"url","url":{"type":"meta","useDynamicData":"https://www.bricksultimate.com/doc/ajax-search-form/"}}},{"id":"jofwmg","name":"div","parent":"rofnpm","children":["zgkxqs","vepnke","ellhpy"],"settings":{"fetchType":"post","_display":"flex","_direction":"column","_rowGap":"4"}},{"id":"zgkxqs","name":"post-title","parent":"jofwmg","children":[],"settings":{"tag":"h3","linkToPost":true,"_typography":{"font-size":"14","line-height":"1.25"}}},{"id":"vepnke","name":"product-price","parent":"jofwmg","children":[],"settings":{"regularPriceTypography":{"color":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"},"font-weight":"600","font-family":"Poppins"}}},{"id":"ellhpy","name":"product-meta","parent":"jofwmg","children":[],"settings":{"fields":[{"dynamicData":"{woo_product_sku}","id":"3d4fa9","prefix":"SKU: "}],"_typography":{"text-transform":"lowercase","color":{"hex":"#8a8a8a"}},"prefixTypography":{"font-weight":"600","color":{"hex":"#828282"}},"_conditions":[[{"id":"dpzqvx","key":"product_sku","compare":"!="}]]}}],"templateType":"bu_as_result"}

Add Search Form

You will get the AJAX Search Form element under the Ultimate category on the bricks editor. Select and put this element on the canvas. There are a lot of features in this element to customize the default design. You can put this element on the header template, off-canvas, popup, etc places. Make sure that you are selecting the correct post type to fetch the correct result.

Select the correct Search Result layout from the dropdown.

JSON Code

{"content":[{"id":"kjxsgl","name":"bu-ajax-search","parent":"owoxty","children":[],"settings":{"postType":"product","hasSearchBtn":true,"inpf_placeholder":{"color":{"hex":"#949494"}},"inpf_text":"Search for products","searchIcon":{"library":"themify","icon":"ti-search"},"hasCat":true,"taxonomy":"product_cat","template":"430","loadingIcon":{"library":"themify","icon":"ti-reload"},"arrowIcon":{"library":"themify","icon":"ti-angle-down"},"loadingIconSize":"14","loadingIconColor":{"hex":"#74a32f","id":"opteqa","name":"Color #1"},"resultWrapperBS":{"values":{"offsetX":"0","offsetY":"0","blur":"3"},"color":{"hex":"#f2f2f2"}},"form_fborder":{"color":{"hex":"#e0e0e0"}},"hide_empty":true,"layout":"default","templates":[{"id":"cssggg","type":"post","rsPostType":"product","template":"430"}]},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://products.bricksultimate.com/classic","version":"1.9.5","globalClasses":[],"globalElements":[]}

Video