I am asked to create a mobile theme without using any responsive theme.

So I have created a custom mobile theme by copying the magento's "iphone" theme to my package and modifying it. i.e. app/design/frontend/mypackage/iphone

In the cart.phtml Page(e.g. http://www.example.com/mystore/checkout/cart/) there are following items...

  1. product lists which are added to cart.
  2. Delivery method choose (country, post-code).

    On selecting it shows "Delivery options dropdown related to the country". (Which is handled by an extension called webshopapps_productmatrix)

    i.e. $this->getChildHtml('shipping'); //webshopapps/productmatrix/checkout/cart/shipping.phtml

on selecting the delivery option the price get modified.

  1. Subtotal, Tax, Total price (changes according to Delivery method).

    i.e. $this->getChildHtml('totals');

  2. Payment method(paypal, amazon, credit-card checkout)

All are present in the single page and from this page the checkout page is redirected ,where the login user, billing address,delivery address,payment details are to be made.

I am asked to divide it into five pages for mobile theme only Like:

  • 1st page-- product listing with a checkout button.

  • 2nd Page-- On clicking this button it will redirect me to a page which have the log in form for customer or guest(The first step of the checkout process) and a "checkout as guest" button.

  • 3rd page-- On clicking the "checkout as guest" button it will redirect me to a page where Delivery method choose (country, post-code) elements are present with a "view delivery option" button.

  • 4th page -- On clicking the "view delivery option" button it will redirect me to another page where agian the delivery method choose option with the delivery option and total, subtotal,tax price of the products will be present with a "payment button"..

  • 5th page -- On clicking the "payment" button it will take me to another page having the price details(total,tax,grand total) and the payment methods (paypal,amazon, checkout with credit card option).

and finally from this page to checkout page,where the billing address,delivery address,payment details are present in one page.

So basically I want to divide the cart.phtml page into sub-pages before going to the checkout page.

So far I have done the following things...

Anyhow I have modified the cart.phtml file into different pages.

  1. override cartController by creating a module in the local code pool so that I can redirect to specific page if the theme is mobile.
    i.e. local/MyCheckout/Override/controllers/cartController.php

    require_once 'Mage/Checkout/controllers/CartController.php';
    class MyCheckout_Override_CartController extends Mage_Checkout_CartController
         * Initialize shipping information
        public function estimatePostAction()
          $country    = (string) $this->getRequest()->getParam('country_id');
          $postcode   = (string) $this->getRequest()->getParam('estimate_postcode');
          $city       = (string) $this->getRequest()->getParam('estimate_city');
          $regionId   = (string) $this->getRequest()->getParam('region_id');
          $region     = (string) $this->getRequest()->getParam('region');
        // Customization of login for mobile checkout step 1
        public function loginAction(){
        public function deliverymethodAction(){
        public function deliveryoptionAction(){
        public function payoptionAction(){
        public function estimateUpdatePostAction()
           $code = (string) $this->getRequest()->getParam('estimate_method');
           if (!empty($code)) {
  2. created phtml file (pay.phtml, ship.phtml, shipoption.phtml) in the folder where cart.phtml file was present.

  3. created function inside the overridden class which is called on the onclick event of the button, for which I have created the handles like 'checkout_cart_login','checkout_cart_deliverymethod', 'checkout_cart_deliveryoption', 'checkout_cart_payoption' in the checkout.xml file.

But I am stuck with the delivery options which is managed by an extension (webshopapps_productmatrix).

The checkout.xml file for the handles that i have created are as follows..

    <reference name="root">
        <action method="setTemplate"><template>page/1column.phtml</template></action>
    <reference name="content">
        <block type="checkout/cart" name="checkout.ship">
            <action method="setTemplate"><template>checkout/shipoption.phtml</template></action>

            <block type="checkout/cart_shipping" name="checkout.cart.shipping" as="shipping" template="checkout/cart/shipping.phtml"/>
            <block type="checkout/cart_totals" name="checkout.cart.totals" as="totals" template="checkout/cart/totals.phtml"/>

If the shipping option($this->getChildHtml("shipping")) present in the cart.phtml then it works fine.

But If i include ($this->getChildHtml("shipping")) in another phtml(shipoption.phtml) then it is not working.

  • i.e. on selecting the delivery method nothing modifies.
  • i.e the delivery options element is not coming and the prices are also not get modified.

But from this page if I go to the cart.phtml and comes back to this page all the information which was not coming is coming.

  • I can't figure out why it is not working..
  • I can't figure out the error in the layout file or in javascript file..

Could you Please suggest how to do this in a proper way..


1 Answer 1


You don't need to divide your cart.phtml into 4 separated pages. The behaviour that you have described above can be reproduced with css and jquery.

First, when page has been loaded, product lists block will have display:block property and the next 3 blocks will have display:none.

Lets assume that you click on a button and get to the next step, in your case Delivery method chooser. Now, your second block will have property display:block and the others display:none.

$( "#checkout_button" ).click(function() {
  $("#block1").css("display", "none");
  $("#block2").css("display", "block");
  $("#block3").css("display", "none");
  $("#block4").css("display", "none");

Of course, you can put some validations between steps. If this conditions are met, the user can get to next step.

Good luck !

  • Thanks @alex. but I am strictly asked to do different pages for these things. I have moved a little bit. could you please look into the updated post. Jan 18, 2016 at 6:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.