6. How to edit item in cart

In the previous section, we are able to add an item to cart.
Now we need to customize the cart page to show the item (which we added in the previous section)

For every eCommerce, we are able to custom the cart page. We can find out in eCommerce’s document.
In this case, we are using wordpress so it’s possible to do that.

In the code, we have a loop of product.
We must check if have the custom values which we added after Add-to-cart event in the previous section, we will show the visualization or some custom controls. For edit the item or show the summary, we need to add 2 addtional buttons.

EDIT button:

• For the current in the loop, we able to get the custom attribute of this product.
• In this case, we have pod_woocoomece_page_id which we already defined in the section 2 then we able to get the url of this page.
  And we need to get the transaction-id in this item which we already stored after Add-to-cart event.
• Then we will combine them together as http://eCommerce.site/url-page?tid=xxx&tss=xxx
  When user click on the edit button, we navigate to the combined link.

That means we need to get the parameter from the url in the custom page and provide this parameter in the iFrame also.
Because the goal is, we would like to reload the configuration of the selected item in the cart.

// get transaction id from parameter
$transaction_param = empty($_GET['transaction_id']) ? '' : '&tid=' . $_GET['transaction_id'];
$transaction_session_param = empty($_GET['transaction_session']) ? '' : '&tss=' . $_GET['transaction_session'];

$full_url = $iframe_url.'?product_id='.$id.
                        '&item_id='.$pod_product_id.
                        '&locale='.$locale.
                        '&country_code='.$country_code.
                        '&currency='.$currency.
                        '&cart_session='.urlencode($cart_session).
                        '&pod_mode='.$pod_mode.
                        $transaction_param.
                        $user_param;

For this case, we will re-use the event add_to_cart which we already registered in the custom page.
That mean for editing item, we must delete the current item in the cart then we add a new item with the custom values.

<script type="text/javascript">
    window.addEventListener('message', function(ev) {
        var action = ev.data.action;
        if (action === 'cart') {
            window.location.href = '<?php echo $cart_url; ?>';
        } else if (action === 'shop') {
            window.location.href = '<?php echo $shop_url; ?>';
        } else if (action === 'open_video') {
            var value = ev.data.value;
            window.open(value.link, '_blank');
        } else if (action === 'add_to_cart') {
            var data = ev.data.value;    
            console.log(data);
            // TODO: For editing item, remove the selected item in the cart
            // TODO: add to Cart
        }
    });
</script>

SUMMARY button:

We need to get the list of custom value which we already stored for the values then make a popup and show on the screen.
You can make the dialog for this page by your own.