Ordergroove Developer Documentation

This article contains information about the Orders Unsent Section in the Subscription Manager. For an overview of all elements, take a look at Subscription Manager Components & Containers.

The order-unsent.liquid file can be broken down into three sections:

Header

Body

Footer

In this section:

Next Order Date

Order Action Buttons

Next Order Date

It can be found here:

<div class="og-shipment-info">
	<span class="og-shipment-on og-desktop">{{ 'shipment_unsent_header' | t }}</span>
	{{ order.place | date }}
	<div class="og-mobile">
		{% include 'change-date' %}
	</div>
</div>

Order Action Buttons

The order action buttons in the header can be found in this part of the code:

{# Shipment controls #}
	<div class="og-shipment-header-controls og-desktop">
		{% include 'change-date' %}
		{% include 'send-now' %}
		{% include 'skip' %}
	</div>

Each button has its own liquid file:

Change Date — {% include 'change-date' %} → change-date.liquid
Send Now — {% include 'send-now' %} → send-now.liquid
Skip — {% include 'skip' %} → skip.liquid

Body

Like the header, this section is broken down into the following smaller sub-sections.

• OG Product

This section contains:

• Product Image Container

• Product Name and Price Container

• Product and Controls

• Product Description

• Frequency and Quantity Controls

• Remove Action Controls

• Price

The section can be found here:

<div class="og-product" og-item-id="{{ order_item.public_id }}" og-subscription-id="{{ order_item.subscription }}">

• Product Image Container

This section holds the product image and can be found here:

<div class="og-product-image-container">
	<img class="og-product-image" loading="lazy" alt="{{ product.name }}" src="{{ product.image_url | if_defined }}" />
</div>

• Product Name and Price Container

The section can be found here:

<div class="og-name-price-controls-container">

• Product and Controls

<div class="og-description-and-controls">

• Product Description

This section contains:

Product Name
SKU Swap
Item Price for Mobile

The section can be found here:

<div class="og-product-description" ?data-prepaid="{{ is_prepaid }}">
	<h3 class="og-product-name">
		<a href="{{ product.detail_url | if_defined }}">{{ product.name }}</a>
	</h3>
	<h4 class="og-product-display-name">{{ product.display_name }}</h4>
	{% if subscription %}
		{# Change product control #}
		{% include 'change-product' %}
	{% endif %}
	<div class="og-mobile">
		{% include 'order-item-price' %}
	</div>
</div>

• Frequency and Quantity Controls

The section can be found here:

<div class="og-freq-quantity-controls">
	{% if subscription %}
	{# Quantity control #}
		{% include 'change-quantity'%}
	{# Frequency control #}
	<div class="og-freq">
		<span>{{ 'item_controls_every' | t }}</span>
		{% include 'change-subscription-frequency' %}
	</div>
{% else %}
	<div class="og-freq-quantity-controls">
		{# Quantity control #}
		{% include 'change-quantity'%}
		{# One Time Frequency Display #}
		<div class="og-freq">
			<span>{{ 'one_time_notice' | t }}</span>
		</div>
	</div>
{% endif %}
</div>{# /og-freq-quantity-controls #}

• Remove Action Controls

The section can be found here:

<div class="og-item-remove-actions">
{# If the order item has a subscription, display subscription controls #}
{% if subscription %}
{# Cancel subscription control #}
{% include 'cancel-subscription' %}
{# Pause subscription control #}
{% include 'pause-subscription' %}
{% endif %}
{# If the order item is one time or belongs to an order with more than one order item, display delete item control #}
{% if current_order_items.length > 1 or not subscription %}
{% include 'delete-item' %}
{% endif %}
</div>

Cancel subscription, pause subscription, and remove item each have their own liquid file:

Cancel Subscription — {% include 'cancel-subscription' %} → cancel-subscription.liquid
Pause Subscription — {% include 'pause-subscription' %} → pause-subscription.liquid
Remove Item — {% include 'delete-item' %} → delete-item.liquid

• Price

The section can be found here:

<div class="og-desktop">
	{% include 'order-item-price' %}
</div>

This is for desktop only.

This section contains:

Billing and Shipping

Order Price Summary

The code can be found here:

<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>
<div>
{{ 'billing_total_header' | t }} - {{ order.total | currency }}
</div>
</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 #}

Billing and Shipping — {% include 'billing-shipping-details' %} → billing-shipping-details.liquid
Order Price Summary — {% include 'order-total' %} → order-total.liquid