I'm completly newbie with javascript but I was able to get this script that I found to work partially. I mean if I type in the first form field and hit 'Enter' the form perform the http request with my options.
I think the script part at the bottom is not working or missing something. Since is using jQuery.
So I want to make this script more simple, just add a button or link to call a action do the search and show the results page.
?><section class="content-page page-produtos">
<div class="wrp-content">
<div class="container box-content">
<h1>Engates</h1>
<form id="form_filtro_produto" action="<?php echo home_url( '/produtos/' ); ?>" method="GET" class="src-group">
<label for="pesquisar">
<p>Pesquisar</p>
<input type="text" name="engate" value="<?php echo $_GET['engate']; ?>" />
</label>
<label for="montador">
<p>Montadora</p>
<select name="montadora">
<option value="">Selecione uma Montadora</option>
<?php
$args = array (
'post_type' => 'engates',
'posts_per_page' => -1,
'meta_key' => 'montadora',
'meta_compare' => 'EXISTS',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_Query($args);
$montadoras = array();
while ($query->have_posts()): $query->the_post();
if(!in_array(get_field('montadora'), $montadoras) && get_field('montadora') != ""){
array_push($montadoras, get_field('montadora'));
?>
<option value="<?php the_field('montadora'); ?>"<?php if($_GET['montadora'] == get_field('montadora')){ ?> selected="selected"<?php } ?>><?php the_field('montadora'); ?></option>
<?php
}
endwhile;
wp_reset_query();
?>
</select>
</label>
<label for="modelo">
<p>Modelo</p>
<select name="modelo">
<option value="">Selecione um Modelo</option>
<?php
$args = array (
'post_type' => 'engates',
'posts_per_page' => -1,
'meta_key' => 'modelo',
'meta_compare' => 'EXISTS',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_Query($args);
$modelos = array();
while ($query->have_posts()): $query->the_post();
if(!in_array(get_field('modelo'), $modelos) && get_field('modelo') != ""){
array_push($modelos, get_field('modelo'));
?>
<option value="<?php the_field('modelo'); ?>"<?php if($_GET['modelo'] == get_field('modelo')){ ?> selected="selected"<?php } ?>><?php the_field('modelo'); ?></option>
<?php
}
endwhile;
wp_reset_query();
?>
</select>
</label>
</form>
</div>
</div> <!-- fim wrp-content -->
<div class="container box-content">
<?php//do_shortcode('[facetwp template="example"]');?>
<?php
$filtro = array();
if($_GET['montadora'] != ""){
$montadora = array(
'key' => 'montadora',
'value' => $_GET['montadora'],
'compare' => '=',
);
array_push($filtro, $montadora);
}
if($_GET['modelo'] != ""){
$modelo = array(
'key' => 'modelo',
'value' => $_GET['modelo'],
'compare' => '=',
);
array_push($filtro, $modelo);
}
if($_GET['ano'] != ""){
$ano = array(
'key' => 'ano',
'value' => $_GET['ano'],
'compare' => '=',
);
array_push($filtro, $ano);
}
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
query_posts(
array(
'post_type' => 'engates',
'posts_per_page' => 8,
'paged' => $paged,
'meta_query' => array($filtro),
's' => $_GET['engate'],
'orderby' => 'meta_value',
'meta_key' => 'modelo',
'order' => 'ASC'
)
);
if(have_posts()):
while(have_posts()): the_post();
?>
<article>
<img width="270" src="<?php echo wp_get_attachment_url(get_post_thumbnail_id(get_the_ID())); ?>" class="attachment-full size-full wp-post-image" alt="" />
<div class="paragraph-group">
<p><em>cod: <?php the_field('codigo'); ?></em></p>
<p><?php the_field('modelo'); ?></p>
<p><?php the_field('montadora'); ?></p>
<p><?php the_field('ano'); ?></p>
<!-- Saiba Mais -->
</div>
</article>
<?php
endwhile;
?>
<div style="clear:both"></div>
<?php
wp_paginate();
else:
echo "<p>Nenhum produto foi encontrado.</p>";
endif;
?>
</div> <!-- fim container -->
</section>
<script>
jQuery(function($){
$('#form_filtro_produto input, #form_filtro_produto select').on('change', function(){
$('#form_filtro_produto').submit();
});
});
</script>
All you need to do is include <button>Submit</button> within the <form> element and it will trigger the form's submit event to your form's action.
Related
I want to create a responsive image carousel and slides custom post type content like featured image, title, etc.
I had created custom post type as banner in the following way:
function create_banners_post_type() {
$labels = array(
'name' => __( 'Banners' ),
'singular_name' => __( 'banner' ),
'add_new' => __( 'New banner' ),
'add_new_item' => __( 'Add New banner' ),
'edit_item' => __( 'Edit banner' ),
'new_item' => __( 'New banner' ),
'view_item' => __( 'View banner' ),
'search_items' => __( 'Search banners' ),
'not_found' => __( 'No banners Found' ),
'not_found_in_trash' => __( 'No banners found in Trash' ),
);
$args = array(
'labels' => $labels,
'has_archive' => true,
'public' => true,
'hierarchical' => false,
'supports' => array(
'title',
'editor',
'excerpt',
'custom-fields',
'thumbnail',
'page-attributes'
),
'taxonomies' => array( 'post_tag', 'category'),
);
register_post_type( 'banner', $args );
}
add_action( 'init', 'create_banners_post_type' );
and to display the output on the front page:
// function to show home page banner using a query of banner post type
function home_page_banner() {?>
<?php
$query = new WP_Query( array(
'post_type' => 'banner',
));
if ( $query->have_posts() ) { ?>
<ul>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<li>
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
</li>
<?php
endwhile;?>
</ul>
</div>
<?php
}
wp_reset_postdata();
}
in front page I had inserted this code:
<header id="showcase" class="grid">
<?php
if ( is_front_page() ) {
home_page_banner();
}
?>
</header>
which is creating a ul list and in ul list, each post is coming in li, following is inspect element screenshot:
Try this code
// function to show home page banner using a query of banner post type
function home_page_banner() {?>
<div class="carousel" data-transition="slide">
<?php
$query = new WP_Query( array(
'post_type' => 'banner',
));
if ( $query->have_posts() ) { ?>
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
<?php
endwhile;?>
</div>
<?php
}
wp_reset_postdata();
}
I've never used Owl Carousel before, but any time I have to do a carousel I go to either Slick or Flickity - has basically everything you could ever need.
Flickity JS Carousel
The below is an example of how to include your post content inside of a carousel.
Create the initial query:
<?php
// the query
$recent_posts = new WP_Query( array(
'category_name' => 'posts',
'posts_per_page' => 3,
));
?>
Create your slider
<div class="posts-slider"> <? // this is your wrapper div ?>
<?php if ( $recent_posts->have_posts() ) : ?>
<?php while ( $recent_posts->have_posts() ) : $recent_posts->the_post(); ?>
<div class="recent-post-slide">
<div class="recent-post-content">
<div class="row">
<div class="col-12">
<div>
<div id="post-<?php the_ID(); ?>" <?php post_class( 'bg-image' ); ?>><?php the_post_thumbnail(); ?></div>
<div class="content-wrap">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
Read More
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
Add some jQuery to make Flickity work:
<script>
jQuery(document).ready(function() {
var slider = jQuery('.posts-slider'); // The class name of the wrapper div
slider.flickity({
cellAlign: 'left',
contain: true
});
});
</script>
I set up an ajax load more button in Wordpress. How do I detect that there are no more posts to call and to not reload the same posts? On click it repeatedly grabs the last two posts and loads those. I was having an issue with when posts 3, 4, 5, and 6 were showing initially on the page then clicking the load more button it would call posts 3, 2, and 1 instead of just post 2 and 1. I added an offset of 4. That seems to fix that but it still calls the last two posts if I keep clicking load more. Also is there a way to hide the button if no more posts are detected?
// the pages post query
<?php
$args = array(
'post_type' => 'financial-news',
'post_status' => 'publish',
'posts_per_page' => '4',
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => 1,
);
?>
<?php $my_posts = new WP_Query( $args ); ?>
<?php if ( $my_posts->have_posts() ) : ?>
<?php $wp_query = new WP_Query(); $wp_query->query( $args ); ?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
<div class="blog-post-wrapper one-column">
<div class="post-inner">
<div class="article-image"><img src="<?php the_field('thumb_image'); ?>"/></div>
<div class="article-copy match-height">
<span class="date"><?php the_time('F j, Y'); ?></span>
<h1><?php the_title(); ?></h1>
<p><?php echo wp_trim_words( get_the_content(), 25, '' ); ?></p>
<p><a class="read_more" href="<?php the_permalink(); ?>">Read More</a></p>
</div><!--article-copy-->
</div>
</div><!--blog-post-wrapper-->
<?php endwhile; ?>
</div><!--blog-content-->
<?php endif; ?>
<?php wp_reset_postdata(); // reset the query ?>
<div class="center-link"><div class="loadmore btn orange-btn-outline">Load More</div></div>
// The jS for the load button
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var post_type = 'financial-news';
var posts_per_page = 3;
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': '<?php echo wp_create_nonce("load_more_posts"); ?>',
'type' : 'post',
'post_type' : post_type,
'posts_per_page': posts_per_page,
};
$.post(ajaxurl, data, function(response) {
$('.blog-content').append(response);
page++;
});
});
});
// the functions.php code to load the posts
// blog load more button
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$post_type = $_POST['post_type'];
$posts_per_page = $_POST['posts_per_page'];
$lay_out = $_POST['lay_out'];
$args = array(
'post_type' => $post_type,
'post_status' => 'publish',
'orderby' => 'post_date',
'order' => 'DESC',
'posts_per_page' => $posts_per_page,
'offset' => 4,
'paged' => $paged,
);
$my_posts = new WP_Query( $args );
if ( $my_posts->have_posts() ) :
?>
<?php while ( $my_posts->have_posts() ) : $my_posts->the_post(); ?>
<div class="blog-post-wrapper" >
<div <?php post_class('post-inner'); ?> id="post-<?php the_ID(); ?>">
<div class="article-image"><img src="<?php the_field('thumb_image'); ?>"/></div>
<div class="article-copy match-height">
<span class="date"><?php the_time('F j, Y'); ?></span>
<h1><?php the_title(); ?></h1>
<p><?php echo wp_trim_words( get_the_content(), 25, '' ); ?></p>
<p><a class="read_more" href="<?php the_permalink(); ?>">Read More</a></p>
</div><!--article-copy-->
</div>
</div><!--blog-post-wrapper-->
<?php endwhile; ?>
<?php
endif;
wp_die();
}
I am using woocommerece with word press. I am getting image from data base by this query.
$args = array( 'post_type' => 'product', 'product_cat' => 'Rings', 'stock' => 1, 'posts_per_page' => 12, 'orderby' =>'$date','order' => 'DESC' );
then I use this code to display image on page.
<div class="prodimg">
<ul class="rcollpro">
$args = array( 'post_type' => 'product', 'product_cat' => 'Rings', 'stock' => 1, 'posts_per_page' => 12, 'orderby' =>'$date','order' => 'DESC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<li class="rcollproli">
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?>
<h3><?php the_title(); ?></h3>
<span class="price"><?php echo $product->get_price_html(); ?></span>
<br />
<?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?></li>
<!-- /span3 -->
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
<!-- /row-fluid -->
</div>
I am using following code for combo box and java script
<select name="orderby" class="orderby" id="selector">
<option value="menu_order">Default sorting</option>
<option value="popularity">Sort by popularity</option>
<option value="date">Sort by newness</option>
<option value="price">Sort by price: low to high</option>
<option value="price-desc">Sort by price: high to low</option>
</select>
$( document ).ready(function() {
$("#selector").change(function() {
var selectedValue = $("#selector option:selected").val();
alert('Selected text ' + selectedValue);
});
});
I want display value (images from db) on page change accordingly, when user change value in combo box. DO I use ajax or I will find the solution with javascript?
I am displaying Events(custom post type) by week based on a custom field of 'event_date'. I have the initial load working. What it does it gets the start and end of the current week and returns the events that fall within that period of time. What I need to be able to do is click a next or previous button and update the events based on that week(events should be updated via Ajax).
Here is my jQuery click function. It just hits the 'get-events.php' page and appends the data to a div.
$('.next-week').click(function(e) {
e.preventDefault();
$.ajax({
url: "http://gwsb-website/wp-content/themes/gwsb/get-events.php",
cache: false
}).done(function( html ) {
$('.events-listing').html( html );
});
});
Here is the php in 'get-events.php'
<!-- language: lang-php -->
<?php
define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');
// Variables
$day = date('w');
$weekStart = date('Ymd', strtotime('monday this week'));
$weekEnd = date('Ymd', strtotime('sunday this week'));
$currentHeader = '';
query_posts(array(
'post_type' => 'event',
'posts_per_page' => -1,
'meta_key' => 'event_date',
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'event_date',
'value' => array( $weekStart, $weekEnd ),
'type' => 'numeric',
'compare' => 'BETWEEN'
)
)
));
?>
<?php while( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php
$tempDate = get_post_meta( get_the_ID(), 'event_date', true );
if ( $tempDate != $currentHeader ) : $currentHeader = $tempDate; ?>
<h3 class="event-date-header"><?php $date = DateTime::createFromFormat('Ymd', $currentHeader); echo $date->format('l, F d, Y'); ?></h3>
<?php endif; ?>
<div class="event<?php echo the_subcategory_class(); ?>">
<h4><?php the_title(); ?></h4>
<p><?php $content = get_the_content(); echo wp_trim_words( $content , '20' ); ?></p>
<div class="event-meta">
<?php if (get_field('start_time')) : ?>
<span><?php the_field('start_time'); ?></span>
<?php endif; ?>
<?php if (get_field('end_time')) : ?>
<span> - </span><span><?php the_field('end_time'); ?></span>
<?php endif; ?>
<?php if (get_field('location')) : ?>
<span class="dot">•</span><span><?php the_field('location'); ?></span>
<?php endif; ?>
</div><!-- .event-meta -->
</div><!-- .event -->
<?php endwhile; ?>
<?php wp_reset_query(); ?>
On my parent page, i have a custom page template calling another template:
if( have_posts() ): while( have_posts() ): the_post(); ?>
<div class="wrapper">
<?php get_template_part( 'template', 'page-section' ); ?>
<?php endwhile; endif; wp_reset_postdata(); ?>
Inside template-page-section.php, I have the following:
<?php
/*
Template Name: Page Section
*/
$args = array(
'post_parent' => 9,
'post_type' => 'page',
'orderby' => 'menu_order',
'posts_per_page' => -1,
'order' => 'ASC'
);
$wpq = new WP_Query( $args ); ?>
<?php while ( $wpq->have_posts() ) : $wpq->the_post(); ?>
<?php if ( $post->ID == 101 ) {
include( 'template-slider.php' );
} ?>
<div class="page-section">
<h1><?php the_title(); ?></h1>
<?php /* The loop */ ?>
<?php the_content(); ?>
</div>
<?php endwhile; wp_reset_postdata();?>
Within the template-slider.php, is the following:
<div id="slider-container">
<ul id="slider">
<? $query = get_pages(
array(
'post_type' => 'slides',
'orderby' => 'menu_order',
'posts_per_page' => -1
));
foreach( $query as $post ) {
setup_postdata( $post ); ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail', $thumbsize[0] ); ?>
<li>
<img src="<?php echo $image[0]; ?>">
</li>
<?php } wp_reset_postdata(); ?>
</ul>
</div>
The issue is that once wordpress hits the loop within the slider-template, the information that it echos for the post content is not a child post of the parent, but the parents content.
Can anyone tell me what I'm doing wrong? I cant figure it out!
This is just an untested guess, but try the following:
template-page-section.php
$wpq = get_posts( $args );
if( $wpq ) {
foreach( $wpq as $p )
{
if ( $p->ID == 101 ) {
include( 'template-slider.php' );
}
?>
<div class="page-section">
<h1><?php echo $p->post_title; ?></h1>
<?php echo $p->post_content; ?>
</div>
<?php
}
}
template-slider.php
<div id="slider-container">
<ul id="slider">
<?php
$query_pages = get_pages(
array(
'post_type' => 'slides',
'orderby' => 'menu_order',
'posts_per_page' => -1
));
if( $query_pages )
{
foreach( $query_pages as $pg ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $pg->ID ), 'single-post-thumbnail', $thumbsize[0] ); ?>
<li>
<img src="<?php echo $image[0]; ?>">
</li><?php
}
} ?>
</ul>
</div>
Reference: When should you use WP_Query vs query_posts() vs get_posts()?