Why can't the JS listener that runs normally in ODOO14 run properly in ODOO12?

odoo.define('product_dimensions.website_sale', function (require) {
    "use strict";

    var core = require('web.core');
    var _t = core._t;
    var ajax = require('web.ajax');
    var publicWidget = require('web.public.widget');

    publicWidget.registry.ProductDimensions = publicWidget.Widget.extend({
        selector: '.oe_website_sale',
        events: {
            'change input[name="wide"]': '_onWidthChange',
            'change input[name="high"]': '_onHeightChange',
        },

        start: function () {
            this.product_id = this.$el.find('#product_id').val(); // Assuming '#product_id' is an input field that holds the product id
            return this._super.apply(this, arguments);
        },

        _onWidthChange: function () {
            var wide = parseFloat($('input[name="wide"]').val());
            console.log(this.product_id)
            ajax.jsonRpc("/shop/product/min_dimensions", 'call', {'product_id': this.product_id}).then(function (data) {
                if (wide < data.wide_mini) {
                    alert(_t('The number you entered is less than the minimum width：')+ data.wide_mini);
                }
                else if (wide > data.wide_max) {
                    alert(_t('The number you entered is greater than the maximum width：')+ data.wide_max);
                }
            });
        },

        _onHeightChange: function () {
            var high = parseFloat($('input[name="high"]').val());
            ajax.jsonRpc("/shop/product/min_dimensions", 'call', {'product_id': this.product_id}).then(function (data) {
                if (high < data.high_mini) {
                    alert(_t('The number you entered is less than the minimum height：')+ data.high_mini);
                }
                else if (high > data.high_max) {
                    alert(_t('The number you entered is greater than the maximum height：')+ data.high_max);
                }
            });
        },
    });

    return publicWidget.registry.ProductDimensions;
});

Why can't the JS listener that runs normally in ODOO14 run correctly in ODOO12? The above code can input width and height in the product details page in the ODOO14 website store. At this time, the input number will be compared with the width and height set in the backend product page. If it is less than the width and height or greater than the value set by the width and height, an error prompt will pop up and require inputting the correct number.

Because in Odoo 12.0 there is no widget with the name: web.public.widget

That's a widget that exists since Odoo version 13.0

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var sAnimations = require('website.content.snippets.animation');

    sAnimations.registry.ProductDimensions = sAnimations.Class.extend({
        selector: '.oe_website_sale',
        events: {
            'change input[name="wide"]': '_onWidthChange',
            'change input[name="high"]': '_onHeightChange',
        },

<!-- end snippet -->

Problem solved