98

It's caused by your custom theme not adding the new product_options.js file. Edit your theme layout file (either local.xml or catalog.xml) and add the following under the <catalog_product_view> handle (or whatever page handle you're having the problem on): <action method="addJs"><script>varien/product_options.js</script></action&...


93

There is no more skin folder but you can still use themes. As a proof of concept I used you example with op-checkout-method.js and this this. Preconditions: Magento2-beta11 installed Default theme active (blank). No files generated in the pub/static folder (remove the pub/static/frontend folder) Actions: Copied the op-checkout-method.js file from ...


65

To load a custom main.js file on all pages (in the RequireJS-way) this is a good way: 1) Create main.js Create main.js within the theme folder <theme_dir>/web/js/main.js with this content: define([ "jquery" ], function($) { "use strict"; // Here your custom code... console.log('Hola'); }); In short: we declare dependencies at the start,...


37

The Magento_Ui/js/lib/ko/initialize library is, indeed, where Magento initializes its Knockout instance. Magento does not assign a ViewModel when it applies bindings. The missing key here is the custom KnockoutJS binding named scope. When Magento's Knockout instance encounters a scope: binding like this <li class="greet welcome" data-bind="scope: '...


35

requirejs-config.js var config = { config: { mixins: { 'Magento_Swatches/js/swatch-renderer': { 'path/to/your/mixin': true } } } }; path/to/your/mixin.js define([ 'jquery' ], function ($) { 'use strict'; return function (widget) { $.widget('mage.SwatchRenderer', widget, {...


33

I have literally wasted a few days trying to debug this issue and finally got a definite solution or work around I would call it. Hopefully it can save a few other people the headache I currently have! I first noticed this error appears when I switch from Client-Side to Server-Side Compilation in Stores->Configuration->Advanced->Developer->...


26

was able to figure this out by referencing: module-checkout-agreements/view/frontend/web/js/model/agreement-validator.js After including mage/validation you have to pass argument isValid to mage.validation in order to invoke the validation Full code looks like require([ 'jquery', 'mage/validation' ], function($){ var dataForm = $('#form-...


25

Excellent question! You don't need jQuery for this. You can do this with the built-in Magento form validator. First the javascript to set up the form for validation must be placed in your form template: <script type="text/javascript"> var myForm= new VarienForm('[your form id]', true); </script> Now prepare your form fields by adding the ...


22

It depends on your request. For instance, lastly, I had been removed all Prototype scripts from the Homepage of the Magento store which I didn't face any problem. But as I said, it depends on your theme, extensions etc. To moving the script : Find the following line in page.xml of your theme <block type="core/text_list" name="before_body_end" as="...


21

After researching this a bit more, I have found one major difference between map and path. I'm not sure if the Magento core team makes deliberate use of this, but per this Stack Overflow answer when you're define a map configuration, you're actually defining a prefix for mappings. i.e. Not only will this map: { '*': { editTrigger: 'mage/edit-...


21

I'd recommend using the script method rather than the text method, it's easier for other developers to understand, it's less code, and meets Magento's official instructions. To do this use the same script or link XML as normal but include src_type="url". As noted in the official docs <?xml version="1.0" ?> <page xmlns:xsi="http://www.w3.org/2001/...


20

There are two problems with moving the tag. The greatest problem is that for some reason Magento injects a lot of JS that is dependent on prototype directly into the <body/> tag. Moving the scripts to the end of the document (though good for load times), will break a lot of the pages in Magento. The other problem is actually doing it. There doesn't ...


19

Just copy vendor\magento\theme-frontend-luma\Magento_LayeredNavigation\templates\layer\view.phtml into app\design\frontend\<your_company>\<your_theme>\Magento_LayeredNavigation\templates\layer\ and change the 'data-mage-init' attribute as follow: <?php foreach ($block->getFilters() as $filter): ?> <?php if ($filter->...


19

I just did the following and the problem was solved: bin/magento setup:upgrade bin/magento indexer:reindex bin/magento deploy:mode:set production -s # Here was the secret: run the di:compile after production bin/magento setup:di:compile bin/magento setup:static-content:deploy


19

jQuery is already pre-packaged with Magento2, there is no need to implement it on your own, however, you have to utilize it. To add JS to your theme you have several possibilities. By utilizing default_head_blocks.xml in app/design/frontend/Vendor/Theme/Magento_Theme/layout/: Example Content: <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"...


18

At the end of the day, doing this via Layout XML is preferable. I have found that the local fallback option is best implemented in a single-line statement minified with the Google Closure Compiler. <default> <reference name="head"> <block type="core/text" name="google.cdn.jquery"> <action method="setText"> ...


18

Create requirejs-config.js Companyname\Modulename\view\frontend\requirejs-config.js add var config = { map: { '*': { bannerslider: 'Companyname_Modulename/js/flexslider', } } }; Your Js file in your module Companyname\Modulename\view\frontend\web\js\flexslider.js You just add jquery lib using following syntax <script ...


17

First, your layout file should be placed in app/design/frontend/{interface}/{theme}/layout/. Second. If you want to add the css and js files only in the grouped and simple product pages don't use the <default> layout handle. Make your layout look like this: <?xml version="1.0"?> <layout> <my_handle><!-- declare a custom handle ...


17

in vendor/magento/module-checkout/view/frontend/web/js/model/shipping-rate-service.js:21 there is a subscribe to the shipping address observerable quote.shippingAddress. quote.shippingAddress.subscribe(function () { var type = quote.shippingAddress().getType(); if (processors[type]) { processors[type].getRates(quote....


17

define([ 'jquery', 'mage/url' ], function ($,url) { var linkUrl = url.build('frontname/regions/index'); console.log(linkUrl); }); Where frontname is your routes.xml file frontname. You have to pass your frontname from routes.xml file instead of module name(namespace_module) You can lookup your routes.xml file from app/code/Namespace/Module/...


16

Take a look at shipping_method/price.js define( [ 'jquery', 'Magento_Checkout/js/model/quote', 'Magento_Catalog/js/price-utils' ], function ($,quote, priceUtils) { "use strict"; ...... formatedPrice = getFormattedPrice(price) getFormattedPrice: function (price) { ...


16

requirejs-config.js uses for creating the JavaScript resources mapping. We can find all require configs under: pub/static/_requirejs. As far as I know, the correct way to load our custom script via Require Js: using template to call our script. We will create new template with Magento\Framework\View\Element\Template its block class. If we want to load js ...


15

In Magento 1.x this is a fool's errand. There are simply too many inline scripts littered throughout the template files in Magento that will break if you relocated the core JS files from the <head>. Potentially in Magento 2, this situation will change but it's straddling Prototype and jQuery as Magento migrates away from Prototype. For other scripts, ...


15

Add the following in your local.xml layout file (app/design/frontend/{interface}/{theme}/layout/local.xml) right under the <layout> tag this: For product pages <catalog_product_view> <reference name="head"> <block type="core/text" name="some_name" as="some_name"> <action method="setText"> ...


15

go to database and execute this query SELECT * FROM core_config_data WHERE path LIKE 'dev%' change these value from 1 to 0 dev/js/merge_files dev/css/merge_css_files


15

OK, I think I may have solved it and I believe that the documentation is ambiguous and needs updating to clarify the process. I moved my requirejs-config.jsfrom within the web/js and web directories respectively for both Magento_Theme and the root of my theme at <Vendor>/<theme> and now my RequireJS config is merged into the main requirejs-...


15

Replace in customer module in the file authentication-popup.js: autocomplete: window.checkout.autocomplete with: autocomplete: ((window.checkout && window.checkout.autocomplete) ? window.checkout.autocomplete : null), Once updated run php bin/magento setup:static-content:deploy Update The issue may be fixed in newer versions: https://github....


14

Short answer: never enable Magento's JS/CSS merging function. Overall it's worse for performance throughout the lifecycle of a typical checkout than sending each asset individually. Long answer: You should only be serving one CSS file to users. Multiple files block rendering until all CSS is downloaded. Unless you are serving a huge amount of CSS it's ...


14

I solve Remove render-blocking JavaScript issue on Magento-1.9.x as follows: <script src="filename.js"></script> Replace with Following: <script src="filename.js" defer></script> <script src="filename.js" async="async"></script> or <action method="addJs"><script>prototype/prototype.js</script></...


14

I would recommend the following approach for adding third party scripts in Magento: 1) Open your theme layout update file(preferably local.xml) 2) Add the following xml code: <default> <reference name="after_body_start"> <block type="core/template" name="after_body_start_script" template="page/html/scripts/after_body_start.phtml"...


Only top voted, non community-wiki answers of a minimum length are eligible