[Resolved] Replace gp search

Home Forums Support [Resolved] Replace gp search

Home Forums Support Replace gp search

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1267076
    Thomas

    Hi David,

    got a new question πŸ™‚

    Would it be possible, to replace the gp search in the header with my custom search from the wooevents plugin?

    Cheers,
    Thomas

    #1267328
    David
    Staff
    Customer Support

    Hi there,

    if you mean the GP Navigation Search then unfortunately no its not currently possible to replace it.

    Let me know if thats what you mean

    #1270159
    Thomas

    Yes, that’s what I mean.

    Do you have a spontaneous idea, how to solve my “issue” with another plugin or something else to make it look more elegant?

    #1270192
    David
    Staff
    Customer Support

    I assume Woo events provides a shortcode ( or PHP function ) for the search field ?
    If so you can add it inside the Navigation using the inside_navigation hook using the GP Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    Then if we can see the site i can provide some CSS to position and style it. Note: it WILL NOT use the GP Search Icon to open and close the search field, it will always be visible.

    #1270237
    Thomas

    They provide both – it’s done with a shortcode.

    #1270706
    David
    Staff
    Customer Support

    Hmmm… this is gonna be fun.
    Ok in your Hook can you add this code before the Shortcode:

    <a href="#" class="custom-search-toggle">
        <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
        </svg>
        <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
            <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path>
        </svg>
    </a>

    This will give us our Search Toggle to show and hide it.

    Let us know when its added and ill look at the JS and CSS to make it work.

    #1270760
    Thomas

    Okay, it’s done.

    Thanks for your help πŸ™‚

    #1272331
    Tom
    Lead Developer
    Lead Developer

    Before we go the custom javascript route, let’s see if we can replace the navigation search with the shortcode.

    add_filter( 'generate_navigation_search_output', function() {
        return sprintf(
            '<div class="navigation-search">%s</div>',
            do_shortcode( '[your-shortcode]' )
        );
    } );

    Let me know what that does πŸ™‚

    #1272528
    Thomas

    Hi Tom,

    I added your code and deactivated the previous one.

    I think the result is quite near. It needs some styling and it would be great, if the search bar could appear right under the header (on both desktop and mobile) what do you think?

    Thanks so far!!

    #1272857
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    .navigation-search {
        top: 100%;
    }
    #1273457
    Thomas

    Hi Tom,

    looks much bettet now – very nice!

    Just a few design-issues left:

    1. I can’t scroll through the ajax search results on mobile (the whole site scrolls instead)

    2. Is it possible to to make the search bar fade in or slide in?

    3. Is it possible to change the “magnifying glass” icon to a “X” icon to close when the search bar is opened?

    4. The blind-text just needs to be adjusted I guess?

    Thank you very much, support is amazing!

    #1273990
    David
    Staff
    Customer Support

    Should have known Tom would have added a filter πŸ™‚

    Can you disable your Cache so we can look at the other changes

    #1274004
    Thomas

    Yeah, the filter did the work quite well πŸ™‚

    WP Rocket is now disabled.

    Edit:

    Would also be nice to center the search bar on the desktop version.

    #1274556
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. This is because it’s set to absolute positioning.. We could make it drop down without being absolute on mobile?:

    @media (max-width: 768px) {
        .navigation-search.nav-search-active {
            position: relative;
            order: 20;
        }
    }

    2. Try this:

    .navigation-search {
        opacity: 0;
        transition: opacity 500ms ease;
        visibility: unset;
        left: unset;
    }

    3. This should do it:

    .search-item.active svg:first-child {
        display: none;
    }
    
    .search-item.active svg:last-child {
        display: block;
    }

    4. Which text?

    5. To center it, try this:

    .navigation-search {
        text-align: center;
    }
    #1275088
    Thomas

    Thank you very much Tom,

    you guys are really amazing – totally solved my issues on this one! πŸ™‚

    One more think to bother you πŸ˜‰

    How do I manage to re-order the mobile header like this:

    new arrangement

    (Menu to the left, logo centered, search and cart right)

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.