I'm having trouble on the wordpress page that I'm currently working..
I used this code >>https://github.com/alexcavender/wordpress-ajax-load-more
with some adjustment (complete code below) but the "load more button doesn't hide whenever it reach the last post.
<div id="primary" class="content-area container">
<main id="main" class="site-main" role="main">
<?php if (have_posts()) : ?>
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages(array(
'before' => '<div class="page-links">' . esc_html__('Pages:', 'thinkbit'),
'after' => '</div>',
));
?>
</div><!-- .entry-content -->
<div id="all-post" class="all-post wrapper">
<?php
$args = array(
'post_type' => array('post', 'project', 'communities'),
'posts_per_page' => 10
);
$the_query = new WP_Query($args); ?>
<?php if ($the_query->have_posts()) : ?>
<div class="row masonry">
<?php while ($the_query->have_posts()) : $the_query->the_post();
/*$termsArray = get_the_terms($post->ID, "category, project-category, community-category"); //Get the terms for this particular item*/
$termsArray = get_the_terms($post->ID, "category, project-category, community-category"); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ($termsArray as $term) { // for each term
$termsString .= $term->slug . ' '; //create a string that has all the slugs
}
?>
<?php if (get_post_type() == 'project') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'communities') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'post') : ?>
<div class="item">
<div class="home-news-box">
<a href="<?php the_permalink(); ?>">
<h1 class="news">News</h1>
<h3 class="news-title"><?php the_title(); ?></h3>
</a>
</div>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div> <!-- end item -->
<?php endif; ?>
<div id="things-go-here"></div>
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<div id="load-more-posts" class="text-center">
<h4>Load More</h4>
</div>
<?php else : ?>
<?php get_template_part('template-parts/content', 'none'); ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
function load_more_posts() {
$nonce_check = check_ajax_referer('extra-special', 'security');
if ($nonce_check) {
$offset = $_POST['offset'];
$args = array(
'post_type' => array('post', 'project', 'communities'),
'post_status' => 'publish',
'posts_per_page' => '10',
'orderby' => 'date',
'order' => 'DESC',
'offset' => $offset,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) {
while ($loop->have_posts()) {
$loop->the_post();
?>
<article>
<?php if (get_post_type() == 'project') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'communities') : ?>
<div class="item">
<div class="post-box">
<?php if (has_post_thumbnail()) {
the_post_thumbnail('full', array('class' => 'img-responsive block image'));
} ?>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h3 class="text"><?php the_title(); ?></h3>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div>
</div> <!-- end item -->
<?php endif; ?>
<?php if (get_post_type() == 'post') : ?>
<div class="item">
<div class="home-news-box">
<a href="<?php the_permalink(); ?>">
<h1 class="news">News</h1>
<h3 class="news-title"><?php the_title(); ?></h3>
</a>
</div>
<a href="<?php the_permalink(); ?>" class="post-overlay">
<h1><?php $post_type = get_post_type($post->ID);
echo $post_type; ?></h1>
<h2><?php echo limit_words(get_the_excerpt(), '10'); ?> [...]</h2>
</a>
</div> <!-- end item -->
<?php endif; ?>
</article>
<?php
}
wp_reset_postdata();
}
wp_die();
} else {
exit();
}
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');
Where is your js, did you catch ajax response yet?
you can detect the last post and display none or hide the button by using this.
This is just an example
<?php if (($loop->current_post +1) == ($loop->post_count)) {
echo 'This is the last post'; ?>
<style>
#load-more-posts{display:none !important;}
</style>
<?php
} ?>
Related
Currently, the store is made to display products in certain tabs. This is the code I have in loop-start.php
<?php
/**
* Product Loop Start
*
* This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-start.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #package WooCommerce\Templates
* #version 3.3.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<section class="deals-wrapper product-list">
<div class="container">
<ul class="nav nav-tabs row justify-content-between" id="dealsTab" role="tablist">
<?php
$i = 0;
$categories = get_terms( array(
'taxonomy' => 'product_cat'
) );
foreach ( $categories as $key => $category ) {
$catname = $category->name;
$metaterms = get_term_meta($category->term_id);
$thumbnail_id = get_woocommerce_term_meta($category->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
//$terms = get_the_terms( $category->ID, 'product_cat' )
$display_category_on_shop_page = get_field('display_category_on_shop_page',$category);
if($display_category_on_shop_page == "Yes"){
?>
<li class="nav-item col-lg-2 col" role="presentation">
<a class="nav-link <?php if($i == 0){ $i++; ?> active <?php } ?>" id="<?php echo $category->slug ?>-tab" data-toggle="tab" href="#<?php echo $category->slug ?>" role="tab" aria-controls="<?php echo $category->slug ?>" aria-selected="true">
<img src="<?php echo $image; ?>" alt="apple" />
<span><?php echo $catname; ?></span>
</a>
</li>
<?php } } wp_reset_postdata(); ?>
</ul>
<div class="tab-content" id="dealsTabContent">
<?php
$i = 0;
foreach($categories as $key => $category) {
?>
<div class="tab-pane fade <?php if($i == 0){ $i++; ?> show active <?php } ?>" id="<?php echo $category->slug ?>" role="tabpanel" aria-labelledby="<?php echo $category->slug ?>-tab">
<div class="deal-tiles" id="accordionExample<?php echo $category->slug ?>">
<?php
$c = 1;
$count = 1;
$args = array(
'post_type' => 'product',
'posts_per_page' => 20,
'product_cat' => $category->slug,
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_key' => '_price',
'post_status' => 'publish'
);
$loop = new WP_Query( $args );
if( $loop->have_posts()) :
while ( $loop->have_posts()) :
$loop->the_post();
$p_id = wc_get_product()->get_id();
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'single-post-thumbnail' );
$currency = get_woocommerce_currency_symbol();
$name = get_the_title();
$link = get_the_permalink();
$product = wc_get_product(get_the_ID());
$thePrice = $product->get_price();
?>
<div class="deal-wrapper">
<div class="deal-tile">
<div class="text-center deal-head">
<h5>
<?php echo get_the_title(); ?>
</h5>
</div>
<div class="deal-body">
<div class="deal-img row">
<div class="deal-phone-img">
<a href="<?php echo $link; ?>" class="product-items">
<img src="<?php echo $image[0]; ?>" class="img-fluid" alt="phone" />
</a>
</div>
<div class="deal-phone-details">
<div class="deal-part1">
<h3>
<?php echo get_field('phone_detail_gb_data',$p_id); ?>
</h3>
<?php
while(have_rows('phone_detail_unlimited_data',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<p>
<?php echo $text; ?>
</p>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<div class="deal-part2 d-flex justify-content-between">
<div class="deal-part2-details">
<?php
if($product->get_type() == "simple"){
?>
<h5>
<?php echo get_field('network_price_text',$p_id); ?>
<?php echo $currency; echo $product->regular_price; ?>pm</h5>
<h5 class="our-price">
<?php echo get_field('our_price_text',$p_id); ?> :
<?php echo $currency; echo $product->sale_price; ?>pm</h5>
<h6>
<?php echo get_field('upfront_cost',$p_id); ?>
<?php echo get_field('upfront_cost_text',$p_id); ?>
</h6>
<?php
}else{
$product_variations = $product->get_available_variations();
$variation_product_id = $product_variations [0]['variation_id'];
$variation_product = new WC_Product_Variation( $variation_product_id );
$variation_min_price = $product->get_variation_price();
$price_regular_min = $product->get_variation_regular_price();
$price_sale_min = $product->get_variation_sale_price();
?>
<h5 class="network-price">
<?php echo get_field('network_price_text',$p_id); ?>
<?php echo $currency; echo $price_regular_min; ?>pm</h5>
<h5 class="our-price">
<?php echo get_field('our_price_text',$p_id); ?> :
<?php echo $currency; echo $price_sale_min; ?>pm</h5>
<!-- <?php if ( $price_html = $product->get_price_html() ) : ?>
<span class="price"><?php echo $price_html; ?></span>
<?php endif; ?> -->
<h6>
<?php echo get_field('upfront_cost',$p_id); ?>
<?php echo get_field('upfront_cost_text',$p_id); ?>
</h6>
<?php
}
?>
</div>
<div class="deal-part2-img">
<img src="<?php echo get_field('ee_image',$p_id)[" url "]; ?>" alt="">
</div>
</div>
</div>
</div>
<div class="deal-footer">
<div class="row deal-img justify-content-around">
buy now
view detail
<!-- <div id="heading<?php echo $count; ?>">
<h5 class="mb-0 lern-more-btn collapsed" data-toggle="collapse" data-target="#collapse<?php echo $count; ?>" aria-expanded="false" aria-controls="collapse<?php echo $count; ?>">
<span><?php echo get_field('learn_more_text',$p_id); ?></span>
<span><?php echo get_field('minimise_text',$p_id); ?></span>
</h5>
</div> -->
</div>
<div id="collapse<?php echo $count; ?>" class="collapse multi-collapse deal-desc">
<ul class="card-body">
<?php
while(have_rows('product_details',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<li>
<p>
<?php echo $text; ?>
</p>
</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
<div class="features-wrapper">
<?php $product_other_detail = get_field('product_other_detail',$p_id); ?>
<span class="features-ttl"><?php echo $product_other_detail["heading"]; ?></span>
<ul class="features-desc">
<?php
while(have_rows('product_other_detail',$p_id)) : the_row();
while(have_rows('other_details',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<li>
<?php echo $text; ?>
</li>
<?php endwhile; endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
</div>
<div class="compare-btn">
<input type="checkbox" id="compare<?php echo $count; ?>" class="chkbox" data-name="<?php echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8'); ?>" data-price="<?php echo $currency; echo $thePrice; ?>pm" data-image="<?php echo $image[0]; ?>" />
<label class="mb-0 ml-1" for="compare<?php echo $count; ?>">Compare</label>
</div>
</div>
</div>
</div>
<?php $count++; endwhile; endif; ?>
</div>
</div>
<?php } wp_reset_postdata(); ?>
</div>
Each time the store is opened from the link, the first tab is active and the content of the first product category is displayed. My goal is to rework the code so that I can activate each category (tab) with a direct link. I want to use the direct link to this category to activate the tab for the respective category and show the products. At the moment I have to click on the tab to get this effect, otherwise the first tab is always active.
I ask for your help.
Š¢hanks.
I've got a page which has a Bootstrap tabsection. Every tab contains a machine (custom post type), which has a unique PDF download link attached to it by an ACF field. When pressed on the button, a modal opens with a form which has ID 1350. When the form has been filled in and sent has been hit, the relevant PDF file is automatically downloaded in a new tab.
The problem here is that when there's multiple machines, both the PDF files start downloaden. When the button on the second machine is pressed, the first machine pdf gets downloaded, then the second one.
I've tried outputting event.detail.containrePostId but it only returns the post id of the first machine in the query, twice. What i can't seem to achieve is that when a button is pressed on the form, only that relevant pdf gets downloaded. Below is the flexible content part that handles the tabsection.
<?php elseif( get_row_layout() == 'tabsectie'): ?>
<div class="section wow padding-0 margt-0 margb-0 animated">
<div class="tabsection-slider-wrapper">
<div class="pseudo-bg pseudo-right pseudo-lightblue"></div>
<?php if( have_rows('tabs_repeater') ): $i = 1; // Set the increment variable ?>
<div class="container">
<div class="row justify-content-center tabsection-row">
<div class="col-xl-8">
<div class="tab-wrapper">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php while ( have_rows('tabs_repeater') ) : the_row(); ?>
<?php $machines = get_sub_field('machine'); ?>
<?php if( $machines ): ?>
<?php foreach( $machines as $post ): ?>
<?php setup_postdata($post); ?>
<li class="nav-item<?php if($i == 1) echo ' active';?>">
<a class="nav-link<?php if($i == 1) echo ' active';?>" id="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" role="tab" aria-controls="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" aria-selected="true"><?php echo the_title(); ?></a>
</li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php $i++; /* Increment the increment variable */ endwhile; //End the loop ?>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-content" id="myTabContent">
<?php $i = 1; /* Set the increment variablew */ while ( have_rows('tabs_repeater') ) : the_row(); ?>
<?php $machines = get_sub_field('machine'); ?>
<?php if( $machines ): ?>
<?php foreach( $machines as $post ): ?>
<?php setup_postdata($post); ?>
<?php
$pdf_machine = get_field('pdf_machine');
?>
<div class="tab-pane fade show <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" role="tabpanel" aria-labelledby="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>-tab">
<div class="image-slider-content-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-4 offset-lg-2 slider-content-left">
<h1 class="mb-5"><?php the_title(); ?></h1>
<span class="machine-content"><?php get_template_part('blocks/main-fields'); ?></span>
<?php $pdf_machine = get_field('pdf_machine'); ?>
<?php if(!empty($pdf_machine)): ?>
<?php var_dump($pdf_machine); ?>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#downloadModalMachine-<?php echo $i; ?>">Download brochure</button>
<?php
/*pdf_download(get_the_ID());*/
// Modal template part ONLY for the machines modal
include('includes/modal.php');
printf("
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '1350' == event.detail.contactFormId) {
alert( event.detail.containerPostId );
}
}, false );
</script>", $pdf_machine);
?>
<?php endif; ?>
</div>
</div>
</div>
<div class="image-slider wow animate__animated animate__fadeInRight" data-wow-offset="100">
<div class="carousel">
<?php $slider = get_sub_field('slider'); ?>
<?php if(have_rows('media')): ?>
<?php while(have_rows('media')): the_row(); ?>
<?php $slider_type = get_sub_field('media_type'); ?>
<div class="slider-item">
<?php if($slider_type == 'image'): ?>
<?php $image = get_sub_field('image'); ?>
<?php if( !empty($image) ): ?>
<img class=" lider-image" src="<?php echo $image['sizes']['gallery']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php elseif($slider_type == 'video'): ?>
<?php $video = get_sub_field('video'); ?>
<?php if (!empty($video) ): ?>
<div class="embed-container">
<?php echo $video; ?>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="slider-arrow-wrapper">
<div class="slider-nav">
<div class="nav-button nav-btn-left">
</div>
<div class="nav-button nav-btn-right">
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php $i++; /* Increment the increment variable */ endwhile; //End the loop ?>
</div>
</div>
</div>
<?php endif; ?>
Here is the javascript that generates the download link
<?php
/*pdf_download(get_the_ID());*/
// Modal template part ONLY for the machines modal
include('includes/modal.php');
printf("
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '1350' == event.detail.contactFormId) {
window.open('%s');
}
}, false );
</script>", $pdf_machine);
?>
<?php endif; ?>
The gallery which including dynamic pills I've developed using advance custom field needs to add a lightbox. I can't figure out where to add the code of lightbox since all my attempts were failed.
All the relevant stylesheets and script files links has been added to header.php and I'm not gonna post the header file code in here.
Here is my code.
<div class="gallery pull-left width-wide">
<!-- Menu -->
<div class="cat-menu pull-right padding-right-20">
<!--Categories : -->
<!-- Show All
<a href="#Category1" title="Category 1 " >Category 1 </a>
<a href="#Category2" title="Category 2" >Category 2</a>
<a href="#Category3" title="Category 3" >Category 3</a> -->
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#showall">Show All</a></li>
<li><a data-toggle="pill" href="#Category1">Category 1</a></li>
<li><a data-toggle="pill" href="#Category2">Category 2</a></li>
<li><a data-toggle="pill" href="#Category3">Category 3</a></li>
</ul>
</div><!-- // Menu -->
<!-- Gallery Items -->
<div class="gallery-items pull-left width-wide">
<div class="tab-content">
<div id="showall" class="tab-pane fade in active">
<?php
if( have_rows('show_all_images') ):
while ( have_rows('show_all_images') ) : the_row();
//vars
$image = get_sub_field('sa_image');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215" style="cursor:pointer"/>
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
<div id="Category1" class="tab-pane">
<?php
if( have_rows('catagory_one_image') ):
while ( have_rows('catagory_one_image') ) : the_row();
//vars
$image = get_sub_field('cat_img');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215"/>
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
<div id="Category2" class="tab-pane">
<?php
if( have_rows('catagory_two_image') ):
while ( have_rows('catagory_two_image') ) : the_row();
//vars
$image = get_sub_field('cat_two_img');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215" />
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
<div id="Category3" class="tab-pane">
<?php
if( have_rows('catagory_three_image') ):
while ( have_rows('catagory_three_image') ) : the_row();
//vars
$image = get_sub_field('cat_three_img');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215" />
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
</div>
</div><!-- // Gallery Items -->
</div><!-- // Gallery -->
Kindly help me to add a lightbox to this gallery
Thank You
you can use fancybox easily.Please review http://fancyapps.com/fancybox/3/
Here is example using:
<?php if(get_field('gallery')):
echo '<div class="gallery__images">';
$i == 0;
while(has_sub_field('gallery')):
$i++;
$parent_image = get_sub_field('parent_image');
echo '<div class="gallery_inner_image">';
echo '<div class="holder">';
echo '<a class="fancybox" rel="group'.$i.'" href="'.$parent_image['url'].'">';
echo '<img src="' . $parent_image['sizes']['gallery-thumb'] . '" alt="' . $parent_image['alt'] . '" />';
echo '</a>';
echo '</div>';
echo '<div class="gallery__caption">'.get_sub_field('caption').'</div>';
if(get_sub_field('gallery_images')):
while(has_sub_field('gallery_images')):
echo '<a class="fancybox" rel="group'.$i.'" href="';
echo get_sub_field('gallery_image')['sizes']['large'];
echo '" /></a>';
endwhile;
endif;
echo '</div>';
endwhile;
echo '</div>'; endif; ?>
Been trying to get a solution for this for a while now and haven't been able to come up with anything that works.
My goal is that when you hover over this particular div, the background image will change to a darkened version of that background image. I've tried using the filter property but it affects all of the inside divs containing content. (Through JavaScript)
This is being done inside a repeater field through ACF. So the background-image is being selected by the sub-field in within the repeater.
I've attempted some Javascript but haven't found a solution.
Also looked at replacing the div's hence you'll see a hover-div. But had no luck.
Below you'll find my code for reference.
Any assistance would be greatly appreciated!
<div class="member-wrap grid-x grid-margin-x grid-margin-y">
<?php if ( have_rows( 'branch_team_members' ) ) : ?>
<?php while ( have_rows( 'branch_team_members' ) ) : the_row(); ?>
<div class="branch-member-main small-12 medium-6 large-3 cell">
<?php $team_member_hover_image = get_sub_field( 'team_member_hover_image' ); ?>
<div class="main-member-hover" style="background-image: url('<?php echo $team_member_hover_image['url']; ?>');">
</div>
<?php $team_member_image = get_sub_field( 'team_member_image' ); ?>
<div class="main-member-area" style="background-image: url('<?php echo $team_member_image['url']; ?>');">
<h4 class="member-name-hover"><?php the_sub_field( 'team_member_name' ); ?></h4>
<span class="member-position-hover"><?php the_sub_field( 'team_member_position' ); ?></span>
<?php the_sub_field( 'team_member_bio' ); ?>
</div>
<div class="main-member-contact">
<span class="member-name"><?php the_sub_field( 'team_member_name' ); ?></span>
<span class="member-contact"><?php the_sub_field( 'team_member_contact' ); ?></span>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
Haven't debugged it all - but this might give you an idea, on how to do it.
This method will create a block for each box with a counter
<div class="member-wrap grid-x grid-margin-x grid-margin-y">
<?php if ( have_rows( 'branch_team_members' ) ) : ?>
<?php $counter; ?>
<?php while ( have_rows( 'branch_team_members' ) ) : the_row(); ?>
<?php $team_member_hover_image = get_sub_field( 'team_member_hover_image' ); ?>
<?php $counter++; ?>
<style type="text/css">
.blockNumber-<?php echo $counter; ?>{
background-image: url('<?php echo $team_member_image['url']; ?>');
}
.blockNumber-<?php echo $counter; ?>:hover{
background-image: url('<?php echo $team_member_hover_image['url']; ?>');
}
</style>
<div class="branch-member-main small-12 medium-6 large-3 cell">
<?php $team_member_image = get_sub_field( 'team_member_image' ); ?>
<div class="main-member-area blockNumber-<?php echo $counter; ?>">
<h4 class="member-name-hover"><?php the_sub_field( 'team_member_name' ); ?></h4>
<span class="member-position-hover"><?php the_sub_field( 'team_member_position' ); ?></span>
<?php the_sub_field( 'team_member_bio' ); ?>
</div>
<div class="main-member-contact">
<span class="member-name"><?php the_sub_field( 'team_member_name' ); ?></span>
<span class="member-contact"><?php the_sub_field( 'team_member_contact' ); ?></span>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
I have a PHP While statement on my page. I would like to hide DIV with the class name "coupon" for each record that has empty field $rows['deal'];. This is what my code currently looks like. How can I alter to accomplish this. Thank You much!!!
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>
You can do this on this way:
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
Full code
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>
Try below code:
<?php while ($rows = mysql_fetch_array($query)) { ?>
<!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>
You do not need javascript for this, add this line:
<?php echo ($rows['deal']==""?"style='display:none;'":"") ?>
Complete code:
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" <?php echo ($rows['deal']==""?"style='display:none;'":"") ?> id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>
with PHP:
You can just count if row has a data so echo it:
this is row with data:
<?php
$row = 'you can add get rows from database';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>
this is row with out data
<?php
$row = '';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>
If the field is empty, it will have a length of 0. So you can use that logic in order to hide the 'coupon' class
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<!-- My code -->
<?php
if(strlen($rows['deal'] > 0)
{
?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php
}
?>
<!-- End of my code -->
</div>
<?php } ?>
We can use something like this .
<?php if($fildvalue != ''){ ?>
<div><?php echo $fildvalue; ?> </div>
<?php } ?>
so div will be created only when their is an value
Check the data row and put all the HTML tags which you want to hide in case if it is empty or not set.
<?php if(isset($rows['deal']) && !empty($rows['deal'])){ ?>
<span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
In PHP, empty() function is able to check NULL value, empty string and zero in return.