wp-vyatka-woocomm-test/front-page.php

<?php
/**
 * Home page.
 *
 * @package VyatkaShop
 */

get_header();

$products = function_exists( 'wc_get_products' )
	? wc_get_products(
		array(
			'limit'   => 8,
			'status'  => 'publish',
			'orderby' => 'date',
			'order'   => 'DESC',
		)
	)
	: array();

$categories = taxonomy_exists( 'product_cat' )
	? get_terms(
		array(
			'taxonomy'   => 'product_cat',
			'hide_empty' => false,
			'number'     => 4,
			'parent'     => 0,
		)
	)
	: array();

$news = get_posts(
	array(
		'numberposts' => 6,
		'post_status' => 'publish',
	)
);
?>
<section class="hero">
	<div class="container">
		<div class="hero-copy">
			<div class="hero-main">
				<div class="hero-title-group">
					<h1><?php echo esc_html( get_theme_mod( 'vyatka_hero_title', 'Строим тёплые деревянные дома' ) ); ?></h1>
					<p><?php echo esc_html( get_theme_mod( 'vyatka_hero_text', 'Учитывая ключевые сценарии поведения, существующая теория в значительной степени обусловливает важность дальнейших направлений развития.' ) ); ?></p>
				</div>
				<div class="hero-features">
					<div class="hero-feature">
						<?php vyatka_shop_icon( 'feature', array( 'class' => 'feature-mark' ) ); ?>
						<span>Построим дом по<br>вашему дизайн-проекту</span>
					</div>
					<div class="hero-feature">
						<?php vyatka_shop_icon( 'feature', array( 'class' => 'feature-mark' ) ); ?>
						<span>Уникальный дизайн<br>с удобной планировкой</span>
					</div>
					<div class="hero-feature">
						<?php vyatka_shop_icon( 'feature', array( 'class' => 'feature-mark' ) ); ?>
						<span>Подберем мебель<br>и подключим технику</span>
					</div>
				</div>
			</div>
			<a class="button hero-button" href="<?php echo esc_url( home_url( '/catalog/' ) ); ?>"><?php esc_html_e( 'Подробнее', 'vyatka-shop' ); ?></a>
		</div>
	</div>
</section>

<section class="section products-section">
	<div class="container">
		<div class="section-head">
			<h2 class="section-title"><?php esc_html_e( 'Товары', 'vyatka-shop' ); ?></h2>
			<div class="slider-controls" data-carousel-controls="home-products">
				<button type="button" data-carousel-prev aria-label="<?php esc_attr_e( 'Предыдущие товары', 'vyatka-shop' ); ?>"><?php vyatka_shop_icon( 'arrow-right', array( 'class' => 'icon-flip icon-20' ) ); ?></button>
				<button type="button" data-carousel-next aria-label="<?php esc_attr_e( 'Следующие товары', 'vyatka-shop' ); ?>"><?php vyatka_shop_icon( 'arrow-right', array( 'class' => 'icon-20' ) ); ?></button>
			</div>
		</div>
		<div class="product-grid" id="home-products" data-carousel>
			<?php
			foreach ( $products as $product_item ) {
				$GLOBALS['product'] = $product_item;
				get_template_part( 'template-parts/product-card' );
			}
			wp_reset_postdata();
			?>
		</div>
	</div>
</section>

<section class="section categories-section">
	<div class="container">
		<div class="section-head">
			<h2 class="section-title"><?php esc_html_e( 'Каталог', 'vyatka-shop' ); ?></h2>
		</div>
		<div class="category-grid">
			<?php if ( ! is_wp_error( $categories ) ) : ?>
				<?php foreach ( $categories as $category ) : ?>
					<a class="category-card" href="<?php echo esc_url( get_term_link( $category ) ); ?>">
						<span class="category-card-copy">
							<h3><?php esc_html_e( 'Название', 'vyatka-shop' ); ?></h3>
							<p><?php esc_html_e( 'Описание категории', 'vyatka-shop' ); ?></p>
							<span class="text-link"><?php esc_html_e( 'Перейти', 'vyatka-shop' ); ?><?php vyatka_shop_icon( 'arrow-right-fill', array( 'class' => 'icon-20' ) ); ?></span>
						</span>
						<span class="category-card-media" aria-hidden="true"></span>
					</a>
				<?php endforeach; ?>
			<?php endif; ?>
		</div>
	</div>
</section>

<section class="section news-section">
	<div class="container">
		<div class="section-head">
			<h2 class="section-title"><?php esc_html_e( 'Новости', 'vyatka-shop' ); ?></h2>
			<div class="slider-controls" data-carousel-controls="home-news">
				<button type="button" data-carousel-prev aria-label="<?php esc_attr_e( 'Предыдущие новости', 'vyatka-shop' ); ?>"><?php vyatka_shop_icon( 'arrow-right', array( 'class' => 'icon-flip icon-20' ) ); ?></button>
				<button type="button" data-carousel-next aria-label="<?php esc_attr_e( 'Следующие новости', 'vyatka-shop' ); ?>"><?php vyatka_shop_icon( 'arrow-right', array( 'class' => 'icon-20' ) ); ?></button>
			</div>
		</div>
		<div class="news-grid" id="home-news" data-carousel>
			<?php foreach ( $news as $post_item ) : ?>
				<?php vyatka_shop_news_card( $post_item ); ?>
			<?php endforeach; ?>
		</div>
		<a class="all-news-link" href="<?php echo esc_url( get_post_type_archive_link( 'post' ) ?: home_url( '/blog/' ) ); ?>"><?php esc_html_e( 'Все новости', 'vyatka-shop' ); ?></a>
	</div>
</section>
<?php
get_footer();