Javascript Woocommerce如何获取产品数据以在自定义模式中使用它们

我想在my

woocommerce

-shop页面上的

added_to_cart

事件中添加一个自定义模式弹出窗口，该窗口指示某个产品已添加到购物车

到目前为止，我得到的是：

$("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();
  });
});

$（“body”）。关于（“添加到购物车”，函数（e，数据）{
让modalHtml=''；
modalHtml+=''；
modalHtml+=''；
modalHtml+='×；必须在使用jquery创建的元素中获取这些值，然后将它们插入到modalHtml中。
e、 g.如果您在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>";

let productTitle=$（“.productTitle”）.text（）；//以文本形式获取值。
modalHtml+=''；
modalHtml+=''；
modalHtml+='×；是的，这不完全是我想要的，但想法是正确的，所以我接受你的答案：-）