AEM - Custom component without dialog Code level

custom-component.txt

Custom component without dialog:- Code level

Step 1 - Create component folder "productdetails"
e.g:- ui.apps\src\main\content\jcr_root\apps\aemgeeks\components\productdetails

Step 2 - Create a ".content.xml" file
e.g:- ui.apps\src\main\content\jcr_root\apps\aemgeeks\components\productdetails\.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Product Details"
    componentGroup="CustomComponents"/>

Step 3 - Create a .html file with the same name of component "productdetails.html"
e.g:- ui.apps\src\main\content\jcr_root\apps\aemgeeks\components\productdetails\productdetails.html

<div class="product-details">
    <h2>Product Title</h2>
    <p>Product short description.</p>
</div>

Step 4 - If there is no any dialog then create a "_cq_editConfig.xml"
ui.apps\src\main\content\jcr_root\apps\aemgeeks\components\productdetails\_cq_editConfig.xml  

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:EditConfig"/>