Hold Orders

Overview:

This allows you to decide how to proceed with a held order - keep as held or release the order for fulfillment.

Settings:

Navigate to the Hold Orders tab.

 Hold Orders

If you utilized the "hold order" option in one of the compliance rules, and an order failed a compliance rule, you will find that order in the Hold Orders page of the DRINKS App. The Shopify Orders page will also indicate if an order is in "Hold" status in the Fulfillment column.

This page allows you to decide to either keep an order in hold (fulfillment) status or release it for fulfillment.

Step 2: Activate App Embeds

Overview

Setting up the various product, state, and compliance settings will help ensure compliance with your orders at the time of checkout. To add compliance functionality during your customer’s entire shopping experience, you’ll need to activate DRINKS Compliance App Extensions.

There are two steps to accomplish this:

1. Enable the App Embeds in your theme editor
2. Add the appropriate changes to your theme files

Enable DRINKS for Your Store

To include DRINKS in your storefront, you must enable its App Embed within your theme:

• From your Admin page (YourSite.myshopify.com/admin), click on the Online Store tab, then navigate to the Customize button of your Current Theme

• From the Editor, click Theme Settings in the bottom left of your screen

• Select the App embeds tab, Locate DRINKS App, and toggle it ON

• Important: Click Save at the top right of your screen

Add DRINKS Compliance Features into Templates

Select Ship to State

DRINKS can add a Ship To state dropdown to your navigation should you choose to with the Display the 'shipping to state' selection in the site header Site Interaction option selected.

To determine where it will be placed, identify the proper location within sections/header.liquid (we recommend placing it adjacent to the mini cart) and add:

<div data-drinks-header-state-select></div>

Note: for the Dawn theme, here is where we recommend its placement.

…
        </details>
      </details-modal>
      <div data-drinks-header-state-select></div>
      {%- if shop.customer_accounts_enabled -%}
      <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">
…

This will cause a “Ship to” state dropdown to appear in the header.

If you would like to add CSS styling that better matches your store, use this CSS selector in your CSS file

div[data-drinks-header-state-select] {
        /* YOUR STYLES HERE */
}

Styling 

Classes are taken from the Dawn theme that Shopify recommends as a base for all Online Store 2.0 themes. Style adjustments may be accomplished by targeting those classes from your theme's css.

Product Filtering

DRINKS can disable any element that pertains to a product that is not compliant for a shopper. Products will be filtered only if all variants are non-compliant.

Filtering Product Listings

To filter all products represented with Dawn's default product card, you would edit snippets/card-product.liquid and change

<div class="card-wrapper underline-links-hover">

By adding these tags to it

data-product-id="{{card_product.id}}" data-drinks-filter

which will yield

<div class="card-wrapper underline-links-hover" data-product-id="{{card_product.id}}" data-drinks-filter>

Within that DOM element, place a new div:

<div data-drinks-filter-message></div>

If you would like to style the messaging to something more appropriate for your storefront, add this snippet to your CSS file and edit accordingly.

div.drinks-filter-message {
        /* YOUR STYLES HERE */
}

This will provide a non-blocking filter to the element – text showing that the product is unavailable, dimming the product image, and disabling the Add to Cart button.

Filtering Product Add to Cart Buttons:

To block interaction with the Add to Cart buttons on Dawn's default Product Display Page, you would edit sections/main-product.liquid and change

<div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}">

By adding these tags to it

data-variant-id="{{ product.selected_or_first_available_variant.id}}" data-drinks-filter="blocking"

Which will yield

<div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}" data-variant-id="{{ product.selected_or_first_available_variant.id}}" data-drinks-filter="blocking">

Within that DOM element, place a new div where you would like the product unavailability message to show:

<div data-drinks-filter-message></div>

If you would like to style the messaging to something more appropriate for your storefront, add this snippet to your CSS file and edit accordingly.

div.drinks-filter-message {
        /* YOUR STYLES HERE */
}

When a product is not available for that state, the following will occur: text showing that the product is unavailable, dimmed product image, and disabled Add to Cart button.

Checkout

You must be on a Shopify Plus plan to utilize DRINKS' checkout features. You must also have the checkout.liquid file present in the layout directory of your production theme. If you don't see it there, contact Shopify support and ask that they "enable the checkout layout." To enable DRINKS features in checkout, simply copy the below code and paste it before the closing </head> tag in your theme's layout/checkout.liquid file:

<script>
      window.drinks = window.drinks || {};

      drinks.config = {
        showDobInputInCheckout: "{{ shop.metafields.drinks.age_checkout }}",
      };
      drinks.messages = {
       "checkout-user-dob-input.label": "Date of Birth",
      };
      drinks.state = {
        checkout: {
          id: "{{ checkout.id }}",
          token: location.pathname.split("/").pop(),
          line_items: [
            {%  for line_item in checkout.line_items %}
            {
              id: {{ line_item.product.id }},
              is_subscription: {{ line_item.product.requires_selling_plan == "true" }}
            } ,

            {%  endfor %}
          ],
          attributes: [
            {% assign drinks_attribute_keys = 'gift,gift_email,gift_message,shipping_type,shipping_additional_data,customer_birthday,license,compliance-check-performed-on' | split: ',' %}
            {% for attribute in checkout.attributes %}
              {%  if drinks_attribute_keys contains attribute.first %}
                {
                  name: "{{ attribute.first  }}",
                  value: "{{ attribute.last || "" }}"
                },
              {% else %}
                {% continue %}
              {% endif %}
            {% endfor %}
          ],
          shippingAddress: {
            provinceCode: "{{ checkout.shipping_address.province_code }}"
          },
        }
      };
      drinks.html_loaded = true;
      window.dispatchEvent(new Event('drinks.html_loaded'));

      window.onload = function() {
        const drinks_cb = Math.round(new Date().getTime() / 1000);
        const drinks_script = document.createElement('script')
        drinks_script.src = `https://shop.drinks.com/extensions/{{ shop.metafields.drinks.extension_version }}/extension.js?cb=${drinks_cb}`
        drinks_script.defer = true
        drinks_script.type = 'text/javascript'
        document.body.appendChild(drinks_script);
      }
    </script>