1

I want product can be pre order if not in stock. suppose, Product X has 3 sizes S,M and L. and colors Red, Blue and Black.

At Product Details Page, If I select size L and Color black which is not in stock then, It should show 'Pre Order' instead of 'Add to Cart' Button.

Just like Magento's Back order process.

6
  • What does pre-order will do ? Same as add to cart or other behavior. – anonymous Jan 3 '20 at 12:16
  • other process will remain same as add to cart. just I want is pre order product if not in stock, and product will get deliver when it will be available. – Dimple Panchal Jan 3 '20 at 12:26
  • You have drop down or swatch ? – anonymous Jan 3 '20 at 12:30
  • I have swatch. and I dont know how it renders on product details page. – Dimple Panchal Jan 3 '20 at 12:38
  • Ah, If you have drop-down then I've solution for it. I am not sure about swatches you can check this magento.stackexchange.com/a/214867/49826 It will give you simple product id if it will work. then you can check with qty and change button texts with jquery. – anonymous Jan 3 '20 at 12:49
3

I've tried this on a vanilla installation of Magento 2.3.3

I overrode the below js file.

vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

Steps:

  • Created a custom module.

Namespace : Kcc

Module Name : Hello

  • app/code/Kcc/Hello/view/frontend/requirejs-config.js

    
    var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'Kcc_Hello/js/swatch-renderer-mixin': true
            }
        }
    }
    };
    
  • app/code/Kcc/Hello/view/frontend/web/js/swatch-renderer-mixin.js

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

return function (SwatchRenderer) { $.widget('mage.SwatchRenderer', $['mage']['SwatchRenderer'], { _init: function () { console.log('getProductSwatchRenderer'); this._super(); }, /** * Rewind options for controls * * @private */ _Rewind: function (controls) { controls.find('div[option-id], option[option-id]').removeClass('disabled').removeAttr('disabled'); controls.find('div[option-empty], option[option-empty]').attr('disabled', true).addClass('disabled'); jQuery('#product-addtocart-button span').text('Add to Cart...'); // Modification one }, /** * Rebuild container * * @private */ _Rebuild: function () { var $widget = this, controls = $widget.element.find('.' + $widget.options.classes.attributeClass + '[attribute-id]'), selected = controls.filter('[option-selected]'); // Enable all options $widget._Rewind(controls); // done if nothing selected if (selected.length <= 0) { return; } // Disable not available options controls.each(function () { var $this = $(this), id = $this.attr('attribute-id'), products = $widget._CalcProducts(id); if (selected.length === 1 && selected.first().attr('attribute-id') === id) { return; } $this.find('[option-id]').each(function () { var $element = $(this), option = $element.attr('option-id'); if (!$widget.optionsMap.hasOwnProperty(id) || !$widget.optionsMap[id].hasOwnProperty(option) || $element.hasClass('selected') || $element.is(':selected')) { return; } if (_.intersection(products, $widget.optionsMap[id][option].products).length <= 0) { $element.attr('disabled', true).addClass('disabled'); jQuery('#product-addtocart-button span').text('Backorder me'); // Modification two } }); }); }, }); return $['mage']['SwatchRenderer']; };});
  • Once the changes are done then, deploy the static contents.

bin/magento setup:static-content:deploy

NOTE: I have added two new lines in above js file. Check the lines in-front of the comments

// Modification one and // Modification two

As the vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js file is self explanatory by the comments, you can see that I have modified the add to cart button label when the options are not available.

2
  • Thanks for the answer. It is very helpful – Dimple Panchal Jan 6 '20 at 5:15
  • @DimplePanchal : Glad that it helped :) Check the browser compatibility as well. – Sukeshini Jan 6 '20 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.