CODEWITHSUNDEEP
shopifyshopify-template
aj noguerra
aj noguerra

Reputation: 97

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?

Upvotes: 1

Views: 2781

Answers (2)

aj noguerra
aj noguerra

Reputation: 97

Solution by @chefjuanpi works. I have tried it and it works. Here are the sample fields I have created.

  <p class="cart-attribute__field">
      <label for="business-name">Business Name</label>
      <input form="cart" id="business-name" type="text" name="attributes[Business Name]" value="{{ cart.attributes["Business Name"] }}">
  </p>
  <p class="cart-attribute__field">
      <label for="tagline">Tagline</label><small>(If applicable)</small>
      <input form="cart" id="tagline" type="text" name="attributes[Tagline]" value="{{ cart.attributes["Tagline"] }}">
  </p>
  <p class="cart-attribute__field">
      <label for="colors">Colors</label>
      <input form="cart" id="colors" type="text" name="attributes[Colors]" value="{{ cart.attributes["Colors"] }}">
  </p>
  <p class="cart-attribute__field">
      <label for="upload">Upload Logo</label>
      <input form="cart" id="upload" type="file" name="attributes[Upload]" class="product-form__input">
  </p>

Upvotes: 0

chefjuanpi
chefjuanpi

Reputation: 1697

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" />

Upvotes: 3

Related Questions