shopwareshopware6

How to access user's first_name and last_name from customer's created_by_id in a custom Shopware 6 plugin?

I'm developing a custom plugin for Shopware 6 and I'm extending the sw-customer-base-info component. I need to display the first name and last name of the user who created a customer.

In the database, the customer table has a created_by_id field. This ID corresponds to a record in the user table, which contains the first_name and last_name fields I need.

Here's a simplified version of my current index.js:

import template from './sw-customer-base-info.html.twig';
const { Criteria } = Shopware.Data;

Shopware.Component.override('sw-customer-base-info', {
    inject: ['repositoryFactory'],
    template,
    
    computed: {
        userRepository() {
            return this.repositoryFactory.create('user');
        }
    },
    
    created() {
       
    }
});

How can I modify this code to:

  1. Fetch the created_by_id from the current customer
  2. Use this ID to get the corresponding user's first_name and last_name
  3. Make this data available in my component's template

I'm new to Shopware 6 and its data handling, so a detailed explanation would be greatly appreciated.

Solution

  • Create a new file called sw-customer-base-info.html.twig in the <plugin root>/Resources/app/administration/src/module/extensions/sw-customer/component/sw-customer-base-info/ directory.

    File contents sw-customer-base-info.html.twig:

    {% block sw_customer_base_metadata_campaign %}
    {% parent %}

    {% block sw_customer_base_info_metadata_created_by_user %}
        <template v-if="customer.createdById && createdByUser">
            <sw-description-list>
                <dt class="sw-customer-base-info__label">
                    {{ $tc('sw-customer.baseInfo.labelCreatedByAdmin') }}
                </dt>

                <dd>
                    {{ createdByUser.firstName }} {{ createdByUser.lastName }}
                </dd>
            </sw-description-list>
        </template>
    {% endblock %}
{% endblock %}

    If you need to refer to the user who created the customer, here's a snippet of code:

    <router-link
        :to="{ name: 'sw.users.permissions.user.detail', params: { id: customer.createdById } }">
    {{ createdByUser.firstName }} {{ createdByUser.lastName }}
</router-link>

    Create an index.js file in the same directory to override the sw-customer-base-info component.

    File contents index.js:

    import template from './sw-customer-base-info.html.twig';

const { Component, Context } = Shopware;

Component.override('sw-customer-base-info', {
    template,

    inject: ['repositoryFactory'],

    data() {
        return {
            createdByUser: null,
        };
    },

    computed: {
        userRepository() {
            return this.repositoryFactory.create('user');
        },
    },

    created() {
        this.loadUser();
    },

    methods: {
        async loadUser() {
            if (this.customer && this.customer.createdById) {
                this.createdByUser = await this.userRepository.get(this.customer.createdById, Context.api);
            }
        },
    },
});

    Create a snippet folder in the <plugin root>/Resources/app/administration/src/module/extensions/sw-customer/ directory, then create the en-GB.json and de-DE.json files inside it.

    File contents en-GB.json:

    {
  "sw-customer": {
    "baseInfo": {
      "labelCreatedByAdmin": "Created by admin"
    }
  }
}

    File contents de-DE.json:

    {
  "sw-customer": {
    "baseInfo": {
      "labelCreatedByAdmin": "Erstellt von admin"
    }
  }
}

    Create a main.js file inside administration/src folder.

    File contents main.js:

    import './module/extensions/sw-customer/component/sw-customer-base-info';

    The result is shown in the screenshot below:

    Final result