PHP and JavaScript

PHP from Ilitha:

PHP For separate login-register page used with User Registration from Ilitha

				
					// Lost Password link set.

function modify_lost_password_link($content) {
    if (is_page('login-register')) {
        // Find and replace the default lost password link with your custom link
        $content = str_replace('https://ilitha.digitalhumanitydev.co.za/login-register/lost-password/', 'https://ilitha.digitalhumanitydev.co.za/account/lost-password/', $content);
    }

    return $content;
}
add_filter('the_content', 'modify_lost_password_link');

// Account Page redirect logic.

add_action( 'template_redirect', 'my_redirect_if_user_not_logged_in' );

function my_redirect_if_user_not_logged_in() {
    if ( ! is_user_logged_in() && is_page( 'account' ) && ! isset( $_GET['action'] ) && ! strpos( $_SERVER['REQUEST_URI'], 'lost-password' ) ) {
        wp_redirect( home_url( '/login-register/' ) );
        exit;
    }
}

// Login-register page redirect logic.

add_action( 'template_redirect', 'my_redirect_if_user_logged_in' );

function my_redirect_if_user_logged_in() {
    if ( is_user_logged_in() && is_page( 'login-register' ) && !current_user_can( 'manage_options' ) ) {
        wp_redirect( home_url( '/account/' ) );
        exit;
    }
}

Check if a user is logged in with Javascript:

Expand JavaScript

				
					
document.addEventListener("DOMContentLoaded", () => {

    if (document.body.classList.contains('logged-in')) {
        // Do stuff...
    }
    
});

Postcode Checker Form For Caught Online:

During Testing, I included the JavaScript for the form within the shortcode, but later created postcode-checker.js inside the xstore-child folder:

Expand JavaScript

				
					jQuery(document).ready(function($) {

    $('#co-postcode-input').on('input', function() {
        let inputPostcode = $(this).val();
        if (inputPostcode.length >= 4) {
            $.ajax({
                type: 'POST',
                url: ajax_object.ajax_url,
                data: {
                    action: 'check_postcode',
                    input_postcode: inputPostcode,
                    nonce: ajax_object.nonce,
                },
                success: function(response) {
                    $('#co-postcode-output').text(response);
                }
            });
        }
    });
});

Then in functions.php there is the following relevant code. I have added comments for insight:

Expand PHP

				
					<?php
/* ------------------------------------------------------------------------------------------------------------ *
 *  Custom Implementation for form to check if a postal code is in one of the shipping zones                    *
 * ------------------------------------------------------------------------------------------------------------ */

// postcode-checker.js calls the ajax function when the form input's length is >= 4
function enqueue_custom_scripts() {
    wp_enqueue_script('jquery');
	wp_enqueue_script('postcode-checker', get_stylesheet_directory_uri() . '/postcode-checker.js', array('jquery'), '1.0', true);
	
    wp_localize_script('postcode-checker', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('postcode_checker_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

/* I have tried declaring $shipping_zones as a global variable elsewhere so that the query only runs once when the page loads, 
but that causes errors in which suggest that:
- either it doesn't get stored as a global variable or, 
- its value gets cleared when I try to access it. I will test something different during the optimization Milestone.

For now, I have tested this and find that it has little to no impact on performance. */
function check_postcode() {
    $nonce = $_POST['nonce'];
    if (!wp_verify_nonce($nonce, 'postcode_checker_nonce')) {
        die('Invalid nonce');
    }

    $input_postcode = sanitize_text_field($_POST['input_postcode']);

    if (is_numeric($input_postcode) && strlen($input_postcode) === 4) {
        global $wpdb;
        $shipping_zones = $wpdb->get_col("SELECT location_code FROM {$wpdb->prefix}woocommerce_shipping_zone_locations WHERE location_type = 'postcode';");

        if (in_array($input_postcode, $shipping_zones)) {
            echo 'Yay, we deliver to you! ' . esc_html($input_postcode);
        } else {
            echo 'Unfortunately, we do not deliver to your area just yet';
        }
    } else {
        echo 'Invalid postal code.';
    }
    die();
}
add_action('wp_ajax_check_postcode', 'check_postcode');
add_action('wp_ajax_nopriv_check_postcode', 'check_postcode');

// I gave the form very specific IDs so that we can style and identify them easily.
function postcode_checker_shortcode() {
    ob_start();
    ?>
    <form id="co-postcode-checker">
        <input type="text" id="co-postcode-input" placeholder="Start Typing Postal Code">
    </form>
    <div id="co-postcode-output"></div>

    <?php

    return ob_get_clean();
}
add_shortcode('postcode_check_form', 'postcode_checker_shortcode');