< Bottom Navigation Menu for shop page

2ed code

<?php
/*
Plugin Name: Bottom Navigation Menu for shop page
Description: Adds a custom fixed bottom navigation menu for mobile devices.
Version: 1.01
Author: Bishal Thapa
*/

// Add HTML structure to the footer
function custom_mobile_menu_html() {
    ?>
    <style>
        @media only screen and (max-width: 767px) {
            .custom-mobile-menu {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 60px;
                background-color: #FFFFFF;
                display: flex;
                justify-content: space-around;
                align-items: center;
                box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
                z-index: 999;
            }

            .menu-item {
                color: #888;
                text-decoration: none;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 14px;
                transition: color 0.3s ease;
                padding: 8px;
                border-radius: 5px;
            }

            .menu-item.active {
                color: #a91f23; /* iOS blue */
                font-weight: bold;
            }

            .menu-icon {
                font-size: 24px;
            }



		.wishlist-counts {
			position: absolute;
			top: -18px;
			left: 22px;
		}

			
	
			
        }
    </style>

    <div class="custom-mobile-menu" id="custom-mobile-menu">
        <a href="/home" class="menu-item home <?php echo is_page('home') ? 'active' : ''; ?>">
            <span class="menu-icon">🏠</span>
            <span>Home</span>
        </a>

        <a href="/category" class="menu-item category <?php echo is_page('category') ? 'active' : ''; ?>">
            <span class="menu-icon">🛍️</span>
            <span>Category</span>
        </a>
		
		 <a href="/my-account" class="menu-item account <?php echo is_page('my-account') ? 'active' : ''; ?>">
            <span class="menu-icon">🧑🏻‍⚕️</span>
            <span>Account</span>
         </a>

        <a href="/wishlist" class="menu-item wishlist <?php echo is_page('wishlist') ? 'active' : ''; ?>">
        <span class="menu-icon" style="position: relative;">💝<span class="wishlist-counts">
                <?php echo do_shortcode('[wishlist_count]'); ?>
            </span>
        </span> Wishlist
    </a>


        <a href="/my-wallet" class="menu-item wallet <?php echo is_page('my-wallet') ? 'active' : ''; ?>">
            <span class="menu-icon">🏦</span>
            <span>Wallet</span>
        </a>


    </div>

    <script>
        // Check if the webpage is being viewed in a WebView component
        document.addEventListener("DOMContentLoaded", function() {
            var isWebView = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent) || /(Android).*WebView/i.test(navigator.userAgent);
            if (isWebView) {
                var customMenu = document.getElementById('custom-mobile-menu');
                if (customMenu) {
                    customMenu.style.display = 'none'; // Hide the custom mobile menu
                }
            }
        });
    </script>
    <?php
}

add_action('wp_footer', 'custom_mobile_menu_html');
?>

1st code

<?php
/*
Plugin Name: Bottom Navigation Menu for shop page
Description: Adds a custom fixed bottom navigation menu for mobile devices.
Version: 1.01
Author: Bishal Thapa
*/



// Add HTML structure to the footer
function custom_mobile_menu_html() {
    ?>
<style>
    @media only screen and (max-width: 767px) {
        .custom-mobile-menu {
            position: fixed;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 80px; /* Change height to auto */
            overflow: visible; /* Change overflow to visible */
            background: linear-gradient(to bottom, #FFFFFF 20%, #FFFFFF 20%);
            display: flex;
            justify-content: space-around;
            padding: 1px;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            z-index: 999;
            transition: height 0.3s ease;
        }


        .menu-item {
            color: #000000;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            transition: transform 0.3s ease;
        }

        .menu-item.active {
            color: #EE4800;
            font-weight: bold;
           
            z-index: 1; /* Ensure the active item is on top of others */
            padding-bottom: 1px; /* Add padding to the text */
        }


		.wishlist-counts {
			position: absolute;
			top: -9px;
			left: 15px;
		}
</style>

<div class="custom-mobile-menu">
    <a href="<?php echo is_shop() ? esc_url(home_url()) : esc_url(home_url('/home-page')); ?>" class="menu-item <?php echo is_shop() ? 'Home' : 'Product'; ?> <?php echo is_front_page() || is_shop() ? 'active' : ''; ?>">
        <span class="menu-icon">
            <?php echo is_shop() ? '&#127968' : '&#127968'; ?>
        </span> <?php echo is_shop() ? 'Home' : 'Home'; ?>
    </a>

    <a href="/wishlist" class="menu-item wishlist <?php echo is_page('wishlist') ? 'active' : ''; ?>">
        <span class="menu-icon" style="position: relative;">
            <?php echo is_page('wishlist') ? '💝' : '💝'; ?>
            <span class="wishlist-counts">
                <?php echo do_shortcode('[wishlist_count]'); ?>
            </span>
        </span> Wishlist
    </a>

    <a href="/my-account" class="menu-item account <?php echo is_page('my-account') ? 'active' : ''; ?>">
        <span class="menu-icon"><?php echo is_page('my-account') ? '🧑🏻‍⚕️' : '🧑🏻‍⚕️'; ?></span> Account
    </a>

    <a href="/order" class="menu-item order <?php echo is_page('order') ? 'active' : ''; ?>">
        <span class="menu-icon"><?php echo is_page('order') ? '🛍️' : '🛍️'; ?></span> Order
    </a>

    <a href="/category" class="menu-item category <?php echo is_page('category') ? 'active' : ''; ?>">
        <span class="menu-icon"><?php echo is_page('category') ? '📦' : '📦'; ?></span> Category
    </a>
</div>

<script>
    jQuery(document).ready(function($) {
        function updateCartCount() {
            $.ajax({
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                type: 'POST',
                data: {
                    'action': 'update_cart_count'
                },
                success: function(response) {
                    $('.cart-count').html('<sup>' + response + '</sup>');
                }
            });
        }

        // Update cart count on page load
        updateCartCount();

        // Update cart count when an item is added to or removed from the cart
        $(document.body).on('added_to_cart removed_from_cart', function() {
            updateCartCount();
        });
    });
</script>
<?php
}

add_action('wp_footer', 'custom_mobile_menu_html');

// Add this code outside the custom_mobile_menu_html function, but within your plugin file
function update_cart_count_callback() {
    echo wp_kses_post(WC()->cart->get_cart_contents_count());
    die();
}

add_action('wp_ajax_update_cart_count', 'update_cart_count_callback');
add_action('wp_ajax_nopriv_update_cart_count', 'update_cart_count_callback');
?>

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
🏠 Home 🛍️ Category 🧑🏻‍⚕️ Account 💝 0 Wishlist 🏦 Wallet
Custom Icon
0
0.00
Scroll to Top