时间戳

首页 > 解决方案 > 如何通过仅采用产品名称字段的表单在 Shopify 的购物车中添加产品？

shopify - 如何通过仅采用产品名称字段的表单在 Shopify 的购物车中添加产品？

问题描述

我在 Shopify 中创建了一个表单页面，其中我填写了以下字段：-

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

我必须按名称将产品添加到购物车中，我该怎么做？如何通过仅采用产品名称字段的表单在 Shopify 的购物车中添加产品？

标签： shopify

解决方案

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.

推荐阅读