Last call to make your voice heard! Our 2022 Developer Survey closes in less than a week. Take survey.
11 votes
Accepted

Loading javascript on specific sections/pages

A safe way to add JavaScript resources via the frontend, is to use the {% includeJsFile %} Twig function in your template. The nice thing about the includeJsFile function is that it doesn't matter ...
user avatar
9 votes
Accepted

Interpret TWIG's {% js %} as <script> in PHPStorm

You can do this using PhpStorm’s Language Injections feature. In fact, as of PhpStorm 2017.3, it has included support for {% script %} tags out of the box. To extend that to {% js %} tags, go to ...
user avatar
8 votes
Accepted

JS templating in Craft CP

The only JS library that ships with Craft (besides the Craft-specific Garnish) is jQuery. Of course, jQuery is a helpful JS library, but by no means a full-fledged framework. Fortunately, adding a ...
user avatar
  • 23.6k
7 votes

Is it possible to disable dev output in a template when devMode is true?

You can create a simple plugin with an init() method like so: public function init() { craft()->log->removeRoute('WebLogRoute'); craft()->log->removeRoute('ProfileLogRoute'); } ...
user avatar
  • 66.4k
7 votes
Accepted

How can I get cookies that were set in javascript from a twig template?

So far the only solution I have found is to use a plugin, and Lewis Jenkins' LJ Cookies plugin does the trick nicely: {{ craft.lj_cookies.get( NAME ) }} It also allows you to set and delete cookies ...
user avatar
  • 6,156
7 votes

Access add and remove events with the Craft Element Selector?

As of Craft 2.4.2688: It is now possible to access Craft.BaseElementSelectInput objects from their container elements, via .data('elementSelect'). On select element: $('#theElementSelectField')....
user avatar
7 votes
Accepted

Update Commerce Cart using Ajax

Yes, you can do all the normal commerce actions via ajax. A basic recipe is this... HTML: <form method="POST" id="addToCartForm"> {{ getCsrfInput() }} <input type="...
user avatar
6 votes

Trigger Task Status Icon

I use this to force the task icon to show up immediately: Craft.cp.setRunningTaskInfo({ "id": "task ID", "level": "0", "description": "description", "status": "running", "progress"...
user avatar
6 votes
Accepted

Are there callbacks for elementSelect macro?

You can get the Element Select’s JS instance like so: $(document).ready(function() { var elementSelect = $('#your-container-id').data('elementSelect'); }); (Replace your-container-id with whatever ...
user avatar
6 votes
Accepted

AJAX page transitions with history.pushState

So I just went through my article step-by-step and I indeed missed adding the new content into $main. I think there may have been a versioning mistake in the article's code as I definitely tested it. ...
user avatar
  • 525
5 votes
Accepted

Can you pass a variable with includeJsFile?

You can't pass a JS variable into a JS file (that doesn't quite make sense). What you can do is to create a JS variable, and make it accessible to the script you are including. So you'd include your ...
user avatar
  • 23.6k
5 votes
Accepted

Local storage in Twig

No. Twig gets compiled into PHP and is run entirely on the server.
user avatar
5 votes
Accepted

Craft 3 - ajax request to plugin

95% of the time you see a 400 Bad Request error, it's because it's a CSRF token validation error (or you're just missing the token all-together). Craft 3 has CSRF validation enabled by default. Here'...
user avatar
  • 66.4k
4 votes
Accepted

Is it possible to disable dev output in a template when devMode is true?

You can't disable the debugging output using Twig/templates. However, Craft will only render the debug data if your document' Content-type header is either "text/html" or "application/xhtml+xml" (...
user avatar
4 votes

Get value from dropdown and use in Twig

Twig (and all php) is processed server-side before javascript even gets initiated. And once the page renders in the browser there no way to interact directly with twig. The only two options that you ...
user avatar
4 votes

Including plugin javascript on the client side

Think you need: UrlHelper::getResourceUrl('path/to/file.ext') There is more info over at http://buildwithcraft.com/docs/plugins/resources Edit ok, scrap that answer, I didn't read the rest of the ...
user avatar
4 votes
Accepted

Can I set a JS variable to a Twig output tag?

Looks like you're actually off-track in a couple of different ways... ElementCriteriaModel This code is going to return an ElementCriteriaModel: craft.tags.group('gameTags') Think of an ...
user avatar
  • 23.6k
4 votes

Can I set a JS variable to a Twig output tag?

In your first example, you are outputting an ElementCriteriaModel. That is a query for tags rather than the tags themselves. It doesn't output anything usable by JS You're almost doing the same in the ...
user avatar
4 votes
Accepted

How would I trigger updateElements for BaseElementIndex from a plugin's JavaScript?

The cleanest way to do this would be to provide your own Javascript class that overrides Craft.BaseElementIndex, which stores the latest search value in localStorage: MyElementTypeIndex = Craft....
user avatar
4 votes

minify javascript with includeJS

I don't believe there is a way to minify javascript when it is output to the page. If there is it would make for increased load time. My suggestion is to use a preprocessor like Gulpjs or Gruntjs. ...
user avatar
  • 2,707
4 votes
Accepted

Creating environment variable from JSON file

You could write some PHP at the top of your general.php file that reads the JSON manifest in your public root directory, and add its keys/values to the config array. I wouldn't use environment ...
user avatar
4 votes

Triggering JavaScript from back-end event

When an entry is saved, an Entry saved. flash message is set and displayed by Craft. You could use the Control Panel JS plugin to write a script to detect this flash message and perform your desired ...
user avatar
4 votes
Accepted

Use Craft.postActionRequest in frontend template

The global Craft object available in the Control Panel is exposed in the craft.js file, which is a bundle containing most of the JavaScript code used in Craft's Control Panel (i.e. admin area). This ...
user avatar
4 votes
Accepted

Setting the position of a Smart Map marker on the front end

Turns out my code was pretty much working but there was another issue in there that was stopping the map marker updating. I've since resolved it. The original form is huge so here's a cut down snippet ...
user avatar
  • 1,979
4 votes

Load More Entries Button

Here's a cut-down version of what I'm using on https://cld.agency/showcase It's using jQuery because that's the way I like it: {% set theLayout = craft.app.request.isAjax and not craft.app.request....
user avatar
  • 3,829
4 votes
Accepted

Load More Entries Button

The Sprig plugin will save you a lot of trouble, and dynamically loading more entries is a perfect use-case for it. If you prefer to use jQuery, then by all means do so, but keep in mind that it is ...
user avatar
  • 6,156
4 votes

javascript module question

You achieve this by adding a param to the tag: {% js 'path/to/jsfile.js' with { type:'module' } %} // outputs <script type="module" src="path/to/jsfile.js">
user avatar
3 votes

JS templating in Craft CP

There's also Swig. We've successfully been able to share JS templating with Craft templates, and it's worked pretty well. Not without it's caveats, though. Mostly coming from slight syntax differences ...
user avatar
  • 3,051
3 votes

How to trigger updateElements when hide modal?

If the page is rendered from a template that extends _layouts/elementindex, then the Element Index class instance is available at Craft.elementIndex. So all you’d need to do is include this in the ...
user avatar
3 votes

Can Garnish be extended to allow plugins to use custom keyboard shortcuts?

I'm not sure if there's an "official" way yet but I've looked through the source a little bit and I think the most Craft-like way I would do it, following plugin conventions, is to extend Garnish.Base ...
user avatar
  • 4,361

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