Mrthdrb

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?

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();
 

 );

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>