3

How to Edit PHTML template in Magento 2?

I am trying to Edit PHTML template in Magento 2.

First I "Enabled Template Path Hints for Storefront" from Admin Panel.

Then I found that my template resides here "public_html/vendor/magento/module-checkout/view/frontend/templates/onepage.phtml". I went to that file and found below code there.

<div id="checkout" data-bind="scope:'checkout'" class="checkout-container">
    <div id="checkout-loader" data-role="checkout-loader" class="loading-mask" data-mage-init='{"checkoutLoader": {}}'>
        <div class="loader">
            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...'); ?>"
                 style="position: absolute;">
        </div>
    </div>
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
        {
            "#checkout": {
                "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
            }
        }
    </script>
    <script>
        window.checkoutConfig = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getCheckoutConfig()); ?>;
        // Create aliases for customer.js model from customer module
        window.isCustomerLoggedIn = window.checkoutConfig.isCustomerLoggedIn;
        window.customerData = window.checkoutConfig.customerData;
    </script>
    <script>
        require([
            'mage/url',
            'Magento_Ui/js/block-loader'
        ], function(url, blockLoader) {
            blockLoader("<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>");
            return url.setBaseUrl('<?php /* @escapeNotVerified */ echo $block->getBaseUrl();?>');
        })
    </script>
</div>

I would like to edit PHTML template of Checkout Page. I would like to know the location of the PHTML file of Checkout Page.

  • Update your question, with your exact requirement. Which thing you want to edit ? – Keyur Shah Oct 16 '17 at 8:58
2

Copy the file to your theme. This will override the core template file.

New file should be located in below location where vendor and theme are your vendor name and theme name for custom theme.

app/design/frontend/vendor/theme/Magento_Checkout/templates/onepage.phtml

This file can then be modified accordingly.

  • Thanks for reply. My question is Where is the HTML ? I am not getting any HTML code in that specific location/file. – abu abu Oct 16 '17 at 8:45
  • That is html and a bit of php, i think a lot of the checkout it loaded via ajax however. What do you need to modify? – harri Oct 16 '17 at 8:52
  • Thanks for your reply. I need to modify which is loaded via ajax. Thanks – abu abu Oct 16 '17 at 8:55
  • 2
    @harri , checkout page load using knockout js. – Sarfaraj Sipai Oct 16 '17 at 8:57
  • @Sarfaraj, Could you please help to find out the HTML Code while checkout page load using knockout js. Thanks – abu abu Oct 18 '17 at 8:02
1

You can create HTML file or modify/override if exist from here.

app/design/frontend/vendor/theme/Magento_Checkout/web/template/onepage.html

and copy it from here

vendor/magento/module-checkout/web/template/onepage.html

Note :- In this file the contents are come from different file using knockout.js so you have to modify that file using knockout js.

I hope you get it what you want.

  • Thanks @Sarfaraj. I am not getting any HTML file in your location. Thanks – abu abu Oct 16 '17 at 9:03
  • please checkout my answer i have update it. at this place "vendor/magento/module-checkout/web/template" you will get other html files also. – Sarfaraj Sipai Oct 16 '17 at 9:04
  • There is no web folder inside vendor/magento/module-checkout/. Thanks – abu abu Oct 16 '17 at 9:16
  • this is not possible inside a core module of magento vendor module there is available web folder with js and template files. – Sarfaraj Sipai Oct 16 '17 at 10:50
  • Thanks @Sarfaraj. What do you mean in your comment ? You said in your Answer, I have to copy the HTML and then edit that. But first of all I have to get the HTML. I didn't get the HTML so far. – abu abu Oct 16 '17 at 11:18
0

Create your own theme at the location app/design/frontend/Vendor/Theme & put your template file into it at the following location

app/design/frontend/Vendor/Theme/Magento_Checkout/templates/onepage.phtml

Copy the Code from

vendor/magento/module-Checkout/view/frontend/templates/onepage.phtml

And paste it to your template file in your own theme & edit it as of you want it to look like.

Note: You also need to take care of knockout js scripts as of in checkout module of magento they used checkout for the template rendering in frontend.

  • Thanks for reply. My question is Where is the HTML ? I am not getting any HTML code in that specific location/file. – abu abu Oct 16 '17 at 8:45
  • The phtml file contains the html & php both the contents thats why it is saved as the .phtml So the thing you got into this file it is your html with some amount of php – Abhishek Tripathi Oct 16 '17 at 8:48
  • There is no HTML content. Please see my Question first. – abu abu Oct 16 '17 at 8:49
  • <div id="checkout".... it is your html content What you are exactly looking for? – Abhishek Tripathi Oct 16 '17 at 8:51
  • Thanks for reply. I am looking for HTML content which is adjacent to <div id=""checkout..... There is Form with the id checkout. I am looking for that. Thanks. – abu abu Oct 16 '17 at 8:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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