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
38
votes
5answers
54k 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 ...
37
votes
1answer
14k 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....
35
votes
7answers
35k 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 ...
34
votes
3answers
48k 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 ...
24
votes
10answers
24k 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 ...
22
votes
1answer
9k 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 ...
19
votes
1answer
10k 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 ...
19
votes
4answers
19k 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 ...
18
votes
2answers
31k 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 ...
18
votes
2answers
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"> <...
17
votes
3answers
7k 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' =>...
16
votes
2answers
7k 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....
16
votes
4answers
20k 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 ...
16
votes
3answers
11k 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 ...
16
votes
1answer
3k 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: '...
16
votes
4answers
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 ...
16
votes
1answer
3k 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 ...
15
votes
4answers
26k 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 ...
15
votes
2answers
11k 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 ...
15
votes
3answers
20k 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 ...
15
votes
1answer
4k 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 ...
15
votes
1answer
8k 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: { ...
14
votes
3answers
6k 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 ...
14
votes
2answers
4k 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 ...
14
votes
1answer
772 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. ...
13
votes
2answers
1k 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/...
12
votes
4answers
6k 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() ? '-' ....
12
votes
2answers
860 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 ...
11
votes
9answers
22k 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....
11
votes
3answers
12k 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 ...
11
votes
1answer
2k 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 ...
10
votes
5answers
25k views

How to call Owl Slider in Magento2

If we want to add Owl Slider in Magento 1.X then we follow 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 and ...
10
votes
2answers
6k 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 ...
10
votes
2answers
3k views

JS Widget: two custom Widgets extended same parent Widget Magento 2

Precondition I have 2 custom widgets extending same parent widget. Parent widget: Magento_ConfigurableProduct/js/configurable First Custom Widget: Vendor_AModule/js/configurable Second Custom Widget:...
10
votes
1answer
942 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 ...
10
votes
2answers
2k views

How to hide Magento from CMS detectors?

I have a Magento store and I want to hide it from cms detectors. I mean I don't want anyone to know my website CMS and that my website is built on Magento. There are some websites like http://guess....
9
votes
4answers
12k 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 ...
9
votes
2answers
18k 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"></...
9
votes
3answers
11k views

Get base url from js file

i want to retrieve a base url and append it with my module controller link from .js file, so it's impossible to use block to get the base url. so far i've done this: define([ 'jquery', 'mage/...
9
votes
4answers
28k views

Use require-config.js to load files needed on all pages

I know how to use require-config.js in custom theme, but I would like to use custom javascript file (myfile.js) on all pages. In which directory should I add require-config.js and how to use it, so ...
9
votes
2answers
7k views

Format price with javascript in Magento 2

In javascript I have calculated a number. Which I want to display as a price. My JS file define([ 'jquery' ], function ($) { "use strict"; function irreleventCalculations() { // ...
9
votes
4answers
53k views

Adding CSS and JS to <head> using a module layout.xml for block

Synopsis I would like to add a block to my grouped product view and my simple product view. This block will have some nice tooltips for hover states, i'm using a small library with one jquery plugin ...
9
votes
1answer
3k views

decorateTable javascript function for what it is used?

In magento on cart page there is a javascript function call decorateTable('shopping-cart-table'). For what is used the function decorateTable?
9
votes
2answers
3k 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 ...
9
votes
3answers
10k views

How to minify/optimise Javascript on Magento 2?

I've been struggling for a while with minify javascript on magento 2. The admin option for minification doesn't work so I've been looking for another solution. I've tried a gulp script to do it but ...
9
votes
1answer
6k views

How to access the Magento API from native client with JavaScript

I need to access the Magento API from a local JavaScript based application (Titanium Desktop) and wondering what's the best way to do so. What I found out so far: The only authentication mechanism ...
9
votes
1answer
4k views

How to add Block Specific JS (and CSS) - The _right_ way?

So I've spent literally hours on hours googling, reading, studying ect, but no one (not even Alan Storm!) has spelt this out to me. It seems the entire internet is interested in adding JS or CSS to a ...
9
votes
2answers
550 views

Overwrite js core function magento 2

I am trying to Overwrite some function from Magento_Swatches/js/SwatchRenderer.js file My code is for requirejs-config.js: var config = { config: { mixins: { '...
8
votes
4answers
10k 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 ...
8
votes
3answers
17k views

How to add code after opening <body> tag in Magento?

I have a recently found a couple of tags that recommend install the code directly beneath the opening tag. This is the recommended install location for LiveEngage Tag and Google Tagmanager. You can ...