With the Magento v2 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 v1, 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.


Download the search plugin here.

On Linux or macOS, open a terminal session and upload the archive provided by Dixa to your Magento server. This can be accomplished with:


scp Dixa_SearchAPI-1.2.0.tar.gz username@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 backup 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/*

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 setup:di:compile

The final installation step is to disable the maintenance mode on your instance.


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.
https://cdn.elev.io/file/uploads/eid_pwPCq9B83qCr7_E7suYUZb-t0pP21wOYRLdoB2g/M-_lRE4JfRw_1zL2CYKWycMr6wP21eOyeoQu3eUq0rs/magento_01-Oz0.png
https://cdn.elev.io/file/uploads/eid_pwPCq9B83qCr7_E7suYUZb-t0pP21wOYRLdoB2g/QwP-7PZLfWWSyVI1OnO6Ta_KOOmZdZyd-ZbWVqTkDoI/magento_02-1zA.png


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.

Be careful not to affect anything global. Use a styling wrapper if you add any custom styling.

This is the default template:

<style>
  .card-holder.custom-card.magento .custom-card-content .magento-info-item .item-label {
    font-size: 14px;
    color: #808080;
    opacity: .7;
    margin-bottom: 4px;
    margin-top: 0;
  }


  .card-holder.custom-card.magento .custom-card-content .magento-info-item .item-value {
    background: transparent;
    color: #717171;
    padding-bottom: 7px;
    border-bottom: 1px solid #F2F2F4;
    margin: -20px 0 10px;
    text-align:right;
  }


  .card-holder.custom-card.magento .item-label-magento {
    font-size: 14px;
    color: #808080;
    opacity: .7;
    margin-bottom: 10px;
    margin-top: 10px;
  }


  .card-holder.custom-card.magento .order-meta {
    margin-top: 5px;
    margin-bottom: 0px;
    cursor: pointer;
  }


  .card-holder.custom-card.magento .order-meta .s-icon.i-magento {
    background: #C7E6A5;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: block;
    margin-right: 10px;
    float: left;
  }


  .card-holder.custom-card.magento .order-meta .s-icon:before {
    vertical-align: -16px;
    margin-left: 3px;
  }


  .card-holder.custom-card.magento .order-meta .media-heading {
    line-height: 30px;
    color: @brand-p-five;
  }


  .card-holder.custom-card.magento .tab {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
    overflow: hidden;
    display: flex;
  }


  .card-holder.custom-card.magento .tab .label {
    text-transform: none;
  }


  .card-holder.custom-card.magento .tab-side {
    width: 2px;
    background: #C7E6A5;
    height: inherit;
    border-radius: 1px;
    margin-left: 13px;
    margin-right: 15px;
    display: block;
    float: left;
    min-height: 30px;
  }


  .card-holder.custom-card.magento .tab-content {
    max-height: 0;
    overflow: hidden;
  }


  .card-holder.custom-card.magento .tab-content-holder {
    display: block;
    width: 100%;
  }


  .card-holder.custom-card.magento input::after {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3;
    text-align: center;
    transition: all .35s;
  }


  .card-holder.custom-card.magento input.hidden[type=checkbox]:checked~.tab-content {
    max-height: 999em;
    padding-top: 10px;
    padding-bottom: 5px;
  }


  .card-holder.custom-card.magento .card-table-holder {
    border: 1px solid #F2F2F4;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 10px;
  }


  .card-holder.custom-card.magento .order-table {
    margin-bottom: 0;
    overflow: hidden;
    width: 100%;
  }


  .card-holder.custom-card.magento .order-table tr th,
  .card-holder.custom-card.magento .order-table tr td {
    background: transparent;
    padding: 0 4px;
    line-height: 1.42857143;
    vertical-align: top;
  }


  .card-holder.custom-card.magento .order-table tr:hover {
    background: transparent;
  }


  .card-holder.custom-card.magento .order-table tr th {
    font-size: 14px;
    color: #808080;
    font-weight: 400;
    opacity: .7;
    padding: 10px;
    border-bottom: 1px solid #F2F2F4;
    border-right: 1px solid #F2F2F4;
    border-top: 0px!important;
  }


  .card-holder.custom-card.magento .order-table tr td {
    color: #717171;
    border-bottom: 1px solid #F2F2F4;
    border-right: 1px solid #F2F2F4;
    padding: 10px;
  }


  .card-holder.custom-card.magento .order-table tr:last-child td {
    border-bottom: 0;
  }


  .card-holder.custom-card.magento a {
    padding: 4px;
  }


  .card-holder.custom-card.magento .tab label {
    display: block;
  }
</style>


{% if results.size > 0 %}
{% for order in results %}
{% if forloop.index0 < 3 %}
<div class=“tab”>
  <div class=“tab-content-holder”>
    <label for=“order_{{ order.id }}“>
      <div class=“order-meta”>
        <h5 class=“media-heading”>
          Order #{{ order.id }}
        </h5>
      </div>
    </label> {% if forloop.first == true %}
    <input type=“checkbox” name=“” class=“hidden” id=“order_{{ order.id }}” checked> {% else %}
    <input type=“checkbox” name=“” class=“hidden” id=“order_{{ order.id }}“> {% endif %}
    <div class=“tab-content”>
      <div class=“magento-info-item”>
        <h6 class=“item-label”>Customer info</h6>
        <p 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 %}
        </p>
      </div>


      {% if order.shipping_address != nil %}
      <div class=“magento-info-item”>
        <h6 class=“item-label”>Shipping address</h6>
        <p 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 %}
        </p>
      </div>
      {% endif %} {% if order.billing_address != nil %}
      <div class=“magento-info-item”>
        <h6 class=“item-label”>Billing address</h6>
        <p 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 %}
        </p>
      </div>
      {% endif %} {% if order.created != nil %}
      <div class=“magento-info-item”>
        <h6 class=“item-label”>Order date</h6>
        <p class=“item-value”>{{ order.created }}</p>
      </div>
      {% endif %} {% if order.status != nil %}
      <div class=“magento-info-item”>
        <h6 class=“item-label”>Status</h6>
        <p class=“item-value”>{{ order.status }}</p>
      </div>
      {% endif %} {% if order.totals != nil %} {% if order.totals.grand_total != nil %}
      <div class=“magento-info-item”>
        <h6 class=“item-label”>Order price</h6>
        <p class=“item-value”>{{ order.totals.grand_total }} ({{order.currency}})</p>
      </div>
      {% endif %} {% 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 %}


  {% if results.size > 3 %}
  <div class=“tab”>
    <div class=“tab-side”>
    </div>
    <div class=“tab-content-holder”>
      <label for=“readMore”>
        <div class=“order-meta”>
          <h5 class=“media-heading”>
            View more
          </h5>
        </div>
      </label>
      <input type=“checkbox” name=“” class=“hidden” id=“readMore”>
      <div class=“tab-content”>
        {% for order in results %}
        {% if forloop.index0 > 2 %}
        <div class=“tab”>
          <div class=“tab-content-holder”>
            <label for=“order_{{ order.id }}“>
              <div class=“order-meta”>
                <span class=“s-icon i-magento” aria-hidden=“true”></span>
                <h5 class=“media-heading”>
                  Order #{{ order.id }}
                </h5>
              </div>
            </label> {% if forloop.first == true %}
            <input type=“checkbox” name=“” class=“hidden” id=“order_{{ order.id }}” checked> {% else %}
            <input type=“checkbox” name=“” class=“hidden” id=“order_{{ order.id }}“> {% endif %}
            <div class=“tab-content”>
              <div class=“magento-info-item”>
                <h6 class=“item-label”>Customer info</h6>
                <p 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 %}
                </p>
              </div>


              {% if order.shipping_address != nil %}
              <div class=“magento-info-item”>
                <h6 class=“item-label”>Shipping address</h6>
                <p 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 %}
                </p>
              </div>
              {% endif %} {% if order.billing_address != nil %}
              <div class=“magento-info-item”>
                <h6 class=“item-label”>Billing address</h6>
                <p 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 %}
                </p>
              </div>
              {% endif %} {% if order.created != nil %}
              <div class=“magento-info-item”>
                <h6 class=“item-label”>Order date</h6>
                <p class=“item-value”>{{ order.created }}</p>
              </div>
              {% endif %} {% if order.status != nil %}
              <div class=“magento-info-item”>
                <h6 class=“item-label”>Status</h6>
                <p class=“item-value”>{{ order.status }}</p>
              </div>
              {% endif %} {% if order.totals != nil %} {% if order.totals.grand_total != nil %}
              <div class=“magento-info-item”>
                <h6 class=“item-label”>Order price</h6>
                <p class=“item-value”>{{ order.totals.grand_total }} ({{order.currency}})</p>
              </div>
              {% endif %} {% 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 %}