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?
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityPlease 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.