CODEWITHSUNDEEP
shopify
Dimple Rani
Dimple Rani

Reputation: 11

how can I add products in a cart in Shopify by through a form in which only product name field is taken?

I have made a form page in Shopify in which following fields I have taken:-

<form  action="/cart" method="post">

        {% comment %}
          Successful message
        {% endcomment %}
        {% if form.posted_successfully? %}
          <p class="note form-success">
            {{ 'contact.form.post_success' | t }}
          </p>
        {% endif %}

        <div class="selection-wrapper">
          {{ form.errors | default_errors }}
        </div>

        <div class="selection-wrapper">
          <div class="grid">


              <label for="Name" class="hidden-label">Name*</label>
            <div class="grid__item medium-up--one-half">
          <input type="text" style="width:100%;" name="first_name" id="FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} required>
          <label for="FirstName">{{ 'customer.register.first_name' | t }}</label>
            </div>
            <div class="grid__item medium-up--one-half">  

        <input type="text"  style="width:100%;" name="last_name" id="LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %}>
           <label for="LastName">{{ 'customer.register.last_name' | t }}</label>
            </div>

          </div>
          <br/>


          <div class="grid">
               <label for="Email" class="hidden-label">Email Address *</label>

      <input type="email" style="width:100%;"  id="Email"  name="email" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
          </div>
          <br/>
          <div class="grid">
            <label for="ContactFormPhone" class="hidden-label">Key Code Card Number*</label>
            <input type="text" id="key_cord_card_no"  style="width:100%;" name="keyCordCardNo"  value="{{ form.keyCordCardNo }}" required>
          </div>
          <br/>
          <div class="grid">
            <label for="Product Name" class="hidden-label">Product Name*</label>
            <input type="text" id="productName"  style="width:100%;" name="product_name"  value="{{ form.product_name }}" required>

         the  </div>
           <div class="grid">
          <p class="submit">
            <input type="submit" class="button solid" value="submit">
          </p>
          </div>
        </div>

        </form>

I have to add product to cart by its name how can i do it? How can I add products in a cart in Shopify by through a form in which only product name field is taken?

Upvotes: 0

Views: 294

Answers (1)

drip
drip

Reputation: 12943

The short answer is - you can't add a product only by his name.

A product MUST have a variant ID in order for you to submit it to the cart.

The long answer is:

The only way to add a product by it's name is if you make an AJAX request to the product page and get the variant ID from there and submit that.

You always buy a variant in Shopify, even if a product doesn't have any variants it always have a defaut variant which is bought.

So if you plan to allow the customer to enter the product name in a text field you will need to make an AJAX request to the search page ( since I assume the customer won't be able to enter the exact name of the product in order for you to make a direct AJAX request ) and get the first result ( it will be best if you add the variant ID in the result item as a data attribute for example or some other way so that you don't need to make a second AJAX call to the product page itself ) and submit that to the cart.

Since the information given is so little I can't provide you any code or further instructions how to proceed.

Upvotes: 2

Related Questions