Create a draft order from the cart, with Mechanic.

Mechanic is a development and ecommerce automation platform for Shopify. :)

Create a draft order from the cart

Use this task as a starting point, for allowing visitors to submit their carts to be transformed into draft orders, associated with their customer account. Installing and customizing this task requires some level of comfort with Liquid, HTML, and JavaScript.

Runs . Configuration includes shared secret, mechanic webhook event topic, and mechanic webhook url.

15-day free trial – unlimited tasks

Documentation

Use this task as a starting point, for allowing visitors to submit their carts to be transformed into draft orders, associated with their customer account. Installing and customizing this task requires some level of comfort with Liquid, HTML, and JavaScript.

Installation

  1. Create a Mechanic webhook (learn how), and update this task's options to reflect the webhook's configuration. Use whatever event topic you like - "user/carts/draft_order", for example. :)
  2. In an appropriate place in your cart template, add a button to send the cart data to Mechanic. Use the following code to get started:

    <input
      type="button"
      id="mechanic_cart_submit"
      value="Send to Mechanic"
      data-cart="{{ cart | json | escape }}"
      data-customer-id="{{ customer.id | json | escape }}"
      data-customer-id-signature="{{ customer.id | hmac_sha256: "secret!" | json | escape }}"
    >
    

    Note the "secret!" - this must match the "Shared secret" option you choose in the task's configuration. It can be any value you like, as long as it's exactly equal between your task configuration and your theme code.

  3. Adjust to taste. :) The code in the task script and in the online storefront JavaScript are meant to be a beginning point, as you build out the experience you're looking for. If you have any questions about the Mechanic side of this, get in touch!

Developer details

Mechanic is designed to benefit everybody: merchants, customers, developers, agencies, Shopifolks, everybody.

That’s why we make it easy to configure automation without code, why we make it easy to tweak the underlying code once tasks are installed, and why we publish it all here for everyone to learn from.

(By the way, have you seen our documentation? Have you joined the Slack community?)

Open source
View on GitHub to contribute to this task
Subscriptions
{{ options.mechanic_webhook_event_topic__required }}
Tasks use subscriptions to sign up for specific kinds of events. Learn more
Options
shared secret (required), mechanic webhook event topic (required), mechanic webhook url (required)
Code
{% assign line_items = array %}

{% for item in event.data.cart.items %}
  {% assign line_item = hash %}
  {% assign line_item["variant_id"] = item.variant_id %}
  {% assign line_item["quantity"] = item.quantity %}
  {% assign line_items[line_items.size] = line_item %}
{% endfor %}

{% if event.data.customerId %}
  {% assign expected_signature = event.data.customerId | hmac_sha256: options.shared_secret__required %}
  {% if expected_signature == event.data.customerIdSignature %}
    {% assign customer_id = event.data.customerId %}
  {% endif %}
{% endif %}

{% action "shopify" %}
  [
    "create",
    "draft_order",
    {
      "customer": {
        "id": {{ customer_id | json }}
      },
      "line_items": {{ line_items | json }}
    }
  ]
{% endaction %}
Task code is written in Mechanic Liquid, an extension of open-source Liquid enhanced for automation. Learn more
Online store JavaScript
const mechanicCartSubmit = document.querySelector('#mechanic_cart_submit');

if (mechanicCartSubmit) {
  mechanicCartSubmit.addEventListener('click', (event) => {
    fetch({{ options.mechanic_webhook_url__required | json }}, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        cart: JSON.parse(event.target.dataset.cart),
        customerId: JSON.parse(event.target.dataset.customerId),
        customerIdSignature: JSON.parse(event.target.dataset.customerIdSignature),
      }),
    }).then(data => {
      console.log('Sending cart data to Mechanic: Success!', data);
    })
    .catch((error) => {
      console.error('Sending cart data to Mechanic: Error!', error);
    });
  });
}
When this task is installed, this code is loaded into the online storefront using a ScriptTag.