Woocommerce Как получить данные о продукте, чтобы использовать их в пользовательских модальных

Question

Я хочу добавить пользовательское модальное всплывающее окно для события added_to_cart на странице моего woocommerce -магазина, которое указывает, что определенный продукт был добавлен в корзину.

Это то, что я получил до сих пор:

$("body").on("added_to_cart", function(e, data) {
   let modalHtml = '<div id="modal" class="modal">';

    modalHtml += '<div class="modal-content">';
    modalHtml += '<div class="modal-header">';
    modalHtml += '<span class="closeBtn" id="closeBtn">&times;</span</div>';
    modalHtml += '<div class="modal-body">';
    modalHtml += "<p>PRODUCTTITLE HERE - has been added</p>";
    modalHtml += "</div>";
    modalHtml += "</div>";
    modalHtml += "</div>";

    $("body").append(modalHtml);
    $(".modal").show();

    $("#closeBtn").on("click", () => {
    $(".modal").remove();
  });
});

Как я могу получить product_title или product_data в целом и включить их в модал, который генерируется динамически ??

Как мне этого добиться?

Answer 1

Вы должны получить эти значения в элементах, которые вы создали с помощью jquery, а затем вставить их в ваш modalHtml. например Если у вас есть название продукта внутри div class = "productTitle"> ..., вы должны ввести:

let productTitle = $(".productTitle").text(); //get the value as text.

 modalHtml += '<div class="modal-content">';
modalHtml += '<div class="modal-header">';
modalHtml += '<span class="closeBtn" id="closeBtn">&times;</span</div>';
modalHtml += '<div class="modal-body">';
modalHtml += "<p>" + productTitle + "</p>";
modalHtml += "</div>";
modalHtml += "</div>";
modalHtml += "</div>";