Introduction

The Magento 2 Custom Checkout Fields extension by FMEextensions allows store owners to enhance the checkout process by adding custom fields to the checkout page. This feature enables businesses to collect additional information from customers, improving personalization and ensuring all necessary details are captured during the purchase process.

Key Features

• Add custom fields like text, dropdowns, checkboxes, date pickers, and more.
• Place fields in shipping, billing, or review order sections.
• Show or hide fields based on conditional logic.
• Apply validation rules such as required fields, email, number, or date formats.
• Restrict fields to specific customer groups.
• Manage custom field data in the admin panel.
• Display custom field data in emails, invoices, and order details.

Compatibility

This extension is compatible with the following Magento versions.

• 2.1.x
• 2.2.x
• 2.3.x
• 2.4.1, 2.4.2, 2.4.3, 2.4.4, 2.4.5, 2.4.6, 2.4.7

Installation Guide

Download Custom Checkout Fields from your account dashboard. Now you have the following 2 methods to install the extension.

Method 1

1. Unzip fme_checkout-order-attributes-fields-x.x.x.zip to a local folder.
2. Make folder FME into your_magento_directory/app/code/ (if you don't find code folder within app folder, please create it first).
3. Create the following folders (as mentioned in step 2):

• app/code/FME
• app/code/FME/CheckoutOrderAttributesFields

4. Copy all the contents from fme_checkout-order-attributes-fields-x.x.x to newly created CheckoutOrderAttributesFields folder.
5. Now open console or shell.
6. Go to your Magento directory and run the following commands:

• php bin/magento module:enable FME_CheckoutOrderAttributesFields
• php bin/magento setup:upgrade
• php bin/magento setup:static-content:deploy -f (-f may not work in Magento versions less than 2.2.x.)
• chmod command for var/ pub/static and generated/ folders

7. Reload the Magento admin and you will see FME Extensions on the left side menu of your admin panel.

Method 2

1. Unzip fme_checkout-order-attributes-fields-x.x.x.zip to a local folder.
2. Make folder FME into your_magento_directory/app/code/ (if you don't find code folder within app folder, please create it first).
3. Create the following folders (as mentioned in step 2):

• app/code/FME
• app/code/FME/CheckoutOrderAttributesFields

4. Copy all the contents from fme_checkout-order-attributes-fields-x.x.x to newly created CheckoutOrderAttributesFields folder.
5. Go to your_magento_directory/app/etc/
6. Open config.php file in etc folder
7. Add the following line in $modules array at the end ‘FME_CheckoutOrderAttributesFields’=>1,
8. Now open console or shell.
9. Go to your Magento directory and run the below commands

• php bin/magento setup:upgrade
• php bin/magento setup:static-content:deploy -f (-f may not work in Magento versions less than 2.2.x.)
• chmod command for var/ pub/static and generated/ folders

10. Reload the Magento admin and you will see FME Extensions on the left side menu of your admin panel.

GraphQL APIs

Queries

1- Get Customer Order with checkout attributes

query {
  customer {
    orders {
      items {
        increment_id
        checkout_attributes {
          code
          label
          value
        }
      }
    }
  }
}

2- Get Order attrites by Order ID

query {
  getOrderCheckoutAttributes(order_id: "000000017") {
    code
    label
    value
  }
}

3- Get Order attributes for guest customers

query GuestOrder {
    guestOrder(
        input: {
            email: "test@unitedsol.net"
            number: "000000016"
            postcode: "496288"
        }
    ) {
        carrier
        created_at
        grand_total
        id
        number
        order_date
        order_number
        shipping_method
        status
        token
        checkout_attributes {
          code
          label
          value
        }
    }
}

Mutation

Change order attributes data by order id

mutation {
  updateOrderCheckoutAttributes(
    order_id: 17,
    attributes: [
      { code: "aca_comments", value: "Updated from GraphQL" },#aca_commets is attribute code
      { code: "scdr_email", value: "new.email@example.com" } #scdr_email is attribute code
    ]
  ) {
    code
    label
    value
  }
}