Please Note: The Dixa-Magento 1 integration is currently in beta.

With our Magento v1 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.

In Magento 1

This will guide you through the installation of the Dixa SearchAPI Magento extension. Considering that this extension is currently still under development, it is not available through Magento Connect.

Installation

On Linux or macOS, open a terminal session and upload the extension package to your server.

scp Dixa_SearchAPI-0.3.0.tgz username@server:

Then, login to the server:

ssh username@server

Next, you're going to need to do a few things:

  • Create a temporary directory to work in
  • Move the extension package into that directory, and change directory into it
  • Extract the contents of the extension package
mkdir tmp-dixa
mv Dixa_SearchAPI-0.3.0.tgz tmp-dixa
cd tmp-dixa
tar xvf Dixa_SearchAPI-0.3.0.tgz

This will create a directory called 'app' and a file package.xml.

Now, we need to install the extension into your Magento installation. This guide will assume that your Magento instance is installed in /var/www/html/magento:

cp -a app/* /var/www/html/magento/app

Note: If you have previously installed an older version of the Dixa SearchAPI, remember to remove it before installing the new extension:

rm -rf /var/www/html/magento/app/code/community/Dixa/SearchAPI


Configuration

Now that the plugin is installed, we need to establish communication between Dixa and the extension. This is done by generating a small token that ensures the safety of your data.

Log in to your Magento Admin Interface, and navigate to the system and then configuration page:

https://cdn.elev.io/file/uploads/eid_pwPCq9B83qCr7_E7suYUZb-t0pP21wOYRLdoB2g/q_lC40VwW9xIDd3KGUGV92wdwXQ6AsSoCmOIStA1Wj8/magento_1-eJ4.png

If the extension was correctly installed, you will notice a new menu entry on the left hand side:

https://cdn.elev.io/file/uploads/eid_pwPCq9B83qCr7_E7suYUZb-t0pP21wOYRLdoB2g/Z6x2R5eAMrUUzCsOQoKXfzv8aV0vcCNfJRGX3ax7L6I/magento_2-je4.png

After clicking on this menu entry, you will be presented with the following screen:

https://cdn.elev.io/file/uploads/eid_pwPCq9B83qCr7_E7suYUZb-t0pP21wOYRLdoB2g/TnQHebuZ4E2wBvh6YmyFICLcn7yLyu77lIYunYn_YaI/03-generate-api-key-ToU.png

Simply click on "Generate", followed by "Copy to Clipboard". This will copy your new API key to your system's clipboard. This API key has to be sent to Dixa staff so that we can setup the integration.

Don't forget to save the configuration using the button in the top right corner. If everything went correctly, your configuration should look something like this:

https://cdn.elev.io/file/uploads/eid_pwPCq9B83qCr7_E7suYUZb-t0pP21wOYRLdoB2g/5JwqxIL1X8qZd-gGZJhnu-LUJxPC4heRCQRxuLzYRRk/04-generate-and-save-XJI.png


In Dixa

  1. Go to Settings.
  2. Go to Integrations.
  3. Click in Configure Integration under the Magento V1 icon.
  4. Click Add Magento Card.
  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 writen 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 %}