Skip to main content
Version: 2.x

Temporary shipping address

By default, Front-Commerce theme manages shipping addresses in the customer account address book. However, it is still possible to manage shipping addresses that will not be saved in the address book.

info

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

Classic checkout

You can test these queries in the GraphQL Playground

This example set 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 set 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
}
}

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

web/theme/pages/Checkout/stepDefinitions.js
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 ID to the ChooseShippingMethod component in the stepsDefinition.js file by editing the Address component that handle address selection.

web/theme/pages/Checkout/stepDefinitions.js
<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)}
/>

Negotiable quote checkout

You will need to override the EnhanceAddress enhancer, and add an input to the mutation to specify if the address needs to be save or not. Its original location is: modules/front-commerce-b2b2/web/theme/modules/Checkout/NegotiableQuotes/Address/EnhanceAddress.js

web/theme/modules/Checkout/NegotiableQuotes/Address/EnhanceAddress.js
 makeCommandDispatcher({
setShippingAddress:
(props) =>
({ address, onSuccess }) => {
return {
options: {
mutation: SetNegotiableQuoteShippingAddressMutation,
variables: {
input: {
quoteId: props.negotiableQuoteId,
address: formatCheckoutAddressInput(address),
+ saveInAddressBook: true
},
},
},

In the same file, you will find in the withHandlers property the onChooseAddress method that will call the setShippingAddress mutation, you can insert your logic here to tell if you need to save address or not

    withHandlers({
onChooseAddress: (props) => (billing, shipping) => {