1

Currently, I have cc card HTML in

MyModule/Testing/view/frontend/web/template/form.html

I want to rewrite this to phtml file with my module and js in web/js folder.
How can I achieve that?

1 Answer 1

0

Please note that both .phtml and .html files are part of the view layer in Magento 2.

The difference is that phtml files work with Block in which according to Magento Docs is a special PHP class that is usually (but not always) connected to a template.

Blocks usually work with a model layer to manipulate data and return results/response to templates (.phtml or .html files). These files are used by layout files in setting up templates for certain blocks and so on.

html files on the other end are solely used to display content on the frontend and javascript libraries such as knockout JS and use them accordingly. These files are also used for AJAX content loading.
Reference: Difference between .phtml and .html

In your case, you can convert or rewrite your form.html file to form.phtml and store it in:

MyModule/Testing/view/frontend/templates/form.phtml

You can then initiate your .phtml file in a layout file through a layout block.
You can specify your .phtml file in the template attribute of the <block> layout.

Take this example:

app/code/MyModule/Testing/view/frontend/layout/mymodule_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block name="mymodule_testing" class="MyModule\Testing\Block\Hello" template="form.phtml">
                <arguments>
                    <argument name="label" xsi:type="string">The Form Template</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

As you can see the mymodule_testing block is rendered by your form.phtml template.

Template Reference: Template Override Magento 2

Note: Your layout block has a class named Hello which is located in the path MyModule\Testing\Block\Hello.php

Hope this helps or at least gives you an idea or reference to start with.

Your Answer

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

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