0

I have a custom offline payment module and I am trying to use jQuery to hide a div in frontend/web/template/payment.html:

<script>
require([ 'jquery' ],
  function($){
    if ( $('#payroll-form').attr('id') )  {
       $('#payroll-message').hide();
      }
});
</script>
<div id="payroll-message">
<h1>Payment.html KO</h1>
</div>

I want to check if the payment method has loaded and if not then show a message. I can't get jQuery to work at all. How do I do this?

UPDATE I added the onepage.phtml template to my checkout_index_index.xml file - action method="setTemplate":

<referenceBlock name="checkout.root">
          <action method="setTemplate">
                <argument name="template" xsi:type="string">Vendor_Module::onepage.phtml</argument>
            </action>
            <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="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="renders" xsi:type="array">
                                                            <!-- merge payment method renders here -->
                                                            <item name="children" xsi:type="array">
                                                                <item name="payroll-split" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Module/js/view/payment/offline-payments</item>

                                                                    <item name="methods" xsi:type="array">
                                                                        <item name="payroll" xsi:type="array">
                                                                            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>

And in frontend/templates/onepage.phtml I copied all the code from the vendor file and added this at the top:

<script>
require(['jquery'],
  function($){
    $('document').ready(function(){
      if ( $('#payroll-form').attr('id') )  {
       // $('#payroll-message').hide();
       alert("form loaded");
      }
    });
});
</script>

In frontend/web/template/payment.html:

<form id="payroll-form" class="form form-payroll" data-role="payroll-form">
            <fieldset class="fieldset payment method" data-bind='attr: {id: "payment_form_" + getCode()}'>
                <div class="field field-number required">
                    <label for="payroll_split" class="label">
                        <span><!-- ko i18n: 'payroll-form Number of Payroll Payments:'--><!-- /ko --></span>
                    </label>
                    <div class="control">
                        <select id="payroll_split"
                    name="payment[payroll_split]"
                    data-validate="{required:true}"
                    data-bind='
                     attr: {title: $t("Number of Payroll Payments:")},
                     value: payrollSplit'>
                            <option value="Select Payment Split">Select Payment Split</option>
                            <option value="1 Pay Period">1 Pay Period</option>
                            <option value="2 Pay Periods">2 Pay Periods</option>
                            <option value="3 Pay Periods">3 Pay Periods</option>
                            <option value="4 Pay Periods">4 Pay Periods</option>
                        </select>

                    </div>
                </div>
            </fieldset>
        </form>

The jQuery in my onepage.phtml page won't target the #payroll-form in my payment.html page or in my payment/payroll-form.html page or in payment-methods/list.html page. As a test, the alert also will not work. The alert will work if I target the #checkout in the onepage.phtml (the page the script is on) but not when I target the id in the payment.html or the list.html page. What could be going wrong?

UPDATE 2 Besides the update above also tried this in web/js/model/payroll.js

define([
    'jquery'
], function ($) {
    'use strict';

    /** Override default place order action and add agreement_ids to request */
    return function (paymentData) {
        var payrollSplitForm,
            payrollSplitData;

        payrollSplitForm = $('form[data-role=payroll-form] #payroll_split');
        payrollSplitData = payrollSplitForm.val();

        if (paymentData['extension_attributes'] === undefined) {
            paymentData['extension_attributes'] = {};
        }

        paymentData['extension_attributes']['payroll_split'] = payrollSplitData;
    };

    $('document').ready(function(){
      if ( $('#payroll-form').attr('id') )  {
         alert("form loaded");
        }
      });

});

How can I target this div so I can load my message?

0

Supposing that your div in payment.html is : <div class="my-payment">...</div>

We bind our js to the UI via data-bind="afterRender" so the result will be something like this :

<div class="my-payment"
     data-bind="afterRender: function(){
         alert('Yeah, it works');
     }">
    ...
</div>

Note: don't forget to :

clean the cache

clean var/view_preprocessed content

clean pub/static content

deploy the static content = php bin/magento setup:static-content:deploy -f
  • @Prince I don't think this will work for what I want. If my payment method doesn't load, I want to show a message. In my payment.html page, if the div doesn't load I want the message to show. I can't get the jQuery to work at all. This won't even work: <script type="text/javascript"> require(['jquery', 'jquery/ui'], function($){ $('document').ready(function(){ alert("page loaded"); }); }); </script> – stanhook Sep 24 at 12:46
  • Please see the update above. I added new code. – stanhook Sep 25 at 0:02

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.