0

I am trying to create fields for each product in the cart. Some extra data needs to be filled in per product and the wish was for it to be found in the address section of the checkout form.

I can create the fields correctly with the following view elements:

define(
[
    'jquery',
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Customer/js/model/customer',
    'Magento_Checkout/js/model/quote',
    'mage/url',
    'mage/cookies'
],
function (
    $,
    ko,
    Component,
    _,
    customer,
    quote,
    urlBuilder
) {
    'use strict';
    /**
     * check-login - is the name of the component's .html template
     */
    return Component.extend({
        defaults: {
            template: 'Brancom_CheckoutStep/check-number'
        },

        //add here your logic to display step,
        isVisible: ko.observable(true),

        isLoggedIn: customer.isLoggedIn(),

        getProducts: quote.getItems(),

        /**
         *
         * @returns {*}
         */
        initialize: function () {
            this._super();

            return this;
        },

        toggleDisplayElm: function ($element, $id) {

            if ($element == "2") {
                $('#' + $id).closest('.keep-number-wrapper').children('.show-if-display').show();
            } else {
                $('#' + $id).closest('.keep-number-wrapper').children('.show-if-display').hide();
            }
        },
    });
}
);

And the template :

<!-- ko foreach: { data: getProducts, as: 'quoteItem' } -->

<!-- ko foreach: new Array(quoteItem.qty) -->

    <div class="custom-fieldset custom-fieldset-number keep-number-wrapper-wrapper"
         data-bind="if: $parent.product.attribute_set_id == 12 || $parent.product.attribute_set_id == 4">
        <strong data-bind="text: quoteItem.name + ' - ' + quoteItem.options[0].value + '  - ' + quoteItem.options[1].value"></strong>

        <div class="field">
            <input type="radio" checked="checked"
                   data-bind="event: {change :  function() { $parents[1].toggleDisplayElm('1', quoteItem.item_id + '_1' + $index())} }, attr: { 'id': quoteItem.item_id + '_1' + $index(), 'name': 'custom_attributes[' + quoteItem.item_id + '_phone' + $index() + ']' }">
            <label data-bind="attr: { 'for': quoteItem.item_id + '_1' + $index() }">Ik wil een nieuw
                telefoonnummer</label>
        </div>

        <div class="field">
            <input type="radio"
                   data-bind="event: {change :  function() { !$parents[1].toggleDisplayElm('2', quoteItem.item_id + '_2' + $index())} }, attr: { 'id': quoteItem.item_id + '_2' + $index(), 'name': 'custom_attributes[' + quoteItem.item_id + '_phone' + $index() + ']' }">
            <label data-bind="attr: { 'for': quoteItem.item_id + '_2' + $index() }">Ik wil mijn huidige 06 nummers
                behouden</label>
        </div>

        <div class="field"
             data-bind="attr: { 'name': 'shippingAddress.custom_attributes.' + quoteItem.item_id + '_providers' + $index()}">
            <div class="control">
                <select class="providers"
                        data-bind=" attr: {'name': 'custom_attributes[' + quoteItem.item_id + '_providers' + $index() + ']' }">
                    <option value="" disabled selected>Selecteer je provider</option>
                    <option value="tele2">Tele2</option>
                    <option value="knp">KPN</option>
                    <option value="vodafone">Vodafone</option>
                    <option value="tmobile">T-Mobile</option>
                </select>
            </div>
        </div>

        <div class="show-if-display">

            <div class="field"
                 data-bind="attr: { 'name': 'shippingAddress.custom_attributes.' + quoteItem.item_id + '_fname' + $index()}">
                <div class="control">
                    <input class="input-text" type="text"
                           data-bind=" attr: {'name': 'custom_attributes[' + quoteItem.item_id + '_fname' + $index() + ']' }"
                           placeholder="Klantnummer bij huidige provider">
                </div>
            </div>
            <div class="field"
                 data-bind="attr: { 'name': 'shippingAddress.custom_attributes.' + quoteItem.item_id + '_lname' + $index()}">
                <div class="control">
                    <input class="input-text" type="text"
                           data-bind=" attr: {'name': 'custom_attributes[' + quoteItem.item_id + '_lname' + $index() + ']' }"
                           placeholder="Einddatum huidige contract">
                </div>
                <span>Vul 'nvt' in indien prepaid/consumentenmarkt</span>
            </div>
            <div class="field"
                 data-bind="attr: { 'name': 'shippingAddress.custom_attributes.' + quoteItem.item_id + '_pname' + $index()}">
                <div class="control">
                    <input class="input-text" type="text"
                           data-bind=" attr: {'name': 'custom_attributes[' + quoteItem.item_id + '_pname' + $index() + ']' }"
                           placeholder="Huidig 06 nummer">
                </div>
            </div>
        </div>
    </div>

<!-- /ko -->

<!-- /ko -->

But I don't see how I can save the data from this point, because the field names are variable I can't really add it to the extension_attributes.xml. and the data is not showing in the address-converter.js

Any ideas how I can save the data, atleast long enough to use it in the order confirmation email?

Your Answer

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

Browse other questions tagged or ask your own question.