DNI show div based on landing page, continue showing div entire session

user_2649546 0
Viewed 182

I have about 60 landing pages that use different phone numbers on them. I am using a combination of WordPress and Advanced Custom Fields to place the phone numbers on their respective pages.

I am being asked to show a <div> based on the landing page URL that will not only show the phone number assigned to that page, but, keep showing the <div> (and phone number) regardless of what page the user navigates to on the website.

I have found little to no support on how to make the <div> remain visible throughout the entire session until the user closes the window.

I am thinking that this will somehow revolve around a cookie and Dynamic Number Insertion but I have no real progress to speak of. Should this be done using PHP or JS? Does a plugin exist that would allow for this on WordPress? I'm open to all suggestions.

session-cookies wordpress cookies php javascript
3 Answers

Please try this code. Like @John C mentioned, WP Engine doesn't recommend Cookie nor PHP Session for the sake of performance and security. This is pure JavaScript code, and I think this will solve your problem.

Code in your Post/Page template file:

<div id="phone-number"></div>
<?php if( get_field('phone_number') ): ?>
    <script type="text/javascript">
        let phone_number = "<?php the_field('phone_number'); ?>";
    </script>
<?php endif; ?>

Code in your theme JavaScript file:

<script type="text/javascript">
    // in the case of the div data is persistent on the same site
    // let storage = localStorage;

    // in the case of the div data is persistent in the same tab, but not in new tab
    let storage = sessionStorage;
    
    let key = "phone_number"; // storage key

    var global_phone_number = storage.getItem(key);

    // check if storage data is set before
    if (null === global_phone_number) {
        // if not set the data on page into storage
        global_phone_number = phone_number ? phone_number : '';
        storage.setItem(key, global_phone_number);
    }
    document.getElementById('phone-number').innerHTML = global_phone_number;
</script>
user_107555740

You should use PHP and capture the session.

(untested code warning)

add_action('wp_footer', 'dynamic_phone_div');
function dynamic_phone_div() {
 session_start;

 if(isset($_SESSION['phone_div']) ? $phone_div = $_SESSION['phone_div'] : 
 $phone_div = '';

 if($phone_div != '') {

   echo '<div class="that_div_thing">';
   echo $phone_div;
   echo '</div>';

 } else {

   $_SESSION['phone_div'] = 123456789;
   echo '<div class="that_div_thing">';
   echo '123456789';
   echo '</div>';

 }
}

This is only raw logic. I am not sure where your div is (header/footer/page) - depending on where it is you should either use a hook (header/footer) or code it into a template (page/post).

The session will be destroyed after the user closes the tab/window.

user_24856480

I would probably do this with client side session storage. Providing all pages open in the same tab, the value will remain for the session, then be removed.

PHP code (in your functions.php file?) would be something like this:

function phone_script() {
    $params = array(
        'phone_number'      => null, // Insert logic for current number. Can stay null if this is running on a non-landing page
        'is_landing_page'   => false // Change to true/false based on is current page a landing one or not
    );

    $params = json_encode( $params );

    echo <<< EOT
    <script>
        let settings = $params;

        document.addEventListener("DOMContentLoaded", function() {
            if( settings.is_landing_page ) {
                window.sessionStorage.setItem( 'phone-number', settings.phone_number );
            } else {
                settings.phone_number = window.sessionStorage.getItem( 'phone-number' );
            }
            
            if( settings.phone_number ) {
                let div = document.createElement('div');
                div.classList.add('phone-div');
                // or add inline style 
                // div.style.cssText = 'position:fixed'; //etc

                // Some logic here to actually add the number and any other content to the div
                div.innerHTML = `The Phone number is: ${settings.phone_number}`;

                document.body.appendChild(div);
            }
        });
    </script>
EOT;
}
add_action( 'wp_footer', 'phone_script');

Note that the EOT; line MUST have no leading or trailing spaces.

The above is untested.

user_139379270
Related