JS with .min file

Good Afternoon,

I have loaded a bootstrap 4 template which uses JS files, this all loads and works but it seems like widgets and inline JS seem to either work but still throw an error below or not work at all.

I have very little knowledge in this area so any advice please!

public $basePath = '@webroot';

    public $baseUrl = '@themes';

    

    public $css = [

        // Main Theme Styles + Bootstrap

        'dist/css/theme.min.css',

        

    ];

    public $js = [

       'dist/vendor/jquery/dist/jquery.slim.min.js',

        'dist/vendor/bootstrap/dist/js/bootstrap.bundle.min.js',

        'dist/vendor/bs-custom-file-input/dist/bs-custom-file-input.min.js',

        'dist/vendor/simplebar/dist/simplebar.min.js',

        'dist/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js',

        'dist/vendor/tiny-slider/dist/min/tiny-slider.js',

        'dist/vendor/lightgallery.js/dist/js/lightgallery.min.js',

        'dist/vendor/lg-video.js/dist/lg-video.min.js',

        'dist/js/theme.min.js',

        

    ];

    

    public $depends = [

        'yii\web\YiiAsset',

    ];

an example of the error using Kartik Widget - same happens for captcha:

jquery.slim.min.js:2 Uncaught TypeError: jQuery(...).numberControl is not a function
    at HTMLDocument.<anonymous> (paypal:786)
    at e (jquery.slim.min.js:2)
    at t (jquery.slim.min.js:2)

I also have a paypal button that was loading perfect before but now doesn’t display and no errors

<script src="https://www.paypal.com/sdk/js?client-id=xxxxxxxx&currency=GBP"> </script>

  <?php 

$this->registerJs('

    

  paypal.Buttons({

    createOrder: function(data, actions) {

      document.getElementById("Cancelled").style.display="none";

       //document.getElementById("Paid").style.display="none";

      document.getElementById("Processing").style.display="block";

      // This function sets up the details of the transaction, including the amount and line item details.

      return actions.order.create({

        purchase_units: [{

          invoice_id: $("#'. Html::getInputId($model ,'invoiceID') .'").val(),

          amount: {

            value: $("#'. Html::getInputId($model ,'total') .'").val()

          }

        }]

      });

    },

    onCancel: function(data, actions) {

    document.getElementById("Processing").style.display="none";

    document.getElementById("Cancelled").style.display="block";

    },

    onApprove: function(data, actions) {

      //document.getElementById("Processing").style.display="block";

      //document.getElementById("Paid").style.display="block";

      // This function captures the funds from the transaction.

      return actions.order.capture().then(function(details) {

        // This function shows a transaction success message to your buyer.

      //  const entries = Object.entries(details)

      //  console.log(entries)

        window.location.href= "complete?email=" + details.payer.email_address + "&name=" + details.payer.name.given_name + "&amount=" + details.purchase_units[0].amount.value + "&invoice=" + details.purchase_units[0].invoice_id;

        // alert("Transaction completed by" + details.payer.name.given_name);

       

      });

    }

  }).render("#paypal-button-container");

  //This function displays Smart Payment Buttons on your web page.

');?>

</div>

Looks like a conflict between Paypal button and jQuery. That’s very specific case so I think you need to debug it yourself.

Thank you!

Managed to Fix