Magento 2 Bundle Product Page - Remove Slide Down

Question

When I click on the "Customize and Add to Cart" button it moves me to the bottom of the page.

Is there a way to remove the slide down to #product-options-wrapper> fieldset?

Thanks.

Answer 1

To disable the slide down when clicking the Customize and Add to Cart button on the bundle product page, create a new JS mixin to override the default slideDown option in mage.slide JS widget to set the slideDown value to false.

There are 2 solutions to achieve that:

• Use a custom module
• Use a custom theme.

Depending on your site, you can choose a solution that best fits your site.

Solution 1: Use a custom module.

Assume you named the vendor name Vendor, and the module name Bundle. Take the following steps:

Step 1: Create the registration.php file:

File path: app/code/Vendor/Bundle/registration.php

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Bundle', __DIR__);

Step 2: Create the module.xml file:

File path: app/code/Vendor/Bundle/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Bundle">
        <sequence>
            <module name="Magento_Bundle"/>
        </sequence>
    </module>
</config>

Step 3: Create the requirejs-config.js file.

File path: app/code/Vendor/Bundle/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Bundle/js/slide': {
                'Vendor_Bundle/js/slide-mixin': true
            }
        }
    }
};

Step 4: Create the slide-minxin.js file:

File path: app/code/Vendor/Bundle/view/frontend/web/js/slide-mixin.js

define(['jquery'], function ($) {
    'use strict';

    var slideWidgetMixin = {
        /**
         * Customize to disable slide down when clicking Customize and Add to Cart button
         */
        options: {
            slidedown: false
        },
    };

    return function (targetWidget) {
        $.widget('mage.slide', targetWidget, slideWidgetMixin);

        return $.mage.slide;
    };
});

Step 5: Finally, run the setup:upgrade command to make your new module active, and then compile code, deploy static content:

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f

Solution 2: Use a custom theme.

Assume you already have a custom theme named Vendor/theme, if not you can take a look at Magento official document for creating a new custom theme: https://developer.adobe.com/commerce/frontend-core/guide/themes/create-storefront/

Take the following steps:

Step 1: Create the requirejs-config.js file.

File path: app/design/Vendor/theme/Magento_Bundle/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Bundle/js/slide': {
                'Magento_Bundle/js/slide-mixin': true
            }
        }
    }
};

Step 2: Create the slide-minxin.js file:

File path: app/design/Vendor/theme/Magento_Bundle/web/js/slide-mixin.js

define(['jquery'], function ($) {
    'use strict';

    var slideWidgetMixin = {
        /**
         * Customize to disable slide down when clicking Customize and Add to Cart button
         */
        options: {
            slidedown: false
        },
    };

    return function (targetWidget) {
        $.widget('mage.slide', targetWidget, slideWidgetMixin);

        return $.mage.slide;
    };
});

Step 3: Finally, run the following commands to clear the pub/static/frontend/Vendor/theme, var/view_preprocessed/pub/static/frontend/Vendor/theme directories and deploy static content:

rm -r pub/static/frontend/Vendor/theme
rm -r var/view_preprocessed/pub/static/frontend/Vendor/theme
bin/magento setup:static-content:deploy -f --area frontend --theme Vendor/theme