1. Install Search Plugin.
  2. Generate API Key in the Magento 2 plugin.
  3. Create Custom Card integration in Dixa.

Download the plugin here.

Install Extension via Setup Wizard

 

This installation way looks very easy but Magento 2 has some issues with the Wizard process. Therefore, we recommend you install all extensions manually via the command line.

 

 

You should create Dixa/SearchAPI/ directory in the magento_root_folder/app/code (if code folder doesn’t exist, it should be created too) on the server and upload extension’s code there. Then go to System -> Web Setup Wizard -> Component Manager and you will get needed component.

 

 

 

The ‘Enable’ option should be checked in the ‘Select’ box and you will get the next page

 

Click on ‘Start Readiness Check’ and if all is ok, ‘Next’ button is output. You can make a backups on the next step. 

 


This option is important (especially ‘Code’ and ‘Database’ backups) to make rollbacks, if something goes wrong. I’ve unchecked them on the screen because this process can take about 20 minutes. E.g if you get some error during installation but you made code and database backups, you just can click ‘Rollback’button on the last step and magento should return the previous state of store.



Then you have the possibility to enable the extension and Magento 2 will deploy the code.

 

Install Extension via Command Line


1. Make a backup

php bin/magento setup:backup --code --db        

2. Set maintenance mode 

php bin/magento maintenance:enable

3. Hard clean magento deploy data. In this case we avoid magento system error like in setup wizard installation

            rm -rf var/generation/*

rm -rf generated/*

rm -rf var/cache/*

rm -rf var/page_cache/*

rm -rf var/view_preprocessed/*

rm -rf var/di/*

rm -rf pub/static/*

 4. Upgrade data

            php bin/magento setup:upgrade

5. Deploy code

            php bin/magento setup:di:compile

6. Deploy static files

            php bin/magento setup:static-content:deploy

7. Need to check var and pub/static directories. These folders and files which they contain should have write permission.

8. If you get some error and would like to return to the previous magento state, check backup files using the next command

php bin/magento info:backups:list

when you get the list of backups, choose the latest ones and run the next command (use real file names instead of database.sql and code.tgz)

php bin/magento setup:rollback -d database.sql -c code.tgz

 

Configuration

 

When extension is successfully installed,  API key should be generated for it. Please go to 

Stores -> Configurations -> DIXA -> Dixa SearchApi and click ‘Generate’ button.

 


Dixa Custom Card

  1. Go to Setting.
  2. Go to Integrations.
  3. Click Configure Custom Card.
  4. Click Add Custom Card.
  5. Enter Magento 2 in Title.
  6. Enter https://www.[domain].com/dixa/search/orders?apikey=[API key]&email_address={{a_email}}&{{a_phone}}&{{b_email}}&{{b_phone}}
    Replace [domain] with your Magento 2 store domain. 
    Replace [API Key] with the API Key generated by the Magento 2 plugin.
  7. Insert this template:
<style>
  .collapse-card--collapse-card__card .magento-custom-card .magento-info-item .item-label {
    font-size: 14px;
    color: #808080;
    opacity: .7;
    margin-bottom: 4px;
    margin-top: 0;
  }


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


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


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


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


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


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


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


  .collapse-card--collapse-card__card .magento-custom-card .label {
    text-transform: none;
  }


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


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


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


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


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


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


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


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


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


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


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


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


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


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


{% if results.size > 0 %}
{% for order in results %}
{% if forloop.index0 < 3 %}
<div class="tab magento-custom-card">
  <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">Delivery:</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 }},
          {% 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:</h6>
        <p class="item-value">
          {% if order.shipping != nil %} 
            <b>{{ order.shipping }}</b><br />
          {% endif %} 
          {% 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 }},
          {% 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 }},
          {% 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="table order-table">
          <thead>
            <tr>
              <th>Qty.</th>
              <th>Item</th>
              <th>Product link</th>
            </tr>
          </thead>
          <tbody>
          {% 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>
              {% if item.url != "#" %}
                <a href={{ item.url }} target="_blank">View product</a>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
        </table>
      </div>
      <a href="https://www.baumundpferdgarten.com/admin/sales/order/view/order_id/{{ order.id }}" 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</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 }},{% 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 Information</h6>
                <p class="item-value">
                  Shipping: {{ order.shipping }}
                  <br /> {% 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 }}, {% 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 Information</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 }}, {% 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="table 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>
                        {% if item.url != "#" %}
                          <a href={{ item.url }} target="_blank">View product</a>
                        {% endif %}
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              <a href="https://www.baumundpferdgarten.com/admin/sales/order/view/order_id/{{ order.id }}" 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 2.</h6>
  </div>
  {% endif %}