Ecommerce Shopify WordPress Discussion

One-Page Nav in WordPress that Loads Different Pages without Refreshing On Click and On Scroll

I've got a client that wants a site that includes a nav like https://baincapitalcredit.com. It looks like a one-page with anchors but all links point to ../page-title and not ..#page-title. Looking at the code this looks like it's loading a different page on scroll/click and not a different section as with most one-page navs. This is a drupal site and we're building in wordpress. Looking for a WP theme recommendation that includes this out of the box (so far I've tested tons) and if not recommendations on the easiest way to achieve this would be great! TIA for any direction. I've tried several one-page and non one-page themes, infinite scroll plugins as well as custom js using var stateObj = { foo: "content" }; history.pushState(stateObj, "anchor2", "section-2"); While this does change the url, it still uses the '#' instead of the '/' and doesn't load a new page but rather a section on the same page.
This is a fairly straightforward coding project. First, build out the site as normal, with a normal navigation menu with links that lead to new pages as normal. To simplify the javascript you'll need, edit the menu, under screen options check "CSS Classes" so that you can add a class to each button, and to each button add a class: link-{{page slug}} You'll add custom javascript that does the following: Listens for when a navigation menu item is clicked, and instead of following the link, get the slug of the page from the class you added to the link. Make an ajax call of type POST to a page you create in the next step, passing the slug Receive from that call the title, content and any necessary post meta Update the page with that data You'll add a php file, call it get_page.php. Put this line at the top of the page: include_once($_SERVER['DOCUMENT_ROOT'].'/wp-load.php' ); This will load the WordPress core and allow you to use the simple (and secure) wordpress functions, like get_posts, to retrieve the page info. Get the slug $page_slug = $_POST['page_slug']; // << assuming you name your POST variable page_slug Do a query and return the info $args = array( 'post_type' => 'page', 'name' => $page_slug ); $page_obj = get_posts( $args ); // collect and output what you need $return_values = [ 'title' => $page_obj->post_title, 'content' => $page_obj->post_content ] echo json_encode( $return_values ); die(); // don't forget to die Your ajax call will look something like this (enqueue jquery if you haven't already): var data = { 'page_slug' : page_slug } $.ajax({ type: 'post', url: '<?php echo get_stylesheet_directory_uri(); ?>/get_page.php', data: data, success: function(resp) { var page_info = JSON.parse(data); var page_title = data.title; var page_content = data.content; // javascript code to update the content of page elements here... }); Wrap this in a function and pass in page_slug. Call the function when someone clicks a navigation button. If you want the client to be able to add additional pages themselves and this continue to work, then you can't use the CSS classes for the page slug and instead need to write code to collect the slug from the href of the navigation link.

January 17, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.