Creating a Single Pages/Posts from Repeater Field Rows

• GKDesign

• November 3, 2017 at 3:15 am

Hi all,

I am using ACF Pro to create a product catalogue and want to display each row as a single page. I am using a Custom Post Type and each post is a catalogue with each repeater row being a product. The structure is as follows:

Post Title = Garden Furniture
Repeater Row = Product 1
Repeater Row = Product 2 etc.

I can display all of the products and the sub-fields as required but need to have a link for each product that will display it as a single page with more information see below:

Product Image
Product Name
Short Description
Price
Link to single page (this should link to an individual product row from the repeater see below)

Single Product Title
Single Produce Image
Long Description
Contact Us Link

Here is my code for the page that lists all of the products.

<?php if( have_rows('product') ): $i = 0; ?>
<div>
<?php while( have_rows('product') ): the_row(); $i++; ?>
<div>
<img src="<?php the_sub_field('product_image'); ?>" alt="" />
<h2><?php the_sub_field('product_name'); ?></h2>
<p><?php the_sub_field('product_name'); ?></p>
<h3><?php the_sub_field('price');?></h3>
<p><?php the_sub_field('product_name'); ?></p>
<a href="link-to-single-page-<?php echo the_sub_field('product_name'); ?>">View Product</a>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>

Thanks in advance for any solutions or pointers in the right direction

• John Huebner

• November 3, 2017 at 6:46 am

The best solution would be to create another custom post type for products and then use a relationship field to add products to each catalog.

There isn’t any real solution to create a separate page for each product, at least nothing easy. The following is an inefficient way to accomplish this.

first you would need to link to the page that is showing the catalog and use a query parameter to specify the product

href="${current_page_url}?product={$url_safe_product_name}"

The next step would be to test to see if that parameter is set

if (!isset($_GET['product'])) {
  // show just one product
} else {
  // normal page display here
}

where I have added // show just one product you would need to loop through the repeater, find the row that matches the value of the $_GET parameter and have different code to display that row.

• GKDesign

• November 4, 2017 at 1:54 am

Hi John,

Thanks for getting back to me.

I haven’t had any luck with the using the function to test the parameter. I get a white screen when I incorporate it in my code.

I’ve streamlined my original down for testing:

<div class="container">
    <?php if( have_rows('product') ): $i = 0; ?>
    <?php while( have_rows('product') ): the_row(); $i++; ?>
    <h1>Repeater - <?php echo $i; ?></h1>
    <?php endwhile; ?>
    <?php endif; ?>
</div> 

I’ve tried a number of combinations for using $_GET with my code but haven’t gotten anywhere. Below is my most recent attempt.

<div>
     <?php 
        if (!isset($_GET['product'])) { 
        // show just one product
            if( have_rows('product') ): $i = 0; {
                while( have_rows('product') ): the_row(); $i++;
            echo '<h1>Repeater - ' . $i'</h1>' ;
                endwhile;
                }
            endif;

} else {
    
    echo '<a href="${current_page_url}?product={$url_safe_product_name}">View Product</a>';
}

    endif; 
    
    ?>
</div>    

Thanks again for taking the time to help with this it’s much appreciated.

Ger

• John Huebner

• November 6, 2017 at 1:50 am

don’t know why your getting a white screen, try turning on debugging and debug display https://codex.wordpress.org/WP_DEBUG

but I did see a logic error error in my code

if (!isset($_GET['product'])) {
  // show content of all products here
} else {
  // normal page display here
  // show content of all products
}

• GKDesign

• November 6, 2017 at 11:24 pm

Hi John,

I’ve debugged my code. I really need to brush up on my php syntax. I have one more and hopefully final question about your solution.

My link to what would be the single product page looks like this

<a href="<?php echo $_SERVER['REQUEST_URI']; ?>?product ['$url_safe_product_name']">View Product</a>

The REQUEST_URI gets the current post page but I can’t work out how find the url for ?product={‘$url_safe_product_name‘}

Cheers

Ger

• John Huebner

• November 6, 2017 at 11:47 pm

I would use get_permalink() for the current page url if it is a “post” https://developer.wordpress.org/reference/functions/get_permalink/ it’s generally better to use WP functions for this.

The url safe name is something that you’re going to need to work out. It could be as simple as

$slug = url_encode($product_name);

or anything that renders the name in a way that works as a url value.