2 Comments

Magento 2 – Replace existing Prototype JS with jQuery

How to save data in customer_entity table in magento 2 while creating new extension
Hide “invoice #” in the invoice PDF

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 ?

Related Posts

  • One page checkout continue button not working both guest and registered (1)
    I'm getting the following javaScript error on the checkout page: js.js:667 Uncaught TypeError: element.dispatchEvent is not a function At first I thought conflict but I'm pretty sure the order of script loading is correct - i.e. jQuery, noconflict, then prototype. Is this […]
  • How to pass variable to external js in magento 2 (2)
    In magento 1 we can call this prototype function in phtml for example function ABC(){ var a = '<?php echo $a;?>' alert(a); } but in magento 2 we can not add this type of function in phtml,for that we have to create requirejs-config.js var config = { map: { […]
  • Jquery conflict with elastislide.js and prototype.js (1)
    Again I am here with my nightmare Conflict issue. This question seems like a duplicate but I have read all other answer that suggests use no conflict after jquery but it's not working. Can anyone briefly describe why and when we use jquery and what to if there more then 2 jquery […]
  • Magento TypeError: element.attachEvent is not a function Add to cart not working (0)
    I am not able to add my products into the cart, I am facing jQuery and prototype js conflict issue (if I am not wrong). I am getting the following error. TypeError: element.attachEvent is not a function TypeError: element.dispatchEvent is not a function on prototype js, I have […]
  • Use jQuery Plugins in Magento 2 blocks (1)
    I'm trying to use jQuery camera inside a page block, but I'm doing something wrong. I added the camera.min.js into my custom theme folder Theme_folder/Magento_Theme/web/js/camera.min.js Here's my requirejs-config.js in Theme_folder/Magento_Theme/web/js/requirejs-config.js var […]
  • Trying to understand require.js usage in Magento 2 (1)
    I've been trying a few suggested way to load my own js into a custom Magento theme and have not been successful. In requirejs-config.js in root of my custom theme directory, I have this: var config = { map: { "*": { "customBootstrap": "js/bootstrap.min", […]
  • Add jQuery Datatables in magento 2 (2)
    I am trying to use the jquery DataTables in magento-2 frontend using the requirejs. I can see the datables.min.js file in the net panel, but somehow it give the following error. My reuirejs-config.js looks like this var config = { map: { '*': { dataTable: […]
  • Magento 2 RequireJs callback not called (0)
    I have the following in requirejs-config.js var config = { "map": { "*": { "jquery/easing": "./js/jquery.easing.1.3", "jquery/mobile/customized": "./js/jquery.mobile.customized.min", "camera": "./js/camera.min" } }, […]
  • Add jQuery Datatables in magento 2 (2)
    I am trying to use the jquery DataTables in magento-2 frontend using the requirejs. I can see the datables.min.js file in the net panel, but somehow it give the following error. My reuirejs-config.js looks like this var config = { map: { '*': { dataTable: […]
  • Magento 2: How to override core js module price-bundle.js (3)
    I am attempting to override the _onQtyFieldChanged event in the mage.priceBundle widget in the module-bundle/view/base/web/js/price-bundle.js file. I am referencing the Magento dev docs (http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html) and this […]
How to save data in customer_entity table in magento 2 while creating new extension
Hide “invoice #” in the invoice PDF

2 Comments on this article

  • User November 12, 2016

    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

    Reply

  • User November 12, 2016

    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

    Reply

Add a comment