<?php get_header(); ?>

<main role="main" class="blinds">

    <h1 class="main-product-title">Products</h1>

    <!-- section -->
    <section class="main-product-content">

        <h2><?php $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); echo $term->name; ?></h2>

        <?php if (have_posts()): while (have_posts()) : the_post(); ?>

            <!-- article -->
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <!-- post image -->
                <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>

                        <?php the_post_thumbnail(array(720,400)); // Declare pixel size you need inside the array ?>

                <?php endif; ?>
                <!-- /post thumbnail -->

                <!-- post title -->
                <h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
                <!-- /post title -->

                <p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">View ></a></p>

            </article>

            <!-- /article -->

        <?php endwhile; ?>

        <?php else: ?>

            <!-- article -->
            <article>
                <h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
            </article>
            <!-- /article -->

        <?php endif; ?>

        <?php get_template_part('pagination'); ?>

    </section>
    <!-- /section -->

    <div class="sidebar-wrapper">
        <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('product-sidebar')) ?>
    </div>

</main>

<?php
// get the term...
$term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );

// get all posts from this term and store the IDs
$term_posts = get_posts(array('tax_query' => array(array(
    'taxonomy' => get_query_var('taxonomy'),
    'terms' => $term->ID
))));
$term_posts_IDs = array();
foreach ($term_posts as $term_post) {
    $term_posts_IDs[] = $term_post->ID;
}

// get the available styles from this set of posts
$styles = wp_get_object_terms($term_posts_IDs, 'style');

?>
<h2><?php echo $term->name; ?></h2>
<?php
if(!empty($styles)): // styles are availables for this term
    foreach($styles as $style):
        ?>
        <h3><?php echo $term->name; ?> > <?php echo $style->name; ?></h3>
        <?php
        // get the first three products with colour + style
        $tax_posts = get_posts(array(
            'posts_per_page' => 3,
            'tax_query' => array(
                'relation' => 'AND',
                array(
                    'taxonomy' => get_query_var('taxonomy'),
                    'terms' => $term->ID
                ),
                array(
                    'taxonomy' => 'style',
                    'terms' => $style->ID
                )
            )
        ));
        ?>
        <ul>
        <?php foreach($tax_posts as $tax_post): ?>
            <li><?php echo $tax_post->post_title; ?></li>
        <?php endforeach; ?>
        </ul>
        <!-- ... link to your style taxonomy template here ... -->
    <?pgpp endforeach ; ?>
<?php else : ?>
    <!-- ... default behaviour ... -->
<?php endif; ?>