current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 0 down vote favorite

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 ?

share|improve this question
up vote 1 down vote accepted

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
    
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 – Vikram Mar 10 at 5:47
    
it says ` MySlider is not defined`. – Vikram Mar 10 at 11:32
up vote 0 down vote

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

share|improve this answer
    
requirejs-config.js is already added. Could you elaborate on how to convert existing Prototype JS to jQuery ? – Vikram Mar 10 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 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( – Vikram Mar 10 at 10:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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