create-a-draft-order-from-the-cart

Create a draft order from the cart

Tags: Cart, Draft Orders

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.

• View in the task library: tasks.mechanic.dev/create-a-draft-order-from-the-cart
• Task JSON, for direct import: task.json
• Preview task code:
  • script.liquid
  • online_store_javascript.js.liquid

Default options

{
  "shared_secret__required": null,
  "mechanic_webhook_event_topic__required": null,
  "mechanic_webhook_url__required": null
}

Learn about task options in Mechanic

Subscriptions

{{ options.mechanic_webhook_event_topic__required }}

Learn about event subscriptions in Mechanic

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!

Installing this task

Find this task in the library at tasks.mechanic.dev, and use the "Try this task" button. Or, import this task's JSON export – see Importing and exporting tasks to learn how imports work.

Contributions

Found a bug? Got an improvement to add? Start here: ../../CONTRIBUTING.md.

Task requests

Submit your task requests for consideration by the Mechanic community, and they may be chosen for development and inclusion in the task library!