Сворачивание сводки заказа/таблицы примечаний на странице оформления заказа Woocommerce
Я пытаюсь воспроизвести функцию «сводка заказа» на Shopify, где все детали заказа скрыты внутри кнопки-переключателя/эффекта аккордеона, чтобы сделать процесс оформления заказа быстрее и проще.
Бонусные баллы, если мы сможем добавить символ корзины и цену к кнопке переключения, как на изображениях, которые я прикрепил.
Я пытался использовать различные плагины, такие как Collapse-O-Matic и CSS, но не смог добиться желаемого эффекта на моей странице оформления заказа WooCommerce.
Я ищу решение для создания кнопки переключения или эффекта аккордеона для сводной таблицы заказа на странице оформления заказа в WooCommerce.
Любая помощь или руководство будет принята с благодарностью!
Вложения:
что ты уже испробовал? Где ты застрял? Можете ли вы поделиться своими попытками, чтобы другие могли лучше понять проблему?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вам нужен полный контроль, вам следует создать собственный шаблон для шаблона form-checkout.php (woocommerce/templates/checkout/form-checkout.php).
Но вы также можете добавить фрагмент кода, который скрывает все строки таблицы просмотра заказа, кроме суммы заказа. Сохраняя общую сумму заказа видимой, вам не нужно беспокоиться о правильном обновлении общей суммы заказа при изменении значений в форме оформления заказа. Он будет автоматически обновлен WooCommerce.
Единственное, что еще делает фрагмент, — это добавляет отдельную строку со значком корзины и кнопками-переключателями, немного CSS и немного jQuery, чтобы скрыть и показать соответствующие элементы.
add_action( 'woocommerce_checkout_order_review', function() {
?>
<style>
#order_review_heading {
display: none;
}
#order_review_toggle {
display: inline-block;
padding: 1em;
font-size: 18px;
line-height: 1;
width: 100%;
}
#order_review_toggle .dashicons {
font-size: 18px;
}
#order_review_toggle .dashicons-cart {
margin-right: 0.5em;
}
#order_review_toggle .dashicons-arrow-up-alt2,
#order_review_toggle .dashicons-arrow-down-alt2 {
float: right;
cursor: pointer;
}
#order_review_toggle .dashicons-arrow-up-alt2 {
display: none;
}
.woocommerce-checkout-review-order-table tr:not(.order-total) {
display: none;
}
</style>
<script>
jQuery( function( $ ) {
$('#order_review_toggle .dashicons-arrow-down-alt2').on( 'click', function() {
let $orderReviewTable = $(this).closest('#order_review').find( '.woocommerce-checkout-review-order-table' );
$orderReviewTable.find('tr').show();
$(this).siblings('.dashicons-arrow-up-alt2').show();
$(this).hide();
});
$('#order_review_toggle .dashicons-arrow-up-alt2').on( 'click', function() {
let $orderReviewTable = $(this).closest('#order_review').find( '.woocommerce-checkout-review-order-table' );
$orderReviewTable.find('tr').not('.order-total').hide();
$(this).siblings('.dashicons-arrow-down-alt2').show();
$(this).hide();
});
});
</script>
<?php
printf( '<div id = "order_review_toggle"><span class = "dashicons dashicons-cart"></span><span>%s</span><span class = "dashicons dashicons-arrow-up-alt2"></span><span class = "dashicons dashicons-arrow-down-alt2"></span></div>', __( 'Your order', 'woocommerce' ) );
}, 1 );
add_action( 'wp_enqueue_scripts', function() {
if ( is_checkout() ) {
wp_enqueue_style('dashicons');
}
} );
Этот фрагмент кода следует добавить в functions.php вашей дочерней темы (или через плагин, например Code Snippets).
Предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.