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 ?

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

  • 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 '16 at 5:47
  • it says ` MySlider is not defined`. – Slimshadddyyy Mar 10 '16 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

  • requirejs-config.js is already added. Could you elaborate on how to convert existing Prototype JS to jQuery ? – Slimshadddyyy Mar 10 '16 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 '16 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 '16 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>

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.