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

Question

我想在我的woocommerce商店页面上的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();
});
});

如何获取一般的product_title或product_data并将它们包含在动态生成的模态中？

我怎样才能做到这一点？

Answer 1

您必须在使用 jquery 创建的元素中获取这些值，然后将它们插入您的 modalHtml。 例如，您在div类中具有产品的标题="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>";