Каталог, карточка товара, корзина, оформление заказа и блог на WooCommerce. Стили разложены по слоям: токены из Figma, база, компоненты, страницы, брейкпоинты. Цвета, типографика, радиусы и отступы взяты из Variables и текстовых стилей макета, ниже по слоям хардкода нет. Иконки — Phosphor, вставляются инлайном как SVG, символами ничего не рисуется. Стили WooCommerce отключены, вёрстка своя, !important не используется.
68 lines
3.0 KiB
PHP
68 lines
3.0 KiB
PHP
<?php
|
||
/**
|
||
* Product card shared by the home and WooCommerce archives.
|
||
*
|
||
* @package VyatkaShop
|
||
*/
|
||
|
||
defined( 'ABSPATH' ) || exit;
|
||
|
||
global $product;
|
||
|
||
if ( ! $product instanceof WC_Product || ! $product->is_visible() ) {
|
||
return;
|
||
}
|
||
|
||
$product_id = $product->get_id();
|
||
$max_purchase_quantity = $product->get_max_purchase_quantity();
|
||
$facets = vyatka_shop_product_facets( $product_id );
|
||
$filter_price = $product->get_price();
|
||
?>
|
||
<article
|
||
<?php wc_product_class( 'product-card', $product ); ?>
|
||
data-product-card
|
||
data-features="<?php echo esc_attr( $facets['feature'] ); ?>"
|
||
data-collection="<?php echo esc_attr( $facets['collection'] ); ?>"
|
||
data-price="<?php echo esc_attr( (string) $filter_price ); ?>"
|
||
>
|
||
<a class="product-card-media" href="<?php echo esc_url( get_permalink( $product_id ) ); ?>">
|
||
<span class="product-badge"><?php esc_html_e( 'NEW', 'vyatka-shop' ); ?></span>
|
||
<?php
|
||
if ( has_post_thumbnail( $product_id ) ) {
|
||
echo wp_kses_post( $product->get_image( 'vyatka-product' ) );
|
||
}
|
||
?>
|
||
</a>
|
||
<div class="product-card-body">
|
||
<span class="stock"><?php echo esc_html( $product->is_in_stock() ? __( 'В наличии', 'vyatka-shop' ) : __( 'Нет в наличии', 'vyatka-shop' ) ); ?></span>
|
||
<h3 class="product-card-title">
|
||
<a href="<?php echo esc_url( get_permalink( $product_id ) ); ?>"><?php echo esc_html( $product->get_name() ); ?></a>
|
||
</h3>
|
||
<div class="price"><?php echo wp_kses_post( $product->get_price_html() ); ?></div>
|
||
|
||
<?php if ( $product->is_purchasable() && $product->is_in_stock() && $product->is_type( 'simple' ) ) : ?>
|
||
<form class="card-buy cart" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post" 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 add-cart" type="submit" name="add-to-cart" value="<?php echo esc_attr( (string) $product_id ); ?>">
|
||
<?php vyatka_shop_icon( 'cart', array( 'class' => 'icon-20' ) ); ?><?php esc_html_e( 'В корзину', 'vyatka-shop' ); ?>
|
||
</button>
|
||
</form>
|
||
<?php else : ?>
|
||
<a class="button add-cart" href="<?php echo esc_url( get_permalink( $product_id ) ); ?>"><?php esc_html_e( 'Подробнее', 'vyatka-shop' ); ?></a>
|
||
<?php endif; ?>
|
||
</div>
|
||
</article>
|