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

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

    OR

  2. How do I make prototype js work ?

Improve this question

3 Answers 3

Reset to default
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

Improve this answer
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
    Mar 10, 2016 at 5:47
  • it says ` MySlider is not defined`.
    – Slimshadddyyy
    Mar 10, 2016 at 11:32
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

Improve this answer
3
  • requirejs-config.js is already added. Could you elaborate on how to convert existing Prototype JS to jQuery ?
    – Slimshadddyyy
    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
    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
    Mar 10, 2016 at 10:05
0

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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.