我该如何在index.php中实现这个自定义查询？

The following is my index.php file

<?php get_header(); ?> 
<?php 
if(get_option('zens_home') == "blog") { ?>  
<?php include (TEMPLATEPATH . '/lib/blog-home.php'); ?> 
<?php } else { ?> 
<div id="home-content" class="clearfix"> 
<ul id="shelf"> 

<?php 
?> 

<?php while (have_posts()) : the_post(); ?>
/*Start of mark*/
<li class="box" id="post-<?php the_ID(); ?>"> 
<?php $disc = get_post_meta($post->ID, 'fabthemes_discount', true); ?> 
<?php if ( $disc ) { ?> 
<span class="salebadge"></span> 
<?php }?> 

<a href="<?php the_permalink() ?>"><img class="productshot" width="172" height="243" src="<?php get_image_url(); ?>" alt="<?php the_title(); ?>"/></a> 

<div class="pricetab clearfix"> 

<?php if ( $disc ) { ?> 
<span class="oldprice"><del> <?php echo get_post_meta($post->ID, 'fabthemes_disc-price', true) ?> </del></span> 
<?php }?> 

<span class="prodetail"><a href="<?php the_permalink() ?>"><?php $price=get_post_meta($post->ID, 'fabthemes_price', true); echo $price; ?></a></span> 
</div> 
</li> 
/*End of mark*/
<?php endwhile; ?> 
<div class="clear"></div> 
<?php getpagenavi(); ?> 

</ul> 
</div>

On top of the loop it is already using, I also want to place the following custom query

$args = [
    'posts_per_page' => -1,
    'post_type'      => 'products',
    'orderby'        => 'rand', // Order these posts randomly
    'tax_query'      => [
        [
            'taxonomy' => 'product-category',
            'terms'    => 27
        ]
    ]
];
$vip_posts = new WP_Query( $args );

// Run the loop
if ( $vip_posts->have_posts() ) {
    while ( $vip_posts->have_posts() ) {
        $vip_posts->the_post();

        // Display what you want in your loop like

        echo '</br>';

    }
    wp_reset_postdata();
}

However, I failed to do it properly without having it as either plaintext on my mainpage or finding myself in some sort of syntax error.

The problem is that I can't get the elements that I marked in the code of index.php and start after the loop in the to work with the custom query

A cleaner approach here would be to add your custom query via the loop_start action. The advantage of doing this is that you do not need to alter template files at all. You can simply drop your code in functions.php or a plugin if you wish (which I always prefer)

Another advantage is that the loops are apart from each other, something that you needed according to another question, so this approach would fit perfectly

The following code is untested, but should give you an idea of how to use the action

add_action( 'loop_start', function ( \WP_Query $q )
{
    // Make sure we only target the main query, if not, bail
    if ( !$q->is_main_query() ) 
        return;

    // Set a static counter to make sure this runs only once to avoid infinitive loops
    static $count = 0;

    // Make sure our counter is 0, if not, bail
    if ( 0 != $count )
        return;

    // Update our counter
    $count++;

    // This is the main query, lets target specific pages only
    if (    $q->is_home()
         || $q->is_post_type_archive( 'products' )
         || $q->is_tax( 'product-category' )
    ) {
        // Bail on vip pages
        if ( $q->is_tax( 'product-category', 'vip' ) ) // Make sure about vip slug
            return;

        // Bail if this is not the first page
        if ( $q->is_paged() )
            return;

        // Lets add our custom loop
        global $wp_query;

        $args = [
            'posts_per_page' => -1,
            'post_type'      => 'products',
            'orderby'        => 'rand', // Order these posts randomly
            'tax_query'      => [
                [
                    'taxonomy' => 'product-category',
                    'terms'    => 27
                ]
            ]
        ];
        $vip_posts = new WP_Query( $args );

        // Run the loop
        if ( $vip_posts->have_posts() ) {
            while ( $vip_posts->have_posts() ) {
                $vip_posts->the_post();

                // Display what you want in your loop like
                the_title();
                echo '</br>';

            }
            wp_reset_postdata();
        }

        // Lets make sure our main loop counter starts at -1
        $wp_query->rewind_posts();
    }
});