0

I have a dropdown to choose store for pickups after select the custom shipping methods Store Pickup.

I want to call the shipping method click event on change function in the pickup store dropdown again.

How to call the shipping method click event here? My checkout interface is looks like below.

enter image description here

Update( shipping-option-select.js )

hasChanged: function () {
        var notEqual = this.value() !== this.initialValue;

        let store_id = this.value._latestValue;
        let currentcomponent = self;


        $.ajax({
            url:storepickupurl,
            type: 'POST',
            async:false,
            data: { 'id' : store_id },
            success:function (data) {
                currentcomponent.changeStoreInfoObj(data);
                let checkoutData = customerData.get('checkout-data')();
                //alert(data);
                $('.shipping-store-block').css('display','block');

                currentcomponent.storeAddress({
                    name: data.store_name,
                    store_email: data.store_email,
                    store_address: data.store_address1,
                    store_city: data.store_city,
                    store_zipcode: data.store_zipcode,
                    store_state: data.store_state,
                    store_country: data.store_country,
                    store_telephone: data.store_telephone
                });
                currentcomponent.isVisibleStoreInformation(true);
                
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log("There has been an error retrieving the values from the database.");
            }
        });
        console.log(self.storeAddress().name);

        return !this.visible() ? false : notEqual;
    },

Template File

<div class="additional-shipping-option-wrapper" data-bind="visible: showAdditionalOption()" style="display: none;">
<div class="step-title" data-role="title" data-bind="i18n: 'Choose Store'"></div>
<!-- ko foreach: element.getRegion('additionalShippingOptionField') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
7
  • 1
    are you using Magento's default store pickup or any third party extension? Nov 10, 2022 at 7:52
  • It's a custom module written by myself, Since in this project scope No MSI involving.
    – Mujahidh
    Nov 10, 2022 at 8:03
  • Can you please add your template code for pickup store and js file code bind with the template? Nov 10, 2022 at 8:32
  • @TarunBhalodia i. ave updated the js and template files contents, On Js i updated only. the change event section.
    – Mujahidh
    Nov 10, 2022 at 9:11
  • @Mujahidh have you used MageWorx Delivery date module?
    – Msquare
    Nov 10, 2022 at 9:28

3 Answers 3

1

Try adding below code

Inject Magento_Checkout/js/action/select-shipping-method underscore, 'Magento_Checkout/js/action/select-shipping-method', 'Magento_Checkout/js/checkout-data', 'Magento_Checkout/js/model/shipping-service', 'Magento_Checkout/js/action/select-shipping-address' as below in your js

define([
    ....
    ....
    underscore,
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/checkout-data',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/action/select-shipping-address',
    ....
    ....

], function (
    ....
    ....
    _,
    selectShippingMethodAction,
    checkoutData,
    shippingService,
    selectShippingAddress,
    ....
    ....
) {
    'use strict';
    return Component.extend({
        defaults: {
            rate: {
                'carrier_code': 'carrierCode', // Set your carrier code here
                'method_code': 'methodCode' // Set your method code here
            },
            rates: shippingService.getShippingRates()
        },
        hasChanged: function () {
            var notEqual = this.value() !== this.initialValue;

            let store_id = this.value._latestValue;
            let currentcomponent = self;


            $.ajax({
                url:storepickupurl,
                type: 'POST',
                async:false,
                data: { 'id' : store_id },
                success:function (data) {
                    currentcomponent.changeStoreInfoObj(data);
                    let checkoutData = customerData.get('checkout-data')();
                    //alert(data);
                    $('.shipping-store-block').css('display','block');

                    currentcomponent.storeAddress({
                        name: data.store_name,
                        store_email: data.store_email,
                        store_address: data.store_address1,
                        store_city: data.store_city,
                        store_zipcode: data.store_zipcode,
                        store_state: data.store_state,
                        store_country: data.store_country,
                        store_telephone: data.store_telephone
                    });
                    currentcomponent.isVisibleStoreInformation(true);
                    
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log("There has been an error retrieving the values from the database.");
                }
            });
            console.log(self.storeAddress().name);
            this.selectStorePickupShippingMethod(); // Here you will select the store pick up shipping method

            return !this.visible() ? false : notEqual;
        },
        selectStorePickupShippingMethod: function () {
            var pickupShippingMethod = _.findWhere(
                this.rates(),
                {
                    'carrier_code': this.rate['carrier_code'],
                    'method_code': this.rate['method_code']
                },
                this
            );

            this.selectShippingMethod(pickupShippingMethod);
        },
        selectShippingMethod: function (shippingMethod) {
            selectShippingMethodAction(shippingMethod);
            checkoutData.setSelectedShippingRate(
                shippingMethod ? shippingMethod['carrier_code'] + '_' + shippingMethod['method_code'] : null
            );
        }
    });
});

Don't forget to add carrierCode and methodCode in js file.

If this answer works as your expected, please mark it as accepted. That indicates your issue is solved and makes it easier for others with the same issue to find a verified answer. And that would be great if you click the upvote button for the answer in case you feel it is useful.

1
  • thanks for your answer, I have tried in a different way. I will upload that as an answer.
    – Mujahidh
    Nov 10, 2022 at 11:21
0

You can get selected shipping method value in js so on that based you can show your dropdown.

File: vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js

selectShippingMethod: function (shippingMethod) {
    console.log(shippingMethod['carrier_code']);
    selectShippingMethodAction(shippingMethod);
    checkoutData.setSelectedShippingRate(shippingMethod['carrier_code'] + '_' + shippingMethod['method_code']);

    return true;
}
1
  • Thanks For the reply, Actually i need to recall the shipping save method during the on change of the store drop down
    – Mujahidh
    Nov 10, 2022 at 11:17
0

Inject 'Magento_Checkout/js/model/shipping-save-processor' to the shipping-option-select.js file and call saveShippingInformation(); method in hasChanged function.

define([
...
'Magento_Checkout/js/model/shipping-save-processor'
], function (
...
shippingSave
) {
'use strict'; 
...
    hasChanged: function () { 
      ...
      shippingSave.saveShippingInformation();
      ...
    },    
 });
});

This part did the trick for me after many strugling.

0

Your Answer

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

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