Orders Processing Section

1
{# Upcoming orders entry point #}
2
 <section id="og-sent-shipments" aria-labelledby="shipments-sent-header">
3
 {# Iterate over all orders #}
4
 {% for order in orders | select(status='SEND_NOW') %}
5
 {# The markup within this if block is displayed for all sent orders #}
6
 {# If at least one sent order exists, display a sent shipment header #}
7
{% if index == 0 %}
8
  <h1 class="og-title" id="shipments-sent-header">{{ 'shipment_sent_processing' | t }}</h1>
9
<div class="og-sent-shipment-info"></div>
10
{% endif %}
11
 {% set current_order_items = order_items | select(order=order.public_id) %}
12
 {% set payment = payments | find(id=order.payment) %}
13
 {% set shipping_address = addresses | find(id=order.shipping_address) %}
14
<div class="og-sent-shipment">
15
{# Shipment body #}
16
...
17
</div>{# /og-sent-shipment #}
18
{% endfor %}
19
</section>

1
<div class="og-shipment-body">
2
 {# Iterate over all order items in the order #}
3
 {% for order_item in current_order_items %}
4
 {% set product = products | find(id=order_item.product) %}
5
 {% set subscription = subscriptions | find(id=order_item.subscription) %}
6
 {# Order item #}
7
 <div class="og-product" og-item-id="{{ order_item.public_id }}" og-subscription-id="{{ order_item.subscription }}">
8
 {% if product %}
9
 <div class="og-product-image-container">
10
 <img class="og-product-image" loading="lazy" alt="{{ product.name }}" src="{{ product.image_url | if_defined }}" />
11
 </div>
12
 <div class="og-name-price-controls-container">
13
 <div class="og-description-and-controls">
14
 <div class="og-product-description">
15
 <h3 class="og-product-name">
16
 <a href="{{ product.detail_url | if_defined }}">{{ product.name }}</a>
17
 </h3>
18
 <h5 class="og-product-display-name">{{ product.display_name }}</h5>
19
 </div>{# /og-product-description #}
20
 <div class="og-price">
21
 {# The markup within this if block is displayed if the final #}
22
 {# price represents a discount from the original price #}
23
 {% if order_item.show_original_price %}
24
 <span class="og-base-unit-price">{{ order_item.price | currency }}</span>
25
 {% endif %}
26
 <span class="og-final-unit-price">{{ (order_item.total_price / order_item.quantity) | currency }}</span>
27
 <span>{{ 'product_price_each' | t }}</span>
28
 </div>{# /og-price #}
29
 </div>{# /og-description-and-controls #}
30
 {# Quantity control #}
31
 <div class="og-freq-quantity-controls">
32
 <div class="og-quantity og-wrapper">
33
 {{ 'item_controls_sending' | t }}
34
 <span>{{ order_item.quantity }}</span>
35
 </div>
36
 </div>{# /og-freq-quantity-controls #}
37
 </div>{# /og-name-price-controls-container #}
38
 {% endif %}
39
 </div>{# /og-product #}
40
 {% endfor %}
41
</div>{# /og-shipment-body #}
42
{# Shipment footer #}
43
<div class="og-shipment-footer">
44
 <details class="og-mobile og-mobile-payment-shipping">
45
 <div class="og-payment-shipping">
46
 {% include 'billing-shipping-details' %}
47
 </div>
48
 <div class="og-total-table-mobile">
49
 {% include 'order-total' %}
50
 </div>
51
 <summary>
52
 {{ 'billing_total_header' | t }} - {{ order.total | currency }}
53
 </summary>
54
 </details>{# /og-mobile-payment-shipping #}
55
 <div class="og-payment-shipping og-desktop">
56
 {% include 'billing-shipping-details' %}
57
 {% include 'order-total' %}
58
 </div>{# /og-payment-shipping #}
59
</div>{# /og-shipment-footer #}

1
<div class="og-product-image-container">
2
 <img class="og-product-image" loading="lazy" alt="{{ product.name }}" src="{{ product.image_url | if_defined }}" />
3
</div>
4
<div class="og-name-price-controls-container">
5
 <div class="og-description-and-controls">
6
 <div class="og-product-description">
7
 <h3 class="og-product-name">
8
 <a href="{{ product.detail_url | if_defined }}">{{ product.name }}</a>
9
 </h3>
10
 <h5 class="og-product-display-name">{{ product.display_name }}</h5>
11
 </div>{# /og-product-description #}
12
 <div class="og-price">
13
 {# The markup within this if block is displayed if the final #}
14
 {# price represents a discount from the original price #}
15
 {% if order_item.show_original_price %}
16
 <span class="og-base-unit-price">{{ order_item.price | currency }}</span>
17
 {% endif %}
18
 <span class="og-final-unit-price">{{ (order_item.total_price / order_item.quantity) | currency }}</span>
19
 <span>{{ 'product_price_each' | t }}</span>
20
 </div>{# /og-price #}
21
 </div>{# /og-description-and-controls #}
22
 {# Quantity control #}
23
 <div class="og-freq-quantity-controls">
24
 <div class="og-quantity og-wrapper">
25
 {{ 'item_controls_sending' | t }}
26
 <span>{{ order_item.quantity }}</span>
27
 </div>
28
 </div>{# /og-freq-quantity-controls #}
29
</div>{# /og-name-price-controls-container #}

1
{# Shipment footer #}
2
<div class="og-shipment-footer">
3
 <details class="og-mobile og-mobile-payment-shipping">
4
 <div class="og-payment-shipping
5
 {% include 'billing-shipping-details' %}
6
 </div>
7
 <div class="og-total-table-mobile">
8
 {% include 'order-total' %}
9
 </div>
10
 <summary>
11
 {{ 'billing_total_header' | t }} - {{ order.total | currency }}
12
 </summary>
13
 </details>{# /og-mobile-payment-shipping #}
14
 <div class="og-payment-shipping og-desktop">
15
 {% include 'billing-shipping-details' %}
16
 {% include 'order-total' %}
17
 </div>{# /og-payment-shipping #}
18
</div>{# /og-shipment-footer #}

1
<details class="og-mobile og-mobile-payment-shipping">
2
 <div class="og-payment-shipping">
3
 {% include 'billing-shipping-details' %}
4
 </div>
5
 <div class="og-total-table-mobile">
6
 {% include 'order-total' %}
7
 </div>
8
 <summary>
9
 {{ 'billing_total_header' | t }} - {{ order.total | currency }}
10
 </summary>
11
</details>{# /og-mobile-payment-shipping #}

1
{% if payment %}
2
 {% set payment_will_be_expired = (payment.orders | find(id=order.public_id)) | get('payment_will_be_expired') %}
3
 {% set payment_method_names = 'payment_method_names' | t %}
4
 <div class="og-billing">
5
 <div class="og-footer-header">
6
 {{ 'shipment_unsent_footer_billing_header' | t }}
7
 </div>
8
 <div class="og-billing-details-container">
9
 {% if not 'cc_recycling_enabled' | setting %}
10
 {% if payment.is_expired %}
11
 <div class="og-payment-is-expired">
12
 {{ 'payment_is_expired' | t }}
13
 </div>
14
 {% elseif payment_will_be_expired %}
15
 <div class="og-payment-will-be-expired">
16
 {{ 'payment_will_be_expired' | t }}
17
 </div>
18
 {% elseif payment.is_expiring %}
19
 <div class="og-payment-is-expiring">
20
 {{ 'payment_is_expiring' | t }}
21
 </div>
22
 {% endif %}
23
 {% endif %}
24
 <div og-payment-id="{{payment.public_id}}">
25
 <span class="og-payment-type">{{ payment.cc_type }} {{ payment_method_names[payment.payment_method] }}</span>
26
 {% if payment.cc_number_ending %}
27
 <span class="og-payment-last-4">{{ 'form_billing_ending_in' | t }}</span>
28
 {% endif %}
29
 </div>
30
 <div class="og-payment-expiration-date">
31
 {% if payment.public_id %}
32
 <span class="og-exp-date">{{ 'form_billing_expiration_date' | t }}</span>
33
 {% endif %}
34
 </div>
35
 </div>{# /og-billing-details-container #}
36
 {% if 'external_payment_enabled' | setting %}
37
 <a class="og-link og-edit-payment" href="{{ 'external_payment_url' | setting }}">{{ 'shipment_unsent_footer_billing_edit' | t }}</a>
38
 {% elseif 'platform' | setting('shopify') == 'shopify' %}
39
 {% include 'change-billing-shopify-only' %} 
40
 {% endif %}
41
 </div>{# /og-billing #}
42
{% endif %}

1
<div class="og-payment-shipping og-desktop">
2
 {% include 'billing-shipping-details' %}
3
</div>{# /og-payment-shipping #}

1
{# Shipping info #}
2
{% if shipping_address %}
3
 <div class="og-shipping">
4
 <div class="og-footer-header">
5
 {{ 'shipment_unsent_footer_shipping_header' | t }}
6
 </div>
7
 <div class="og-shipping-address-container" og-address-id="{{shipping_address.public_id}}">
8
 <div class="og-address-name">{{ shipping_address.first_name }}
9
 {{ shipping_address.last_name }}</div>
10
 <div class="og-address-line-1">{{ shipping_address.address }}</div>
11
 <div class="og-address-line-2">{{ shipping_address.address2 }}</div>
12
 <div class="og-address-city-state-zip">
13
 {{ shipping_address.city }}, {{ shipping_address.state_province_code }}
14
 {{ shipping_address.zip_postal_code }}
15
 </div>
16
 </div>
17
 {% include 'change-shipment-address' %}
18
 </div>{# /og-shipping #}
19
{% endif %}

1
<div class="og-payment-shipping og-desktop">
2
 {% include 'order-total' %}
3
</div>{# /og-payment-shipping #}

1
{# Order pricing details #}
2
<div class="og-total-table">
3
<div class="og-footer-header og-desktop">{{ 'shipment_sent_price_total' | t }}</div>
4
<table role="grid" class="og-table">
5
<tr class="og-pricing-line og-shipment-discount-total">
6
<th class="og-total-label" scope="row">{{ 'shipment_sent_price_autosave' | t }}</th>
7
<td class="og-total-value">{{ order.discount_total | currency }}</td>
8
</tr>
9
<tr class="og-pricing-line og-shipment-sub-total">
10
<th class="og-total-label" scope="row">{{ 'shipment_sent_price_subtotal' | t }}</th>
11
<td class="og-total-value">{{ order.sub_total | currency }}</td>
12
</tr>
13
<tr class="og-pricing-line og-shipment-shipping-total">
14
<th class="og-total-label" scope="row">{{ 'shipment_sent_price_shipping' | t }}</th>
15
<td class="og-total-value">{{ order.shipping_total | currency }}</td>
16
</tr>
17
<tr class="og-pricing-line og-shipment-total">
18
<th class="og-total-label" scope="row">{{ 'shipment_sent_price_total' | t }}*</th>
19
<td class="og-total-value">{{ order.total | currency }}</td>
20
</tr>
21
</table>
22
<div class="og-shipment-total-footer">{{ 'total_box_disclaimer' | t }}</div>
23
</div>{# /og-total-table #}