Мне нужно поставить подсказку, иконку «знак вопроса» рядом с вариантом выбора доставки «Flat Rate», чтобы при нажатии всплывало окно с описанием условий доставки.
У меня есть код, который показывает значок (на данный момент заменил его на текст «My Icon»), при нажатии на который всплывает окно.
function action_woocommerce_after_shipping_rate( $method, $index ) {
// Compare (adjust as needed)
if( $method->get_id() == 'flat_rate:1' ) {
echo '<span class="popup" onclick="myFunction()">My Icon<span class="popuptext" id="myPopup">';
echo dynamic_sidebar( 'tooltip_sidebar' );
echo '</span></span>';
}
}
add_action( 'woocommerce_after_shipping_rate', 'action_woocommerce_after_shipping_rate', 10, 2 );
Скрипт для вплывающего окна:
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
Стиль для всплывающего окна:
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 320px;
background: #fff;
color: #222;
text-align: center;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
-webkit-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.3);
box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.3);
}
/* Popup arrow */
.popup .popuptext::after {
content: "X";
position: absolute;
top: 0;
right: 5%;
border-width: 5px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
Также я регистрирую новую область для сайдбара, в котором вывожу условия доставки:
add_action( 'widgets_init', 'register_new_sidebar' );
function register_new_sidebar() {
register_sidebar(
array(
'id' => 'tooltip_sidebar',
'name' => 'Условия доставки',
'description' => 'Добавьте ваши условия доставки',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
)
);
}
Но тут возникает проблема. Под текстом с условиями доставки появляется цифра 1
, хотя ее в тексте просто нет. Скорее всего, это показывается id самого сайдбара, либо номер колонки с сайдбарами.
Видимо я неправильно добавил вывод сайдбара echo dynamic_sidebar ('tooltip_sidebar');
. Может нужно добавить условия вывода этого сайдбара?
Хотя это еще не все. На странице оформления заказа в сплывающем окне показывается текст условий доставки и цифра 1
. А вот на странице корзины, выводится только цифра, без текста условий доставки. Но судя по хуку, на обоих страницах текст должен выводиться одинаково.
Подскажите, как все это можно исправить?