Search code examples
shopifyshopify-template

Shopify DAWN Theme - Add custom fields in Cart page and Show results in Orders Admin panel


Tried the solution given by another Developer in adding custom fields inside the Shopify theme cart page by generating the fields from here - https://ui-elements-generator.myshopify.com/pages/cart-attribute, and placing them inside the form tags of my Cart template. It works with Debut theme, however, when I tried testing it in Dawn, the form shows but the data never appeared inside my Orders (Admin Panel).

Is there an alternative solution for 2.0 themes, specifically Shopify Dawn theme?


Solution

  • The UI generator mise form="cart" this will make the magic. It will add the element to the cart form no matter where they are on the screen.

    Why use that? well, remember the principle on 2.0 is flexibility using blocks, apps blocks, moving it around the screen, organizing differently, etc. form="cart" give this flexibility on the cart page

    I use something like that on an app I write to add PO numbers on the orders.

    The result using the UI generator should be:

        <p class="cart-attribute__field">
          <label for="long-custom-text">Long Custom Text</label>
          <textarea 
            required 
            form="cart" 
            class="required"
            id="long-custom-text" 
            name="attributes[Long Custom Text]"
          >
            {{ cart.attributes["Long Custom Text"] }}
          </textarea>
        </p>
    

    the other very important part is Name the part inside the braquets is how it will appears on the admin side and how you should search the info on the order name="attributes[Long Custom Text]"

    You can change what is inside the brackets Long Custom Text but the rest of the name should be there.

    <input type="text" name="attributes[other custom Atribute]" form="cart" />
    <input type="email" name="attributes[custom email]" form="cart" />