Edit - Magento Stack Exchange

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

Add js with RequireJS on product listings page only - without adding or changing phtml

I'd like to add a some JavaScript only to the product listings page, is this possible with RequireJS and without touching a phtml file? How?

I looked through the documentation and they suggest only three available methods:

Declarative notation using the data-mage-init.
Declarative notation with the <script type="text/x-magento-init" /> tag.
Imperative notation with the <script> tag.

Each of these methods all require adding/editing a phtml file.

Also, the documentation seems to contradict itself.

We strongly recommend that you use the described approaches and do not add inline JavaScript.

This does not makes sense as the 3rd method they suggest is inline JavaScript!?

These methods all seem a little convoluted and over engineered, I starting to think I should only add one JS file with RequireJS for my entire theme, and have it load on every page, even if it's only being used on a few. Is this good practice? I just want to add some jQuery to a few pages.

Answer*

Magento 2 documentation is correct, let me show you an example by product list page itself.

 <?php if (!$block->isRedirectToCartEnabled()) : ?>
 <script type="text/x-magento-init">
 {
 "[data-role=tocart-form], .form.map.checkout": {
 "catalogAddToCart": {}
 }
 }
 </script>
 <?php endif; ?>

As you already said:

> Declarative notation using the `data-mage-init`.
> 
> Declarative notation with the `<script type="text/x-magento-init" />`
> tag.
> 
> Imperative notation with the `<script>` tag.

Magento 2 bad practices are you using your script directly inside the `.phtml` file. Something like

 <script type="text/javascript">
 require(["jQuery"], function($){
 //so ugly and long business logic code
 //best practices is move all business logic code inside JS Components
 });
 </script>

What Magento 2 trying to do is:

1. Create jQuery UI widget, like the first code block, it is catalogAddToCart ('Magento_Catalog/js/catalog-add-to-cart')
2. You have options to extend, flexible warranty.
3. Compatible to knockout template, not only phtml template.
4. Easy to maintained.

The 3rd method might lead to misunderstanding. For example, I want the catalogAddToCart JS components initialise for specified element only, I will need 3rd method. Something like

 <script>
 require([
 'jquery',
 'MyLovelyJSComponents',
 'domReady!'
 ], function ($) {
 $('[data-role=lovely]').lovelyComponent(options);

 
Cheers.

Draft saved

Draft discarded

Edit Summary*

Cancel

thanks but I don't see how the 3rd option differs from what you point out is bad practice, it is inline JavaScript.

Holly
– Holly

2017年12月04日 23:27:33 +00:00
Commented Dec 4, 2017 at 23:27
@Holly: In short, bad practices is you leave your business logic code in the template file. The business logic code must be put inside JS components, like what Magento 2 do (UI widget), then from the template file what you did is just initialise it not using it for any specified task in the template.

Toan Nguyen
– Toan Nguyen

2017年12月04日 23:36:59 +00:00
Commented Dec 4, 2017 at 23:36
I see, by the way is ‘domReady!’ just likes jQuery’s document.ready function

Holly
– Holly

2017年12月08日 06:48:39 +00:00
Commented Dec 8, 2017 at 6:48

Add a comment |

How to Edit

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

How to Format

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

How to Tag

A tag is a keyword or label that categorizes your question with other, similar questions. Choose one or more (up to 5) tags that will help answerers to find and interpret your question.

complete the sentence: my question is about...
use tags that describe things or concepts that are essential, not incidental to your question
favor using existing popular tags
read the descriptions that appear below the tag

If your question is primarily about a topic for which you can't find a tag:

combine multiple words into single-words with hyphens (e.g. magento-1.9), up to a maximum of 35 characters
creating new tags is a privilege; if you can't yet create a tag you need, then post this question without it, then ask the community to create it for you

popular tags »

default