How to collect customer's Shipping Account# during checkout

[Tiffany Waggoner]

I need to create a shipping procedure where our customer can select between our integrated UPS account, and Manual Shipping. IF the customer selects Manual Shipping I need a required field for the user to provide us with either their UPS Account # or FedEx Account #. This required field would only show or be required if Manual Shipping is selected.

I do not see a way to add this additional field to the shipping screen, but I'm sure it could be accomplished with JavaScript.

Next issue, if I'm able to accomplish the above. I will need this information to be added to our emailed order notification.

If there is any past posts I can reference, or someone has applied something similar in the past to their stores, I'd greatly appreciate the help, as I am below a novice level when writing anything beyond basic CSS.

Thanks in advance!

Tiffany

We are running uStore v.17.1

[Tiffany Waggoner]

ChatGPT helped me with some of this, but I think my next step is that I need the xml to capture the data too.
If our server is hosted with XMPie, would this be something I need to contact support for, or is it something I can update on my end?


JavaScript and CSS to create the conditionally required field, and CSS to style.

-JavaScript-
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function () {
    // Identify the shipping method dropdown
    const shippingMethodDropdown = document.getElementById('ctl00_cphMainContent_cmbServices');
   
    // Create the new input field for the UPS or FedEx account number
    const accountNumberField = document.createElement('input');
    accountNumberField.type = 'text';
    accountNumberField.id = 'accountNumber';
    accountNumberField.name = 'accountNumber';
    accountNumberField.placeholder = 'Enter your UPS or FedEx account number';
    accountNumberField.style.display = 'none'; // Initially hidden
    accountNumberField.required = false; // Initially not required
   
    // Add the new input field to the DOM, right after the shipping method dropdown
    shippingMethodDropdown.parentElement.appendChild(accountNumberField);
   
    // Function to check the selected shipping method and toggle the account number field
    function checkShippingMethod() {
        const selectedOption = shippingMethodDropdown.options[shippingMethodDropdown.selectedIndex];
        if (selectedOption.text.includes('BILL TO MY UPS ACCOUNT') || selectedOption.text.includes('BILL TO MY FedEx ACCOUNT')) {
            accountNumberField.style.display = 'block';
            accountNumberField.required = true;
        } else {
            accountNumberField.style.display = 'none';
            accountNumberField.required = false;
        }
    }
   
    // Attach an event listener to the dropdown to monitor changes
    shippingMethodDropdown.addEventListener('change', checkShippingMethod);
   
    // Initial check in case the default selection is one of the specified options
    checkShippingMethod();
   
    // Identify the Next button
    const nextButton = document.getElementById('ctl00_cphMainContentFooter_btnNext');
   
    // Function to validate the form before submission
    function validateForm(event) {
        // Perform the shipping method check
        checkShippingMethod();
       
        // If the account number field is visible and required, ensure it is not empty
        if (accountNumberField.required && accountNumberField.style.display === 'block' && accountNumberField.value.trim() === '') {
            alert('Please enter your UPS or FedEx account number.');
            event.preventDefault(); // Prevent the form submission
        }
    }
   
    // Attach the validation function to the Next button click event
    nextButton.addEventListener('click', validateForm);
});
</script>


-CSS-

#accountNumber {
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

[Wayne]

Hi Tiffany,

I would advise that you engage someone to assist you with your requirement.

This type of customization requires a good understanding of the XMPie ecosystem.

Also note the maintenance requirement to keep the customization working with future updates.

Regards,

Wayne

 

[Tiffany Waggoner]

Thank you for the feedback. I have reached out to support, and they have recommended I work with professional services to create this one variable that's needed.
I think I'll probably just utilize the comments section to collect the data though, as I know that the owners of the business will not want to put in any development costs for something they are currently collected on an deprecated platform the customer is currently using.

Tiffany