POS email to customer

Sent to the customer by Shopify if they leave checkout before they buy the items in their cart.

تسوق اونلاين من {{ shop_name }}
{% capture email_title %}
  أكمل عملية الشراء
{% endcapture %}

<!DOCTYPE html>
<html lang="ar">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
/*
 * Arabic Shopify Notifications - By Enfitah - www.enfitah.com
 */

body {
        direction: rtl
}

.container {
    text-align: right;
}

.actions {
    margin-top: 20px
}

.main-action-cell {
    float: right;
    margin-left: 15px;
        margin-right: unset
}

@media (max-width: 600px) {
    .main-action-cell {
        margin-left: 0 !important;
                margin-right: unset !important;
    }
}

.text-icon {
    padding-left: 8px;
        padding-right: unset
}

.order-number__cell {
    text-align: left;
}

@media (max-width: 600px) {
    .order-number__cell {
        text-align: right !important;
    }
}

.or {
    margin-left: 10px;
        margin-right: unset;
}

@media (max-width: 600px) {
    .or {
        margin-left: 0 !important;
                margin-right: unset !important;
    }
}

.customer-info__item-credit {
    margin-left: 10px;
        margin-right: unset;
}

.order-list__product-image {
    margin-left: 15px;
        margin-right: unset;
}

.order-list__item-original-price {
    text-align: left;
}

.order-list__item-price {
    text-align: left;
    margin-right: 15px;
        margin-left: unset;
}

.subtotal-line__value {
    text-align: left
}
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
    .top-border { border-top-width: 1px; border-top-color: #e5e5e5; border-top-style: solid;}
</style>
</head>

  <body>
    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>
        <table class="container">
          <tr>
            <td>

              <table class="row">
                <tr>
                  <td class="shop-name__cell">
                    {% if shop.email_logo_url %}
                      {%- assign h1_style = 'margin-top: 10px;' -%}
                      {%- assign h1_link_style = 'margin-right: 10px;' -%}

                      <img
                        src="{{shop.email_logo_url}}"
                        alt="{{ shop.name }}"
                        width="56"
                        height="56"
                        style="float: right; border-radius: 50%;"
                      >
                    {% endif %}

                    <h1 class="shop-name__text" style="{{ h1_style }}">
                      <a href="{{shop.url}}" style="{{ h1_link_style }}">{{ shop.name }}</a>
                    </h1>
                  </td>

                  <td class="order-number__cell">
                    <span class="order-number__text">
                      {{ draft_order.name }}
                    </span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>


          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>

            <table class="row actions">
  <tr>
    <td class="empty-line">&nbsp;</td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ checkout_url }}" class="button__text">متابعة عملية الدفع</a></td>
        </tr>
      </table>

      <table class="link secondary-action-cell">
        <tr>
          <td class="link__cell">
            أو <a href="{{ shop.url }}">زيارة متجرنا</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>


            {% if custom_message != blank %}
              <br>
              <p style="font-weight: normal; color: #000;">{{ custom_message }}</p>
            {% endif %}

            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

          <table class="row section top-border">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>ملخص الطلب</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            <table class="row">
  {% for line in subtotal_line_items %}
    <tr class="order-list__item">
      <td class="order-list__item__cell">
        <table>
          <td>
            {% if line.image %}
              <img
                src="{{ line | img_url: 'compact_cropped' }}"
                align="right"
                width="60"
                height="60"
                class="order-list__product-image"
              />
            {% endif %}
          </td>

          <td class="order-list__product-description-cell">
            {% if line.product.title %}
              {% assign line_title = line.product.title %}
            {% else %}
              {% assign line_title = line.title %}
            {% endif %}

            {% assign line_display = line.quantity  %}

            <span class="order-list__item-title">
              {{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}
            </span>
            <br/>

            {% if line.variant.title != blank and line.variant.title != 'Default Title' %}
              <span class="order-list__item-variant">
                {{ line.variant.title }}
              </span>
              <br/>
            {% endif %}

            {% if line.discount_allocations %}
              {% for discount_allocation in line.discount_allocations %}
                {% if discount_allocation.discount_application.target_selection != 'all' %}
                  <p>
                    <span class="order-list__item-discount-allocation">
                      <img
                        src="{{ 'notifications/discounttag.png' | shopify_asset_url }}"
                        width="18"
                        height="18"
                        class="discount-tag-icon"
                      />
                      <span>
                        {{ discount_allocation.discount_application.title | upcase }}
                        (-{{ discount_allocation.amount | money }})
                      </span>
                    </span>
                  </p>
                {% endif %}
              {% endfor %}
            {% endif %}
          </td>

          <td class="order-list__price-cell">
            {% if line.original_line_price != line.final_line_price %}
              <del class="order-list__item-original-price">
                {{ line.original_line_price | money }}
              </del>
            {% endif %}

            <p class="order-list__item-price">
              {% if line.final_line_price > 0 %}
                {{ line.final_line_price | money }}
              {% endif %}

            </p>
          </td>
        </table>
      </td>
    </tr>
  {% endfor %}
</table>

            <table class="row subtotal-lines">
  <tr>
    <td class="subtotal-spacer"></td>
    <td>
      <table class="row subtotal-table">
        {% assign order_discount_count = 0 %}
{% assign total_order_discount_amount = 0 %}

{% for discount_application in discount_applications %}
  {% if discount_application.target_selection == 'all' and discount_application.target_type == 'line_item' %}
    {% assign order_discount_count = order_discount_count | plus: 1 %}
    {% assign total_order_discount_amount = total_order_discount_amount | plus: discount_application.total_allocated_amount  %}
  {% endif %}
{% endfor %}


{% if order_discount_count > 0 %}
  
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>الخصومات</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>-{{ total_order_discount_amount | money }}</strong>
  </td>
</tr>


  {% for discount_application in discount_applications %}
    {% if discount_application.target_selection == 'all' and discount_application.target_type != 'shipping_line' %}
      <tr class="subtotal-line">
        <td class="subtotal-line__title">
          <p>
            <span class="subtotal-line__discount">
              <img
                src="{{ 'notifications/discounttag.png' | shopify_asset_url }}"
                width="18"
                height="18"
                class="discount-tag-icon"
              />
              <span class="subtotal-line__discount-title">
                {{ discount_application.title | upcase }}&nbsp;(-{{ discount_application.total_allocated_amount | money }})
              </span>
            </span>
          </p>
        </td>
      </tr>
    {% endif %}
  {% endfor %}
{% endif %}



<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>المجموع الفرعي</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ subtotal_price | money }}</strong>
  </td>
</tr>



          
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>الضرائب المقدرة</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ tax_price | money }}</strong>
  </td>
</tr>

      </table>

      <table class="row subtotal-table top-border" style="margin-top: 10px;">
        
<tr class="subtotal-line">
  <td class="subtotal-line__title">
    <p>
      <span>الإجمالي</span>
    </p>
  </td>
  <td class="subtotal-line__value">
      <strong>{{ total_outstanding | money }}</strong>
  </td>
</tr>

      </table>
    </td>
  </tr>
</table>


            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

          {% if shipping_address or billing_address %}
            <table class="row section top-border">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>معلومات العميل</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
              <table class="row">
                <tr>
                  {% if shipping_address %}
                    <td class="customer-info__item">
                      <h4>عنوان الشحن</h4>
                      {{ shipping_address | format_address }}
                    </td>
                  {% endif %}

                  {% if billing_address %}
                    <td class="customer-info__item">
                      <h4>عنوان الفواتير</h4>
                      {{ billing_address | format_address }}
                    </td>
                  {% endif %}
                </tr>
              </table>

            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>
          {% endif %}

          <table class="row footer">
  <tr>
    <td class="footer__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <p class="disclaimer__subtext">
                إذا كان لديك أي أسئلة، يرجى الرد على هذا البريد الإلكتروني أو الاتصال بنا على <a href="mailto:{{ shop.email }}">{{ shop.email }}</a>
              </p>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

        </td>
      </tr>
    </table>
  </body>
</html>

Last updated