1

I am trying to create digital signature at checkout page(just before place order button) in my custom module.

I have tried with below code:

app/code/Company/Signature/etc/module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Company_Signature" setup_version="1.0.0" schema_version="1.0.0">
        <sequence><module name="Magento_Checkout"/></sequence>
    </module>
</config>

app/code/Company/Company/view/frontend/layout/checkout_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">
    <head>
        <css src="Company_Signature::css/signature.css"/>
    </head>
    <body>
        <referenceBlock name="checkout.root">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Company_Signature::onepage.phtml</argument>
            </action>
        </referenceBlock>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="payments-list" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="order-signature" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Company_Signature/js/view/signature</item>
                                                                    <item name="displayArea" xsi:type="string">before-place-order</item>
                                                                    <item name="dataScope" xsi:type="string">checkoutsignature</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/Company/Signature/view/frontend/templates/signature.phtml

<div>
<div id="content">
    <div id="signatureparent">
        <div id="signature"></div>
    </div>
    <div id="tools"></div>
</div>
<div id="scrollgrabber"></div>
</div>

app/code/Company/Signature/view/frontend/templates/onepage.phtml

<?php $myphtml = $block->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Company_Signature::signature.phtml")->toHtml(); ?>

<script type="text/javascript">
    var my_phtml = <?php echo json_encode($myphtml); ?>;
</script>
<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="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
                 alt="<?= /* @escapeNotVerified */ __('Loading...') ?>"
                 style="position: absolute;">
        </div>
    </div>
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
        {
            "#checkout": {
                "Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
            }
        }
    </script>


    <script>
        window.checkoutConfig = <?= /* @escapeNotVerified */ $block->getSerializedCheckoutConfig() ?>;
        // 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("<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>");
            return url.setBaseUrl('<?= /* @escapeNotVerified */ $block->getBaseUrl() ?>');
        })
    </script>
</div>

<script type="text/javascript">
    require(['jquery', 'jSignature', jSignature.SignHere], function($){
        $(document).ready(function($){
            var $sigdiv = $("#signature").jSignature();
            var $tools = $('#tools');
            $('<input type="button" value="Reset">').bind('click', function(e){
                $sigdiv.jSignature('reset')
            }).appendTo($tools)
        }
    });
</script>

app/code/Company/Signature/view/frontend/web/template/checkout/signature.html

<div id="my-dialog-id" title="Information" data-bind="html:my_phtml"/>

app/code/Company/Signature/view/frontend/requirejs-config.js

var config = {
  "map": {
    "*": {
      "jSignature": "Company_Signature/js/view/jSignature",
      "jSignature.SignHere": "Company_Signature/js/view/jSignature.SignHere"
    }
  }
};

app/code/Company/Signature/view/frontend/web/js/view/jSignature.js Content is from https://github.com/brinley/jSignature/blob/master/src/jSignature.js

app/code/Company/Signature/view/frontend/web/js/view/jSignature.SignHere.js https://github.com/brinley/jSignature/blob/master/src/plugins/signhere/jSignature.SignHere.js

This method is not working.

Another method i have tried is: I put all content in onepage.phtml(both html and script). Then it is working

http://i.prntscr.com/V50BfbvbRdO74u-W09Wf2Q.png

But I want this content just before place order button.

Below is the onepage.phtml that I have edited(included script and html in same phtml)

<div>
<div id="content">
    <div id="signatureparent">
        <div id="signature"></div>
    </div>
    <div id="tools"></div>
    <!-- <div><p>Display Area:</p><div id="displayarea"></div></div> -->
</div>
<div id="scrollgrabber"></div>
</div>

<?php $myphtml = $block->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Virtina_Signature::signature.phtml")->toHtml(); ?>

<script type="text/javascript">
    var my_phtml = <?php echo json_encode($myphtml); ?>;
</script>
<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="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
                 alt="<?= /* @escapeNotVerified */ __('Loading...') ?>"
                 style="position: absolute;">
        </div>
    </div>
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
        {
            "#checkout": {
                "Magento_Ui/js/core/app": <?= /* @escapeNotVerified */ $block->getJsLayout() ?>
            }
        }
    </script>


    <script>
        window.checkoutConfig = <?= /* @escapeNotVerified */ $block->getSerializedCheckoutConfig() ?>;
        // 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("<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>");
            return url.setBaseUrl('<?= /* @escapeNotVerified */ $block->getBaseUrl() ?>');
        })
    </script>
</div>

<script type="text/javascript">
    require(['jquery', 'jSignature', 'jSignature.SignHere'], function($){
        $(document).ready(function($){
            var $sigdiv = $("#signature").jSignature();
            var $tools = $('#tools');
            $('<input type="button" value="Reset">').bind('click', function(e){
                $sigdiv.jSignature('reset')
            }).appendTo($tools)
        });
    });
</script>

I have refered the below link

how to call phtml file from html in magento 2

Please help......

Your Answer

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

Browse other questions tagged or ask your own question.