0

Description

Magento 2 (Community Edition) standard for selection type checkbox of bundle options is that customers can not change the quantity of the selections.

I'm trying to implement that customers can change the quantity of each selection within an option of selection type checkbox -- as you can see here for Magento 1.

I followed the tutorial above and was able to rewrite the back-end blocks and the front-end blocks and view files (step 1 and 2) of Magento 2. Now I'm stuck at modifying the Javascript part (step 3).

Actually the quantity input fields of the checkbox selections are implemented like in the tutorial above (see step 2).

If I change the quantity of a selection, the function _onQtyFieldChanged(event) of Magento_Bundle/js/price-bundle.js is called. Inside this function field.data('option') is called. This usually returns an instance of the option (e.g. for selection type radio), which is used later in the function.

My problem is, that the field.data('option') call for the checkbox quantity field returns undefined.

Debugging

  • Dumping the field Object to the browsers console and calling field.data() returns an empty Object.
  • Other field.data Objects (e.g. of selection type radio) have the attributes option, optionId and optionValueId. You can find this by inspecting the Object of the specific ID in the cache Object in line 3686 of the jquery.js.
  • If I change the value of a checkbox quantity field and search for a radio quantity field.data Object in the mentioned cache Object, it has the attributes optionContainer and quantityField.
  • If I change the value of a radio quantity field and search for a checkbox quantity field Object in the mentioned cache Object, it doesn't contain a data Object.

Question

Has anyone an idea where the field.data Object is constructed and filled with the above mentioned attributes?

2 Answers 2

1

I am actually following the same tutorial :)
I am stuck in the Javascript file part too, but it's in the overriding the _onQtyFieldChanged(event)

In terms of your issue:

The field.data('option') returns undefined because the field option is pointed to a select statement in the original implementation but not in yours. If you console.log(field.data('option') when you change your Bundle Product to have dropdown option type, you will see that the <option></option> that was selected from the dropdown will be the one that will be returned in the console.log(field.data('option').

So to make it work, I used various elements from the implementation mentioned in the tutorial Listing 15 image. For the case were field.data('option') doesn't exist.

If you inspect the front-end you will realize that each checkbox and qty text field is its own input. So when qty-field changes the field variable holds an input instead of an option. So to be able to access the selected "option" (input in our case), I used the a similar implementation to the one mentioned in the tutorial...

Tutorial:

parts = element.id.split('-'); optionId = parts[2]; ...

Something like:

parts = field[0].id.split('-'); optionId = parts[2]; ...

Not sure if this helps at all?

4
  • Thanks a lot! You put me on the right track. But you are not completely right. The field.data('option') refers to the e.g. radio element that is checked. Now, I get the specific checkbox element by its ID and I extract the optionIdand the optionValueId from the field[0] -- like you suggested.
    – Densen
    Jun 8, 2016 at 10:12
  • After I got the right optionConfig element and set its qty, I can call .trigger('change') on it. Just like it is done for e.g. radio elements in the _onQtyFieldChanged(event)function. You can get the quantity by calling field.val().
    – Densen
    Jun 8, 2016 at 10:23
  • If you create a new question, we can discuss your overriding issue.
    – Densen
    Jun 8, 2016 at 11:27
  • @Densen oh yeah I was referring to the dropdown Bundle Options instead of the radio button one. In that case, like you said it is the selected option from the dropdown or the radio button! I am glad you figured it out. I actually have a question open regarding the overriding issue. Magento 2: How to override module price-bundle.js Thanks! :)
    – Noemi
    Jun 8, 2016 at 19:02
0

After 4 days of working on this here's my solution.

you must override bundle-user-defined-checkbox.js in "Magento_Bundle/view/adminhtml/web/js/components"

to do that create requirejs-config.js in "app/code/[Vendor]/[Module]/view/adminhtml"

var config = {
map: {
    '*': {
        'Magento_Bundle/js/components/bundle-user-defined-checkbox': 'Vendor_Module/js/bundle-user-defined-checkbox'
    }
}
};

then create bundle-user-defined-checkbox.js in "app/code/[Vendor]/[Module]/view/adminhtml/web/js"

define([
'Magento_Ui/js/form/element/single-checkbox'
       ], function (Checkbox) {
'use strict';

return Checkbox.extend({
    defaults: {
        listens: {
            inputType: 'onInputTypeChange'
        }
    },

    /**
     * Handler for "inputType" property
     *
     * @param {String} data
     */
    onInputTypeChange: function (data) {
        data === 'multi' ?
            this.clear()
                .visible(false) :
            this.visible(true);
    }
});
});

clear cache and run php bin/magento setup:static-content:deploy and a checkbox will be added to the admin panel

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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