Magento 2 integration

  • Last updated on April 20, 2023 at 11:43 AM
With our Magento integration, you can display customer information from your Magento store in the conversation view.
Order information can be searched by entering the customer’s phone number or email address depending on the contact channel.

If you are using Magento 1, please click here. 

Installation in Magento

This will guide you through the installation process of the Dixa SearchAPI extension for Magento 2. In order to install the extension, you will need SSH access to your Magento 2 instance.

Step 1: Download the search plugin here. If your customers check out as guests, try our beta plugin.

Upload the archive provided by Dixa to your Magento server. This can be accomplished with SCP, Finder, Explorer, or any other file manager or FTP client.

Now open up an SSH session on your Magento server.

We will start by turning on Magento’s maintenance mode during the installation process in order to prevent issues from occurring. In addition, we’re also going to back up both the codebase and the database of the instance.

cd /var/www/magento2
php bin/magento maintenance:enable
php bin/magento setup:backup --code --db
# clean up cache and temporary files
rm -rf generated/* var/cache/* \
var/page_cache/* var/view_preprocessed/* \
pub/static/*
view raw magento maintenance.sh hosted with ❤ by GitHub

We can now proceed to the installation of the extension’s files.

tar xvf ~/Dixa_SearchAPI-1.2.0.tar.gz
bin/magento module:enable Dixa_SearchAPI
bin/magento setup:upgrade
bin/magento etup:di:compile
view raw magento install 1.2.0.sh hosted with ❤ by GitHub

For the beta plugin, use the following:

unzip ~/Dixa_Magento2_1.3.0.zip
bin/magento module:enable Dixa_SearchAPI
bin/magento setup:upgrade
bin/magento etup:di:compile
view raw magento install 1.30.sh hosted with ❤ by GitHub


The final installation step is to disable the maintenance mode on your instance. For this, run php bin/magento maintenance:disable

Configuration

Connect to the administration interface of your Magento 2 instance. Go to Stores > Configuration.

A new configuration section (Dixa) is now available.


In the SearchAPI configuration, click on Generate if no API key is defined. This will generate a new API key. This key is used to allow Dixa to securely access order information.




Remember to save the new API key after generating it by pressing the button in the top-right corner.

In Dixa

  1. Go to Settings.
  2. Go to Integrations.
  3. Click in Configure Integration under the Magento V1 icon
  4. Click Add Magento.
  5. Enter a title for the card (ie. Order History).
  6. Insert the API Key from your Magento account.
  7. Insert your Magento Subdomain URL.
  8. Click Save.


Example of orders in Magento

When no orders are found in Magento

You can edit the template if you want to display other information from Magento in Dixa.

The template can be written in HTML and supports Liquid too.

This is the default template:

<style>
.magento {
font-family: Open Sans, Helvetica, Arial, sans-serif;
}
.magento .tab-content-holder {
margin: 16px 0;
border: 1px solid #b5c1d4;
border-radius: 4px;
padding: 8px 16px;
}
.magento .tab-content-holder .view-more {
max-width: 100px;
padding-top: 16px;
}
.magento .tab-label {
display: flex;
justify-content: space-between;
cursor: pointer;
align-items: center;
}
.magento .tab-label::after {
content: "❯";
width: 1em;
height: 1em;
text-align: center;
transition: transform 0.35s;
}
.magento .order-meta .media-heading {
display: flex;
justify-content: space-between;
font-size: 16px;
font-weight: 600;
color: #132244;
margin: 0 0 8px;
}
.magento .order-meta .media-heading-date {
margin: 8px 0;
font-size: 14px;
color: #8193b0;
}
.magento .tab-content {
max-height: 0;
overflow: hidden;
}
.magento .tab-content .magento-info-item .item-label {
font-size: 12px;
color: #b5c1d4;
margin: 8px 0 4px;
}
.magento .tab-content .magento-info-item .item-value {
font-size: 12px;
background: transparent;
line-height: 16px;
color: #46597C;
margin-bottom: 16px;
}
.magento input.hidden {
position: absolute;
opacity: 0;
}
.magento input:checked + .tab-label::after {
transform: rotate(90deg);
}
.magento input:checked ~ .tab-content {
max-height: 999em;
padding: 16px 0;
}
.magento .order-status {
border: 1px solid #e7ecf3;
border-radius: 24px;
display: inline-flex;
align-items: center;
padding: 0 12px;
color: #8193b0;
font-weight: 600;
font-size: 12px;
line-height: 24px;
}
.magento .order-table {
border: 1px solid #e7ecf3;
border-radius: 4px;
border-spacing: 0;
margin: 0;
overflow: hidden;
width: 100%;
margin-bottom: 16px;
}
.magento .order-table tr th,
.magento .order-table tr td {
background: transparent;
padding: 0 4px;
vertical-align: top;
}
.magento .order-table tr th {
font-weight: 400;
background-color: #f5f7fa;
font-size: 14px;
color: #46597C;
padding: 10px;
}
.magento .order-table tr td {
color: #46597C;
border-bottom: 1px solid #e7ecf3;
padding: 10px;
}
.magento .order-table tr:last-child td {
border-bottom: 0;
}
.magento a {
color: #0079CC;
font-size: 12px;
}
.magento .no-border {
border: 0;
}
.magento .no-padding {
padding: 0;
}
</style>
{% if results.size > 0 %}
{% for order in results %}
{% if forloop.index0 < 3 %}
<div class="tab magento">
<div class="tab-content-holder">
<input
type="checkbox"
name=""
class="hidden"
id="order_{{ order.id }}"
{% if forloop.first == true %} checked {% endif %}
/>
<label class="tab-label" for="order_{{ order.id }}">
<div class="order-meta">
<div class="media-heading-date">{{ order.created | slice: 0, 10 }} @ {{ order.created | slice: 11, 5 }}
<span class="order-status">{{ order.status }}</span>
</div>
<h2 class="media-heading">Order #{{ order.id }}</h2>
</div>
</label>
<div class="tab-content">
{% if order.status != nil %}
<div class="magento-info-item">
<div class="item-label">Status</div>
<div class="item-value">{{ order.status }}</div>
</div>
{% endif %}
{% if order.totals != nil %}
{% if order.totals.grand_total != nil %}
<div class="magento-info-item">
<div class="item-label">Order price</div>
<div class="item-value">
{{ order.totals.grand_total }} ({{order.currency}})
</div>
</div>
{% endif %}
{% endif %}
<div class="magento-info-item">
<div class="item-label">Customer info</div>
<div class="item-value">
{% if order.customer.name != nil %} {{ order.customer.name }} <br /> {% endif %}
{% if order.customer.email_address != nil %} {{ order.customer.email_address }} <br /> {% endif %}
{% if order.customer.address.street1 != nil %} {{ order.customer.address.street1 }} <br /> {% endif %}
{% if order.customer.address.street2 != nil %} {{ order.customer.address.street2 }} <br /> {% endif %}
{% if order.customer.address.postcode != nil %} {{ order.customer.address.postcode }} <br /> {% endif %}
{% if order.customer.address.city != nil %} {{ order.customer.address.city }} <br /> {% endif %}
{% if order.customer.address.country != nil %} {{ order.customer.address.country }} <br /> {% endif %}
{% if order.customer.phone_number != nil %} Tel. {{ order.customer.phone_number }} <br /> {% endif %}
</div>
</div>
{% if order.shipping_address != nil %}
<div class="magento-info-item">
<div class="item-label">Shipping address</div>
<div class="item-value">
{% if order.shipping_address.street1 != nil %} {{ order.shipping_address.street1 }} <br /> {% endif %}
{% if order.shipping_address.street2 != nil %} {{ order.shipping_address.street2 }} <br /> {% endif %}
{% if order.shipping_address.postcode != nil %} {{ order.shipping_address.postcode }} <br /> {% endif %}
{% if order.shipping_address.city != nil %} {{ order.shipping_address.city }} <br /> {% endif %}
{% if order.shipping_address.country != nil %} {{ order.shipping_address.country }} <br /> {% endif %}
</div>
</div>
{% endif %}
{% if order.billing_address != nil %}
<div class="magento-info-item">
<div class="item-label">Billing address</div>
<div class="item-value">
{% if order.billing_address.street1 != nil %} {{ order.billing_address.street1 }} <br /> {% endif %}
{% if order.billing_address.street2 != nil %} {{ order.billing_address.street2 }} <br /> {% endif %}
{% if order.billing_address.postcode != nil %} {{ order.billing_address.postcode }} <br /> {% endif %}
{% if order.billing_address.city != nil %} {{ order.billing_address.city }} <br /> {% endif %}
{% if order.billing_address.country != nil %} {{ order.billing_address.country }} <br /> {% endif %}
</div>
</div>
{% endif %}
<table class="order-table">
<tbody>
<tr>
<th>Qty.</th>
<th>Item</th>
<th>Product link</th>
</tr>
{% for item in order.items %}
<tr>
{% if item.quantities != nil %}
{% if item.quantities.ordered != nil %}
<td>{{ item.quantities.ordered }}</td>
{% endif %}
{% endif %}
<td>{{ item.name }}</td>
<td>
<a href="{{ item.url }}" target="_blank">View product</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<a href="{{ order.url }}" target="_blank">View order status</a>
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% if results.size > 3 %}
<div class="tab magento">
<div class="tab-content-holder no-border no-padding">
<input type="checkbox" name="" class="hidden" id="readMore" />
<label for="readMore" class="view-more tab-label">View more</label>
<div class="tab-content">
{% for order in results %}
{% if forloop.index0 > 2 %}
<div class="tab">
<div class="tab-content-holder">
<input
type="checkbox"
name=""
class="hidden"
id="order_{{ order.id }}"
/>
<label class="tab-label" for="order_{{ order.id }}">
<div class="order-meta">
<div class="media-heading-date">{{ order.created | slice: 0, 10 }} @ {{ order.created | slice: 11, 5 }}
<span class="order-status">{{ order.status }}</span>
</div>
<h2 class="media-heading">Order #{{ order.id }}</h2>
</div>
</label>
<div class="tab-content">
{% if order.status != nil %}
<div class="magento-info-item">
<div class="item-label">Status</div>
<div class="item-value">{{ order.status }}</div>
</div>
{% endif %}
{% if order.totals != nil %}
{% if order.totals.grand_total != nil %}
<div class="magento-info-item">
<div class="item-label">Order price</div>
<div class="item-value">
{{ order.totals.grand_total }} ({{order.currency}})
</div>
</div>
{% endif %}
{% endif %}
<div class="magento-info-item">
<div class="item-label">Customer info</div>
<div class="item-value">
{% if order.customer.name != nil %} {{ order.customer.name }} <br /> {% endif %}
{% if order.customer.email_address != nil %} {{ order.customer.email_address }} <br /> {% endif %}
{% if order.customer.address.street1 != nil %} {{ order.customer.address.street1 }} <br /> {% endif %}
{% if order.customer.address.street2 != nil %} {{ order.customer.address.street2 }} <br /> {% endif %}
{% if order.customer.address.postcode != nil %} {{ order.customer.address.postcode }} <br /> {% endif %}
{% if order.customer.address.city != nil %} {{ order.customer.address.city }} <br /> {% endif %}
{% if order.customer.address.country != nil %} {{ order.customer.address.country }} <br /> {% endif %}
{% if order.customer.phone_number != nil %} Tel. {{ order.customer.phone_number }} <br /> {% endif %}
</div>
</div>
{% if order.shipping_address != nil %}
<div class="magento-info-item">
<div class="item-label">Shipping address</div>
<div class="item-value">
{% if order.shipping_address.street1 != nil %} {{ order.shipping_address.street1 }} <br /> {% endif %}
{% if order.shipping_address.street2 != nil %} {{ order.shipping_address.street2 }} <br /> {% endif %}
{% if order.shipping_address.postcode != nil %} {{ order.shipping_address.postcode }} <br /> {% endif %}
{% if order.shipping_address.city != nil %} {{ order.shipping_address.city }} <br /> {% endif %}
{% if order.shipping_address.country != nil %} {{ order.shipping_address.country }} <br /> {% endif %}
</div>
</div>
{% endif %}
{% if order.billing_address != nil %}
<div class="magento-info-item">
<div class="item-label">Billing address</div>
<div class="item-value">
{% if order.billing_address.street1 != nil %} {{ order.billing_address.street1 }} <br /> {% endif %}
{% if order.billing_address.street2 != nil %} {{ order.billing_address.street2 }} <br /> {% endif %}
{% if order.billing_address.postcode != nil %} {{ order.billing_address.postcode }} <br /> {% endif %}
{% if order.billing_address.city != nil %} {{ order.billing_address.city }} <br /> {% endif %}
{% if order.billing_address.country != nil %} {{ order.billing_address.country }} <br /> {% endif %}
</div>
</div>
{% endif %}
<div class="card-table-holder">
<table class="order-table">
<tbody>
<tr>
<th>Qty.</th>
<th>Item</th>
<th>Product link</th>
</tr>
{% for item in order.items %}
<tr>
{% if item.quantities != nil %}
{% if item.quantities.ordered != nil %}
<td>{{ item.quantities.ordered }}</td>
{% endif %}
{% endif %}
<td>{{ item.name }}</td>
<td>
<a href="{{ item.url }}" target="_blank">View product</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<a href="{{ order.url }}" target="_blank">View order status</a>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{% else %}
<div class="magento-info-item">
<h6 class="item-label">This customer has no orders in Magento.</h6>
</div>
{% endif %}
</div>
view raw magento-default-template.tpl hosted with ❤ by GitHub


Was this article helpful?

Help Center
Username
Dixa Support
System Status
Have a question?
Product Roadmap
Webinar Series
Dixa Academy
Elevio by Dixa