Need a hand with Custom Shipping Provider localization (Umbraco Commerce)

Questions
,
1

Hi everyone,

I’m running into a bit of a wall with localization for a Custom Shipping Provider in Umbraco Commerce, and I’m hoping someone can point out what I’m missing!

I’ve successfully added my provider, but the settings field labels and descriptions are appearing as the raw translation keys:

  • #ucCustomShippingProvider{field}Label

  • #ucCustomShippingProvider{field}Description

I found the Payment Provider documentation states I need to add Localizations and tried to add them, but I ended up breaking the entire Commerce section in the backoffice.

What I’ve tried so far:

  1. Adding a localization entry to the root umbraco-package.json in App_Plugins.

  2. Defining an en.js file, but I also tried referencing client/src/lang/en.ts which seemed to cause the crash.

Whenever I try to register the language files, the Commerce section fails to load. I suspect I might be getting the file structure or the registration path wrong.

Does anyone have a snippet or a quick guide on the correct way to register these labels so they show up properly without breaking the UI?

Thanks in advance for any help!

2

Hi @busrasengul

I assume you’ve followed the documentation here?

It mentions using UI localization:

Regards,

Justin

3

Yes, as the Localization documents are quite general, I actually couldn’t manage to make it work.

4

I don’t know if this helps, but this is the suggestion from AI:

Shipping providers use a slightly different convention to what you’ve got. Umbraco Commerce looks for these exact keys (from the Shipping Providers docs):

ucShippingProviders_{providerAlias}Label — main label for the provider, ucShippingProviders_{providerAlias}Description — description for the provider, ucShippingProviders_{providerAlias}Settings{settingAlias}Label — label for a provider setting, ucShippingProviders_{providerAlias}Settings{settingAlias}Description — description for a provider setting Umbraco

So you’re missing three things versus what the UI is asking for:

  • The prefix is ucShippingProviders_ (plural, with underscore), not ucCustomShippingProvider

  • Settings fields need the Settings segment in the middle

  • The # prefix you’re seeing in the UI is only used to reference a key from a manifest — you don’t include it in the key definition itself

5

Here’s my en-US. file inside .Client > public > lang>

export default {
  "ucShippingProviders_expressDeliveryLabel": "Express Delivery",
  "ucShippingProviders_expressDeliveryDescription": "Create Express Delivery Options",
  
  "ucShippingProviders_expressDeliverySettingsEnabledLabel": "Enabled",
  "ucShippingProviders_expressDeliverySettingsEnabledDescription": "Enable or disable this shipping option",
  
  "ucShippingProviders_expressDeliverySettingsShippingNameLabel": "Shipping Name",
  "ucShippingProviders_expressDeliverySettingsShippingNameDescription": "The name for the shipping type",
  
  "ucShippingProviders_expressDeliverySettingsShippingDescriptionLabel": "Shipping Description",
  "ucShippingProviders_expressDeliverySettingsShippingDescriptionDescription": "The description for the shipping type, recommended 90 characters.",
  
  "ucShippingProviders_expressDeliverySettingsMinDaysLabel": "Min delivery days",
  "ucShippingProviders_expressDeliverySettingsMinDaysDescription": "Min Delivery days for selected products",
  
  "ucShippingProviders_expressDeliverySettingsMaxDaysLabel": "Max delivery days",
  "ucShippingProviders_expressDeliverySettingsMaxDaysDescription": "Max Delivery days for selected products",
  
  "ucShippingProviders_expressDeliverySettingsAppliedProductsLabel": "Applied Products",
  "ucShippingProviders_expressDeliverySettingsAppliedProductsDescription": "Select Product Detail Pages this shipping applies to."
}

my umbraco-package.json is .Client > public >

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My Shipping Extensions",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "localization",
      "alias": "Shutters.Localization.EnUs",
      "name": "English (US)",
      "js": "./lang/en-US.js",
      "meta": {
        "culture": "en-US"
      }
    }
  ]
}

It compiles to App_Plugins > client > lang folder

It just doesn’t work

image
image273×691 33.7 KB

6

I wonder if I’m adding my files to wrong places

7

Hi @busrasengul

Try this:

export default {
    ucShippingProviders: {
        expressDeliveryLabel: 'Express Delivery',
        expressDeliveryDescription: 'Create Express Delivery Options',

        expressDeliverySettingsEnabledLabel: 'Enabled',
        expressDeliverySettingsEnabledDescription: 'Enable or disable this shipping option',

        expressDeliverySettingsShippingNameLabel: 'Shipping Name',
        expressDeliverySettingsShippingNameDescription: 'The name for the shipping type',

        expressDeliverySettingsShippingDescriptionLabel: 'Shipping Description',
        expressDeliverySettingsShippingDescriptionDescription: 'The description for the shipping type, recommended 90 characters.',

        expressDeliverySettingsMinDaysLabel: 'Min delivery days',
        expressDeliverySettingsMinDaysDescription: 'Min Delivery days for selected products',

        expressDeliverySettingsMaxDaysLabel: 'Max delivery days',
        expressDeliverySettingsMaxDaysDescription: 'Max Delivery days for selected products',

        expressDeliverySettingsAppliedProductsLabel: 'Applied Products',
        expressDeliverySettingsAppliedProductsDescription: 'Select Product Detail Pages this shipping applies to.'
    }
};

And register it like this:

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "My Shipping Extensions",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "localization",
      "alias": "Shutters.Localization.EnUs",
      "name": "English (US)",
      "js": "/App_Plugins/client/lang/en-US.js",
      "meta": {
        "culture": "en-us"
      }
    }
  ]
}

That’s an AI suggestion so I’ve not tested it.

Hope that helps.

Justin

8

This breaks all the translation items :frowning:

image
image386×219 11.3 KB

image
image1460×792 55.1 KB

Looking to @mattbrailsford and @jacob here. Where am I doing wrong?

9

At least that means your file is being picked up then… Maybe something wrong with the format of the JSON data?

Does it help looking at the shipping providers on GitHub to compare?

10

It was the quotes!!! can’t believe it…

Thank you so much Justin!

I’d checked the same example many times. only this time I realized the quotes!

Now it’s working…

1 Like
11

Glad you got it working!

1 Like