CODEWITHSUNDEEP
phpwordpressiframewoocommerce
Liam
Liam

Reputation: 1920

how to sync a product in an iframe to the woocommerce cart

We're currently upgrading our site at the company I work at. We have a product designer on our old site that is embedded in an iframe and what ever product is designed is added to the basket.

So on the new site I want the same iframe, but I need it to add the designed product to the woocommerce cart. I was just wondering how I do that?

I don't need a detailed explanation, to be honest, some helpful links will more than suffice.

Thanks for your help in due course!

Upvotes: 0

Views: 1851

Answers (2)

christian Nguyen
christian Nguyen

Reputation: 1600

I cannot understand completely your problem, but here is two basic things:

First Things: Transfer data between iframe and main window: You can read here: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Second things: Add product to woocommerce cart by code:

    $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);

    }

More information about iframe postMessage ( For demo only - security is your part ):

You want to send data from main window to iframe. On ready even try this:

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

On iframe window try this:

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

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

}

You want to send data from iframe to main window:

On the iframe window:

window.parent.postMessage('hi', '*');

On the main window:

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

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

}

Hope that help!

Upvotes: 1

DrCord
DrCord

Reputation: 3955

You need to add an event listener to the iframe and output the data from the iframe.

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

Upvotes: 0

Related Questions