Just noticed your reply. Yeah, I can’t view the https://iceiceicy.com/wingwah/wp-json/wc/v1/products/categories , got return error on authorization and actually I kinda lost with your example. So, I’m gonna understand them step by step.
First, I need to generate the WooCommerce api key right, since I can’t view the WC JSON file. I generated it, but I don’t know where to put it. I read the document and it shows the example as
<?php
$store_url = 'http://example.com';
$endpoint = '/wc-auth/v1/authorize';
$params = [
'app_name' => 'My App Name',
'scope' => 'write',
'user_id' => 123,
'return_url' => 'http://app.com',
'callback_url' => 'https://app.com'
];
$query_string = http_build_query( $params );
echo $store_url . $endpoint . '?' . $query_string;
?>
Do I need to put it on theme folder/functions.php ?
And once I manage to view the WC JSON file with authorization, then only I used this below code right? And this jQuery code, I can just put it on the of the site right?
function getProducts(category) {
var API_SECRET = 'obtained via admin interface'
var API_KEY = 'obtained via admin interface'
$.get(
`https://iceiceicy.com/wingwah/wp-json/wc/v1/products?consumer_key=${API_KEY}&consumer_secret=${API_SECRET}&category=${category}`,
renderProducts
)
}
By the way, putting aside your example, yesterday I read this article. https://premium.wpmudev.org/blog/load-posts-ajax/
Based on that, here what I got so far.
On the functions.php , I added
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'bootstrap', 'parent-style' ) );
wp_enqueue_script( 'ajax-pagination', get_stylesheet_directory_uri() . '/js/ajax-pagination.js', array( 'jquery' ), '1.0', true );
global $wp_query;
wp_localize_script( 'ajax-pagination', 'ajaxpagination', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'query_vars' => json_encode( $wp_query->query )
));
}
add_action( 'wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination' );
add_action( 'wp_ajax_ajax_pagination', 'my_ajax_pagination' );
function my_ajax_pagination() {
echo get_bloginfo( 'title' );
die();
}
Then, I created ajax-pagination.js and inside there I put
(function($) {
$(document).on( 'click', '.tag-widget a', function( event ) {
event.preventDefault();
$.ajax({
url: ajaxpagination.ajaxurl,
type: 'post',
data: {
action: 'ajax_pagination'
},
success: function( html ) {
$('.products-grid').find( 'div' ).remove();
$('.pagination-cubic').remove();
$('.products-grid').append( html );
}
})
})
})(jQuery);
Now, the result is, whenever I click the tag-widget link, the title gonna be print below it.
I’m thinking, can’t I replace the echo get_bloginfo( ‘title’ ); with one of the tag template? Then, the jQuery instead of target .tag-widget a , i will create several codes that target specifically each links. ( I know it’s not very practical since it’s gonna be repetitive)
