Title: Adding the onepage checkout on product page
Tags: php;magento;checkout;onepage-checkout
Question: I have encounter a slight problem regarding magento checkout process.
Currently I am using the list.phtml file to add orders into the cart, and upon changing the product, the cart is emptied and the newly selected product is added. I do this via this functionality:

this is the form for deleting (i have the form key into it)

```<form action="<?php echo $this-&gt;getUrl('checkout/cart/updatePost') ?&gt;" method="POST" name="emptyTheCart"&gt;
            <?php echo $this-&gt;getBlockHtml('formkey'); ?&gt;
            <button type="submit" name="update_cart_action" value="empty_cart" style="display:none" title="<?php echo $this-&gt;__('Empty Cart'); ?&gt;" id="empty_cart_button"&gt;</button&gt;
      </form&gt;



$('.item').click(function() {
$(this).find('input:radio')[0].checked = true;  
var formurl = $(this).find('input:radio').val();
var datafile=$("#product_addtocart_form").serialize();
    var dataExecURL = "<?php echo $this-&gt;getUrl('checkout/cart/updatePost') ?&gt;";
     var datafiles=$("#emptyTheCart").serialize();
     datafiles = datafiles + "&amp;update_cart_action=empty_cart";

     $.ajax({
            type : 'POST',
            data : datafiles,
            url  : dataExecURL,
            success: function()
            {
                  $.ajax({
                            type : 'POST',
                            data : datafile,
                            url  : formurl



                        });
            }


        });
});
```

This part works very good.
The thing is that on the Category page i have the following custom design in the Custom Layout Update:

```<block type="cms/block" name="opdracht_text" before="-"&gt;
        <action method="setBlockId"&gt;<block_id&gt;opdracht_text</block_id&gt;</action&gt;
    </block&gt;
<block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml" &gt;

<block type="cms/block" name=" shipping_method" &gt;
        <action method="setBlockId"&gt;<block_id&gt; shipping_method </block_id&gt;</action&gt;
    </block&gt;
<block type="checkout/onepage_shipping_method_available" template="checkout/onepage/shipping_method/available.phtml"/&gt;

<block type="cms/block" name="billing" &gt;
        <action method="setBlockId"&gt;<block_id&gt;billing</block_id&gt;</action&gt;
    </block&gt;


<block type="checkout/onepage_billing" name="checkout.onepage.billing" as="billing" template="checkout/onepage/billing.phtml"/&gt;
<block type="cms/block" name="opdracht-delivery" &gt;
        <action method="setBlockId"&gt;<block_id&gt;opdracht-delivery</block_id&gt;</action&gt;
    </block&gt;

<block type="cms/block" name="payment_method" &gt;
        <action method="setBlockId"&gt;<block_id&gt; payment_method </block_id&gt;</action&gt;
    </block&gt;
<block type="checkout/onepage_payment" name="checkout.onepage.payment" as="payment" template="checkout/onepage/payment.phtml"&gt;
                    <block type="checkout/onepage_payment_methods" name="checkout.payment.methods" as="methods" template="checkout/onepage/payment/info.phtml"&gt;
                        <action method="setMethodFormTemplate"&gt;<method&gt;purchaseorder</method&gt;<template&gt;payment/form/purchaseorder.phtml</template&gt;</action&gt;
                    </block&gt;
                    <block type="core/template" name="checkout.onepage.payment.additional" as="additional" /&gt;
                    <block type="core/template" name="checkout.onepage.payment.methods_additional" as="methods_additional" /&gt;
                </block&gt;
</reference&gt;
```

As a onepage checkout functionality I have added to magento the extension from

http://www.magentocommerce.com/magento-connect/one-page-checkout.html

when I navigate to my store_url/chekout/cart
I can clearely see the cart and the shipping methods and update the price there and after that proceed to the checkout page at 

store_url/ onepage/

where I have my billing + shipping + payment methods

I have taken the blocks from the checkout.xml file from the layout folder from my template (default rwd template) and added them to the category page

The main issue that I am having is the fact that upon opening the page I cannot view the shipping method until after I have selected a product and refreshed the page.
The State/Province Field is not shown at all and also the Payment methods do not show up.

The thing that I am currently trying to accomplish is that the checkout forms to be on the product page like in the following flow:

Product Selection -> Shipping Method -> Billing Method -> Payment Method

These are the steps that I am currently trying to put in one single page  ( the  product display page / category page )


Here is the accepted answer: I have managed to find the best solutin in this case by using the default xml for the magento iwd one page chekout.

in case you want to have the checkout page on the same page as the product page, 
in Catalog->Manage Categories, select your category, then on the Display Settings choose the Static Blocks and products option.

In the custom Design tab, set the page layout to no layout and then use the wrapper block and the desired blocks that you want on the page.

Also, do not forget to include the javascript files on the page. 

Example for One page checkout with product list on the same page:

``` <reference name="head"&gt;        

<action method="addItem"&gt;<type&gt;skin_js</type&gt;<name&gt;js/iwd/opc/checkout.js</name&gt;</action&gt;
            <action method="addItem"&gt;<type&gt;skin_js</type&gt;<name&gt;js/iwd/opc/extend.js</name&gt;</action&gt;
            <action method="addJs"&gt;<file&gt;mage/directpost.js</file&gt;</action&gt;        
            <action method="addItem"&gt;<type&gt;skin_js</type&gt;<name&gt;js/opcheckout.js</name&gt;</action&gt;
            <action method="addItem" ifconfig="opc/paypal/status"&gt;<type&gt;skin_js</type&gt;<name&gt;js/iwd/opc/lipp.js</name&gt;</action&gt;

            <action method="addJs" ifconfig="payment/braintree/active"&gt;<file&gt;braintree/braintree-1.3.4.js</file&gt;</action&gt;
            <action method="addCss" ifconfig="payment/braintree/active"&gt;<stylesheet&gt;braintree/css/braintree.css</stylesheet&gt;</action&gt;

        </reference&gt; 

<reference name="content"&gt;



 <!-- Auguria Insurance --&gt;







<block type="opc/wrapper" name="es.checkout.container" template="opc/wrapper.phtml"&gt;


              <!-- SHIPPING METHODS FORM --&gt;
                    <block type="checkout/onepage_shipping_method" name="checkout.onepage.shipping_method" as="shipping_method" template="opc/onepage/shipping_method.phtml"&gt;
                        <block type="checkout/onepage_shipping_method_available" name="checkout.onepage.shipping_method.available" as="available" template="checkout/onepage/shipping_method/available.phtml"/&gt;
                        <block type="checkout/onepage_shipping_method_additional" name="checkout.onepage.shipping_method.additional" as="additional" template="checkout/onepage/shipping_method/additional.phtml"/&gt;



                    </block&gt;


 <!-- Guest --&gt;





















                    <!-- BILLING FORM --&gt;
                  <block type="opc/onepage_billing" name="checkout.onepage.billing" as="billing" template="opc/onepage/billing.phtml"/&gt;

                    <!-- SHIPPING FORM --&gt;
                    <block type="opc/onepage_shipping" name="checkout.onepage.shipping" as="shipping" template="opc/onepage/shipping.phtml"/&gt;


                    <!-- COMMENT FORM --&gt;
                    <block type="opc/onepage_comment" name="checkout.order.comment" as="customer.comment" /&gt;



                    <!-- PAYMENTS METHOD FORM --&gt;
                    <block type="checkout/onepage_payment" name="checkout.onepage.payment" as="payment" template="opc/onepage/payment.phtml"&gt;
                        <block type="checkout/onepage_payment_methods" name="checkout.payment.methods" as="methods" template="checkout/onepage/payment/methods.phtml"&gt;
                            <action method="setMethodFormTemplate"&gt;<method&gt;purchaseorder</method&gt;<template&gt;payment/form/purchaseorder.phtml</template&gt;</action&gt;
                        </block&gt;
                    </block&gt;

                    <block type="checkout/agreements" name="checkout.onepage.agreements" as="agreements" template="opc/onepage/agreements.phtml"/&gt;
                    <block type="opc/onepage_subscribed" template="opc/onepage/review/subscribed.phtml" name="opc.newsletters" /&gt; 

            </block&gt;



</reference&gt;
```

Comment for this answer: also, the page now works because of the adding of the additional javascript files. Now there is no need to wory about a refresh being needed because in the wrapper.phtml file I have added the following block:


 getLayout()->createBlock("checkout/cart_shipping")->setTemplate("checkout/cart/shipping.phtml")->toHtml();?>


this block creates the shipping estimation block, that can help a user check if there is any shipping available in his Area.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:02/16/15', 'FavoriteCount': 2.0, 'PostTypeId': 1, 'Tags': '<php><magento><checkout><onepage-checkout>', 'Title': 'Adding the onepage checkout on product page', 'ViewCount': 1239, 'id': 28544567, 'user_AboutMe': '', 'user_AccountId': 3270808.0, 'user_DisplayName': 'Rotariu Dan Andrei', 'user_Reputation': 13.0, 'user_Views': 25.0, 'user_id': 2754247.0}}