0

I need to change my Java script code to jquery widget.Please provvide me a solution

js file

define([
    "jquery",
    "jquery/ui",
    "Magento_Ui/js/modal/modal",
    "slickslider",
    'mage/url'
],
        function ($) {
            "use strict";


            var popup = {
                type: 'slide',
                responsive: true,
                innerScroll: false,
                buttons: false,

                modalClass: "bottom-side-popup",
                clickableOverlay: true

            };

            var popupmodel = $('#wrapper').modal(popup);
            $(".products-btn").click(function () {

                popupmodel.modal("openModal");


            });

            $('.list-product').slick({
                slidesToShow: 8,
                slidesToScroll: 1

            });

        });
1

Use 'define' instead of 'require' if want to use in JS file:

  <script type="text/javascript">
      /** This is demo for how you can use it in .phtml files**/
      require(
          [
              'jquery',
              'Magento_Ui/js/modal/modal'
          ],
          function($,modal) {
              var options = {
                  type: 'slide', // or popup
                  responsive: true,
                  innerScroll: true,
                  modalClass: 'add-modal-class'
              };
              var popup = modal(options, $('#id-of-content-div'));
              $("#btn-clickable").on("click",function(){
                  $('#id-of-content-div').modal('openModal');
              });



          }
      );
  </script>

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.