Account Dashboard: Move elements

Purpose

To demonstrate how you can move data elements around your account dashboard using the Templates Editor.

Watch

More information

The Account Dashboard contains several data elements, such as your customer's company name, contact name, and account details.

This use case demonstrates how you can move data elements in the Account Dashboard from their default locations.

Once you have saved your changes in WebShop, they are immediately visible in WebShop to your customers.

Key points

• If you are comfortable with HTML, CSS, and variables, you’ll be in a good place to use this feature to achieve a personalized look and feel for your WebShop.

• You are responsible for ensuring that the code you have written doesn’t adversely affect your WebShop.

Recipe

To display the customer’s contact email address on the row before their address, as shown:

• Open Templates in the Management Interface. This opens the Templates Editor.

• Navigate to Templates->Dashboard and select “dashboard-main.twig”. This opens the existing twig code under the EDITOR tab.

• Find the class/code you want to move and copy and paste it to the new location. In this case, you locate a class called “account-dashboard-email” and move it above the code with “customer.form.address” contained within the <tr> and </tr> tags. Making this change displays the customer’s contact email address on the row before their address in the Account Dashboard table.

• Select Save to save your changes.

Twig code to move elements around the Account Dashboard

From (existing code)

    <tr>
        <td><strong>{{ translation('customer.form.address') }}</strong></td>
        <td>{{ service_call('address') }}</td>
    </tr>  

    <tr class="account-dashboard-email">
        <td><strong>{{ translation('customer.dashboard.contactemail') }}</strong></td>
        <td colspan="3" style="word-break: break-all">{{ service_call('email') }}</td>
    </tr>

To

<tr class="account-dashboard-email">
        <td><strong>{{ translation('customer.dashboard.contactemail') }}</strong></td>
        <td colspan="3" style="word-break: break-all">{{ service_call('email') }}</td>
    </tr>

    <tr>
        <td><strong>{{ translation('customer.form.address') }}</strong></td>
        <td>{{ service_call('address') }}</td>
    </tr>

Related content

• Using Templates Editor

• Complete everyday tasks in the Templates Editor