Question 11909 in Shopify Question posted in
The Shopify help center can be found here.

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search