Как грамотно реализовать карточку товара на лэндинге?

Question

[Дмитрий Гормаш]

Здравствуйте!

Стоит задача натянуть товарный лэндинг на Wordpress. И все бы ничего, но есть спорный вопрос, как правильно и, главное, удобно для заказчика реализовать карточку товара на странице. Основной критерий, более-менее адекватное редактирование/добавление товара.

Вид карточки товара:

Из функционала заказчик должен иметь возможность добавлять/редактировать:

1. Заголовок
2. Цены
3. Галерея
4. Описание
5. Размер
6. Выбор цвета
7. Скидка

На данный момент, я вижу несколько вариантов реализации этой задачи:

1. Реализация карточки товара с помощью CPT UI + ACF(Carbon Fields) + Contact forrm 7, где заголовок и описание выводить через тайтл + описание, а остальное через acf.
2. Создание отдельной страницы настроек с помощью Carbon fields, где можно будет создавать повторяющиеся блоки, в которых будут созданы уже заготовленные поля для заполнения необходимой информации из списка выше.

Первый и второй вариант реализации имеют место быть, но меня интересует, какие есть другие, более удобные решения для реализации данного "функционала" для заказчика.

Как вообще реализовывают товарные лэндинги на wp.

Заранее спасибо за адекватные ответы.

Comments

[Lord_Dantes]

А WooCommerce знаете?

[Дмитрий Гормаш]

Lord_Dantes, Я считаю, что для лендов, где 1-2 товара не нужно подключать целый вукоммерс, можно обойтись и без него.

p.s. В целом. проблему(если ее так можно назвать) я решил с помощью ACF + CPT UI. Выглядит это примерно так:

[Lord_Dantes]

Дмитрий Гормаш, ну если вы так считаете, это ваше право. Впрочем вам не помешало использовать WooCommerce...

[Михаил Нестеров]

Если не хотите ставить Woo, ACF и вообще обойтись без плагинов, то можно сделать с помощью Custom Fields и Metabox:

1. Добавляем Custom Type, который будет называться product:

add_action('init', function() {
	register_post_type( 'product', [
		'labels' => [
			'name' => 'Товар',
			'singular_name' => 'Товар',
			'add_new'            => 'Добавить товар',
			'add_new_item'       => 'Добавить новый товар',
			'edit_item'          => 'Редактировать товар',
			'new_item'           => 'Новый товар',
			'view_item'          => 'Посмотреть товар'
		],
		'public' => false,
		'show_ui' => true,
		'hierarchical' => false,
		'supports' => ['title', 'content', 'thumbnail'],
		'exclude_from_search' => true
	] );
});

То есть, мы "вешаем" создание кастомного типа на хук init.
Подробнее по аргументам функции погуглите register_post_type

2. Создаем цену товара с помощью метабокса, для чего вызываем хук add_meta_boxes, в котором привязываем цену к product:

add_action( 'add_meta_boxes', 'product_price_metabox' );
function product_price_metabox() {
    add_meta_box( 
        'product_price',
        __( 'Цена:', 'textdomain' ),
        'product_price_display',
        'product'
    );
}

3. Создаем функцию, которая будет выводить input с ценой:

function product_price_display( $post ) {

	// Use nonce for verification
	wp_nonce_field( basename( __FILE__ ), 'product_price_nonce' );
  
	// get current value
    	$product_price_value = get_post_meta( get_the_ID(), 'product_price', true );
	?>
	<input type="text" 
		data-id="<?= get_the_ID() ?>"
		name="product_price"
		id="product_price" 
		placeholder="Цена" 
		value="<?= $product_price_value ?>">
	<?php
}

4. Создаем функцию, которая будет сохранять цену в БД и "вешаем" ее на хук save_post:

add_action( 'save_post', 'product_price_save' );
function product_price_save( $post_id ) {
	
    // if doing autosave don't do nothing
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) 
      return;

  // verify nonce
  if ( !wp_verify_nonce( $_POST['product_price_nonce'], basename( __FILE__ ) ) )
      return;

  // Check permissions
  if ( 'page' == $_POST['post_type'] ) 
  {
    if ( !current_user_can( 'edit_page', $post_id ) )
        return;
  }
  else
  {
    if ( !current_user_can( 'edit_post', $post_id ) )
        return;
  }

  // save the new value
  $new_value = $_POST['product_price'];
  update_post_meta( $post_id, 'product_price', $new_value );
}

В результате, в меню админки появится ссылка на новый раздел "Товары", где вы можете добавлять, редактировать, удалять товары.

Выводить на сайте с помощью get_posts() или другого "родного" для WP способа, указав в post_type название вашего Custom Type. Пример:

$products = get_posts( array(
	'post_type'   => 'product',
	'...
) );

foreach( $products as $product ){
	setup_postdata($product);
        echo $product->product_price;
}
wp_reset_postdata();

Подробнее гуглите по каждой функции, информации очень много.

Answer 1

[Сергей Нехамкин]

Если подумать, что будет дальше, после нажатия на кнопочку "Купить", то Woocommerce со всеми своими функциями и интеграциями будет совсем не излишним.

Comments

[Дмитрий Гормаш]

"Спасибо за заказ, в ближайшее время с вами свяжется оператор для уточнения деталей" - модальное окно либо в другом виде оповещение.

На самом деле, вопрос уже с этим решен. Реализация, которую я привел выше подошла идеально. К тому же, после интеграции с црм системой все вопросы касаемо обработки заказов ушли на нет.

[Сергей Нехамкин]

Использование CRM, да - "решает". Тогда использование Wordpress для простейшего лендинга на 1-2 товара - вот это нелогично. Зачем он тут вообще?

[Дмитрий Гормаш]

Сергей Нехамкин, чтобы заказчик мог сам редактировать карточку товара и не привлекать к этому верстальщика или кого то ещё.

[Сергей Нехамкин]

Можно, конечно (особенно имея на борту какой-нибудь визуальный редактор), использовать Wordpress. Но ведь и в админке Wordpress тоже нужно уметь работать, как и уметь работать с самим визуальным редактором.

Тогда уж просто на php страницу лендинга и к ней еще одну страницу, микро-админку. Чтобы владелец мог самым простым образом править элементы карточки товара. Тогда получится быстрый лендинг, что немаловажно для его успешной работы.

Но удобнее для такой ситуации какая-нибудь "тильда", по моему опыту.
Вариантов много.