Use temporary shipping address

Learn how to implement temporary shipping addresses in Front-Commerce without saving them to the customer's address book. This guide explains how to override the default behavior where addresses are stored permanently.

Classic checkout

info

This feature is only available for Magento1 and Magento2 classic checkout.

When this feature is enabled, a logged in customer's address is passed to the setCheckoutShippingInformation mutation without an id will be used as a temporary address and not be saved in the address book.

This example sets an address in customer's address book as the shipping address:

mutation {
  setCheckoutShippingInformation(
    cartId: "189"
    shippingMethod: { carrier_code: "flatrate", method_code: "flatrate" }
    shippingAddress: { id: 12 }
  ) {
    success
  }
}

This example sets a shipping address that will not be saved in the address book:

mutation {
  setCheckoutShippingInformation(
    cartId: "209"
    shippingMethod: { carrier_code: "flatrate", method_code: "flatrate" }
    shippingAddress: {
      address: {
        firstname: "Testing"
        lastname: "Front-Commerce"
        street: ["42 Street of test"]
        postcode: "31000"
        city: "Toulouse"
        country_id: "FR"
      }
    }
  ) {
    success
    errorMessage
  }
}

tip

You can test these queries in the GraphQL Playground

To achieve this, you will need to remove the check for addresses ids for logged in customers in the theme/pages/Checkout/stepsDefinition.jsx:

theme/pages/Checkout/stepDefinitions.jsx

const steps = [
  {
    renderProgressItem: () =>
      renderProgressItem("address", "user", messages.address),
    renderStep: (props) => (
      <Address
        checkoutType={props.checkoutState.checkoutType}
        isEditingBillingAddress={props.checkoutState.isEditingBillingAddress}
        isEditingShippingAddress={props.checkoutState.isEditingShippingAddress}
        initialAddress={{
          billing: props.checkoutState.billingAddress,
          shipping: props.checkoutState.shippingAddress,
        }}
        onChooseAddress={(billing, shipping, email) => {
          props.checkoutTransaction(() => {
            props.setEmail(email);
            props.setBillingAddress(billing);
            if (shipping) {
              props.setShippingAddress(shipping);
            }
          });
        }}
        shouldAskShipping={props.checkoutState.isShippable ?? true}
      />
    ),
    isValid: (checkoutState) => {
-      const isValidAddress = (address) =>
-        checkoutState.checkoutType === ACCOUNT_TYPE.GUEST
-          ? address
-          : address?.id;
      const hasGuestInfo =
        checkoutState.checkoutType !== ACCOUNT_TYPE.GUEST ||
        checkoutState.email;

      return (
        isValidAddress(checkoutState.billingAddress) &&
        (!checkoutState.isShippable ||
-          isValidAddress(checkoutState.shippingAddress)) &&
        hasGuestInfo
      );
    },
    isRelevant: () => true,
    isDisplayable: () => true,
  },

You must be sure to pass a shipping address without an id to the ChooseShippingMethod component in the stepsDefinition.js file by editing the Address component that handles address selection.

theme/pages/Checkout/stepDefinitions.jsx

<ChooseShippingMethod
  // On the line below, if an address has an id, it will use id in address book
  // if not it will use the temporary address
  shippingAddress={props.checkoutState.shippingAddress}
  billingAddress={props.checkoutState.billingAddress}
  setShippingAddress={props.setShippingAddress}
  setBillingAddress={props.setBillingAddress}
  initialShipping={{
    shippingMethod: props.checkoutState.shippingMethod,
    shippingAdditionalInfo: props.checkoutState.shippingAdditionalInfo,
  }}
  onChooseShippingMethod={(method) => {
    const { additionalData, ...rest } = method;
    props.checkoutTransaction(() => {
      props.setShippingMethod(rest);
      props.setShippingAdditionalInfo(additionalData || {});
    });
  }}
  onChangeShippingAddress={() => props.gotoStepNumber(0)}
/>