Custom app data store

[avdhesh7289]

I've developed a Shopify app using an extension block for an order form, which I've integrated into my Shopify store. My goal is to seamlessly convert the data entered by customers into actual orders that appear in the Shopify admin order dashboard. Could someone please guide me through the step-by-step setup process for achieving this?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="order-form">
  <h1>{{ block.settings.form_title }}</h1>
  
  <button class="app-btn" id="orderNowBtn">Order Now </button>
  
  <!-- Popup form -->
  <div id="orderFormPopup" class="popup">
    <div class="popup-content">
      <span class="close-btn" id="closePopup">&times;</span>
      
      <!-- Display product name and image at the top of the form -->
      <div class="form-top">
        <h2>{{ product.title }}</h2>
      {% if product.featured_image %}
        <img src="{{ product.featured_image | img_url: 'small' }}" alt="{{ product.title }}" height="50" width="50" class="product-image"/>
      {% endif %}</div>
      
      <form id="orderForm" class="order-form-content">
        <div>
          <label for="fullName">Full Name</label>
          <input type="text" id="fullName" name="fullName" required placeholder="Full Name">
        </div>
        <div >
          <label  for="mobileNo">Mobile No</label> 
          <input type="text" id="mobileNo" name="mobileNo" required placeholder="+91 ">
        </div>
        <div>
          <label for="address">Address</label>
          <input type="text" id="address" name="address" required placeholder="Address">  
        </div>
        <div>
          <label for="landmark">Nearby Landmark</label>
          <input type="text" id="landmark" name="landmark" required placeholder="Nearby Landmark">
        </div>
        <div>
          <label for="pincode">Pincode</label>
          <input type="text" id="pincode" name="pincode" pattern="\d{6}" required placeholder="Pincode">
        </div>
        <div>
          <label for="state">State</label>
<select id="state" name="state" required>
    <option value="andhra_pradesh">Andhra Pradesh</option>
    <option value="arunachal_pradesh">Arunachal Pradesh</option>
    <option value="assam">Assam</option>
    <option value="bihar">Bihar</option>
    <option value="chhattisgarh">Chhattisgarh</option>
    <option value="goa">Goa</option>
    <option value="gujarat">Gujarat</option>
    <option value="haryana">Haryana</option>
    <option value="himachal_pradesh">Himachal Pradesh</option>
    <option value="jharkhand">Jharkhand</option>
    <option value="karnataka">Karnataka</option>
    <option value="kerala">Kerala</option>
    <option value="madhya_pradesh">Madhya Pradesh</option>
    <option value="maharashtra">Maharashtra</option>
    <option value="manipur">Manipur</option>
    <option value="meghalaya">Meghalaya</option>
    <option value="mizoram">Mizoram</option>
    <option value="nagaland">Nagaland</option>
    <option value="odisha">Odisha</option>
    <option value="punjab">Punjab</option>
    <option value="rajasthan">Rajasthan</option>
    <option value="sikkim">Sikkim</option>
    <option value="tamil_nadu">Tamil Nadu</option>
    <option value="telangana">Telangana</option>
    <option value="tripura">Tripura</option>
    <option value="uttar_pradesh">Uttar Pradesh</option>
    <option value="uttarakhand">Uttarakhand</option>
    <option value="west_bengal">West Bengal</option>
    <option value="andaman_and_nicobar_islands">Andaman and Nicobar Islands</option>
    <option value="chandigarh">Chandigarh</option>
    <option value="dadra_and_nagar_haveli_and_daman_and_diu">Dadra and Nagar Haveli and Daman and Diu</option>
    <option value="lakshadweep">Lakshadweep</option>
    <option value="delhi">Delhi</option>
    <option value="puducherry">Puducherry</option>
    <option value="ladakh">Ladakh</option>
    <option value="jammu_and_kashmir">Jammu and Kashmir</option>
</select>

        </div>
        <div>
          <label for="city">City</label>
          <input type="text" id="city" name="city" required placeholder="City">
        </div>
        <button type="submit" class="app-btn">Complete Order {{ product.price | money }}</button>
      </form>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Order Form",
  "target": "section",
  "class": "app-dashboard-form",
  "stylesheet": "order-app.css",
  "javascript": "order-app.js",
  "settings": [
    {
      "type": "text",
      "id": "form_title",
      "label": "Form Title"
    }
  ]
}
{% endschema %}

[Huptech-Web]

Hello @avdhesh7289 

You can add data in item properties or attributes. If you don't want to display properties on the cart page, prefix all properties with an underscore, like this: _fullName, _mobileNo, _address.

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.