Ordergroove Developer Documentation

This section controls the grouping of all items that are about to be sent to the customer. Editing this section should be done in Views > orders-processing.liquid.

For an overview of all elements, take a look at Subscription Manager Components & Containers.

Main Area

The Main area is divided into 2 parts:

Header

Sent-shipment

{# Upcoming orders entry point #}
 <section id="og-sent-shipments" aria-labelledby="shipments-sent-header">
 {# Iterate over all orders #}
 {% for order in orders | select(status='SEND_NOW') %}
 {# The markup within this if block is displayed for all sent orders #}
 {# If at least one sent order exists, display a sent shipment header #}
{% if index == 0 %}
  <h1 class="og-title" id="shipments-sent-header">{{ 'shipment_sent_processing' | t }}</h1>
<div class="og-sent-shipment-info"></div>
{% endif %}
 {% set current_order_items = order_items | select(order=order.public_id) %}
 {% set payment = payments | find(id=order.payment) %}
 {% set shipping_address = addresses | find(id=order.shipping_address) %}
<div class="og-sent-shipment">
{# Shipment body #}
...
</div>{# /og-sent-shipment #}
{% endfor %}
</section>

Sent Shipment

Sent Shipment contains 2 sub areas:

shipment-body

shipment-footer

<div class="og-shipment-body">
 {# Iterate over all order items in the order #}
 {% for order_item in current_order_items %}
 {% set product = products | find(id=order_item.product) %}
 {% set subscription = subscriptions | find(id=order_item.subscription) %}
 {# Order item #}
 <div class="og-product" og-item-id="{{ order_item.public_id }}" og-subscription-id="{{ order_item.subscription }}">
 {% if product %}
 <div class="og-product-image-container">
 <img class="og-product-image" loading="lazy" alt="{{ product.name }}" src="{{ product.image_url | if_defined }}" />
 </div>
 <div class="og-name-price-controls-container">
 <div class="og-description-and-controls">
 <div class="og-product-description">
 <h3 class="og-product-name">
 <a href="{{ product.detail_url | if_defined }}">{{ product.name }}</a>
 </h3>
 <h5 class="og-product-display-name">{{ product.display_name }}</h5>
 </div>{# /og-product-description #}
 <div class="og-price">
 {# The markup within this if block is displayed if the final #}
 {# price represents a discount from the original price #}
 {% if order_item.show_original_price %}
 <span class="og-base-unit-price">{{ order_item.price | currency }}</span>
 {% endif %}
 <span class="og-final-unit-price">{{ (order_item.total_price / order_item.quantity) | currency }}</span>
 <span>{{ 'product_price_each' | t }}</span>
 </div>{# /og-price #}
 </div>{# /og-description-and-controls #}
 {# Quantity control #}
 <div class="og-freq-quantity-controls">
 <div class="og-quantity og-wrapper">
 {{ 'item_controls_sending' | t }}
 <span>{{ order_item.quantity }}</span>
 </div>
 </div>{# /og-freq-quantity-controls #}
 </div>{# /og-name-price-controls-container #}
 {% endif %}
 </div>{# /og-product #}
 {% endfor %}
</div>{# /og-shipment-body #}
{# Shipment footer #}
<div class="og-shipment-footer">
 <details class="og-mobile og-mobile-payment-shipping">
 <div class="og-payment-shipping">
 {% include 'billing-shipping-details' %}
 </div>
 <div class="og-total-table-mobile">
 {% include 'order-total' %}
 </div>
 <summary>
 {{ 'billing_total_header' | t }} - {{ order.total | currency }}
 </summary>
 </details>{# /og-mobile-payment-shipping #}
 <div class="og-payment-shipping og-desktop">
 {% include 'billing-shipping-details' %}
 {% include 'order-total' %}
 </div>{# /og-payment-shipping #}
</div>{# /og-shipment-footer #}

Shipment-body

The Shipment-body section has 2 sub areas:

product image

name-price controls container

<div class="og-product-image-container">
 <img class="og-product-image" loading="lazy" alt="{{ product.name }}" src="{{ product.image_url | if_defined }}" />
</div>
<div class="og-name-price-controls-container">
 <div class="og-description-and-controls">
 <div class="og-product-description">
 <h3 class="og-product-name">
 <a href="{{ product.detail_url | if_defined }}">{{ product.name }}</a>
 </h3>
 <h5 class="og-product-display-name">{{ product.display_name }}</h5>
 </div>{# /og-product-description #}
 <div class="og-price">
 {# The markup within this if block is displayed if the final #}
 {# price represents a discount from the original price #}
 {% if order_item.show_original_price %}
 <span class="og-base-unit-price">{{ order_item.price | currency }}</span>
 {% endif %}
 <span class="og-final-unit-price">{{ (order_item.total_price / order_item.quantity) | currency }}</span>
 <span>{{ 'product_price_each' | t }}</span>
 </div>{# /og-price #}
 </div>{# /og-description-and-controls #}
 {# Quantity control #}
 <div class="og-freq-quantity-controls">
 <div class="og-quantity og-wrapper">
 {{ 'item_controls_sending' | t }}
 <span>{{ order_item.quantity }}</span>
 </div>
 </div>{# /og-freq-quantity-controls #}
</div>{# /og-name-price-controls-container #}

og-billing

og-shipping

og-total-table

{# Shipment footer #}
<div class="og-shipment-footer">
 <details class="og-mobile og-mobile-payment-shipping">
 <div class="og-payment-shipping">
 {% include 'billing-shipping-details' %}
 </div>
 <div class="og-total-table-mobile">
 {% include 'order-total' %}
 </div>
 <summary>
 {{ 'billing_total_header' | t }} - {{ order.total | currency }}
 </summary>
 </details>{# /og-mobile-payment-shipping #}
 <div class="og-payment-shipping og-desktop">
 {% include 'billing-shipping-details' %}
 {% include 'order-total' %}
 </div>{# /og-payment-shipping #}
</div>{# /og-shipment-footer #}

og-billing

footer-header

billing-details-container

change-billing-button

The og-billing panel of an order in the legacy (v0) Subscription Manager, split into three outlined parts. A black outline marks the footer-header, the Billing heading. An olive-yellow outline marks the billing-details-container: a Visa credit card and its expiration date. A pink outline marks the change-billing-button, the Change billing link.

<details class="og-mobile og-mobile-payment-shipping">
 <div class="og-payment-shipping">
 {% include 'billing-shipping-details' %}
 </div>
 <div class="og-total-table-mobile">
 {% include 'order-total' %}
 </div>
 <summary>
 {{ 'billing_total_header' | t }} - {{ order.total | currency }}
 </summary>
</details>{# /og-mobile-payment-shipping #}

This section is pulling in the file billing-shipping-details.liquid and it will output in place of {% include 'billing-shipping-details' %}:

{% if payment %}
 {% set payment_will_be_expired = (payment.orders | find(id=order.public_id)) | get('payment_will_be_expired') %}
 {% set payment_method_names = 'payment_method_names' | t %}
 <div class="og-billing">
 <div class="og-footer-header">
 {{ 'shipment_unsent_footer_billing_header' | t }}
 </div>
 <div class="og-billing-details-container">
 {% if not 'cc_recycling_enabled' | setting %}
 {% if payment.is_expired %}
 <div class="og-payment-is-expired">
 {{ 'payment_is_expired' | t }}
 </div>
 {% elseif payment_will_be_expired %}
 <div class="og-payment-will-be-expired">
 {{ 'payment_will_be_expired' | t }}
 </div>
 {% elseif payment.is_expiring %}
 <div class="og-payment-is-expiring">
 {{ 'payment_is_expiring' | t }}
 </div>
 {% endif %}
 {% endif %}
 <div og-payment-id="{{payment.public_id}}">
 <span class="og-payment-type">{{ payment.cc_type }} {{ payment_method_names[payment.payment_method] }}</span>
 {% if payment.cc_number_ending %}
 <span class="og-payment-last-4">{{ 'form_billing_ending_in' | t }}</span>
 {% endif %}
 </div>
 <div class="og-payment-expiration-date">
 {% if payment.public_id %}
 <span class="og-exp-date">{{ 'form_billing_expiration_date' | t }}</span>
 {% endif %}
 </div>
 </div>{# /og-billing-details-container #}
 {% if 'external_payment_enabled' | setting %}
 <a class="og-link og-edit-payment" href="{{ 'external_payment_url' | setting }}">{{ 'shipment_unsent_footer_billing_edit' | t }}</a>
 {% elseif 'platform' | setting('shopify') == 'shopify' %}
 {% include 'change-billing-shopify-only' %} 
 {% endif %}
 </div>{# /og-billing #}
{% endif %}

og-shipping

footer-header

shipping-address-container

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

This section is pulling in the file billing-shipping-details.liquid and from that file will output the following:

{# Shipping info #}
{% if shipping_address %}
 <div class="og-shipping">
 <div class="og-footer-header">
 {{ 'shipment_unsent_footer_shipping_header' | t }}
 </div>
 <div class="og-shipping-address-container" og-address-id="{{shipping_address.public_id}}">
 <div class="og-address-name">{{ shipping_address.first_name }}
 {{ shipping_address.last_name }}</div>
 <div class="og-address-line-1">{{ shipping_address.address }}</div>
 <div class="og-address-line-2">{{ shipping_address.address2 }}</div>
 <div class="og-address-city-state-zip">
 {{ shipping_address.city }}, {{ shipping_address.state_province_code }}
 {{ shipping_address.zip_postal_code }}
 </div>
 </div>
 {% include 'change-shipment-address' %}
 </div>{# /og-shipping #}
{% endif %}

og-total-table

Price grid code is found in order-total.liquid.

footer-header

og-shipment-discount-total

og-shipment-sub-total

og-shipment-shipping-total

og-shipment-total

shipment-total-footer

The og-total-table panel of an order in the legacy (v0) Subscription Manager, with six outlined parts, top to bottom. A gray outline marks the footer-header, the Total heading. Then purple marks og-shipment-discount-total, Subscription Savings $0.50; orange marks og-shipment-sub-total, Subtotal $15.49; dark red marks og-shipment-shipping-total, Shipping $0.00; green marks og-shipment-total, Total $15.49; and blue marks shipment-total-footer, the note that tax may be applied once the order is processed.

The order total table is pulled in from the order-total.liquid file and its output will appear in place of {% include 'order-total' %}:

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

That output from the order-total.liquid file will look like this:

{# Order pricing details #}
<div class="og-total-table">
<div class="og-footer-header og-desktop">{{ 'shipment_sent_price_total' | t }}</div>
<table role="grid" class="og-table">
<tr class="og-pricing-line og-shipment-discount-total">
<th class="og-total-label" scope="row">{{ 'shipment_sent_price_autosave' | t }}</th>
<td class="og-total-value">{{ order.discount_total | currency }}</td>
</tr>
<tr class="og-pricing-line og-shipment-sub-total">
<th class="og-total-label" scope="row">{{ 'shipment_sent_price_subtotal' | t }}</th>
<td class="og-total-value">{{ order.sub_total | currency }}</td>
</tr>
<tr class="og-pricing-line og-shipment-shipping-total">
<th class="og-total-label" scope="row">{{ 'shipment_sent_price_shipping' | t }}</th>
<td class="og-total-value">{{ order.shipping_total | currency }}</td>
</tr>
<tr class="og-pricing-line og-shipment-total">
<th class="og-total-label" scope="row">{{ 'shipment_sent_price_total' | t }}*</th>
<td class="og-total-value">{{ order.total | currency }}</td>
</tr>
</table>
<div class="og-shipment-total-footer">{{ 'total_box_disclaimer' | t }}</div>
</div>{# /og-total-table #}

Orders Processing Section

Main Area

Sent Shipment

Shipment-body

Shipment Footer

og-billing

og-shipping

og-total-table