Magento 2 - Replace existing Prototype JS with jQuery

Question 1

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 ?

Question 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

Question 3

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

Question 4

it says ` MySlider is not defined`.

Question 5

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

Question 6

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

Question 7

I think you have to rewrite class js and make decide to choose between prototype or jquery. Above my answer only for prototype way

Question 8

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(

Question 9

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>

KAndy 21k3 gold badges51 silver badges59 bronze badges · 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

Share

Improve this answer

answered Mar 9, 2016 at 15:27

KAndy's user avatar

KAndy

21k3 gold badges51 silver badges59 bronze badges

2

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 |

Stack Exchange Network

Magento 2 - Replace existing Prototype JS with jQuery

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Post as a guest

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

Post as a guest

Related

Hot Network Questions