如何將iframe中的產品同步到woocommerce購物車

Question

我們目前正在我工作的公司升級我們的網站。我們的舊網站上有一個嵌入到iframe中的產品設計師，並且將設計的產品添加到購物籃中。

等新的網站，我想的一樣的iframe，但我需要它來設計的產品添加到woocommerce車。我只是想知道我是怎麼做到的？

我並不需要一個詳細的解釋，說實話，一些有用的鏈接將超過就夠了。

感謝您在適當的時候給予幫助！

Answer 1

你需要一個事件偵聽器的iframe添加到iframe和輸出的數據。

window.addEventListener('message', function(event) { 
    iframeData = JSON.parse(event.data); 
    //do something with iframeData 
}, false); 

Answer 2

我不能完全理解你的問題，但這裏是兩個基本的東西：

一件事：iframe和主窗口之間傳送數據： 你可以在這裏閱讀：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

二件事：通過代碼將產品添加到woocommerce購物車中：

$product_id  = absint($_POST['product_id']); 
    $quantity   = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']); 
    $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity); 
    $product_status = get_post_status($product_id); 

    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity) && 'publish' === $product_status) { 

     do_action('woocommerce_ajax_added_to_cart', $product_id); 

    } 

有關iframe postMessage的更多信息（僅供演示 - 秒urity是你的一部分）：

您想從主窗口中的數據發送到iframe中。 在準備甚至嘗試這個辦法：

document.getElementById('iframe').contentWindow.postMessage('hi', '*'); 

在iframe的窗口試試這個：

window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) 
{ 
    console.log(event.data); 

} 

你想從iframe來主窗口中發送數據：

在iframe的窗口：

在主窗口：

window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) 
{ 
    console.log(event.data); 

} 

希望有所幫助！