"i only speak liquid" #2: Cart Drawer and Line Item Properties

How to use "FormData" object and improve your AJAX cart

Author

Roberto Senabre
June 15, 2022

Hey all,

Welcome to "i only speak liquid", where active Shopify developers like me (Roberto) share learnings we face daily. If you want to show support, checkout ORBE: The best geolocation app for Shopify.

PS: I'm an expert on Storetasker and take on freelance projects from their client base. I've worked on Cubitts and other fantastic brands. Apply here if you want in.

What I’ve been thinking about:

Line item properties are custom form fields that you can add to the product page, allowing customers to make choices or add information about a product. For example, if you offer product engraving, then you can use line item properties to let customers enter the text that they want engraved on the product. It allows merchants to collect custom information for each item added to the cart.

Last week, one client from Australia wanted their customers to attach an image to customize their item before adding it to the cart. In addition, they needed to change the user's instructions for each product they wish to enable this file upload input.

Metafield Definition

We thought the best way to do this would be to create a custom metafield definition. In doing so, if the merchant added a metafield definition on a product, that input field with file upload instructions would show up on the front-end:

{%- if product.metafields.inputs.file_upload -%}

<div class="i-only-speak-liquid"></div>

 

 

{%- endif -%}

code snippet for file upload line property

We also needed to change the encoding of the form to allow files to be sent through a POST:

{% form 'product', product, enctype: 'multipart/form-data' %}

code snippet for product-form

This worked well. But only when JavaScript was disabled. Unfortunately, this approach failed to add the file upload line property to the cart with the drawer cart enabled.

We looked into the code and found that because the form submit data was serialised via AJAX, it did not send the file upload. The Dawn theme had the same issue in a previous version.

To solve for that, we can use the FormData object. But in order to use it with the jQuery AJAX call, you must set some additional properties:

var formData = new FormData(document.querySelector('[data-product-form]'));

jquery_default.a.ajax({

type: 'POST',

url: window.Shopify.routes.root + 'cart/add.js',

dataType: 'json',

data: formData,

processData: false, // tell jQuery not to process the data

contentType: false // tell jQuery not to set contentType

});

code snippet

One of those cases which can make you waste hours, but you can fix them in less than 10 minutes!

3 links you can’t miss:

  • Liquid Ajax Cart. It’s not new, but as I talked about the cart, I wanted to share it. It’s a fantastic library cart using Bundled Rendering. So easy to use!

  • Google Local Inventory Sync. New release: Now available in the Shopify Google channel: Enable local product inventory sync to help merchant products get discovered in Google search results.

  • Partners Town Hall. Don’t miss the Town Hall of this June 28th. Let’s see what they have to offer!

One app I like:

Plugin by Blarlo

I like the translation apps that use the GraphQL Admin API from Shopify. Even though front-end translation apps like Weglot usually translate your content faster, I don’t think they are a good option for multilingual stores.

Instead I’ve been recommending my clients to use translation apps like Transcy. But lately, we’ve had performance issues or I found them to miss essential features such as “Glossary”.

I have now a better solution: Plugin. It has a glossary feature, and I love that the team behind it is a well-known translation agency that has Shopify as a client: Blarlo. This app enables you to translate your website with vetted human translators.

One learning as a freelancer:

When I need to send a proposal to a client, I always like to write everything using the same structure. In this way, I can always be aware that both of us (my client and I) have the exact same expectations. I’ve been rewriting this structure many times, and Storetasker's recommendations have been a good inspiration.

  • Context: A brief overview of what the client is looking to solve. For example: “I need to display one image on mobile and another on desktop for my main slideshow section.”

  • Deliverables: What I will do to complete the task. For example: “Create a new image input in the slideshow section to show a different image on mobile devices”.

  • Process: Each step we will take in the development process to get the job done. For example, if it this the 1st task for a client, I will usually explain that we will create a Github repository to set up a development environment for their store.

  • Additional notes: I explain that anything not described below will be out of this project's scope + I use it to add other essential information. For example: If you want to edit the metafields in bulk, you will need to add a paid app such as Matrixify.

Do you add all this kind of information for your clients? Do you think that's much information? Do you have another structure? Please reply to this email and let me know!

I hope you enjoy this second issue. I would appreciate it if you let me know your thoughts and honest feedback by replying to this email, or at least introduce yourself! :)

Speak in 2 weeks,