how can i retrieve specific product details from this page to another page when i click the link?
This is my code for displaying all products in database:
<div class="features_items"><!--features_items-->
<h2 class="title text-center">Features Items</h2>
<?php
$product_array = $db_handle->runQuery("SELECT * FROM tblforface ORDER BY prodid ASC");
if (!empty($product_array)) {
foreach($product_array as $key=>$value){
?>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="images/shop/product12.jpg" alt="" />
<h2><?php echo "₱".$product_array[$key]["prodprice"]; ?></h2>
<p><?php echo $product_array[$key]["prodname"]; ?></p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2><?php echo "₱".$product_array[$key]["prodprice"]; ?></h2>
<p><?php echo $product_array[$key]["prodname"]; ?></p>
<i class="fa fa-shopping-cart"></i>Add to cart
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><i class="fa fa-plus-square"></i>Add to wishlist</li>
<li><i class="fa fa-plus-square"></i>Add to compare</li>
</ul>
</div>
</div>
</div>
You can add the id into a query string, like http://blah.com/product.php?id=123
<a href="../homescreen/product/product.php?id=<?= $product_array[$key]["id"]; ?>" class="btn btn-default add-to-cart">
<i class="fa fa-shopping-cart"></i>Add to cart
</a>
And in your other page,
$id = filter_input(INPUT_GET, 'id', FILTER_SANITIZE_NUMBER_INT);
We do that instead of the dangerous $id = $_GET['id'];. Check the docs for filter_input here http://php.net/manual/en/function.filter-input.php
Related
I am trying to display a piece of HTML code I added to a WordPress website but I do not want to use the echo function as it affects the loop. I had to use a WP_query which works in a certain way to get what I want to do. My code works great but I don't want it on certain pages.
This is what I have tried so far
<?php
if(!is_front_page()){
<div class="slider-container">
<h4 class="slider-header">
<span class="slider-header_text">Trending</span>
</h4>
<div class="slider">
<div class="carousel-container">
<div class="carousel-inner">
<div class="track">
<!--Beginning of responsive slider-->
<?php $custom_query = new WP_Query(array(
'posts_per_page' => 12,
'category_name' => 'featured-posts',
));
while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<div class="card-container">
<a href="<?php the_permalink(); ?>" class="card">
<div class="img">
<img src="<?php the_post_thumbnail_url('thumbnail'); ?>" alt="">
</div>
<div class="info">
<h5><?php the_title(); ?></h5>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</div>
</div>
<div class="nav">
<button class="prev">
<i class="fas fa-angle-left"></i>
</button>
<button class="next">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
}
?>
But this immediately throws an error.
I haven't checked if your code works. But the provided code without syntax errors would be:
<?php
if (!is_front_page()) {
?>
<div class="slider-container">
<h4 class="slider-header">
<span class="slider-header_text">Trending</span>
</h4>
<div class="slider">
<div class="carousel-container">
<div class="carousel-inner">
<div class="track">
<!--Beginning of responsive slider-->
<?php $custom_query = new WP_Query(array(
'posts_per_page' => 12,
'category_name' => 'featured-posts',
));
while ($custom_query->have_posts()) : $custom_query->the_post(); ?>
<div class="card-container">
<a href="<?php the_permalink(); ?>" class="card">
<div class="img">
<img src="<?php the_post_thumbnail_url('thumbnail'); ?>" alt="">
</div>
<div class="info">
<h5><?php the_title(); ?></h5>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query
?>
</div>
</div>
<div class="nav">
<button class="prev">
<i class="fas fa-angle-left"></i>
</button>
<button class="next">
<i class="fas fa-angle-right"></i>
</button>
</div>
</div>
</div>
</div>
<?php } ?>
Hi guys im using WP advanced custom fields pro repeater function, trying get my bootstrap slider to work with advanced custom fields.
here is my ACF set up
ACF setup WP side
and here is my bootsrap code with ACF integrated.
my code
<section class="pb-5">
<div class="container">
<div id="carousel_03" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col-lg-4">
<ol class="carousel-indicators tabs row">
<li class="col-lg-12 col-sm-6 mb-2 active">
<div data-target="#carousel_03" data-slide-to="0" role="button" class="carousel-indicator p-3">
<h4 class="mb-1">one</h4>
</div>
</li>
<li class="col-lg-12 col-sm-6 mb-2">
<div data-target="#carousel_03" data-slide-to="1" role="button" class="carousel-indicator p-3">
<h4 class="mb-1">two</h4>
</div>
</li>
<li class="col-lg-12 col-sm-6 mb-2">
<div data-target="#carousel_03" data-slide-to="2" role="button" class="carousel-indicator p-3">
<h4 class="mb-1">three</h4>
</div>
</li>
<li class="col-lg-12 col-sm-6 mb-2">
<div data-target="#carousel_03" data-slide-to="3" role="button" class="carousel-indicator p-3">
<?php
if( have_rows('slider') ):
while ( have_rows('slider') ) : the_row();
the_sub_field( 'title');
?>
<h4 class="mb-1"><?php the_sub_field($section . 'title') ?></h4>
<?php
endwhile;
endif;
?>
</div>
</li>
</ol>
</div>
<div class="col-lg-8 mb-3">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="some.svg" class="d-block w-100" alt="alt">
</div>
<div class="carousel-item">
<img src="some.svg" class="d-block w-100" alt="alt">
</div>
<div class="carousel-item">
<img src="some.svg" class="d-block w-100" alt="alt">
</div>
<div class="carousel-item">
<?php
if( have_rows('slider') ):
while ( have_rows('slider') ) : the_row();
the_sub_field( 'image');
?>
<img class="img-fluid"
src="<?php the_sub_field($section . 'image') ?>"
alt="<?php the_sub_field($section . 'alt') ?>">
<?php
endwhile;
endif;
?>
</div>
</div>
<a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</div>
</div>
</section>
My aim
for less code and to have ACF to pull all images for the slider in the correct order.
My problem
as I currently do not have my images in a array they all display where I cal my sub field, whats the best solution to get this working correctly ?
You are better off using get_field() (https://www.advancedcustomfields.com/resources/get_field/) to retrieve the repeater values in this instance, as this returns an associative array containing all sub-field values.
You can then iterate that array to output the HTML you need for the Bootstrap carousel.
Also worth noting that the image values returned will also contain a key sizes with URLs to the images of all of your themes thumbnail sizes in it, if you want to output a particular image size in the carousel.
Note: I haven't actually tested this with Bootstrap, but it should work.
<?php
// get the ACF values using get_field()
$sliderImages = get_field('slider');
?>
<section class="pb-5">
<div class="container">
<div id="carousel_03" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col-lg-4">
<ol class="carousel-indicators tabs row">
<!-- Iterate images to output indicators -->
<?php foreach ($sliderImages as $imgNumber => $image) : ?>
<li class="col-lg-12 col-sm-6 mb-2<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<div data-target="#carousel_<?= $imgNumber ?>" data-slide-to="<?= $imgNumber ?>" role="button" class="carousel-indicator p-3">
<h4 class="mb-1"><?= $imgNumber + 1 ?></h4>
</div>
</li>
<?php endforeach ?>
</ol>
</div>
<div class="col-lg-8 mb-3">
<div class="carousel-inner">
<!-- Iterate images again to output carousel items -->
<?php foreach ($sliderImages as $imgNumber => $image) : ?>
<div class="carousel-item<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<img src="<?= $image['image']['url'] ?>" alt="<?= $image['image']['alt'] ?>">
</div>
<?php endforeach ?>
</div>
<a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</div>
</div>
</section>
I have a slider built in bootstrap and using Advanced Custom Fields in WordPress, my data attribute when written in HTMl the data-slide-to="" would be 0, 1 ,2 ,3 and so on.
If i was to write this in HTML it works. now I have integrated it with WordPress Advanced Custom Fields and added php I can now inspect the code and see the data attribute having 0, 1, 2, 3 onward. however now i click on the div with this attribute and the slide wont change as it did written in HTML.
is there something in my code preventing this, why wont my slide change now if click on the div with a different data-slide-to=""?
For example in HTML if i click on the div with data-slide-to="1" then it shows the second slide.
however now written in PHP this in not working, can some one help me understand why?
my code
<?php
$sliderImages = get_field('slider');
$count = 0;
?>
<section class="pb-5">
<div class="container">
<div id="carousel_03" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col-lg-4">
<ol class="carousel-indicators tabs row">
<?php if (have_rows('slider')):
while (have_rows('slider')): the_row();
?>
<li class="col-lg-12 col-sm-6 mb-2 <?php echo ($count ++) >= 1 ? '' : 'active'; ?> ">
<div data-target="#carousel_3" data-slide-to="<?php echo ($count ++); ?>" role="button"
class="carousel-indicator p-3">
<h4 class="mb-1"><?php the_sub_field('title', $post->ID)?></h4>
<?php
endwhile;
endif;
?>
</div>
</li>
</ol>
</div>
<div class="col-lg-8 mb-3">
<div class="carousel-inner">
<?php foreach ($sliderImages as $imgNumber => $image) : ?>
<div class="carousel-item<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<img src="<?= $image['image']['url'] ?>" alt="<?= $image['image']['alt'] ?>">
</div>
<?php endforeach ?>
</div>
<a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</div>
</div>
</section>
I have been trying to loop Data from a Rest , and i am able to do it without grid but with grid it just doesn't work . Here is the Source code where i am trying to loop .
THE CODE WITH ERROR
<?php
$json = file_get_contents('https://newsapi.org/v2/everything?domains=wsj.com&apiKey=5d');
$news= ( json_decode($json, true));
$ii = 0;
foreach ($news["articles"] as $headling["articles"]) {?>
<div class="row"><?php
foreach ( $headling["articles"] as $i => $newsdata){?>
<?php if($ii==0){
?>
<div class="col-md-6">
<div class="card">
<div class="header">
<h4 class="title">Email Statistics</h4>
<p class="category">Last Campaign Performance</p>
</div>
<div class="content">
<img src="<?php echo $newsdata['urlToImage'];?>" style="width:100%;" /> <div class="footer">
<div class="legend">
<i class="fa fa-circle text-info"></i> Open
<i class="fa fa-circle text-danger"></i> Bounce
<i class="fa fa-circle text-warning"></i> Unsubscribe
</div>
<hr>
<div class="stats">
<i class="fa fa-clock-o"></i> Campaign sent 2 days ago
</div>
</div>
</div>
</div>
</div>
<?php
$ii =1 ;
}else{
?>
<div class="col-md-6">
<div class="card">
<div class="header">
<h4 class="title">Users Behavior</h4>
<p class="category">24 Hours performance</p>
</div>
<div class="content">
<img src="<?php echo $newsdata['urlToImage'];?>" style="width:100%;" /> <div class="footer">
<div class="footer">
<div class="legend">
<i class="fa fa-circle text-info"></i> Open
<i class="fa fa-circle text-danger"></i> Click
<i class="fa fa-circle text-warning"></i> Click Second Time
</div>
<hr>
<div class="stats">
<i class="fa fa-history"></i> Updated 3 minutes ago
</div>
</div>
</div>
</div>
</div>
<?php
$ii = 0;
}
}
?>
</div>
<?php
}
?>
THE PROBLEM ?
It is not giving me any Error, I have been try to do it with a inner loop.But it just doesn't work Here is the Screenshot. Well basically what i am thinking is its not looping the rows .
Here it is
EDIT
The loop inside a loop was just useless.
You forgot a </div> inside the else { ... } part. See the pretty formatted code:
<div class="col-md-6">
<div class="card">
<div class="header">
<h4 class="title">Users Behavior</h4>
<p class="category">24 Hours performance</p>
</div>
<div class="content">
<img src="<?php echo $newsdata['urlToImage'];?>" style="width:100%;" />
<div class="footer">
<div class="footer">
<div class="legend">
<i class="fa fa-circle text-info"></i> Open
<i class="fa fa-circle text-danger"></i> Click
<i class="fa fa-circle text-warning"></i> Click Second Time
</div>
<hr>
<div class="stats">
<i class="fa fa-history"></i> Updated 3 minutes ago
</div>
</div>
</div>
</div>
</div>
looking for a steer in the right direction getting this loop working. I'm nearly there but not 100% as I've got a mysterious box appearing at the top and the bottom of the search results. Would anyone be able to check over to see if the loop is right, please?
I've tried jigging the loop around but can't make any sense of it.
<?php get_header(); ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<p class="text-muted text-size-small">
<?php
global $wp_query;
echo 'You have '.$wp_query->found_posts.' results found.';?>
</p>
<hr>
<?
php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="media-body">
<h6 class="media-heading text-semibold">
<?php echo get_post_meta(get_the_id(), 'title', true ); ?>,
<?php echo get_post_meta(get_the_id(), 'firstname', true ); ?>,
<?php echo get_post_meta(get_the_id(), 'lastname', true ); ?>
</h6>
<ul class="list-inline list-inline-separate text-muted mb-10">
<li><a href="#" class="text-muted">
<?php echo get_post_meta( get_the_id(), 'type', true ); ?>
</a> </li>
<li><?php echo get_post_meta(get_the_id(), 'netbios_name', true ); ?> |
<?php echo get_post_meta(get_the_id(), 'device_class', true ); ?></li>
</ul>
<?php echo get_post_meta( get_the_id(), 'asset_id', true ); ?>
<?php echo get_post_meta(get_the_id(), 'asset_status', true ); ?>
</div>
<div class="media-right text-nowrap">
<a href="<?php the_permalink();?>"
class="btn btn-warning">View</a>
</div>
</li>
<ul class="media-list content-group">
<li class="media panel panel-body stack-media-on-mobile">
<div class="media-left">
<a href="#">
<img src="assets/images/demo/brands/dell.png" class="img-rounded img-lg" alt="">
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php get_template_part('footer', 'simple');?>
<?php get_footer(); ?>
Here's what the HTML view is spitting out
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<p class="text-muted text-size-small">
You have 3 results found. </p>
<hr>
<div class="media-body">
<h6 class="media-heading text-
semibold">
, , </h6>
<ul class="list-inline list-inline-
separate text-muted mb-10">
<li><a href="#" class="text-
muted"> </a></li>
<li> | </li>
</ul>
</div>
<div class="media-right text-nowrap">
View
</div>
</li>
<ul class="media-list content-group">
<li class="media panel panel-body stack-
media-on-mobile">
<div class="media-left">
<a href="#">
<img src=" class="img-rounded
img-lg" alt="">
</a>
</div>
<div class="media-body">
<h6 class="media-heading text-
semibold">
34
, , </h6>
<ul class="list-inline list-inline-
separate text-muted mb-10">
<li><a href="#" class="text-
muted"> </a></li>
<li> | </li>
</ul>
</div>
<div class="media-right text-nowrap">
<a href="" class="btn btn-
warning">View</a>
</div>
</li>
<ul class="media-list content-group">
<li class="media panel panel-body stack-
media-on-mobile">
<div class="media-left">
<a href="#">
<img src=" class="img-rounded
img-lg" alt="">
</a>
</div>
<div class="media-body">
<h6 class="media-heading text-
semibold">
34
Mr, User, User </h6>
<ul class="list-inline list-inline-separate text-muted mb-10">
<li>User </li>
<li> | </li>
</ul>
</div>
<div
class="media-right text-nowrap">
View
</div>
</li>
<ul class="media-list content-group">
<li class="media
panel panel-body stack-media-on-mobile">
<div
class="media-left">
<a
href="#">
<img src=" class="img-rounded img-lg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /main content -->
</div>
<!-- /page content -->
/div>
<!-- /page container -->