Magento 2 – RequireJS Config Not Being Read

magento2requirejsrequirejs-config.js

I am trying to add slick.js to my website. I started by following this tutorial- http://inchoo.net/magento-2/magento-2-slick-carousel/

I have my slick.min.js here- >app/design/frontend/vendor/theme/web/js/slick.min.js.

I created a requirejs-config.js at app/design/frontend/vendor/theme/web/
(after looking at the comments on the tutorial it mentions to move the file to app/design/frontend/vendor/theme/, so I did all of these steps at both locations.)

I pasted this code in the new requirejs-config.js file-

var config = {
   paths: {
    slick:        'js/slick'
},
shim: {
    slick: {
        deps: ['jquery']
    }
  }
};

I cleaned and flushed the cache, and ran php bin/magento setup:static-content:deploy(I am in developer mode so I do not believe it does anything).

I started researching and came across this answer- Magento2 not reading my requirejs-config.js

I deleted the requirejs-config.js here- >pub/static/_requirejs/frontend/Namespace/Theme/en_US/requirejs-config.js

After that, I ran

 php bin/magento cache:clean
 php bin/magento cache:flush
 php bin/magento setup:upgrade
 php bin/magento setup:di:compile

Still can't get that code to show up in require.js. Please advise on what I can try next.

Best Answer

The requirejs-config.js should be in : app/design/frontend/{Vendor}/{theme}/requirejs-config.js and not in app/design/frontend/{Vendor}/{theme}/web/requirejs-config.js

Your requirejs-config.js should be like this:

var config = {
    paths: {
        slick: 'js/slick.min'
    },
    shim: {
        slick: {
            deps: ['jquery']
        }
    }
};

Remove the content of :

var/view_preprocessed, var/cache, var/page_cache
compile the static contents : php bin/magento setup:static-content:deploy -f

Related Solutions

Magento2 – Override JS File via requirejs-config.js

placing the file under app/design/frontend/Mytheme/mytheme/Magento_Catalog/web/js/price-box.js should be sufficient (without any require config) to overload the file in your theme.

As already said, try clearing the pub/static/ folder content (except the .htaccess). On unix systems you can do this with the command rm -rf pub/static/* from the root directory since * does not include any files starting with a .

If this does not work, I assume there is a problem, since the original File is located in the base area while your theme is in the frontend area. Logically (if this is not working), since base should be inherited by all areas, this might be a bug in the overloading mechanism.

Magento2 – Apply Slick Slider to Recently Viewed Widget

Incase anyone else needs to do this, here's what I did for Magento 2.3.2. The Recently Viewed widget gets added via knockout, which fires after all the other javascript. So to apply slick I had to use the "afterRender" custom binding.

Once I found which knockout template and viewmodel js recently viewed products used it was pretty straight forward. Here's my code:

Copy vendor/magento/module-catalog/view/base/web/js/product/list/listing.js to your theme like app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/js/product/list/listing.js

Make sure jquery/slick is added to the top of the script file, like so (this is assuming you've already added them to require-config.js):

define([
    'ko',
    'underscore',
    'Magento_Ui/js/grid/listing',
    'jquery',
    'slick'
], function (ko, _, Listing, $) {

Add a new function like so:

pdpRvSlickInit: function(){
        $('.block-viewed-products-grid .product-items').slick({
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 3,
            slidesToScroll: 3,
            responsive: [
                {
                    breakpoint: 960,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                }
            ]
        });
    }

Now copy the knockout HTML template to your theme. Copy /vendor/magento/module-catalog/view/base/web/template/product/list/listing.html to app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/web/template/product/list/listing.html I added a new Div, but I'm not sure you need to do that. I added this:

<div class="clear" data-bind="afterRender: pdpRvSlickInit"></div>

Before the last closing div. Hope that helps.

Best Answer

Related Solutions

Magento2 – Override JS File via requirejs-config.js

Magento2 – Apply Slick Slider to Recently Viewed Widget

Related Topic