How to use responsive.js in a theme derived from Luma?

Question

The Magento DevDocs says

You can use the menu.js, responsive.js and matchMedia.js to add responsive behavior in your custom theme. If your theme inherits from Blank or Luma, you do not even need to additionally include the script files in your theme.

But what does this actually mean in practice? I need to alter some css classes/onclick behaviour based on the media query, but if I don't even need to additionally include the script files in my theme, how does it work?

• milesb: I have tried placing a copy of responsive.js in my theme's web/js directory and it isn't picked up.

Answer 1

You are doing correct but need to do some more steps. Below, I have listed steps for it.

• First copy responsive.js file from vendor/magento/theme-frontend-blank/Magento_Theme/web/js/ file and put it in your theme at app/design/frontend/Vendor/Theme/Magento_Theme/web/.

• Now add your change in that app/design/frontend/Vendor/Theme/Magento_Theme/web/responsive.js file.

• Now run cache flush command and then run setup static content deploy command.

• You can see your changes are reflecting.

As per Magento, you can add your own media match as added in that responsive.js file.

Here is one example of it. You can change media: '(min-width: 768px)' code as per requirement.

mediaCheck({
 media: '(min-width: 768px)',
 /**
 * Entry in the width.
 */
 entry: function () {
 put your code here when device screen width less then '768px'. 
 },
 /**
 * Exit from the width.
 */
 exit: function () {
 put your code here when device screen width more then '768px'. 
 }
});

• milesb: No success I'm afraid. But I'm suspecting there might be a locale issue. My store is configured as en_GB and indeed this pub/static file is being served: ./frontend/Homespace/United/en_GB/Magento_Theme/js/responsive.js, which is the core Magento version. My theme version is in pub/static as /frontend/Homespace/United/en_US/responsive.js but not served. So that suggests some mismatch between the Magento Locale and how it treats my theme (which as far as I can find is locale neutral??)
• kunj: @milesb okay remove files from frontend/Homespace/United/en_GB/ and run with language php bin/magento setup:static-content:deploy en_GB
• milesb: Thanks, I appear to have that working now. Much appreciated. Will mark this as answered.

Answer 2

Add the below file in your theme.

File:- app/design/frontend/[Vendor]/[Theme]/web/js/responsive.js

 define([
 'jquery',
 'matchMedia',
 'mage/tabs',
 'domReady!'
], function ($) {
 'use strict';
 //Write your code here
});

if not reflects changes then hit below commands and check

sudo php bin/magento setup:static-content:deploy -f
sudo php bin/magento ca:cl
sudo php bin/magento ca:fl

• milesb: Please see the comment to kunj's answer below