🛍️ Shopify Order Status: Mock order data

[bangank36]

Summary

• Since we can not use json folder on order object in Shopify, need to mock these kind of data to the preview Mock order data and other shopify object by create new filter in LiquidJs

// register new Filter
engine.registerFilter("jsonToObject", (json) => JSON.parse(json));

• Beside liquidJs playground, can use jumpseller as reference

[bangank36]

Mar 21 2023

• To display the data on the page, we need to implement these things
• [x] Implement code component using code-mirror #4 https://github.com/bangank36/shopify-order-status-editor/blob/6127381b55d20b92cd383f592e652530951785f0/src/components/code/index.js#L9
• [x] Create 2 code component on the page, one to display the liquid injection #6 https://github.com/bangank36/shopify-order-status-editor/blob/6127381b55d20b92cd383f592e652530951785f0/src/pages/index.js#L87
• [x] Display the output code which is run against the mock order data #6 https://github.com/bangank36/shopify-order-status-editor/blob/6127381b55d20b92cd383f592e652530951785f0/src/pages/index.js#L60
• [x] Use react-liquidjs to create new json filter #6 https://github.com/bangank36/shopify-order-status-editor/blob/6127381b55d20b92cd383f592e652530951785f0/src/pages/index.js#L38

[bangank36]

Mar 22 2023

• To start mocking order data, there are something to note about how Shopify parse these on the post order page
• Nit: some properties can be accessed directly order_number, total_price, like in this page
  • Follow up topic
  • Turns out these variables are available on liquid itself
  • TODO: filter out these variables and check against their existing on post order page https://github.com/bangank36/shopify-order-status-editor/issues/5
• Note all properties of order object can be extracted directly by accessing by its name, such as: order.customer returned as CustomerFromAddressableDrop, it only reveal with order.customer.email
• I wrote a simple liquid code to identify those props, using json filter

  
  {%  assign orderAttr = 'attributes,billing_address,cancel_reason,cancel_reason_label,cancelled,cancelled_at,cart_level_discount_applications,created_at,customer,customer_order_url,customer_url,discount_applications,discounts,email,financial_status,financial_status_label,fulfillment_status,fulfillment_status_label,id,item_count,line_items,line_items_subtotal_price,metafields,name,note,order_number,order_status_url,phone,shipping_address,shipping_methods,shipping_price,subtotal_line_items,subtotal_price,tags,tax_lines,tax_price,total_discounts,total_duties,total_net_amount,total_price,total_refunded_amount,transactions' %}
  {% assign my_array = orderAttr | split: "," %}
  {% assign orderJson = '{}' %}

{% for key in my_array %} {% endfor %}

Key	Value
{{ key }}	{{ order[key] | json }}

## Un-parsable `order` props
|  Prop | Error | Notes |
|---|------|-------|
|  customer |   `{"error":"json not allowed for this object"} `  |    [docs](https://shopify.dev/docs/api/liquid/objects/customer)   |
|  metafields |   `{"error":"json not allowed for this object"} `  |   [docs](https://shopify.dev/docs/api/liquid/objects/metafield)    |
|  tax_lines |   `{"error":"json not allowed for this object"} `  |   [docs](https://shopify.dev/docs/api/liquid/objects/tax_line)    |
|  transactions |   `{"error":"json not allowed for this object"} `  |  [docs](https://shopify.dev/docs/api/liquid/objects/transaction)     |

[bangank36]

Mar 22 2023

• Continue update on the liquid object on post order page
• Merchant can access to checkout and shop object, besides order object, according to this page
• [x] List all checkout props and extract it to mockCheckout https://github.com/bangank36/shopify-order-status-editor/blob/4e819b88517705cb84f94f11625666d9928181e7/src/mock/checkout.js#L6
• [x] List all shop props and extract it to mockShop https://github.com/bangank36/shopify-order-status-editor/blob/4e819b88517705cb84f94f11625666d9928181e7/src/mock/shop.js#L7
• [x] Create the variables mock data based those 3 mock https://github.com/bangank36/shopify-order-status-editor/issues/5

[bangank36]

Closed as relevant tickets has been solved. Should add more data into the comments if there are more insights