How to use html inside a functions.php code?

Question

I actually have a little problem while trying to use html inside a fuction code. It is something like this.

/* AJAX for Posts */
function misha_loadmore_ajax_handler(){
    $args = json_decode( stripslashes( $_POST['query'] ), true );
    $args['paged'] = $_POST['page'] + 1;
    $args['post_status'] = 'publish';
    
    query_posts( $args );
    if( have_posts() ) :while( have_posts() ): the_post();
    get_template_part( 'template-parts/post/content', get_post_format() );
    endwhile;
    endif;
    die;
}

Now what I want is to change this part

    get_template_part( 'template-parts/post/content', get_post_format() );

to

<div class="griditem">
                <a class="producturl" href="<?php the_permalink(); ?>">
                    <div class="productimagewrapper">
                        <img class="lazyload" data-src="<?php the_post_thumbnail_url(); ?>" />
                    </div>
                    <div class="productinfo">
                        <h2 class="productname"><?php the_title(); ?></h2>
                        <span class="productprice">$<?php echo esc_html( get_post_meta( get_the_ID(), 'price', true ) ); ?>.00</span>
                    </div>
                </a>
            </div>

Since I already tried it once, it is showing an error. I am pretty sure that I can't directly get htmls and closed-bracket php codes in a functions.php code. CAN YOU PLEASE HELP ME WITH THIS?

Answer 1

function misha_loadmore_ajax_handler() {
    $args                = json_decode ( stripslashes ( $_POST[ 'query' ] ), true );
    $args[ 'paged' ]       = $_POST[ 'page' ] + 1;
    $args[ 'post_status' ] = 'publish';

    query_posts ( $args );
    if( have_posts () ) :while ( have_posts () ): the_post ();
            ?>
            <div class="griditem">
                <a class="producturl" href="<?php the_permalink (); ?>">
                    <div class="productimagewrapper">
                        <img class="lazyload" data-src="<?php the_post_thumbnail_url (); ?>" />
                    </div>
                    <div class="productinfo">
                        <h2 class="productname"><?php the_title (); ?></h2>
                        <span class="productprice">$<?php echo esc_html ( get_post_meta ( get_the_ID (), 'price', true ) ); ?>.00</span>
                    </div>
                </a>
            </div>
            <?php
        endwhile;
    endif;
    die;
}

or you can use ob_start ()

function misha_loadmore_ajax_handler() {
    $args                  = json_decode ( stripslashes ( $_POST[ 'query' ] ), true );
    $args[ 'paged' ]       = $_POST[ 'page' ] + 1;
    $args[ 'post_status' ] = 'publish';
    $new_html = array();
    query_posts ( $args );
    if( have_posts () ) :while ( have_posts () ): the_post ();
            ob_start ();
            ?>
            <div class="griditem">
                <a class="producturl" href="<?php the_permalink (); ?>">
                    <div class="productimagewrapper">
                        <img class="lazyload" data-src="<?php the_post_thumbnail_url (); ?>" />
                    </div>
                    <div class="productinfo">
                        <h2 class="productname"><?php the_title (); ?></h2>
                        <span class="productprice">$<?php echo esc_html ( get_post_meta ( get_the_ID (), 'price', true ) ); ?>.00</span>
                    </div>
                </a>
            </div>
            <?php
            echo ob_get_clean ();
        endwhile;
    endif;
    die;    
}