Magento 2 - Replace existing Prototype JS with jQuery

Question

default.xml

<?xml version="1.0"?>
<page
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Ei_Productpoint::js/productpoint-slider.js"/>
    </head>
    <body/>
</page>

requirejs-config.js

var config = {
    map: {
        '*': {
            MySlider: 'Namespace_Modulename/js/productpoint-slider'
        }
    }
};

productpoint-slider.js (Prototype JS)

 define(['prototype'],function($){
 // where $ == "prototype"
var MySlider = Class.create();
MySlider.$ = {
initialize: function(amountR, trackR, handleR, decrHandleR, incrHandleR, minPointR, maxPointR, stepR, labelAmountR, checkMaxAmountR) {

        this.minPointsCheck = minPointR;
        this.minPoints = 0;
        this.maxPoints = maxPointR;
        this.pointStep = stepR;

        this.mwSlider = new Control.Slider(this.handleR, this.trackR, {
        range: $R(this.minPoints, this.maxPoints),
        values: this.mwAvailableValue(),
        onSlide: this.changeProductPoint.bind(this),  
        onChange: this.changeProductPoint.bind(this)
    });
    },
    mwAvailableValue: function() {
        var values = [];
        for (var i = this.minPoints; i <= this.maxPoints; i += this.pointStep) {
            values.push(i);
        }
        return values;
    }
}

return MySlider;
});

Call to JS function

<script type="text/javascript">

    var productPointVal = '<?php echo $maxPoints; ?>';
    var pointsRedeem = '<?php echo $pointsRedeem; ?>';
    var time = 1000;
    var time_new = 1500;
    var timer;
    var ei_sider = new MySlider(
            'product_point',
            'ei_productpoint_slider_container',
            'ei_slider',
            'ei_productpoint_decr_handle',
            'ei_productpoint_incr_handle',
            0,
            productPointVal,
            1,
            'ei_label_amount'
            );
</script>

Below exception is seen in console.

ReferenceError: MySlider is not defined
var ei_sider = new MySlider(

Followed this link, to use something with similar syntax to the way PrototypeJS handles it, but after including the JS, its not working in Magento 2.0 and throws below exception

TypeError: this.mwSlider is undefined
points = this.mwSlider.getNearestValue(parseInt(points));

How do I convert existing prototype js into jquery so that it works in 2.0 ?

OR
How do I make prototype js work ?

KAndy · Accepted Answer · 2016-03-09 15:27:33Z

2

UnderscoreJs library was created when RoR migrate from prototypejs to jquery. You may use it to migrate your scripts. For example Class.create is _.create

answered Mar 9, 2016 at 15:27

KAndy

21k3 gold badges51 silver badges59 bronze badges

So you mean including undersocrejs and converting Objects would work ? My custom extension depends on prototype and without converting to jquery, its like a patience test

Slimshadddyyy
– Slimshadddyyy

2016-03-10 05:47:51 +00:00
Commented Mar 10, 2016 at 5:47
it says ` MySlider is not defined`.

Slimshadddyyy
– Slimshadddyyy

2016-03-10 11:32:45 +00:00
Commented Mar 10, 2016 at 11:32

Add a comment |

mrtuvn · Accepted Answer · 2016-03-09 17:28:15Z

2

First add requirejs-config in Vendor/Module/view/[your_area]/requirejs-config.js

var config = {
   map: {
      "*":{
        MySlider: "YourVendor_Module/js/myslider"

      }
  },
  paths: {

  }

};

class myslider

define([
  'jquery',
  'prototype'
],function(jQuery, prototype){
    var MySlider= Class.create();

    MySlider.prototype = {
       initialize: function(options) {
         //Your code
       },
       mwAvailableValue: function() {
          console.log('testing....');
       },
       test: function() {

       }

     };

   return MySlider;
});

Hope this will help you

answered Mar 9, 2016 at 17:28

mrtuvn

3,2935 gold badges29 silver badges40 bronze badges

requirejs-config.js is already added. Could you elaborate on how to convert existing Prototype JS to jQuery ?

Slimshadddyyy
– Slimshadddyyy

2016-03-10 05:18:24 +00:00
Commented Mar 10, 2016 at 5:18
I think you have to rewrite class js and make decide to choose between prototype or jquery. Above my answer only for prototype way

mrtuvn
– mrtuvn

2016-03-10 05:35:37 +00:00
Commented Mar 10, 2016 at 5:35
Question updated for requirejs and prototype.js, exception is ReferenceError: define is not defined define([ and ReferenceError: MySlider is not defined var ei_sider = new MySlider(

Slimshadddyyy
– Slimshadddyyy

2016-03-10 10:05:05 +00:00
Commented Mar 10, 2016 at 10:05

Add a comment |

Pradeep Kumar · Accepted Answer · 2017-10-27 04:49:00Z

I feel all code look good except Call to JS function, just replace the below code

if it helps you accept the answer which helps other developer

<script type="text/javascript">
//<![CDATA[
        require([
            "jquery",
            'Namespace_Modulename/js/productpoint-slider'
        ], function ($,MySlider) {


            var productPointVal = '<?php echo $maxPoints; ?>';
            var pointsRedeem = '<?php echo $pointsRedeem; ?>';
            var time = 1000;
            var time_new = 1500;
            var timer;
             var ei_sider = new MySlider(
                'product_point',
                'ei_productpoint_slider_container',
                'ei_slider',
                'ei_productpoint_decr_handle',
                'ei_productpoint_incr_handle',
                0,
                productPointVal,
                1,
                'ei_label_amount'
            );                                                      
        <?php } ?>                  
          });
    //]]>
    </script>

Stack Exchange Network

Magento 2 - Replace existing Prototype JS with jQuery

3 Answers 3

Your Answer

Hot Network Questions

Magento 2 - Replace existing Prototype JS with jQuery

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions