3D FlipBook - Connect WordPress Search with FlipBook Search

a***x@iqcomputing.com

2022-09-08

2022-12-06

Hello,

I'm working with a client who has bought a premium version of this plugin. They are looking to connect the WordPress search to the Flipbook search through customizations. I'm fairly certain I can get the search to land onto a specific page with the Flipbook but getting the query var to connect to the Flipbook JS seems like it might be an issue. It's difficult to tell with the JS being minified.

1) Is there an unminifed version of the scripts?

2) Would it be possible through customizations to link the WordPress search with a Flipbook search?

3) Does the Flipbook search script look for any specific URL query vars we may be able to use?

Replies

a***r@3dflipbook.net

2022-12-06

Hi,

pro version contains project files, so you can rebuild it to receive what ever you wish;
yes, you do not need to look into project files at all, just have a look at skin with search field on toolbar;
no.

c***r@laban.es

2024-02-01

Hi, I have the pro version How can I do the 2nd option within the seach toolbar of my wordpress?

a***r@3dflipbook.net

2024-02-05

Open Shortcode Generator-> go to View mode tab-> and chose search-book-view in Select skin section.

a***x@iqcomputing.com

2024-02-05

Ended up using Javascript / JQuery to connect the two searches. The flipbook is an iframe with the same origin which means we are able to access it. The rest is just triggering search.

/**
 * Search 3D Flipbook
 */
( function( $ ) {

    if( ! $( '._3d-flip-book' ).length ) {
        return;
    }

    function getUrlParameter( sParam ) {
        let sPageURL = window.location.search.substring( 1 ),
            sURLVariables = sPageURL.split( '&amp;' ),
            sParameterName,
            i;

        for( i = 0; i &lt; sURLVariables.length; i++ ) {
            sParameterName = sURLVariables[i].split('=');

            if( sParameterName[0] === sParam ) {
                return sParameterName[ 1 ] === undefined ? true : decodeURIComponent( sParameterName[ 1 ].replace( '+', ' ' ) );
            }
        }

        return false;
    }

    let search = getUrlParameter( 'search' );
    if( ! search ) {
        return;
    }

    $( window ).on( 'load', function() {

        let $iframe = $( '._3d-flip-book iframe' ).contents();
        let searchTriggered = false;

        $iframe.on( 'DOMNodeInserted', function( e ) {

            if( ! searchTriggered ) {

                /* iFrame Loaded */
                if( e.target.classList.contains( 'search' ) ) {

                    $iframe.find( '[type="search"]' ).val( search );
                    setTimeout( function() {
                        $iframe.find( '[type="search"]' ).trigger( 'keyup' );
                        $iframe.find( '[type="search"]' ).trigger( 'keypress' );
                    }, 100 );

                }

                /* Jump to first result hit */
                if( e.target.classList.contains( 'result' ) ) {
                    searchTriggered = true;
                    $( 'a', e.target ).trigger( 'click' );
                }

            }

            /* Change ToC Header Text */
            if( ! $( '.toc', $iframe ).hasClass( 'textChanged' ) &amp;&amp; e.target.classList.contains( 'search' ) ) {
                $( '.toc .head', $iframe )[0].childNodes[0].nodeValue = ' Search Results ';
                $( '.toc', $iframe ).addClass( 'textChanged' );
            }

        } );

    } );

} )( jQuery );