Search bar as iframe or other

Suporte Erros
1

Hello to all again! Website is slowly coming to life… :slightly_smiling_face:

https://digitalepitalio.gr/

Because I want to use Elementor I was wondering if there is a way to insert the search block (you have made a block for the Gutenberg Editor) into Elementor with a shortcode or other way…

I tried by using a plugin that makes a block into a shorcode but it won’t carry out the search.
(I used this 🧱Reusable Block Extended: A cool WordPress plugin to extend Gutenberg reusable block feature – Jean-Baptiste Audras)

Sorry if there is an easy solution to this or if it has been answered but most of the info is still in Portugese :stuck_out_tongue:

Maybe some Elementor Elements would be of usefull for many that do not preffer Gutenberg :slight_smile:

2

Heeey @Alkis that website is looking awesome! :sunglasses:

The Tainacan Search Bar block has a relatively simple logic, it just redirects a search to the items list search page. If you can’t use the block, maybe you could just replicate its HTML in the area that you are interested. Something like:

<div class="wp-block-tainacan-search-bar is-style-default" data-module="search-bar">
   <div class="tainacan-search-container">
       <form style="max-width:50%" id="tainacan-search-bar-block" action="http://localhost/minhas-fotos" data-queryparam="search" method="get">
            <input style="border-color:" id="tainacan-search-bar-block_input" label="Search" placeholder="Search">
            <button class="button" type="submit">
                 <span class="icon">
                    <i>
                       <svg style="fill:" width="24" height="24" viewBox="-2 -2 20 20"><path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5 c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6 c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2 c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2 C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3 c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2 c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"></path></svg>
                     </i>
                 </span>
            </button>
       </form>
    </div>
</div>

The most important there is:

  1. The action on the <form> tag. It will point to your collection or repository items list page;
  2. The data-queryparam="search", also in the <form> tag. It tells how the search value will be passed to the page (something like search=potato or s=potato), because some search plugins may change this…
  3. The IDs should be the same, because they are used in the script that redirects the search;
  4. Finally, the data-module="search-bar". This is the guy that tells our lazy-loader script that there is a search bar here, so if it finds this information in the document, it will load the script. More specifically, this is the script: tainacan/theme.js at develop · tainacan/tainacan · GitHub

Let me now if you need more help with this!

3

About this, I understand that a stronger compatibility with Elementor would be a good plus, we just don’t have “enough legs” for that now. :confused: But one thing that I can say is that we are gradually creating shortcodes to our blocks. This is already the case to the Faceted Search (the whole items list, including filters, etc), the Item Submission, the Dynamic Items List and the Items Carousel. We usually define them in this file: https://github.com/tainacan/tainacan/blob/400b341ce0404476b392ad6eace6ceae4c6b650c/src/classes/theme-helper/class-tainacan-theme-helper.php#L49-L54

That said, we should probably add this more clearly in our developers documentation, we’re working on that :sweat_smile:

1 curtida
5

This worked like a charm…

1 curtida