While Loop breaks everything underneeth

[AurelianSpodarec]

I’m pulling custom post type.

In my Controllers, App.php, I got this code:

public function queryProductsPosts() {
    $args = [
        'rewrite' 	> array('slug' =>'shop'),
        'post_type' => 'shop',
        'posts_per_page' => 3,
    ];

    $query = new \Wp_Query($args);

    return $query;
}

Which then I use it like this, on my front-page:

@sectionTitle( [ 'title' => 'Featured' ] ) @endsectionTitle

        @while ($query_products_posts->have_posts()) @php $query_products_posts->the_post() @endphp
        @vocalSample([
        'id' => get_the_ID(),
        'title' => get_the_title(),
        'permalink' => get_the_permalink(),
        'thumbnail' => get_the_post_thumbnail_url(),
        'price' => get_field('price', get_the_ID())
        ])
        @endvocalSample
        @endwhile

    </div>
</section>

Now, it all works.

I also have different components that uses ACF, such as this component, that also works:

<section class="relative mb-20">
    <?php if ( have_rows( 'hero_section' ) ) : ?>
    <?php while ( have_rows( 'hero_section' ) ) :the_row(); ?>



        <div class="h-screen object-cover w-full bg-center bg-no-repeat bg-cover " style="background-image: url( <?php echo esc_url( get_sub_field( 'background_image' ) ); ?>)">

            <div class="absolute inset-0 bg-black opacity-50 h-full flex flex-col"></div>


            <?php if ( $title = get_sub_field( 'title' ) ) : ?>
            <div class="h-full table mx-auto text-center z-30 relative">
                <div class="table-cell align-middle" style="max-width: 829px;">
                    <h2 class="text-white uppercase font-bold text-3xl md:text-4xl lg:text-6xl"
                        style="letter-spacing: 5px;"><?php echo esc_html( $title ); ?></h2>
                </div>
            </div>
                <?php endif; ?>

            <div class="mx-auto absolute bottom-0 left-0 right-0 w-full text-center mb-4 z-30 relative" style="    top: -65px;">
                <div class="w-6 mx-auto">
                    <svg class="text-white" aria-hidden="true" focusable="false" data-prefix="far" data-icon="angle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z" class=""></path></svg>
                </div>
            </div>

        </div>



    <?php endwhile; ?>
    <?php endif; ?>
</section>

The problem is, anything that is dynamic, under the while loop, breaks. So if I put the blog loop on top of the code above, the code above will break.

I have no idea why, or how to fix this. I tried many things, but I can’t seem to get this working.

what should I do?

[AurelianSpodarec]

Well, using a normal WP loop, seemed to work:

{{-- @while ($query_products_posts->have_posts()) @php $query_products_posts->the_post() @endphp–}}
<?php if ( $query_products_posts->have_posts() ) : while ( $query_products_posts->have_posts() ) : $query_products_posts->the_post(); ?>
@vocalSample([
‘id’ => get_the_ID(),
‘title’ => get_the_title(),
‘permalink’ => get_the_permalink(),
‘thumbnail’ => get_the_post_thumbnail_url(),
‘price’ => get_field(‘price’, get_the_ID())
])
@endvocalSample
<?php endwhile; wp_reset_postdata(); else : ?>

<?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?>

<?php endif; ?>

Not sure why the above didn’t work.