至少需要在Shopify购物车中选择的表格复选框

时间:2015-02-25 22:49:51

标签: javascript shopify

我正在一个网站上工作,我需要在购物车结帐时添加一个“你是如何了解我们的”选项以及销售代表列表。我需要能够选择至少选项。我不擅长代码,所以我尝试过研究和构建它,但它没有用。如果有人能告诉我可能做错了什么,我想我很接近。

HTML和脚本

    </br>
<p><strong>How did you hear about us? If it was from multiple reps, please choose all of them.</strong> <em>(*required)</em>
          <div class="reps">
            <ul>
                <li>            
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Internet]" value="yes" {% if cart.attributes.rep1 %} checked="checked"{% endif %} />
                    <label for="rep1">Internet</label>
                </li>
                <li>
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Facebook]" value="yes" {% if cart.attributes.rep2 %} checked="checked"{% endif %} />
                    <label for="rep2">Facebook</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Instagram]" value="yes" {% if cart.attributes.rep3 %} checked="checked"{% endif %} />
                    <label for="rep3">Instagram</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Pinterest]" value="yes" {% if cart.attributes.rep4 %} checked="checked"{% endif %} />
                    <label for="rep4">Pinterest</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Mary Seldon Andrews]" value="yes" {% if cart.attributes.Mary-Seldon-Andrews %} checked="checked"{% endif %} />
                    <label for="rep5">Mary Seldon Andrews</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Elinor Anthony]" value="yes" {% if cart.attributes.rep6 %} checked="checked"{% endif %} />
                    <label for="rep6">Elinor Anthony</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Sara Brown]" value="yes" {% if cart.attributes.rep7 %} checked="checked"{% endif %} />
                    <label for="rep7">Sara Brown</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Reilly Burnetti]" value="yes" {% if cart.attributes.rep8 %} checked="checked"{% endif %} />
                    <label for="rep8">Reilly Burnetti</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Ellie Carter]" value="yes" {% if cart.attributes.rep9 %} checked="checked"{% endif %} />
                    <label for="rep9">Ellie Carter</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Jilli DeLaney]" value="yes" {% if cart.attributes.rep10 %} checked="checked"{% endif %} />
                    <label for="rep10">Jilli DeLaney</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Haley Dellaccio]" value="yes" {% if cart.attributes.rep11 %} checked="checked"{% endif %} />
                    <label for="rep11">Haley Dellaccio</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Mary Keller Greene]" value="yes" {% if cart.attributes.rep12 %} checked="checked"{% endif %} />
                    <label for="rep12">Mary Keller Greene</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Alex Greene]" value="yes" {% if cart.attributes.rep13 %} checked="checked"{% endif %} />
                    <label for="rep13">Alex Greene</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Anna Gwin]" value="yes" {% if cart.attributes.rep14 %} checked="checked"{% endif %} />
                    <label for="rep14">Anna Gwin</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Claire Hand]" value="yes" {% if cart.attributes.rep15 %} checked="checked"{% endif %} />
                    <label for="rep15">Claire Hand</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Eliza Harmon]" value="yes" {% if cart.attributes.rep16 %} checked="checked"{% endif %} />
                    <label for="rep16">Eliza Harmon</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Leeann Huynh]" value="yes" {% if cart.attributes.rep17 %} checked="checked"{% endif %} />
                    <label for="rep17">Leeann Huynh</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Lillia Jordan" value="yes" {% if cart.attributes.rep18 %} checked="checked"{% endif %} />
                    <label for="rep18">Lillia Jordan</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Cassidy Kotyla]" value="yes" {% if cart.attributes.rep19 %} checked="checked"{% endif %} />
                    <label for="rep19">Cassidy Kotyla</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Elizabeth Moore]" value="yes" {% if cart.attributes.rep20 %} checked="checked"{% endif %} />
                    <label for="rep20">Elizabeth Moore</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Jordan Moore]" value="yes" {% if cart.attributes.rep21 %} checked="checked"{% endif %} />
                    <label for="rep21">Jordan Moore</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Morgan Nail]" value="yes" {% if cart.attributes.rep22 %} checked="checked"{% endif %} />
                    <label for="rep22">Morgan Nail</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Heather Nave]" value="yes" {% if cart.attributes.rep23 %} checked="checked"{% endif %} />
                    <label for="rep23">Heather Nave</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Elizabeth Pearce]" value="yes" {% if cart.attributes.rep24 %} checked="checked"{% endif %} />
                    <label for="rep24">Elizabeth Pearce</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Amanda Przybysz]" value="yes" {% if cart.attributes.rep25 %} checked="checked"{% endif %} />
                    <label for="rep25">Amanda Przybysz</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Emme Slaton]" value="yes" {% if cart.attributes.rep26 %} checked="checked"{% endif %} />
                    <label for="rep26">Emme Slaton</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Kaeleigh Starling]" value="yes" {% if cart.attributes.rep27 %} checked="checked"{% endif %} />
                    <label for="rep27">Kaeleigh Starling</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Morgan Stockard]" value="yes" {% if cart.attributes.rep28 %} checked="checked"{% endif %} />
                    <label for="rep28">Morgan Stockard</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Lorin Taylor]" value="yes" {% if cart.attributes.rep29 %} checked="checked"{% endif %} />
                    <label for="rep29">Lorin Taylor</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Klaudia Virkler]" value="yes" {% if cart.attributes.rep30 %} checked="checked"{% endif %} />
                    <label for="rep30">Klaudia Virkler</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Baird Whichard]" value="yes" {% if cart.attributes.rep33 %} checked="checked"{% endif %} />
                    <label for="rep31">Baird Whichard</label>
                </li>
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Savannah Zechiel]" value="yes" {% if cart.attributes.rep32 %} checked="checked"{% endif %} />
                    <label for="rep32">Savannah Zechiel</label>
                </li>       
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Anna Pizzitola]" value="yes" {% if cart.attributes.rep33 %} checked="checked"{% endif %} />
                    <label for="rep33">Anna Pizzitola</label>
                </li>       
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Alyssa Hope]" value="yes" {% if cart.attributes.rep34 %} checked="checked"{% endif %} />
                    <label for="rep34">Alyssa Hope</label>
                </li>       
                <li>                
                    <input type="hidden" name="attributes[rep]" value="" />
                    <input id="reps" type="checkbox" name="attributes[Other]" value="yes" {% if cart.attributes.rep35 %} checked="checked"{% endif %} />
                    <label for="rep35">Other</label>
                </li>       
        </p>
        </div>

        <script>
            jQuery(function($) { 
                $(document).ready(function() {
                    $('#reps').submit(function() {  
                        var $fields = $(this).find('input[name="attributes[rep]"]:checked');
                        if (!$fields.length) {
                            alert('You must check at least one box!');
                            return false; // The form will *not* submit
                        }
                    });
                });
            });
        </script>

这是shopify购物车页面代码

<!-- Bold: Options --> 
<script>function update_qty_builder(builder_id, qty){ jQuery('.'+builder_id+"_qty").val(qty.value); } function remove_product_builder(builder_id){ jQuery('.'+builder_id+"_qty").val(0); jQuery('.'+builder_id+"_qty").parents("form").submit(); }</script>
{% include 'bold-cart-handler' %}
<div id="cart">

  <!-- Begin empty cart -->
  {% if cart.item_count == 0 %}
  <div class="row">
    <div class="span11 expanded-message">
      <br>
      <br>
      <h2 class="tc">{{ 'cart.general.empty' | t }}</h2>
    </div>
  </div>
  <!-- End empty cart -->

  <!-- Begin cart -->
  {% else %}
  <div class="row">
    <div class="span11">
      <h1>{{ 'cart.general.title' | t }}</h1>
      <form action="/cart" method="post" id="cartform">
        <table>
          <thead>
            <tr>
              <th class="image">{{ 'cart.label.product' | t }}</th>
              <th class="item">&nbsp;</th>
              <th class="qty">{{ 'cart.label.quantity' | t }}</th>
              <th class="price">{{ 'cart.label.price' | t }}</th>
              <th class="remove">&nbsp;</th>
            </tr>
          </thead>
          <tbody>
            {% for item in cart.items %}
            {% if item.properties.master_builder == blank %} <!-- Bold: Options (Part 5) -->
            {% if item.properties.builder_id == blank %}
            <tr class="bold-row">
            {% else %}
            <tr style="display:none" class="bold-row-{{ item.properties.builder_id }} item {{ item.product.handle }}">
            {% endif %}
              <td class="image">
                <div class="product_image">
                  <a href="{{ item.url }}">
                    <img src="{{ item | img_url: 'small' }}"  alt="{{ item.title | escape }}" />
                  </a>
                </div>
              </td>
              <td class="item">
                <a href="{{ item.url }}">
                  <strong>{{ item.product.title }}</strong>
                  {% if item.product.variants.size > 1 %}
                  <span class="variant_title">{{ item.variant.title }}</span>
                  {% endif %}
                </a><br />
                {% for p in item.properties %}
                  {% if p.first == "builder_id" or p.first == "builder_info" or p.first == "master_builder" or p.last == "" %}
                  {% else %}
                  {% unless p.last == blank %}
                  {{ p.first }}:
                    {% if p.last contains '/uploads/' %}
                    <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a><br/>
                    {% else %}
                    {{ p.last }}<br/>
                  {% endif %}
                  <br />
                  {% endunless %}
                  {% endif %}
                {% endfor %}
              </td>
              <td class="qty">
                {% if item.properties.builder_id == blank %}
                <input type="text" size="4" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" onfocus="this.select();" class="tc item-quantity" {% if item.product.metafields.inventory.ShappifyHidden == "true" %} readonly="readonly" {% endif %} />
                {% else %}
                <input data-product-id="{{ item.product.id }}" type="text" size="4" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" onfocus="this.select();" class="tc item-quantity {{ item.properties.builder_id }}_qty" {% if item.product.metafields.inventory.ShappifyHidden == "true" %} readonly="readonly" {% endif %} />
                {% endif %}
              </td>
              <td class="price">{{ item.line_price | money }}</td>
              <td class="remove">
                {% if item.properties.builder_id == blank %}
                <a href="/cart/change?line={{ forloop.index }}&quantity=0" class="cart">{{ 'cart.general.remove' | t }}</a>
                {% else %}
                <a href="/cart/change?line={{ forloop.index }}&quantity=0" class="cart {{ item.properties.builder_id }}_remove">{{ 'cart.general.remove' | t }}</a>
                {% endif %}
              </td>
            </tr>
            {% else %} <!-- Bold: Options (Part 6) -->
            {% if item.properties.builder_info %}
            {% assign builder = item.properties.builder_info | split: '~~' %}
            {% endif %}
            {% assign item_price = 0 %}
            {% assign item_line_price = 0 %}
            {% for price_item in cart.items %}
            {% unless price_item.properties.builder_id == blank %}
            {% if price_item.properties.builder_id == item.properties.builder_id %}
            {% capture temp %}{{ item_price | plus: price_item.price }}{% endcapture %}
            {% assign item_price = temp %}
            {% capture temp %}{{ item_line_price | plus: price_item.line_price }}{% endcapture %}
            {% assign item_line_price = temp %}
            {% endif %}
            {% endunless %}
            {% endfor %}
            <tr class="item bold-row-{{ item.properties.builder_id }} {{ builder[2] }}">
              <td class="image">
                <div class="product_image">
                  <a href="{{ item.url }}">
                    {% if builder[0] %}
                    <img src="{{ builder[1] }}" alt="{{ builder[0] }}" />
                    {% else %}
                    <img src="{{ item | img_url: 'small' }}"  alt="{{ item.title | escape }}" />
                    {% endif %}
                  </a>
                </div>
              </td>
              <td class="item">
                <a href="{{ item.url }}">
                  <strong>{{ item.product.title }}</strong>
                  {% if item.product.variants.size > 1 %}
                  <span class="variant_title">{{ item.variant.title }}</span>
                  {% endif %}
                </a>
                <div class="bold-properties-{{ item.properties.builder_id}}">
                {% for p in item.properties %}
                {% if p.first == "builder_id" or p.first == "builder_info" or p.first == "master_builder" or p.last == "" %}
                {% if p.first == "builder_info" %}{% assign is_builder=true %}{% endif %}
                {% else %}
                <b>{{ p.first }}</b>:
                {% if p.last contains '/uploads/' %}
                <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a><br/>
                {% else %}
                {{ p.last }}<br/>
                {% endif %}
                {% endif %}
                {% endfor %}
                </div>
                <div id="bold-item-{{ item.properties.builder_id }}" data-is-builder="{{ is_builder }}" data-handle="{{ item.product.handle }}" data-variant-id="{{ item.variant.id }}" class="bold-edit-item"></div>

              </td>
              <td class="qty">
                <input type="text" size="4" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" onfocus="this.select();" onchange="update_qty_builder('{{item.properties.builder_id}}', this);" class="tc item-quantity {{ item.properties.builder_id }}_qty" {% if item.product.metafields.inventory.ShappifyHidden == "true" %} readonly="readonly" {% endif %} />
              </td>
              <td class="price">{{ item_line_price | money }}</td>
              <td class="remove"><a href="#" class="cart {{ item.properties.builder_id }}_remove" onclick="remove_product_builder('{{item.properties.builder_id}}');">{{ 'cart.general.remove' | t }}</a></td>
            </tr>

            {% endif %} <!-- Bold: Options (code ends) -->
            {% endfor %}
            <tr class="summary">
              <td class="image">&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td class="price"><span class="total"><strong>{{ cart.total_price | money }}</strong></span></td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>

        <div class="span7 inner-left inner-right">
          <div class="checkout-buttons clearfix">
            <a href="#" class="btn-back-to-school"><img src="https://cdn.shopify.com/s/files/1/0718/5633/files/wanttoshiptoyourschool.jpg?2665" alt="Want to ship to your school? Click here" class="ship-to-school"></a><br />
            <label for="note"><strong>ENTER THE FOLLOWING INFORMATION BELOW if your school qualifies for dorm&nbsp;delivery. </strong><br />
            <br />
            - name<br />
            - university<br />
            - best contact phone number(s) on move-in day<br />
            - move-in date<br />
            <br />
            <strong>If you have this information, please provide. If you don’t, we will contact you before move-in day for details.</strong><br />
            <br />
            - residence hall<br />
            - dorm room number</label><br /><br />
            <textarea id="note" name="note" rows="10" cols="50">{{ cart.note }}</textarea>
          </div>
          {% include 'hear-about-us' %}
        </div>

        <div class="span4 cart-buttons inner-right inner-left">
          <div class="buttons clearfix">
            <input type="submit" id="checkout" class="btn" name="checkout" value="{{ 'cart.general.checkout' | t }}" />
            <input type="submit" id="update-cart" class="btn" name="update" value="{{ 'cart.general.update' | t }}" />
          </div>
        </div>

        {% if additional_checkout_buttons %}        
        <div class="row">
          <div class="extra-checkout-buttons span4">
          {{ content_for_additional_checkout_buttons }}
          </div>
        </div>
        {% endif %}

      </form>
    </div>
  </div>
  {% endif %}


<div class="fabric_popup cart"><div class="fabric_popup_curtain"></div><div class="fabric_popup_content"><p>Deliver to my Dorm Room Option: Dorm-Decor offers delivery to many colleges and universities.
We even offer our exclusive “Deliver to my Dorm Room” option. This Option will have your items waiting
for you in your dorm room on move-in day so you won’t have to lift a finger! Please check the University Page
to see if your school has this option. We are working everyday to add this option to more colleges and universities.
Please check back often to see if your school has been added.</p>
<p>If your school is not included in our special “Deliver-to-my-Dorm” option, you may also be able to ship your items
to your school’s mailroom. Please check with your school’s shipping policy and check the ship to address carefully.</p>
<p>Cubby Delivery Information and Charges: All Cubby shipments will incur a shipping charge of $75. Cubby deliveries must be signed for
by an adult 18 years or older. Please inspect your cubby before you sign at delivery. All damages must be reported immediately
  to shipper at time of delivery. Failure to notify shipper of damages at time of delivery could nullify your damage claim.</p></div></div>

  <script>       

  jQuery(document).ready(function($){

    $('.btn-back-to-school').click(function(event){
      $('.fabric_popup').fadeIn(300);
      event.preventDefault();
    });

    $('.fabric_popup_curtain').click(function(event){
      $('.fabric_popup').fadeOut(300);      
      event.preventDefault();
    });

  });
  </script>

  <!-- End cart -->

</div>

{% include 'bold-cart-modal' %}

我正在使用我首次提到的代码的代码段并将其插入带有{% include 'hear-about-us' %}的shopify页面

表单正在运行,它正在按顺序捕获我的数据。只需要能够让它要求至少选中一个复选框。

我关门了吗?目前它提交时没有给出错误。我需要它弹出一个警告,上面写着“请至少选择你对我们的看法。”

谢谢, 基思

1 个答案:

答案 0 :(得分:0)

谢谢Funk Doc。我遇到的唯一问题是没有使用正确的表单ID。一旦我纠正了这一点,一切都很完美。

感谢 基思