Skip to main content

Questions tagged [javascript]

JavaScript (JS) is a client side script language which allows to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. By default Magento 1 comes with the prototype.js library and Magento 2 comes with jQuery. Use 'prototype-js' and 'jquery' tags for questions about those libraries.

Filter by
Sorted by
Tagged with
45 votes
8 answers
79k views

How To add JS file in frontend for all pages

I've read 3 pages of Google Results on how to load a JS file for all pages and still am not able to do it. I've got a few doubts, hope somebody can clear them out. Do I need to create a module ...
Prashant Akash's user avatar
42 votes
3 answers
89k views

Extending / Overriding JS in Magento 2

As Magento2 is using RequireJS for loading scripts, and there's no more skin folder, I've stuck with a problem: How can I replace Magento's module JS file by my modified version? For example — the ...
Dmytro's user avatar
  • 1,090
39 votes
1 answer
15k views

Product.OptionsPrice is not a constructor magento 1.9.3

I have upgrade magento 1.9.2.4 to 1.9.3. I am facing the following error in the console in product page. TypeError: Product.OptionsPrice is not a constructor var optionsPrice = new Product....
Denish Vachhani's user avatar
36 votes
7 answers
37k views

Move all Javascript includes to before </body>

Does anyone know how to have all of Magento's JS script tags e.g. <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script> render out before the closing ...
Mark Weston's user avatar
27 votes
3 answers
27k views

Magento 2 console notice - Fallback to JQueryUI Compat activated

Using Magento 2.3.3 seeing the below notice in our browser console. Fallback to JQueryUI Compat activated. Your store is missing a dependency for a jQueryUI widget. Identifying and ...
Nadroj467's user avatar
  • 571
26 votes
1 answer
15k views

How Does Magento 2 Apply KnockoutJS Bindings

Per a very cursory reading of the KnockoutJS documentation, initializing a very basic Knockout view looks like the following // This is a simple *viewmodel* - JavaScript that defines the data and ...
Alana Storm's user avatar
  • 44.4k
26 votes
4 answers
27k views

Magento 2: requirejs-config.js in themes?

Is it possible to include a requirejs-config.js file (or otherwise configure RequireJS) via a Magento theme? Or is the capability reserved for Magento modules? The dev docs information on theme ...
Alana Storm's user avatar
  • 44.4k
25 votes
1 answer
23k views

Magento 2: Uncaught TypeError: Cannot read property '*' of undefined in (section-config.js:33)

It's duplicate question but I am facing the same issue while adding the product & removing items from the cart page. I have spent almost a day to resolve but no luck hope someone could help me ...
Mohammad Mujassam's user avatar
24 votes
12 answers
32k views

Merged JS and CSS do not work when Production mode

I was in developer mode, everything was great, when I changed to Production mode, the Merged options of CSS and JS seem to be ignored, it was back listing all css and js. Also the product page only ...
user37025's user avatar
  • 1,383
22 votes
1 answer
6k views

Why does Magento 2 use RequireJS `map` instead of `path`

In Magento 2's RequireJS implementation, many core modules use a configuration something like this map: { '*': { editTrigger: 'mage/edit-trigger', addClass: '...
Alana Storm's user avatar
  • 44.4k
20 votes
2 answers
16k views

How to rewrite widget function with mixins Magento 2.1.1

We have swatch-renderer.js In this file there are some widgets. .... $.widget('mage.SwatchRenderer', { .... /** * @private */ _init: function () { if (this.options....
zhartaunik's user avatar
  • 3,846
20 votes
2 answers
35k views

Custom form Validation - Magento

I am trying to implement some custom form validation in Magento using jQuery but I am not sure if I have the correct method. Basically, I need to validate the following: Only number fields need to ...
user1704524's user avatar
  • 2,483
19 votes
3 answers
14k views

Magento 2 add custom product attribute validation from install script

[ 'type' => 'int', 'backend' => '', 'frontend' => '', 'label' => 'XXXX', 'input' => 'text', 'frontend_class' => 'validate-greater-than-zero', 'source' => '', 'global' =>...
Amit Singh's user avatar
  • 1,775
18 votes
2 answers
3k views

Magento 2: What's an `<each/>` Tag?

As near as I can tell, when you view a Grid in Magento's backend, the following "loaded over XHR" KnockoutJS template is what starts rendering things File: vendor/magento//module-ui/view/base/web/...
Alana Storm's user avatar
  • 44.4k
18 votes
2 answers
9k views

Google CDN jQuery with Local Fallback in Magento Layout XML

I've done the following to include jQuery from Google CDN in Magento: <default> <reference name="head"> <block type="core/text" name="google.cdn.jquery"> <...
philwinkle's user avatar
  • 35.8k
17 votes
4 answers
24k views

Adding a jQuery Library to Magento 2

How can a third party developer add a jQuery library to Magento 2? While Magento 2 includes a version of jQuery in their frontend themes, the jQuery object is not immediately available in the global ...
Alana Storm's user avatar
  • 44.4k
17 votes
4 answers
5k views

Magento2 localisation Javascript

A similar question was already asked here: Magento 2 javascript text translations, but Magento updated this translation technique in the beta version. How can I add or update translations used by ...
Silvan's user avatar
  • 1,347
16 votes
4 answers
34k views

magento 2: trigger js form validation without submit

On a custom frontend page I have a form in which I use magento's js validation to validate inputs: name, email description, etc. When the form is submitted the validation is triggered and works ...
Xenocide8998's user avatar
  • 1,772
16 votes
3 answers
34k views

How to add external js in Magento 2

I want to add the following link in the head tag, but its returning 404 error. Can anyone help me on this? <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></...
Sivakumar K's user avatar
  • 2,013
16 votes
3 answers
11k views

Magento 2: Syncing Backend and Frontend State/Cache

Does Magento 2 have any systems or abstractions for managing state between the backend and the local storage on the frontend? I'm working on porting a feature for restoring a user's abandoned cart ...
Alana Storm's user avatar
  • 44.4k
16 votes
4 answers
30k views

PageSpeed - Eliminate render-blocking JavaScript and CSS in above-the-fold content

I am running magento 1.9, and I am using the RWD slider that comes with Magento 1.9 on the home page. Google's PageSpeed doesn't like this and says: Eliminate render-blocking JavaScript and CSS ...
styzzz's user avatar
  • 736
16 votes
1 answer
11k views

Magento2: How can I override core js module price-box.js

I need to extend Magento_Catalog/js/price-box.js. I have used the 'mixins' feature, but it's not working for price-box.js. requirejs-config.js: var config = { config: { mixins: { ...
Yogesh Karodiya's user avatar
16 votes
1 answer
4k views

Magento 2 minicart, welcome message, other do not work with page cache disabled after customer login

With Magento 2.0.4 cache, more specifically page cache enabled, everything works. If I disable it, clear cookies, and login as customer than products in minicart are not there. Welcome message does ...
Daniel Ifrim's user avatar
  • 3,404
15 votes
6 answers
31k views

How to get the base url from a JS file?

I want to retrieve a base URL and append it with my module controller link from a JS file, so it's impossible to use a block to get the base URL. So far I've done this: define([ 'jquery', 'mage/...
simple guy's user avatar
  • 2,484
15 votes
3 answers
18k views

Get Base Url Or Dynamic Url In view Js or html files

I figure it out to get dynamic url in the front end if I need I can simply define mage/url and the use it as url.build('<Modulename>/<controllername>/<action>/') When I tried the ...
Priyank's user avatar
  • 7,702
15 votes
2 answers
12k views

When merging CSS or JS, a new file is generated for each page type

We have a lot of small CSS and JS files and enabling merging seems to be a good choice. Many of the CSS and JS files are used on every page (home page, category page, product detail page). Whenever ...
Alex's user avatar
  • 13.9k
15 votes
1 answer
5k views

How to share Knockout JS observables between UI Components

I understand how to use imports: {} and exports: {} to share a UI components properties, such as: defaults: { exports: { shouldShowMessage: '${$.component}' } } Which returns the ...
Ben Crook's user avatar
  • 15.7k
15 votes
1 answer
7k views

How to show custom block on shipping method select in Magento 2

Using reference link how to add custom block at shipping methods below in onepage checkout?, I am able to create additional shipping block on the bottom. But, I would like to show content only, when ...
santhoshnsscoe's user avatar
15 votes
3 answers
21k views

Magento adding CSS and JS includes to the footer

I'm doing some Yslow optimization of my Magento site and am trying to add the CSS and Js to the footer of the site. At the moment I'm using a head reference tag in the layout XML and using addJs and ...
Chris Morris's user avatar
  • 1,517
14 votes
2 answers
6k views

Start and End Date Validation

I have been working on admin form where I want the user to select Start Date and End Date. I have to provide validation such that the End Date must be greater than Start Date. Could anyone pls help ...
Jordan's user avatar
  • 233
14 votes
3 answers
2k views

Magento 2: How to show the custom option in another phtml file

How can we override this position in custom option to show it in another phtml file. added this code in checkout_cart_index.xml which override only the form.phtml not override the default.phtml file. ...
agskarthik's user avatar
13 votes
2 answers
6k views

Magento 2 : How to Detect Checkout Step Change

I am trying to figure out the best method of detecting a step change in Magento 2's checkout. For example going from shipping details to payment, or vice versa. I have done some digging and in ...
Ben Crook's user avatar
  • 15.7k
13 votes
3 answers
2k views

Magento 2 : Javascript Developer Certification reading material

Magento just announced JavaScript Certification exam for Magento2. After reading in this page: https://u.magento.com/magento-2-certified-professional-javascript-developer I have some ...
Divyesh's user avatar
  • 1,252
12 votes
2 answers
63k views

How to add a custom javascript to theme in Magento 2?

I have experience with Magento 1, and there adding a custom javascript file was very straightforward and logical. But when it comes to Magento 2, I can't figure out how to add a new js file, where I ...
raouaoul's user avatar
  • 307
12 votes
2 answers
10k views

How to create a Magento 2 Modal popup that cannot be closed?

I'm trying to create a modal popup that cannot be closed. It has a button that takes you to the next page by clicking on it, but I don't want users to be able to close it. The modal popup can be ...
7ochem's user avatar
  • 7,552
12 votes
6 answers
51k views

How to call Owl Slider in Magento2

If we want to add Owl Slider in Magento 1.X then we follow the below steps. Copy owl.carousel.min.js and owl.carousel.js and paste into skin/frontend/pakage_name/theme_name/js Copy owl.carousel.css ...
Dhaval's user avatar
  • 1,695
12 votes
5 answers
11k views

Magento 2 Store switcher error in "section-config.js" Uncaught TypeError: Cannot read property '*' of undefined(…)

I'm implementing a custom store switcher in my custom theme. Block template is as follow: <?php if (count($block->getStores())>1): ?> <?php $id = $block->getIdModifier() ? '-' ....
davideghz's user avatar
  • 683
12 votes
2 answers
14k views

Magento 2 Add to cart frontend event listener

I am trying to find good solution to execute custom javascript when product is successfully added to cart. Also this custom javascript need information about product that was added to cart (sku, qty, ...
Sergii Ivashchenko's user avatar
11 votes
6 answers
29k views

Magento 2 customer-data.js:90:23 [object Object]

I'm using Magento 2.2 with Porto theme and getting an [object Object] javascript error at customer-data.js line 90 in the console after logging into the store and refreshing the page or switching to ...
Lez's user avatar
  • 2,917
11 votes
9 answers
34k views

Magento 2: Not loading CSS and JS after successful installation in windows

CSS and JS not loading after installation of Magento 2 default template OS: Windows 10 Xampp Control panel V3.2.2 PHP version: 5.6.28 Server: Apache/2.4.23 (Win32) phpmyadmin Version information: 4....
Amrith Prakash's user avatar
11 votes
3 answers
25k views

How can I extend a Ui component JavaScript in Magento 2?

I know there is already a topic about this, as well as a documentation, but I just can't get it to work: How can I extend Ui Components' JavaScript in Magento 2? I'm trying to extend Magento_Ui/js/...
Giel Berkers's user avatar
  • 12.3k
11 votes
3 answers
8k views

Magento 2.2: Is it possible to use Vue.js in Magento?

If is possible, how can I integrate it in my custom module?
chdzma's user avatar
  • 952
11 votes
6 answers
7k views

Exclude custommodule Js from minification of Js in Magento2

I am trying to minify JS in Magento 2. There is an option in the Backend: Stores -> Configuration -> Advanced -> Developer to minify js. I did that and JS got minified but it also includes my custom ...
Murali Raj's user avatar
11 votes
1 answer
6k views

How does Magento 2's initObservable function work?

How does Magento 2's initObservable function work? The more detail the better as I feel not many people understand the KO implementation and with the checkout being built with it I think it's ...
Ben Crook's user avatar
  • 15.7k
11 votes
3 answers
14k views

JS errors Magento 2

I've been trying to finish something and publish it online this entire weekend, it's some how broken and I have no idea why so I hope someone can help me out. I've tried adding custom jQuery into my ...
magin's user avatar
  • 515
11 votes
1 answer
2k views

Admin config: show field depending on selected multiselect values

I want to display fields based on selected multiselect input ... following code just works, if only one value is selected. If I select more then one value it shows only one field (first selected from ...
sv3n's user avatar
  • 11.7k
11 votes
4 answers
10k views

How to override particular function of javascript in Magento2

I need to override the particular function (for example : accountFieldsBind) of vendor/magento/module-sales/view/adminhtml/web/order/create/scripts.js
Amit Naraniwal's user avatar
11 votes
1 answer
12k views

Magento 2: How shipping rest api function called On Checkout?

When u click on "Ship here" on Checkout Page it calls magento/rest/default/V1/carts/mine/estimate-shipping-methods-by-address-id Then it goes to below JS files magento\vendor\magento\module-...
Jackson's user avatar
  • 9,939
11 votes
3 answers
5k views

Magento 2 : Validate form fields that are loaded with Knockout on blur-event

I have a form that is generated through a .phtml file, and in this form various fields are loaded with KnockOut (using the uiComponent javascript-object). .phtml: <form action="#" class="form ...
Giel Berkers's user avatar
  • 12.3k
10 votes
8 answers
26k views

Magento 2: How to use Cookie?

How can we use cookie in magento 2 to store data.. i'm trying to store data in cookie, on vendor/magento/module-checkout/view/frontend/web/js/model/resource-url-manager.js to store selected ...
Yogesh's user avatar
  • 563

1
2 3 4 5
48