Task 6679 | Доработал подробную страницу товара + вывел таблицу с рекомендациями через отдельный тип записями

dev_10_refactoring
Your Name 2 months ago
parent 830948cf05
commit 0253ba2472
  1. 6
      wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css
  2. 155
      wp-content/themes/cosmopet/modules/shop/components/single-product/component-controller.php
  3. 384
      wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig

@ -872,6 +872,12 @@ main{
display: flex; display: flex;
align-items: center; align-items: center;
} }
.detail__label-wrap {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
}
.detail__label .product-item-label__tag:last-child{ .detail__label .product-item-label__tag:last-child{
margin-left: auto; margin-left: auto;
} }

@ -1,74 +1,105 @@
<?php <?php
// add_filter('timber/context', function($context) {
// $context['test'] = 111111111;
// return $context;
// });
add_filter('timber/context', function($context) { // $product->is_type('variable')
if (function_exists('is_product') && is_product()) { $product;
$product_id = get_the_ID(); $product_type;
$product = wc_get_product($product_id); $context_for_twig;
if ($product) { if (function_exists('is_product') && is_product()) {
$attributes = []; $product_id = get_the_ID();
$product_attributes = $product->get_attributes(); $product = wc_get_product($product_id);
if (!empty($product_attributes)) { $attributes = [];
foreach ($product_attributes as $taxonomy => $attribute) { $product_attributes = $product->get_attributes();
if ($attribute->is_taxonomy()) {
$terms = wc_get_product_terms($product_id, $taxonomy, ['fields' => 'all']); /* Получение категорий */
if (!empty($terms)) { $tags = get_the_terms($product_id, 'product_cat');
$attr_values = []; if (!empty($tags) && !is_wp_error($tags)) {
foreach ($terms as $term) { foreach ($tags as $tag) {
$attr_values[] = [ $context_for_twig['product_tags'][] = $tag->name;
'name' => $term->name, }
'slug' => $term->slug, }
'term_id' => $term->term_id,
'link' => get_term_link($term->term_id, $taxonomy), /* Получение атрибутов */
]; if (!empty($product_attributes)) {
} foreach ($product_attributes as $taxonomy => $attribute) {
$attributes[wc_attribute_label($taxonomy)] = $attr_values; if ($attribute->is_taxonomy()) {
} $terms = wc_get_product_terms($product_id, $taxonomy, ['fields' => 'all']);
} else { // $tags = wc_get_product_terms( $product_id, 'pa_catalog_tags' );
$attributes[wc_attribute_label($taxonomy)] = $attribute->get_options();
}
}
}
$context['product_attributes'] = $attributes;
if ($product->is_type('variable')) {
$available_variations = $product->get_available_variations();
$variations_data = [];
foreach ($available_variations as $variation) { if (!empty($terms)) {
$variation_id = $variation['variation_id']; $attr_values = [];
$variation_obj = wc_get_product($variation_id); foreach ($terms as $term) {
$attr_values[] = [
$variations_data[] = [ 'name' => $term->name,
'variation_id' => $variation_id, 'slug' => $term->slug,
'price' => $variation_obj->get_price(), 'term_id' => $term->term_id,
'regular_price' => $variation_obj->get_regular_price(), 'link' => get_term_link($term->term_id, $taxonomy),
'sale_price' => $variation_obj->get_sale_price(), ];
'attributes' => $variation['attributes'] }
]; $attributes[wc_attribute_label($taxonomy)] = $attr_values;
if ($_GET["gp-test"]) {
// ?gp-test=1
echo '<pre>';
print_r($attr_values);
echo '</pre>';
}
} }
} else {
$context['variations'] = $variations_data; $attributes[wc_attribute_label($taxonomy)] = $attribute->get_options();
} }
$meta_fields = [ }
'composition' => get_post_meta($product_id, '_composition', true), }
'feeding_recommendations' => get_post_meta($product_id, '_feeding_recommendations', true),
'feeding_recommendations_table' => get_field('feeding_recommendations_table', $product_id), $context_for_twig['product_attributes'] = $attributes;
'nutritional_value' => get_post_meta($product_id, '_nutritional_value', true), /* Получение вариаций товара */
'vitamins' => get_post_meta($product_id, '_vitamins', true), if ($product->is_type('variable')) {
'additives' => get_post_meta($product_id, '_additives', true), $available_variations = $product->get_available_variations();
'energy_value' => get_post_meta($product_id, '_energy_value', true), $variations_data = [];
'important' => get_post_meta($product_id, '_important', true),
]; foreach ($available_variations as $variation) {
$variation_id = $variation['variation_id'];
$variation_obj = wc_get_product($variation_id);
$context['product_meta'] = $meta_fields; $variations_data[] = [
'variation_id' => $variation_id,
'price' => $variation_obj->get_price(),
'regular_price' => $variation_obj->get_regular_price(),
'sale_price' => $variation_obj->get_sale_price(),
'attributes' => $variation['attributes']
];
} }
$context_for_twig['variations'] = $variations_data;
} }
/* ACF-поля и мета-данные продукта */
$meta_fields = [
'composition' => get_post_meta($product_id, '_composition', true),
'feeding_recommendations' => get_post_meta($product_id, '_feeding_recommendations', true), // Ранее выводились HTML-полем «Рекомендации по кормлению»
'feeding_recommendations_table' => get_field('feeding_recommendations_table', get_post(get_field('p_tables_field', $product_id))) , // Таблица «Рекомендации по кормлению»
'nutritional_value' => get_post_meta($product_id, '_nutritional_value', true),
'vitamins' => get_post_meta($product_id, '_vitamins', true),
'additives' => get_post_meta($product_id, '_additives', true),
'energy_value' => get_post_meta($product_id, '_energy_value', true),
'important' => get_post_meta($product_id, '_important', true),
];
return $context; $context_for_twig['product_meta'] = $meta_fields;
});
/* Товар оформляется по подписке? */
$context_for_twig['is_subscription'] = $product->is_type( array( 'subscription', 'subscription_variation', 'variable-subscription' )) ? true : false;
}
add_filter('timber/context', function ($context) use ($context_for_twig) {
return array_merge($context, $context_for_twig);
});

@ -1,13 +1,10 @@
{% set current_path = template_path ~ '/modules/shop/components/single-product' %} {% set current_path = template_path ~ '/modules/shop/components/single-product' %}
{% set bodyClass = 'bg-white' %}
{% set mainClass = 'wrapper' %}
{% extends 'layout.twig' %}
{% set bodyClass = 'bg-white' %} {% block content %}
<div class="wrapper">
{% set mainClass = 'wrapper' %}
{% extends 'layout.twig' %}
{% block content %}
<div class="wrapper">
<div class="breadcrumbs"> <div class="breadcrumbs">
{% if wc_breadcrumbs %} {% if wc_breadcrumbs %}
{% for crumb in wc_breadcrumbs %} {% for crumb in wc_breadcrumbs %}
@ -33,29 +30,41 @@
</div> </div>
<div class="detail__content"> <div class="detail__content">
{# Start | Теги = категории #}
<div class="detail__label"> <div class="detail__label">
{% if product_attributes.Flavor is defined and product_attributes.Flavor|length > 0 %} <div class="detail__label-wrap">
{% for tag in product_tags %}
<div class="product-item-label__tag product-item-label__tag--black">
{{ tag }}
</div>
{% endfor %}
{% if product_attributes.Flavor is defined and product_attributes.Flavor|length > 0 %}
<div class="product-item-label__tag product-item-label__tag--black">
{{ product_attributes.Flavor[0].name }}
</div>
{% endif %}
{% if product_attributes.Вкус is defined and product_attributes.Вкус|length > 0 %}
<div class="product-item-label__tag product-item-label__tag--black"> <div class="product-item-label__tag product-item-label__tag--black">
{{ product_attributes.Flavor[0].name }} <a href="{{ product_attributes.Вкус[0].link }}">{{ product_attributes.Вкус[0].name }}</a>
</div> </div>
{% endif %} {% endif %}
{% if product_attributes.Вкус is defined and product_attributes.Вкус|length > 0 %}
<div class="product-item-label__tag product-item-label__tag--black">
<a href="{{ product_attributes.Вкус[0].link }}">{{ product_attributes.Вкус[0].name }}</a>
</div>
{% endif %}
{% if product_attributes.Тег is defined and product_attributes.Тег|length > 0 %} {% if product_attributes.Тег is defined and product_attributes.Тег|length > 0 %}
<div class="product-item-label__tag product-item-label__tag--title"> <div class="product-item-label__tag product-item-label__tag--title">
<a href="{{ product_attributes.Тег[0].link }}">{{ product_attributes.Тег[0].name }}</a> <a href="{{ product_attributes.Тег[0].link }}">{{ product_attributes.Тег[0].name }}</a>
</div> </div>
{% endif %}
{% if is_subscription %}
<div class="product-item-label__tag product-item-label__tag--sale">
{{ function('pll_e', 'Распродажа %') }}
</div>
{% endif %} {% endif %}
{% if product.is_on_sale() %} </div>
<div class="product-item-label__tag product-item-label__tag--sale">
{{ function('pll_e', 'Распродажа %') }}
</div>
{% endif %}
</div> </div>
{# End | Теги = категории #}
<h1 class="detail__title"> <h1 class="detail__title">
{{ product.get_title }} {{ product.get_title }}
</h1> </h1>
@ -73,22 +82,32 @@
<div class="swiper-pagination"></div> <div class="swiper-pagination"></div>
</div> </div>
<div class="detail__block-price"> {# Start | Цена для неподписочного товара #}
<p class="detail-block-price__price"> {% if product.get_price %}
{{ product.get_price }} {{ fn('get_woocommerce_currency_symbol') }} <div class="detail__block-price">
</p> {% if is_subscription %}
{% if product.get_regular_price %}
{% if product.is_on_sale() %} <div class="detail-block-price__sale">
<div class="detail-block-price__sale"> <p class="detail-block-price-sale__text">
<p class="detail-block-price-sale__text"> {{ product.get_regular_price }} {{ fn('get_woocommerce_currency_symbol') }}
{{ product.get_regular_price }} {{ fn('get_woocommerce_currency_symbol') }} </p>
</p> <p class="detail-block-price-sale__perc">
<p class="detail-block-price-sale__perc"> {{ ((product.get_regular_price - product.get_price) / product.get_regular_price * 100)|round }}
{{ ((product.get_regular_price - product.get_price) / product.get_regular_price * 100)|round }} </p>
</div>
{% else %}
не задана цена по подписке
{% endif %}
{% else %}
<p class="detail-block-price__price">
{{ product.get_price }} {{ fn('get_woocommerce_currency_symbol') }}
</p> </p>
</div> {% endif %}
{% endif %} </div>
</div> {% endif %}
{# End | Цена для неподписочного товара #}
{# Start | Кнопка добавить в корзину + варинанты подписки на товар #}
<form action="" class="detail-block__form" data-product-id="{{ product.id }}"> <form action="" class="detail-block__form" data-product-id="{{ product.id }}">
{% set collection = fn('wc_get_product_terms', product.id, 'pa_collection') %} {% set collection = fn('wc_get_product_terms', product.id, 'pa_collection') %}
{% if collection %} {% if collection %}
@ -113,11 +132,14 @@
</div> </div>
{% endif %} {% endif %}
{% endif %} {% endif %}
</form> </form>
{{ function('do_action', 'woocommerce_' ~ product.get_type() ~ '_add_to_cart') }} {{ function('do_action', 'woocommerce_' ~ product.get_type() ~ '_add_to_cart') }}
{# End | Кнопка добавить в корзину + варинанты подписки на товар #}
{# Start | Табы с информацией #}
<div class="detail__toggle"> <div class="detail__toggle">
{# Start | Описание товара #}
<div class="toggle"> <div class="toggle">
<p class="toggle__title"> <p class="toggle__title">
{{ function('pll_e', 'ОПИСАНИЕ') }} {{ function('pll_e', 'ОПИСАНИЕ') }}
@ -130,7 +152,9 @@
</div> </div>
</div> </div>
</div> </div>
{# End | Описание товара #}
{# Start | Состав товара #}
{% if product_meta.composition %} {% if product_meta.composition %}
<div class="toggle"> <div class="toggle">
<p class="toggle__title"> <p class="toggle__title">
@ -145,7 +169,9 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
{# End | Состав товара #}
{# Start | Рекомендации по кормлению #}
{% if product_meta.feeding_recommendations_table %} {% if product_meta.feeding_recommendations_table %}
<div class="toggle"> <div class="toggle">
<p class="toggle__title"> <p class="toggle__title">
@ -198,7 +224,8 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
{# End | Рекомендации по кормлению #}
{% if product_meta.nutritional_value or product_meta.vitamins or product_meta.additives or product_meta.energy_value %} {% if product_meta.nutritional_value or product_meta.vitamins or product_meta.additives or product_meta.energy_value %}
<div class="toggle"> <div class="toggle">
<p class="toggle__title"> <p class="toggle__title">
@ -246,10 +273,8 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
{# End | Табы с информацией #}
<div class="detail__warning"> <div class="detail__warning">
<div class="detail-warning__content"> <div class="detail-warning__content">
@ -259,156 +284,159 @@
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="product__main">
{% set recommended_products = function('get_field', 'recommended_products', product.id) %}
{% set related_products = recommended_products ? recommended_products : function('wc_get_related_products', product.id, 4) %}
{% if related_products %}
<div class="detail__wrapper-catalot">
<div class="detail__catalot">
<div class="detail-catalot__header">
<p class="detail-catalot__title">
{{ function('pll_e', 'вашему питомцу может понравиться') }}
</p>
<div class="detail-catalot__control"> <div class="product__main">
<button class="detail-catalot-control__button prev"> {% set recommended_products = function('get_field', 'recommended_products', product.id) %}
<img src="{{ theme.uri }}/static/shop/img/svg/main/arrow-left.svg" alt=""> {% set related_products = recommended_products ? recommended_products : function('wc_get_related_products', product.id, 4) %}
</button> {% if related_products %}
<div class="detail__wrapper-catalot">
<div class="detail__catalot">
<div class="detail-catalot__header">
<p class="detail-catalot__title">
{{ function('pll_e', 'вашему питомцу может понравиться') }}
</p>
<div class="detail-catalot__control">
<button class="detail-catalot-control__button prev">
<img src="{{ theme.uri }}/static/shop/img/svg/main/arrow-left.svg" alt="">
</button>
<button class="detail-catalot-control__button next"> <button class="detail-catalot-control__button next">
<img src="{{ theme.uri }}/static/shop/img/svg/main/arrow-right.svg" alt=""> <img src="{{ theme.uri }}/static/shop/img/svg/main/arrow-right.svg" alt="">
</button> </button>
</div>
</div> </div>
</div> <div class="detail-catalot__content swiper-wrapper">
<div class="detail-catalot__content swiper-wrapper"> {% for related_product in related_products %}
{% for related_product in related_products %} <div class="swiper-slide">
<div class="swiper-slide"> {% set post_id = related_product.ID is defined ? related_product.ID : related_product %}
{% set post_id = related_product.ID is defined ? related_product.ID : related_product %} {% set wc_product = fn('wc_get_product', post_id) %}
{% set wc_product = fn('wc_get_product', post_id) %} {% if wc_product %}
{% if wc_product %} <div class="product__item">
<div class="product__item"> <div class="product-item__label">
<div class="product-item__label"> {% if wc_product.get_date_created|date('Y-m-d') >= criteria_for_new_product %}
{% if wc_product.get_date_created|date('Y-m-d') >= criteria_for_new_product %} <span href="#" class="product-item-label__tag product-item-label__tag--new">
<span href="#" class="product-item-label__tag product-item-label__tag--new"> {{ function('pll_e', 'Новинка') }}
{{ function('pll_e', 'Новинка') }} </span>
</span> {% endif %}
{% endif %}
{% if wc_product.is_on_sale() %} {% if is_subscription %}
<span href="#" class="product-item-label__tag product-item-label__tag--sale"> <span href="#" class="product-item-label__tag product-item-label__tag--sale">
{{ function('pll_e', 'Распродажа %') }} {{ function('pll_e', 'Распродажа %') }}
</span> </span>
{% endif %} {% endif %}
</div>
<a href="{{ wc_product.get_permalink() }}" class="product-item__product-card">
<img src="{{ fn('wp_get_attachment_url', wc_product.get_image_id()) }}" alt="{{ wc_product.get_name() }}" class="product-item__images">
</a>
<div class="product-item__content-card">
<div class="compound">
{% set compound = fn('wc_get_product_terms', post_id, 'pa_compound') %}
{% for option in compound %}
{% set term = get_term(option) %}
<a href="/compound/{{ term.slug }}" class="compound__item">{{ term.name }}</a>
{% endfor %}
</div>
<a href="{{ wc_product.get_permalink() }}" class="product-item__title">{{ wc_product.get_name() }}</a>
<div class="product-item__price">
<p>{{ wc_product.get_price() }} {{ fn('get_woocommerce_currency_symbol') }}</p>
</div> </div>
<div class="product-item__bye"> <a href="{{ wc_product.get_permalink() }}" class="product-item__product-card">
<button class="button button--white button--100-perc open-overlay"> <img src="{{ fn('wp_get_attachment_url', wc_product.get_image_id()) }}" alt="{{ wc_product.get_name() }}" class="product-item__images">
{{ function('pll_e', 'Купить') }} </a>
</button> <div class="product-item__content-card">
</div> <div class="compound">
</div> {% set compound = fn('wc_get_product_terms', post_id, 'pa_compound') %}
<div class="product-item__overlay"> {% for option in compound %}
<div class="product-item-overlay__header">
<a href="{{ wc_product.get_permalink() }}" class="product-item__title">{{ wc_product.get_name() }}</a>
<ul class="product-item-overlay__tags">
{% set features = fn('wc_get_product_terms', post_id, 'pa_features') %}
{% for option in features %}
{% set term = get_term(option) %} {% set term = get_term(option) %}
<li>{{ term.name }}</li> <a href="/compound/{{ term.slug }}" class="compound__item">{{ term.name }}</a>
{% endfor %} {% endfor %}
</ul> </div>
<a href="{{ wc_product.get_permalink() }}" class="product-item__title">{{ wc_product.get_name() }}</a>
<div class="product-item__price">
<p>{{ wc_product.get_price() }} {{ fn('get_woocommerce_currency_symbol') }}</p>
</div>
<div class="product-item__bye">
<button class="button button--white button--100-perc open-overlay">
{{ function('pll_e', 'Купить') }}
</button>
</div>
</div> </div>
<div class="product-item__overlay">
<form class="product-item__form" method="post" action="/send-telegram.php"> <div class="product-item-overlay__header">
<div class="product-item-overlay__input-block"> <a href="{{ wc_product.get_permalink() }}" class="product-item__title">{{ wc_product.get_name() }}</a>
<div class="product-item-overlay__field"> <ul class="product-item-overlay__tags">
<p class="product-item-overlay-field__title">Объем</p> {% set features = fn('wc_get_product_terms', post_id, 'pa_features') %}
{% for option in features %}
{% set term = get_term(option) %}
<li>{{ term.name }}</li>
{% endfor %}
</ul>
</div>
<form class="product-item__form" method="post" action="/send-telegram.php">
<div class="product-item-overlay__input-block">
<div class="product-item-overlay__field">
<p class="product-item-overlay-field__title">Объем</p>
<div class="select"> <div class="select">
{% set cur_weight = function('get_product_info', post_id, 'weight') %} {% set cur_weight = function('get_product_info', post_id, 'weight') %}
<input type="text" class="select__state" value="{{ cur_weight }}" readonly data-product_id="{{ post_id }}" data-product_price="{{ wc_product.get_price() }}"> <input type="text" class="select__state" value="{{ cur_weight }}" readonly data-product_id="{{ post_id }}" data-product_price="{{ wc_product.get_price() }}">
<div class="state__block"> <div class="state__block">
<ul class="state__content"> <ul class="state__content">
{% set collection = fn('wc_get_product_terms', post_id, 'pa_collection') %} {% set collection = fn('wc_get_product_terms', post_id, 'pa_collection') %}
{% for option in collection %} {% for option in collection %}
{% set term = get_term(option) %} {% set term = get_term(option) %}
{% if term %} {% if term %}
{% set siblings = function('get_collection_siblings', term.term_id) %} {% set siblings = function('get_collection_siblings', term.term_id) %}
{% for sibling in siblings %} {% for sibling in siblings %}
{% set weight = function('get_product_info', sibling.ID, 'weight') %} {% set weight = function('get_product_info', sibling.ID, 'weight') %}
{% set class = '' %} {% set class = '' %}
{% if weight == cur_weight %} {% if weight == cur_weight %}
{% set class = 'active' %} {% set class = 'active' %}
{% endif %} {% endif %}
<li> <li>
<button class="state__button {{ class }}" data-product_id="{{ sibling.ID }}" data-product_price="{{ function('get_product_info', sibling.ID, 'price') }}"> <button class="state__button {{ class }}" data-product_id="{{ sibling.ID }}" data-product_price="{{ function('get_product_info', sibling.ID, 'price') }}">
{{ weight }} {{ weight }}
</button> </button>
</li> </li>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> <div class="product-item-overlay__field">
<div class="product-item-overlay__field"> <p class="product-item-overlay-field__title">Количество</p>
<p class="product-item-overlay-field__title">Количество</p>
<div class="counter"> <div class="counter">
<button class="counter__button minus"> <button class="counter__button minus">
<img src="{{ theme.uri }}/woocommerce/assets/img/svg/main/minus.svg" alt=""> <img src="{{ theme.uri }}/woocommerce/assets/img/svg/main/minus.svg" alt="">
</button> </button>
<input type="text" class="counter__input" value="1"> <input type="text" class="counter__input" value="1">
<button class="counter__button plus"> <button class="counter__button plus">
<img src="{{ theme.uri }}/woocommerce/assets/img/svg/main/plus.svg" alt=""> <img src="{{ theme.uri }}/woocommerce/assets/img/svg/main/plus.svg" alt="">
</button> </button>
</div>
</div> </div>
</div> </div>
</div> <p class="product-item-overlay__price">
<p class="product-item-overlay__price"> {{ wc_product.get_price() }}
{{ wc_product.get_price() }} </p>
</p> <div class="product-item-overlay__block-button">
<div class="product-item-overlay__block-button"> <div class="product-item-overlay__button">
<div class="product-item-overlay__button"> {{ function('get_add_to_cart_button', post_id) }}
{{ function('get_add_to_cart_button', post_id) }} </div>
</div> <div class="product-item-overlay__more_button">
<div class="product-item-overlay__more_button"> <a class="to-know button--100-perc" href="{{ wc_product.get_permalink() }}">
<a class="to-know button--100-perc" href="{{ wc_product.get_permalink() }}"> <p>{{ function('pll_e', 'Подробнее') }}</p>
<p>{{ function('pll_e', 'Подробнее') }}</p> </a>
</a> </div>
</div> </div>
</div> </form>
</form> </div>
</div> </div>
</div> {% endif %}
{% endif %} </div>
</div> {% endfor %}
{% endfor %} </div>
</div> </div>
</div> </div>
</div> {% endif %}
{% endif %} </div>
</div> </div>
</div>
<div class="gallery"> <div class="gallery">
<button class="gallery__close gallery-button"> <button class="gallery__close gallery-button">
<img src="{{ theme.uri }}/static/shop/img/svg/main/black-x.svg" alt=""> <img src="{{ theme.uri }}/static/shop/img/svg/main/black-x.svg" alt="">
@ -446,5 +474,5 @@
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
Loading…
Cancel
Save