0

I have created a new checkout step in which each product is listed along with the option to select which delivery method to use normal shipping or store pickup. I have displayed the product information along with the radio buttons.

delivery-method.html

<!--Use 'stepCode' as id attribute-->
<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
<!-- <div class="step-title" data-bind="i18n: stepTitle" data- 
role="title"></div> -->

<div id="checkout-step-title"
     class="step-content"
     data-role="content">
     <div class="step-title"  data-role="title">How do you want to get your Order?</div>

    <!-- Product listing along with delivery methods -->
    <div class="delivery-method-product-listing" data-bind="foreach: getProductItems()">
      <div class="delivery-method-product-item">
        <h2>Order Details (<span data-bind="text: $index() + 1"></span>)</h2>
        <div>
          <div class="delivery-method-product-image">
            <img data-bind="attr: {'src': product_image_url}, src: product_image_url" />
          </div>
          <div class="delivery-method-product-details">
            <h4 data-bind="text: product_name"></h4>
            <h5 data-bind="text:product_price"></h5>
            <h6 data-bind="text: product_qty"></h6>
          </div>
        </div>
        <div class="delivery-methods-options">
          <h4>Delivery Method</h4>
          <label>
              <input  type="radio" value="Shipping"
                       data-bind="attr: { name: 'delivery-product-' + $index() },checked: $parent.deliveryMethod" />
              Ship to Home
          </label>

          <label>
              <input  type="radio" value="StorePickup"
                       data-bind="attr: { name: 'delivery-product-' + $index() },checked: $parent.deliveryMethod" />
              Store Pickup
          </label><!--
          <div class="store-pickup-pincode" data-bind="visible: ">
            <input type="text" placeholder="Pin Code" name="pickup-pincode" value="" />
            <input type="submit" name="pickup-submit" value="submit" />
          </div>-->
        </div>

        <!-- -->
      </div>
    </div>


    <!--- Next button -->
    <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
        <div class="actions-toolbar">
            <div class="primary">
                <button data-role="opc-continue" type="submit" class="button action continue primary">
                    <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                </button>
            </div>
        </div>
    </form>
</div>

delivery-method-step.js

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/model/quote',
    'Magento_Customer/js/model/customer'
],
function (
    ko,
    Component,
    _,
    stepNavigator,
    quote,
    customer
) {
    'use strict';
    /**
    * delivery-method - is the name of the component's .html template
    */
    var imageData = window.checkoutConfig.imageData;
    return Component.extend({
        defaults: {
            template: 'Sample_DeliveryMethod/delivery-method'
        },
        imageData: imageData,
        //add here your logic to display step,
        isVisible: ko.observable(true),
        isLogedIn: customer.isLoggedIn(),
        //step code will be used as step content id in the component template
        stepCode: 'deliverySelection',
        //step title value
        stepTitle: 'Delivery Method',
        getItems: ko.observableArray(quote.getItems()),
        getTotals: quote.getTotals(),
        /**
         * @param {Integer} item_id
         * @return {null}
         */
        getSrc: function (item_id) {
            if (this.imageData[item_id]) {

                return this.imageData[item_id].src;
            }

            return null;
        },
        //return product details to be shown on delivery method page
        getProductItems: function() {
            var self = this;
            var items = this.getTotals().items;
            var productItems = [];
            items.forEach(function(item) {

              var productItem = {
                item_id: item.item_id,
                product_name: item.name,
                product_price: Number(item.price).toFixed(2),
                product_qty: item.qty,
                product_image_url: self.getSrc(item.item_id)
              }
              productItems.push(productItem);
            });
            return productItems.length !== 0 ? productItems: null;
        },
        /**
        *
        * @returns {*}
        */
        initialize: function () {
            this._super().observe({
                 deliveryMethod: ko.observable("Shipping")
             });
             this.deliveryMethod.subscribe(function (newValue) {
               if(newValue){
                    console.log('checked'+newValue);
               }
             },this);
            // register your step
            stepNavigator.registerStep(
                this.stepCode,
                //step alias
                null,
                this.stepTitle,
                //observable property with logic when display step or hide step
                this.isVisible,

                _.bind(this.navigate, this),

                /**
                * sort order value
                * 'sort order value' < 10: step displays before shipping step;
                * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                * 'sort order value' > 20 : step displays after payment step
                */
                5
            );

            return this;
        },

        /**
        * The navigate() method is responsible for navigation between checkout step
        * during checkout. You can add custom logic, for example some conditions
        * for switching to your custom step
        */
        navigate: function () {

        },

        /**
        * @returns void
        */
        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
}
);

By default, Shipping is selected but when store pickup is selected I have to display the store pickup field and this has to happen for each product item independently. Help, please.

0
$(document).on('change', 'input[type="radio"]', function(){
    alert($(this).val());
});

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.