I'm a newbie to php and am having a hard time spotting where the closing tags (mostly divs) need to be placed within this PHP to match the original HTML I coded without dynamic content (for a Wordpress site). Right now my footer (not shown below) is getting pushed around because there's too many/not enough and the elements aren't nesting properly.
The function of the code is to pull information from nested repeaters in Advanced Custom Fields, loop through each element and place it into the html structure.
PHP:
<?php
if (have_rows('pSect')):
while (have_rows('pSect')):
the_row();
$productSectionTitle = get_sub_field('pSecTitle');
echo '<div class="block_title cf" id="collectie_block_title">' . $productSectionTitle . '</div>';
if (have_rows('prods')):
while (have_rows('prods')):
the_row();
$products = get_sub_field('prods');
echo '<div class="block cf" id="item_block">';
if (have_rows('indivProd')):
while (have_rows('indivProd')):
the_row();
$individualProduct = get_sub_field('indivProd');
$images = get_sub_field('images');
if ($images):
foreach ($images as $image):
$full_image_url = $image['url'];
echo '<div class="item_block_left bstretchMe cf" data-img-src="' . $full_image_url . '"></div>';
endforeach;
endif;
$productName = get_sub_field('product_name');
$productType = get_sub_field('product_type');
echo '<div class="item_block_right cf">' . '<div class="item_block_right_header cf">' . '<ul class="item_block_right_header_list">' . '<li id="product_title">' . $productName . '</li>' . '<li id="product_subtitle">' . $productType . '</li>' . '</ul>' . '<div class="item_block_right_viewoptions">bestellen opties</div>' . '</div>' . '<div class="item_block_right_details cf">' . '<div class="item_block_right_details_specs">' . '<h5 class="item_block_right_details_specstitle">Lorem Ipsum</h5>' . '<ul class="item_block_right_details_specslist">';
if (have_rows('detailList')):
while (have_rows('detailList')):
the_row();
$bijzonderheden = get_sub_field('bijzonderheden');
$message = "working!?";
echo '<li>' . $bijzonderheden . '</li>';
endwhile;
endif;
echo '</ul>' . '</div>' . '<div class="item_block_right_details_kleuren cf">' . '<p id="item_block_right_details_kleuren_title">Kleuren</p>';
if (have_rows('colOps')):
while (have_rows('colOps')):
the_row();
$colorPick = get_sub_field('cPick');
echo '<div id="item_block_right_details_kleuren_swatches" style="background-color:' . $colorPick . ';"></div>';
endwhile;
endif;
echo '</div>' . '<div class="item_block_right_details_ordering">' . '<h5 class="item_block_right_details_orderingtitle">Lorem Ipsum</h5>' . '<p class="item_block_right_details_orderingp">' . 'All products created through DITT Bags are custom made. Details such as color, size and detailing will be discussed upon the beginning of a new project. To order a bag and begin a new project, send an inquiry to [email protected]' . '</p>' . '</div>' . '</div>';
endwhile;
endif;
echo '</div>' .
'</div>';
endwhile;
endif;
echo '</div>';
endwhile;
endif;
echo '</div>' . '</div>';
?>
ORIGINAL HTML:
<div class="block_title cf" id="collectie_block_title">Tassen</div>
<div class="block cf" id="item_block">
<div class="item_block_left cf">
img img img make this a backstretch slideshow that autoplays when item is selected
</div>
<div class="item_block_right cf">
<div class="item_block_right_header cf">
<ul class="item_block_right_header_list">
<li id="product_title">SANNE</li>
<li id="product_subtitle">leren backpack XL</li>
</ul>
<div class="item_block_right_viewoptions">bestellen opties</div>
</div>
<div class="item_block_right_details cf">
<div class="item_block_right_details_specs">
<h5 class="item_block_right_details_specstitle">Lorem Ipsum</h5>
<ul class="item_block_right_details_specslist">
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</div>
<div class="item_block_right_details_kleuren">
<p id="item_block_right_details_kleuren_title">Kleuren</p>
<div id="item_block_right_details_kleuren_swatches">,.,.,.,.,.,.,</div>
</div>
<div class="item_block_right_details_ordering">
<h5 class="item_block_right_details_orderingtitle">Lorem Ipsum</h5>
<p class="item_block_right_details_orderingp">
All products created through DITT Bags are custom made. Details such as color, size and detailing will be discussed upon the beginning of a new project. To order a bag and begin a new project, send an inquiry to [email protected]
</p>
</div>
</div>
Thanks all!
Opening and closing elements in one line as an echo is going to cause you all kinds of issues. This line is the main one I'd avoid (which is where I think the error was.
echo '</div>' . '<div class="item_block_right_details_ordering">' . '<h5 class="item_block_right_details_orderingtitle">Lorem Ipsum</h5>' . '<p class="item_block_right_details_orderingp">' . 'All products created through DITT Bags are custom made. Details such as color, size and detailing will be discussed upon the beginning of a new project. To order a bag and begin a new project, send an inquiry to [email protected]' . '</p>' . '</div>' . '</div>';
There is definitely personal preferences in the code below but a couple of key points think about are below:
You'll use two types of PHP files. Ones for views (where you're rendering HTML) and ones where you just have logic. You've written yours in more of a logic style way where everything is wrapped in one massive PHP tag.
If you're rendering a view, I would recommend opening and closing PHP round each line of logic.
This helps read the file as a view easier. I know there's a lot of opening and closing but when you look at it I think you'll agree it's easier to interpret.
Most important point - Indentation - Doing the above means that you can keep your opening and closing tags indented correctly and will make it much easier to see where elements open and close.
Here's how I would write this file. I haven't tested this file as I don't have the data to render with it but it shows you the concept and the indentation gives me confidence it would be correct.
<?php if (have_rows('pSect')): ?>
<?php while (have_rows('pSect')) : ?>
<?php the_row(); ?>
<?php $productSectionTitle = get_sub_field('pSecTitle'); ?>
<div class="block_title cf" id="collectie_block_title"><?php echo $productSectionTitle; ?></div>
<?php if (have_rows('prods')) : ?>
<?php while (have_rows('prods')): ?>
<?php the_row(); ?>
<?php $products = get_sub_field('prods'); ?>
<div class="block cf" id="item_block">
<?php if (have_rows('indivProd')): ?>
<?php while (have_rows('indivProd')): ?>
<?php the_row(); ?>
<?php
$individualProduct = get_sub_field('indivProd');
$images = get_sub_field('images');
?>
<?php if ($images): ?>
<?php foreach ($images as $image): ?>
<?php $full_image_url = $image['url']; ?>
<div class="item_block_left bstretchMe cf" data-img-src="<?php echo $full_image_url; ?>"></div>
<?php endforeach; ?>
<?php endif; ?>
<?php
$productName = get_sub_field('product_name');
$productType = get_sub_field('product_type');
?>
<div class="item_block_right cf">
<div class="item_block_right_header cf">
<ul class="item_block_right_header_list">
<li id="product_title"><?php echo $productName; ?></li>
<li id="product_subtitle"><?php $productType; ?></li>
</ul>
</div>
<div class="item_block_right_viewoptions">bestellen opties</div>
</div>
<div class="item_block_right_details cf">
<div class="item_block_right_details_specs">
<h5 class="item_block_right_details_specstitle">Lorem Ipsum</h5>
<ul class="item_block_right_details_specslist">
<?php if (have_rows('detailList')): ?>
<?php while (have_rows('detailList')): ?>
<?php the_row(); ?>
<?php
$bijzonderheden = get_sub_field('bijzonderheden');
$message = "working!?";
?>
<li><?php echo $bijzonderheden; ?></li>;
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
<div class="item_block_right_details_kleuren cf">
<p id="item_block_right_details_kleuren_title">Kleuren</p>
<?php if (have_rows('colOps')): ?>
<?php while (have_rows('colOps')): ?>
<?php the_row(); ?>
<?php $colorPick = get_sub_field('cPick'); ?>
<div id="item_block_right_details_kleuren_swatches" style="background-color:<?php echo $colorPick; ?>"></div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="item_block_right_details_ordering">
<h5 class="item_block_right_details_orderingtitle">Lorem Ipsum</h5>
<p class="item_block_right_details_orderingp">
All products created through DITT Bags are custom made. Details such as color, size and detailing will be discussed upon the beginning of a new project. To order a bag and begin a new project, send an inquiry to [email protected]
</p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
The next thing you should be doing is breaking this file up into multiple files to make it more manageable. You can then use PHP to include the different bits that make up the bigger file.
You can use include to do this.
Hope this helps.