0

Magento 2 on the checkout Page "New Address" button. How can I add a conditional to this button for some users?

I need to hide this button for some customers if my condition is true

enter image description here

  • I got a alternative solution with JavaScript and css but its not a final solution :) – SURENDER SINGH Dec 7 '17 at 6:44
  • 1
    Hey surender I tried on this very hard. I too came to conclusion of one and only way to be using JS. Yet, I would love to see your answer. What I did was extending/overriding shiping.js. What is your way? – Purushotam Sangroula Dec 8 '17 at 14:24
  • I have put a javascript in onepage.phtml Eg: <?php if(condition true){ ?> <script> require([ 'jquery', 'jquery/ui'], function($){ $(document).ready(function($) { jQuery("#customsuren").remove(); jQuery("#sameaddress").remove(); }); }); </script> <?php } ?> – SURENDER SINGH Dec 9 '17 at 4:46
  • 1
    That was simple and nice logic , mine was quite complicated. I tried to do it by overriding shipping.js file and had to do hard work. – Purushotam Sangroula Dec 9 '17 at 14:12
0

I have put this code at onepage.phtml
Ids mention according you.

<?php if(condition true){ ?> 
     <script> 
        require([ 'jquery', 'jquery/ui'], 
         function($){ 
          $(document).ready(function($) {  
             jQuery("#id").remove(); 
             jQuery("#id").remove();
             }); 
          }); 
     </script>

 <?php } ?>
0

We had a requirement to remove the New Address button from the shipping address and billing address from shipping and Payment steps respectfully based on a flag that was set in the customerData. To achieve this, we followed the given approach:

Override the JS and template files from vendor/magento/module-checkout/ module to your theme folder and follow the steps given below:

app/design/frontend/{vendor}/{theme}/Magento_Checkout/web/js/view/shipping.js [around Line no. 75]

Add new line at: Line no. 30

'Magento_Customer/js/customer-data'

Add new line at: Line no. 53

shippingRateService,
customerData

Now customerData is accessible.

Add new line at: Line No. 68

displayNewAddressPopup: customerData.get('restrict_addr'),

after addition of this line, the code should look like:

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/model/shipping-rates-validator',
    'Magento_Checkout/js/model/shipping-address/form-popup-state',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Checkout/js/checkout-data',
    'uiRegistry',
    'mage/translate',
    'Magento_Checkout/js/model/shipping-rate-service',
    'Magento_Customer/js/customer-data'
], function (
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    shippingRatesValidator,
    formPopUpState,
    shippingService,
    selectShippingMethodAction,
    rateRegistry,
    setShippingInformationAction,
    stepNavigator,
    modal,
    checkoutDataResolver,
    checkoutData,
    registry,
    $t,
    shippingRateService,
    customerData
) {
    'use strict';

    var popUp = null;

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/shipping',
            shippingFormTemplate: 'Magento_Checkout/shipping-address/form',
            shippingMethodListTemplate: 'Magento_Checkout/shipping-address/shipping-method-list',
            shippingMethodItemTemplate: 'Magento_Checkout/shipping-address/shipping-method-item'
        },
        visible: ko.observable(!quote.isVirtual()),
        errorValidationMessage: ko.observable(false),
        isCustomerLoggedIn: customer.isLoggedIn,
        isFormPopUpVisible: formPopUpState.isVisible,
        isFormInline: addressList().length === 0,
        isNewAddressAdded: ko.observable(false),
        saveInAddressBook: 1,
        quoteIsVirtual: quote.isVirtual(),
        displayNewAddressPopup: customerData.get('zonal_prices')().win_id,

app/design/frontend/{vendor}/{theme}/Magento_Checkout/web/template/shipping.html [around Line no. 18]

Replace:

<!-- Address form pop up -->
<if args="!isFormInline">
    <button type="button" class="action action-show-popup primary" click="showFormPopUp" visible="!isNewAddressAdded()">
        <span translate="'New Address'" />
    </button>
    <div id="opc-new-shipping-address" visible="isFormPopUpVisible()" render="shippingFormTemplate" />
</if>

With:

<!-- Address form pop up -->
<if args="!isFormInline">
        <if args="!displayNewAddressPopup">
            <button type="button" class="action action-show-popup primary" click="showFormPopUp" visible="!isNewAddressAdded()">
                <span translate="'New Address'" />
            </button>
            <div id="opc-new-shipping-address" visible="isFormPopUpVisible()" render="shippingFormTemplate" />
        </if>
</if>

app/design/frontend/{vendor}/{theme}/Magento_Checkout/web/js/view/billing-address.js

Add new line at: Line No. 68

hideBillingAddressSwitcher: customerData.get('restrict_addr'),

after addition of this line, the code should look like:

return Component.extend({
    defaults: {
        template: 'Magento_Checkout/billing-address'
    },
    currentBillingAddress: quote.billingAddress,
    addressOptions: addressOptions,
    customerHasAddresses: addressOptions.length > 1,
    hideBillingAddressSwitcher: customerData.get('restrict_addr'),

app/design/frontend/{vendor}/{theme}/Magento_Checkout/web/template/billing-address.html

Replace:

<div class="billing-address-same-as-shipping-block field choice" data-bind="visible: canUseShippingAddress()">
    <input type="checkbox" name="billing-address-same-as-shipping"
           data-bind="checked: isAddressSameAsShipping, click: useShippingAddress, attr: {id: 'billing-address-same-as-shipping-' + getCode($parent)}"/>
    <label data-bind="attr: {for: 'billing-address-same-as-shipping-' + getCode($parent)}"><span
            data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
</div>

With:

<if args="!hideBillingAddressSwitcher">
        <div class="billing-address-same-as-shipping-block field choice" data-bind="visible: canUseShippingAddress()">
            <input type="checkbox" name="billing-address-same-as-shipping"
                   data-bind="checked: isAddressSameAsShipping, click: useShippingAddress, attr: {id: 'billing-address-same-as-shipping-' + getCode($parent)}"/>
            <label data-bind="attr: {for: 'billing-address-same-as-shipping-' + getCode($parent)}"><span
                    data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
        </div>
</if>

This is how, based on the value restrict_addr stored in the customerData, we were able to hide the add new address buttons.

Note: To set the custom variable in the customerData, please refer this link: Customer Data Management in Magento 2

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.