0

I have a custom shipping method and form that collects data on the shipping step. The data comes through fine, but when I go back and checkout again, the data still appears in the order and the order email even if I chose a different method. It is like the data is cached or stored somehow. I have tried to force nothing when it loads using:

$("#myform input[type='text']").val('');

But that doesn't do the trick. When it loads the data isn't in the fields, but the old data is still "stored" and shows up on the other order. It does seem that after 30 minutes or so the data is gone. I submit an order using a different method and it isn't there. But I am not totally sure that is always the case.

How can I make sure that data is gone after checkout is done?

Thanks!

UPDATE web/js/action - Mixin

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

    return function (target) {
        return function (shippingMethod) {
            // call original method
            target(shippingMethod);

            if(shippingMethod && shippingMethod.carrier_code == 'carrier_code') {
                $("#opc-custom-checkout-form input[type='text']").val('');
                $('#opc-custom-checkout-form').show();
                $('#shipping-method-buttons-container').addClass('room-delivery-checkout');
            } else {
                $('#opc-custom-checkout-form').hide();
            }

Form JS

define([
    'knockout',
    'jquery',
    'mage/url',
    'Magento_Ui/js/form/form',
    'Magento_Customer/js/model/customer',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/url-builder',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/cart/cache',
    'Matt6_RoomDelivery/js/model/checkout/custom-checkout-form'
], function(ko, $, urlFormatter, Component, customer, quote, urlBuilder, errorProcessor, cartCache, formData) {
    'use strict';

    return Component.extend({
        customFields: ko.observable(null),
        formData: formData.customFieldsData,

        /**
         * Initialize component
         *
         * @returns {exports}
         */
        initialize: function () {
            var self = this;
            this._super();
            formData = this.source.get('customCheckoutForm');
            var formDataCached = cartCache.get('custom-form');
            if (formDataCached) {
                formData = this.source.set('customCheckoutForm', formDataCached);
            }

            this.customFields.subscribe(function(change){
                self.formData(change);
            });

            return this;
        },

        /**
         * Trigger save method if form is change
         */
        onFormChange: function () {
            this.saveCustomFields();
        },

        /**
         * Form submit handler
         */
        saveCustomFields: function() {
            this.source.set('params.invalid', false);
            this.source.trigger('customCheckoutForm.data.validate');

            if (!this.source.get('params.invalid')) {
                var formData = this.source.get('customCheckoutForm');
                var quoteId = quote.getQuoteId();
                var isCustomer = customer.isLoggedIn();
                var url;

                if (isCustomer) {
                    url = urlBuilder.createUrl('/carts/mine/set-order-custom-fields', {});
                } else {
                    url = urlBuilder.createUrl('/guest-carts/:cartId/set-order-custom-field', {cartId: quoteId});
                }

                var payload = {
                    cartId: quoteId,
                    customFields: formData
                };
                var result = true;
                $.ajax({
                    url: urlFormatter.build(url),
                    data: JSON.stringify(payload),
                    global: false,
                    contentType: 'application/json',
                    type: 'PUT',
                    async: true
                }).done(
                    function (response) {
                        cartCache.set('custom-form', formData);
                        result = true;
                    }
                ).fail(
                    function (response) {
                        result = false;
                        errorProcessor.process(response);
                    }
                );

                return result;
            }
        }
    });
});

Thanks!

2
  • Show your code here
    – Sohel Rana
    Aug 29 '20 at 7:25
  • @SohelRana I added some code above. See if that helps.
    – stanhook
    Aug 31 '20 at 12:53
0

Totally unknown but you can try the following simple way:

$("#myform input[type='text']").val('').change();
1
  • I placed this in the mixin after the target(shippingMethod) and it does clear the form. But the problem is that it also clears it when the Next button is clicked so the data is then reset and doesn't pass through. Any way to initialize/reset the form right when the page loads? I have tried jQuery in a bunch of places with no luck. I have a block class that uses ``` public function getCustomFields(Order $order) { return $this->customFieldsRepository->getCustomFields($order); } ``` Maybe something here?
    – stanhook
    Sep 2 '20 at 19:11

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.