RealOnePageCheckout: Show/Hide Checkout Attributes based on Selected Shipping Method

Hello,

I'm using NopUltimatePluginCollection_3.7.148.18764 (RealOnePageCheckout).

I'm trying to figure out how to show/hide the checkout attributes based on a selected shipping method.  

So for example...

I have three shipping methods
- FedEx
- UPS
- Other

If a users selects Other, I want the Checkout Attributes panel to be visible... else I want the Checkout Attributes to be invisible.

I'm new to AngularJs and I'm trying to figure out how to use ng-show in CheckoutAttributes.cshtml, but not sure how to check the selected shipping method like so.  vm.shippingData.selectedShippingMethod.name == 'Other'


Any advice would be greatly appreciated.

Hi, 

The easiest way to go to this file: /Plugins/SevenSpikes.Nop.Plugins.RealOnePageCheckout/Scripts/app/shippingMethods/shippingMethods.controller.min.js and replace its content with this code:

"use strict"; function ShippingMethodsController(n, t, i, r) { var u = this, f; u.shippingData = {}; u.configData = {}; u.configData.isVisible = !0; f = !1; i.load(!0); n.$on("togglePanel", function (n, t) { angular.isDefined(t.hasProductsRequiringShipping) && (f = t.hasProductsRequiringShipping); u.configData.isVisible = !t.pickUpInStore && f }); n.$on("refresh", function () { var n = i.get(); angular.copy(n, u.shippingData); r.hideOverlay(".shipping-methods-loader") }); n.$on("setShippingMethodsOverlay", function () { r.showOverlay(".shipping-methods-loader") }); t.$watch("vm.shippingData.selectedShippingMethod", function (n, t) { n && t && (i.set(n), $(".section.checkout-attributes").toggleClass("ng-hide", n.name === "Next Day Air")) }, !0); u.stringFormat = r.stringFormat; u.renderShippingDescription = r.trustAsHtml } angular.module("realOnePageCheckout.shippingMethods").controller("ShippingMethodsController", ShippingMethodsController); ShippingMethodsController.$inject = ["$rootScope", "$scope", "shippingMethodsContext", "objectUtility"];

Just on the place of the bold text place the system name of your shipping method, in your case maybe "Other".


I hope this helped !

Works Great! Thank you!

Support:

I am hopping that you can provide us some help on this ASAP!
We have created two div's which are hidden by default and they have the following information:

<div id="deliverymsg" class="delivery" >
<span>Your delivery will arrive in approximately 40-60 minutes.</span>
</div>


<div id="pickupmsg" class="pickup" >
<span>Your order will be ready for pickup in approximately 20-30 minutes.</span>
</div>

In NOP we have a checkout attribute named "Ready" with two options "ASAP" and "Future"

The two new hidden DIVs are ONLY to show when the "ASAP: checkout attribute option is selected (NEVER when "Future").

So in summary:

1.) div id="deliverymsg" - should ONLY show up when: (shipping method is "Delivery" AND Ready checkup attribute value is "ASAP"

2.) div id="pickupmsg" - should ONLY show up when: (shipping method is "Pickup" AND Ready checkup attribute value is "ASAP")

We know NOTHING about Angular so we are really, really stuck on this one. Your prompt help would be much appreciated.

FYI: We found in the forum a response from you from 10 months POST#389 that had a similar request. Your response is below, but we are needing to check against two conditions so we think your suggested solution will not work for us.

"use strict"; function ShippingMethodsController(n, t, i, r) { var u = this, f; u.shippingData = {}; u.configData = {}; u.configData.isVisible = !0; f = !1; i.load(!0); n.$on("togglePanel", function (n, t) { angular.isDefined(t.hasProductsRequiringShipping) && (f = t.hasProductsRequiringShipping); u.configData.isVisible = !t.pickUpInStore && f }); n.$on("refresh", function () { var n = i.get(); angular.copy(n, u.shippingData); r.hideOverlay(".shipping-methods-loader") }); n.$on("setShippingMethodsOverlay", function () { r.showOverlay(".shipping-methods-loader") }); t.$watch("vm.shippingData.selectedShippingMethod", function (n, t) { n && t && (i.set(n), $(".section.checkout-attributes").toggleClass("ng-hide", n.name === "Next Day Air")) }, !0); u.stringFormat = r.stringFormat; u.renderShippingDescription = r.trustAsHtml } angular.module("realOnePageCheckout.shippingMethods").controller("ShippingMethodsController", ShippingMethodsController); ShippingMethodsController.$inject = ["$rootScope", "$scope", "shippingMethodsContext", "objectUtility"];

Waiting for your assistance and MANY THANKS!!!

Hi,

You can get the selected shipping method by adding ng-click to the in the shipping method input element (ShippingMethod.cshtml).

<input ng-click="$emit('shippingMethodSelected', shipping)" ... />

Listen for the event in external.controller.min.js

function ExternalController($rootScope, $scope, objectUtility) {

    var selectedShippingMethod;

    $rootScope.$on("shippingMethodSelected", function (s, newValue) {

        selectedShippingMethod = newValue.name;
    });
};

You can do the same for the checkout attributes and then write the logic about showing and hiding the elements.

You can also use jQuery.

Hope this helps.