If statement shortcode

Question

So, I am creating a shortcode to return some ACF content.

The following code works:

function howitworks() {
    $page = get_page_by_title('shop');
    if (have_rows('steps', $page->ID)) :
        while (have_rows('steps', $page->ID)) : the_row();
            $image = get_sub_field('icon');
            $i = '<div class="col">
                    <img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['alt'].'" title="'.$image['alt'].'" />
                    <h2>'.the_sub_field('step').'</h2>
                    <p>'.the_sub_field('description').'</p>
                </div>';
        endwhile;
    endif;
    return $i;
}
add_shortcode('howitworks', 'howitworks');

The problem I am having is I'd like to add a div container in-between the if and the while. I have tried multiple ways. I tried another variable like $j = '<div class="test">' then added another return return $i, $j...but then I have a syntax error. If I add a semi-colon the error goes away, but the div doesn't get returned. If I wanted the div inside the while, I'd be fine. But it seems like I'm having issues because I'm trying to put it outside the while.

The other thing I tried was just to return the outer div like: return '<div class="test">'; which will return the div, but then my original return doesn't return anything.

Any ideas?

Thanks,
Josh

Answer 1

Try this:

<?php

function howitworks() {
    $page = get_page_by_title('shop');
    $html = '';
    if (have_rows('steps', $page->ID)) :
        $html .= '<div class="test">';
        while (have_rows('steps', $page->ID)) : the_row();
            $image = get_sub_field('icon');
            $html .= '<div class="col">
                    <img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['alt'].'" title="'.$image['alt'].'" />
                    <h2>'.get_sub_field('step').'</h2>
                    <p>'.get_sub_field('description').'</p>
                </div>';
        endwhile;
        $html .= '</div>';
    endif;
    return $html;
}
add_shortcode('howitworks', 'howitworks');
?>

EDIT: I change up my code for replace the_sub_field by get_sub_field

Answer 2

So, I wanted to give Sam credit, he solved the issue, so his answer is the right one...I just made a little tweak to get it 100% working. I made get_sub_field variables instead of calling them inline, which helped them display properly (instead of above my div container) My final code looks like:

function howitworks() {
    $page = get_page_by_title('shop');
    $html = '';
    if (have_rows('steps', $page->ID)) :
        $html .= '<div class="test">';
        while (have_rows('steps', $page->ID)) : the_row();
            $image = get_sub_field('icon');
            $step = get_sub_field('step');
            $desc = get_sub_field('description');
            $html .= '<div class="col"><img src="'.$image['sizes']['thumbnail'].'" alt="'.$image['alt'].'" title="'.$image['alt'].'" /><h2>'.$step.'</h2><p>'.$desc.'</p></div>';
        endwhile;
        $html .= '</div>';
    endif;
    return $html;
}
add_shortcode('howitworks', 'howitworks');

Thanks,
Josh