f1den
29d10ce4cf
Каталог, карточка товара, корзина, оформление заказа и блог на WooCommerce. Стили разложены по слоям: токены из Figma, база, компоненты, страницы, брейкпоинты. Цвета, типографика, радиусы и отступы взяты из Variables и текстовых стилей макета, ниже по слоям хардкода нет. Иконки — Phosphor, вставляются инлайном как SVG, символами ничего не рисуется. Стили WooCommerce отключены, вёрстка своя, !important не используется.
178 lines
9.3 KiB
PHP
178 lines
9.3 KiB
PHP
<?php
|
||
/**
|
||
* Single product page.
|
||
*
|
||
* @package VyatkaShop
|
||
*/
|
||
|
||
defined( 'ABSPATH' ) || exit;
|
||
|
||
get_header();
|
||
|
||
while ( have_posts() ) :
|
||
the_post();
|
||
global $product;
|
||
|
||
if ( post_password_required() ) {
|
||
echo get_the_password_form(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||
continue;
|
||
}
|
||
|
||
$attributes = $product->get_attributes();
|
||
$max_purchase_quantity = $product->get_max_purchase_quantity();
|
||
$related = wc_get_products(
|
||
array(
|
||
'include' => wc_get_related_products( $product->get_id(), 8 ),
|
||
'limit' => 8,
|
||
)
|
||
);
|
||
$gallery_image_ids = array_values(
|
||
array_unique(
|
||
array_filter(
|
||
array_merge(
|
||
array( $product->get_image_id() ),
|
||
$product->get_gallery_image_ids()
|
||
)
|
||
)
|
||
)
|
||
);
|
||
?>
|
||
<div class="container">
|
||
<?php vyatka_shop_breadcrumbs( $product->get_name() ); ?>
|
||
<?php wc_print_notices(); ?>
|
||
|
||
<article id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
|
||
<div class="product-layout">
|
||
<div class="product-gallery">
|
||
<div class="gallery-badges">
|
||
<span class="product-badge"><?php esc_html_e( 'NEW', 'vyatka-shop' ); ?></span>
|
||
<span class="product-badge"><?php esc_html_e( 'NEW', 'vyatka-shop' ); ?></span>
|
||
<span class="product-badge"><?php esc_html_e( 'NEW', 'vyatka-shop' ); ?></span>
|
||
</div>
|
||
<button class="gallery-favorite" type="button" aria-label="<?php esc_attr_e( 'Добавить в избранное', 'vyatka-shop' ); ?>" aria-pressed="false"><?php vyatka_shop_icon( 'heart' ); ?></button>
|
||
<button class="gallery-arrow gallery-arrow-prev" type="button" aria-label="<?php esc_attr_e( 'Предыдущее изображение', 'vyatka-shop' ); ?>"><?php vyatka_shop_icon( 'arrow-right-fill', array( 'class' => 'icon-flip' ) ); ?></button>
|
||
<button class="gallery-arrow gallery-arrow-next" type="button" aria-label="<?php esc_attr_e( 'Следующее изображение', 'vyatka-shop' ); ?>"><?php vyatka_shop_icon( 'arrow-right-fill' ); ?></button>
|
||
<div class="gallery-images" data-product-gallery>
|
||
<?php for ( $gallery_index = 0; $gallery_index < max( 5, count( $gallery_image_ids ) ); $gallery_index++ ) : ?>
|
||
<?php $gallery_image_id = $gallery_image_ids[ $gallery_index % max( 1, count( $gallery_image_ids ) ) ] ?? 0; ?>
|
||
<?php if ( $gallery_image_id ) : ?>
|
||
<?php
|
||
echo wp_kses_post(
|
||
wp_get_attachment_image(
|
||
$gallery_image_id,
|
||
'full',
|
||
false,
|
||
array(
|
||
'class' => 'gallery-image',
|
||
'data-gallery-slide' => '',
|
||
'hidden' => 0 === $gallery_index ? false : true,
|
||
)
|
||
)
|
||
);
|
||
?>
|
||
<?php else : ?>
|
||
<span class="gallery-image gallery-image-placeholder" data-gallery-slide <?php echo 0 === $gallery_index ? '' : 'hidden'; ?>></span>
|
||
<?php endif; ?>
|
||
<?php endfor; ?>
|
||
</div>
|
||
<div class="gallery-dots" aria-label="<?php esc_attr_e( 'Изображения товара', 'vyatka-shop' ); ?>">
|
||
<?php for ( $gallery_index = 0; $gallery_index < max( 5, count( $gallery_image_ids ) ); $gallery_index++ ) : ?>
|
||
<i data-gallery-dot<?php echo 0 === $gallery_index ? ' class="active"' : ''; ?>></i>
|
||
<?php endfor; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-summary">
|
||
<div class="product-meta-line">
|
||
<?php esc_html_e( 'Арт: 4654GR', 'vyatka-shop' ); ?>
|
||
<span class="meta-separator" aria-hidden="true"></span><span class="stock"><?php echo esc_html( $product->is_in_stock() ? __( 'В наличии', 'vyatka-shop' ) : __( 'Нет в наличии', 'vyatka-shop' ) ); ?></span>
|
||
</div>
|
||
<h1><?php the_title(); ?></h1>
|
||
<div class="woocommerce-product-details__short-description">
|
||
<?php echo wp_kses_post( $product->get_short_description() ?: vyatka_shop_placeholder_copy() ); ?>
|
||
</div>
|
||
|
||
<table class="attribute-table">
|
||
<?php for ( $row_index = 0; $row_index < 4; $row_index++ ) : ?>
|
||
<tr><td><?php esc_html_e( 'Характеристика', 'vyatka-shop' ); ?></td><td><?php esc_html_e( 'Значение', 'vyatka-shop' ); ?></td></tr>
|
||
<?php endfor; ?>
|
||
</table>
|
||
|
||
<label class="product-option">
|
||
<span><?php esc_html_e( 'Свойство', 'vyatka-shop' ); ?></span>
|
||
<select name="product_option" form="product-cart-form" data-custom-select>
|
||
<option value="dark-gray"><?php esc_html_e( 'Темно-серый', 'vyatka-shop' ); ?></option>
|
||
</select>
|
||
</label>
|
||
|
||
<div class="price"><?php echo wp_kses_post( $product->get_price_html() ); ?></div>
|
||
<?php if ( $product->is_purchasable() && $product->is_in_stock() ) : ?>
|
||
<form class="cart" id="product-cart-form" action="<?php echo esc_url( $product->get_permalink() ); ?>" method="post" enctype="multipart/form-data" data-ajax-add-to-cart>
|
||
<div class="quantity-control">
|
||
<button type="button" data-quantity-action="decrease" aria-label="<?php esc_attr_e( 'Уменьшить количество', 'vyatka-shop' ); ?>" disabled><?php vyatka_shop_icon( 'minus', array( 'class' => 'icon-20' ) ); ?></button>
|
||
<input
|
||
type="number"
|
||
name="quantity"
|
||
value="1"
|
||
min="1"
|
||
<?php if ( 0 < $max_purchase_quantity ) : ?>
|
||
max="<?php echo esc_attr( (string) $max_purchase_quantity ); ?>"
|
||
<?php endif; ?>
|
||
inputmode="numeric"
|
||
>
|
||
<button type="button" data-quantity-action="increase" aria-label="<?php esc_attr_e( 'Увеличить количество', 'vyatka-shop' ); ?>"<?php echo 1 === $max_purchase_quantity ? ' disabled' : ''; ?>><?php vyatka_shop_icon( 'plus', array( 'class' => 'icon-20' ) ); ?></button>
|
||
</div>
|
||
<button class="button single_add_to_cart_button" type="submit" name="add-to-cart" value="<?php echo esc_attr( (string) $product->get_id() ); ?>"><?php vyatka_shop_icon( 'cart', array( 'class' => 'icon-20' ) ); ?><?php esc_html_e( 'В корзину', 'vyatka-shop' ); ?></button>
|
||
</form>
|
||
<?php endif; ?>
|
||
<a class="button button-outline buy-one-click" href="<?php echo esc_url( add_query_arg( array( 'add-to-cart' => $product->get_id(), 'quantity' => 1 ), wc_get_checkout_url() ) ); ?>"><?php esc_html_e( 'Купить в 1 клик', 'vyatka-shop' ); ?></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-tabs">
|
||
<ul class="tab-list" role="tablist">
|
||
<li class="active"><a href="#product-tab-description" role="tab" aria-selected="true" aria-controls="product-tab-description" data-tab="description"><?php esc_html_e( 'Описание', 'vyatka-shop' ); ?></a></li>
|
||
<li><a href="#product-tab-attributes" role="tab" aria-selected="false" aria-controls="product-tab-attributes" data-tab="attributes"><?php esc_html_e( 'Характеристики', 'vyatka-shop' ); ?></a></li>
|
||
<li><a href="#product-tab-documents" role="tab" aria-selected="false" aria-controls="product-tab-documents" data-tab="documents"><?php esc_html_e( 'Документы', 'vyatka-shop' ); ?></a></li>
|
||
<li><a href="#product-tab-shipping" role="tab" aria-selected="false" aria-controls="product-tab-shipping" data-tab="shipping"><?php esc_html_e( 'Оплата и доставка', 'vyatka-shop' ); ?></a></li>
|
||
</ul>
|
||
<div class="prose" id="product-tab-description" role="tabpanel" data-tab-panel="description">
|
||
<?php echo wp_kses_post( $product->get_description() ?: wpautop( vyatka_shop_placeholder_copy() . ' ' . vyatka_shop_placeholder_copy() ) ); ?>
|
||
</div>
|
||
<div class="prose" id="product-tab-attributes" role="tabpanel" data-tab-panel="attributes" hidden>
|
||
<?php wc_display_product_attributes( $product ); ?>
|
||
</div>
|
||
<div class="prose" id="product-tab-documents" role="tabpanel" data-tab-panel="documents" hidden>
|
||
<p><?php esc_html_e( 'Проектная документация и спецификация предоставляются после оформления заказа.', 'vyatka-shop' ); ?></p>
|
||
</div>
|
||
<div class="prose" id="product-tab-shipping" role="tabpanel" data-tab-panel="shipping" hidden>
|
||
<p><?php esc_html_e( 'Стоимость и сроки доставки рассчитываются менеджером после уточнения адреса и комплектации.', 'vyatka-shop' ); ?></p>
|
||
</div>
|
||
</div>
|
||
|
||
<?php if ( $related ) : ?>
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2 class="section-title"><?php esc_html_e( 'Похожие товары', 'vyatka-shop' ); ?></h2>
|
||
<div class="slider-controls" data-carousel-controls="related-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="related-products" data-carousel>
|
||
<?php foreach ( $related as $related_product ) : ?>
|
||
<?php
|
||
$GLOBALS['product'] = $related_product;
|
||
get_template_part( 'template-parts/product-card' );
|
||
?>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</section>
|
||
<?php endif; ?>
|
||
</article>
|
||
</div>
|
||
<?php
|
||
endwhile;
|
||
|
||
get_footer();
|