1

On checkout page i want to hide summary component by default. and when a user clicks on a button i to show that Summary section. The Summary section is build through XML and KO. My Question is, Can i use Jquery in KO?

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Customer/js/model/customer',
    'jquery'
],
function (
    ko,
    Component,
    _,
    stepNavigator,
    customer,
    $
) {
    'use strict';
    /**
     * check-login - is the name of the component's .html template
     */
    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/check-login'
        },

        //add here your logic to display step,
        isVisible: ko.observable(true),
        isLogedIn: customer.isLoggedIn(),
        //step code will be used as step content id in the component template
        stepCode: 'isLogedCheck',
        //step title value
        stepTitle: 'Login',

        /**
         *
         * @returns {*}
         */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                this.stepCode,
                //step alias
                null,
                this.stepTitle,
                //observable property with logic when display step or hide step
                this.isVisible,

                _.bind(this.navigate, this),

                /**
                 * sort order value
                 * 'sort order value' < 10: step displays before shipping step;
                 * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                 * 'sort order value' > 20 : step displays after payment step
                 */
                9
            );

            return this;
        },

        /**
         * The navigate() method is responsible for navigation between checkout step
         * during checkout. You can add custom logic, for example some conditions
         * for switching to your custom step
         */
        navigate: function () {

        },

        /**
         * @returns void
         */
        navigateToNextStep: function () {
            stepNavigator.next();
        }

    });


        $(".checkout-btn").click(function(){
        console.log("Hello World");
            $(".order-summary-sec").css("display","block");
        });


}
);

HTML:

<div class="container checkout-acc-container checkout-acc-container-2 ">
<div class="row">
    <div class="col-12 col-sm-12 col-md-8 col-lg-6 mr-auto ml-auto offset-lg-3">
        <h2>Checkout</h2>
        <div class="acc-fields-sec" data-bind="i18n: stepTitle" data-role="title">
            <label>Email Address</label>
            <input type="text" name="email" class="field input-acc-field email-field">
            <p class="already-reg-text">This email is already registered with us, please sign in below</p>

            <label class="field-label password-label">Password</label>
            <input type="password" name="password" class="field input-acc-field password-field">
            <p class="checkout-btn-sec">

                <a href="#" class="checkout-btn"><!-- ko i18n: 'Next'--><!-- /ko --></a>
            </p>
            <p class="or-with-fb-text">OR sign in with Facebook</p>
            <p class="fb-btn-sec">
                <a href="#" class="fb-btn"><i class="fa fa-facebook"></i>SIGN IN WITH FACEBOOK</a>
            </p>
        </div>
    </div>
</div>

at the last i have pasted my jQuery Code. But it is not working.Any idea how i could be?

1

You can write your jQuery in initialize function. However, I would not recommend writing jQuery in your viewModal as it creates coupling between your viewModal and DOM elements. Your final code would be something like following ;

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Customer/js/model/customer',
    'jquery'
],
function (
    ko,
    Component,
    _,
    stepNavigator,
    customer,
    $
) {
    'use strict';
    /**
     * check-login - is the name of the component's .html template
     */
    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/check-login'
        },

        //add here your logic to display step,
        isVisible: ko.observable(true),
        isLogedIn: customer.isLoggedIn(),
        //step code will be used as step content id in the component template
        stepCode: 'isLogedCheck',
        //step title value
        stepTitle: 'Login',

        /**
         *
         * @returns {*}
         */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                this.stepCode,
                //step alias
                null,
                this.stepTitle,
                //observable property with logic when display step or hide step
                this.isVisible,

                _.bind(this.navigate, this),

                /**
                 * sort order value
                 * 'sort order value' < 10: step displays before shipping step;
                 * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                 * 'sort order value' > 20 : step displays after payment step
                 */
                9
            );

            $(".checkout-btn").click(function(){
            console.log("Hello World");
                $(".order-summary-sec").css("display","block");
            });

            return this;
        },

        /**
         * The navigate() method is responsible for navigation between checkout step
         * during checkout. You can add custom logic, for example some conditions
         * for switching to your custom step
         */
        navigate: function () {

        },

        /**
         * @returns void
         */
        navigateToNextStep: function () {
            stepNavigator.next();
        }

    });
}
  • let me try this. if you dont recommend then can you share same this in KO Js? – sudo55 Apr 8 at 7:16
  • Please share your html template if you want the same in KO. – Vivek Kumar Apr 8 at 7:36
  • added in question. please check. – sudo55 Apr 8 at 7:39
  • Is the current jquery code I've provided working ? – Vivek Kumar Apr 8 at 8:08
  • 1
    you are trying to access DOM element with class order-summary-sec which is not in your template. KO can essentially work within the scope of its own template so it cannot be done using ko bindings. – Vivek Kumar Apr 8 at 16:24
1

You can try using jQuery function instead of $()
Examine this:

jQuery(".checkout-btn").click(function(){
        console.log("Hello World");
        jQuery(".order-summary-sec").css("display","block");
});  

Can you try this:

<script>
    require([
        'jquery'
    ], function(jQuery) {
        jQuery(".checkout-btn").click(function () {
            console.log("Hello World");
            jQuery(".order-summary-sec").css("display", "block");
        });
    });
</script>
  • not working at all. – sudo55 Apr 8 at 10:14
  • I think you can go with injecting jQuery directly to your html – fmsthird Apr 8 at 10:16
  • It is not the standard way but I think it is the easiest way to make it work. – fmsthird Apr 8 at 10:17
  • i tried that, but in html the jquery never worked. – sudo55 Apr 8 at 10:18
  • can you show me how you did it? – fmsthird Apr 8 at 10:19

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.