shopify产品页面上的必选复选框无法正常运行

如何解决shopify产品页面上的必选复选框无法正常运行

我在产品页面上添加了一个复选框,要求客户在购买前进行检查。 一切正常,除了我刚刚发现选择其他尺寸时,客户无需勾选即可购买商品。我已经在以前的主题上使用了此代码,没有任何问题,不确定这个新主题的哪个部分导致了问题。

这是我的剧本:

// Pre-order Checkbox
    $(function() {
    $('input.acceptTerms').click(function() {
        var unchecked = $('input.acceptTerms:not(:checked)').length;
        if (unchecked == 0) {
            $('#addToCart').removeAttr('disabled');
        }
        else {
            $('#addToCart').attr('disabled','disabled');
        }
    });
});

这是产品页面的html:

{% capture form_id %}AddToCartForm-{{ section_id }}{% endcapture %}
{% form 'product',product,id: form_id,class: 'product-single__form small--text-center' %}
  <input type="hidden" name="data-product-id" value="{{ product.id }}">
  {%- unless product.has_only_default_variant -%}
    {%- for option in product.options_with_values -%}
      {%- if settings.product_color_swatches -%}
        {%- assign is_color = false -%}
        {%- assign color_option_index = 0 -%}
        {%- assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase-%}
        {%- assign color_option_index = forloop.index0 -%}
        {%- assign downcased_option = option.name | downcase -%}
        {%- if downcased_option contains swatch_trigger -%}
          {%- assign is_color = true -%}
        {%- elsif swatch_trigger == 'color' and downcased_option contains 'colour' -%}
          {%- assign is_color = true -%}
        {%- endif -%}
      {%- endif -%}

      {%- if variant_type == 'button' -%}
        {%- render 'variant-button',section_id: section_id,variant_labels_enable: variant_labels_enable,option: option,forloop: forloop,is_color: is_color,color_option_index: color_option_index
        -%}
      {%- else -%}
        {%- render 'variant-dropdown',forloop: forloop
        -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endunless -%}

  <select name="id" id="ProductSelect-{{ section_id }}" class="product-single__variants no-js" data-product-select>
    {%- for variant in product.variants -%}
      {%- if variant.available -%}
        <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %}
          selected="selected"{% endif %}>
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {%- else -%}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {%- endif -%}
    {%- endfor -%}
  </select>

  {%- if quantity_enable -%}
    <div class="product__quantity product__quantity--{{ variant_type }}">
      <label for="Quantity-{{ section_id }}" class="variant__label">{{ 'products.product.quantity' | t }}</label>
      <input type="number" id="Quantity-{{ section_id }}" name="quantity" value="1" min="1">
    </div>
  {%- endif -%}

  {%- liquid
    assign enable_dynamic_buttons = false
    if enable_payment_button and template != 'product.preorder'
      assign enable_dynamic_buttons = true
    endif
  -%}

  {%- if enable_dynamic_buttons -%}
    <div class="payment-buttons">
  {%- endif -%}

    {%- assign default_text = 'products.product.add_to_cart' | t -%}
    {%- assign button_text = 'products.product.add_to_cart' | t -%}
    {%- if current_variant.available -%}
      {%- if template == 'product.preorder' -%}
        {%- assign default_text = 'products.product.add_to_cart' | t -%}
        {%- assign button_text = 'products.product.preorder' | t -%}
      {%- endif -%}
    {%- else -%}
      {%- assign button_text = 'products.product.sold_out' | t -%}
    {%- endif -%}

    <button
      {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
      name="add"
      data-add-to-cart
      class="{% if enable_dynamic_buttons %}btn btn--tertiary{% else %}btn{% endif %} btn--full add-to-cart"
      disabled id="addToCart"
      {% unless current_variant.available %} disabled="disabled"{% endunless %}>
      <span data-add-to-cart-text data-default-text="{{ default_text }}">
        {{ button_text }}
      </span>
    </button>

    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}

  {%- if enable_dynamic_buttons -%}
    </div>
  {%- endif -%}

  {%- unless product.empty? -%}
    <textarea class="hide" aria-hidden="true" data-variant-json>
      {{ product.variants | json }}
    </textarea>
    {%- if product.options.size > 1 -%}
      <textarea class="hide" aria-hidden="true" data-current-variant-json>
        {{ current_variant | json }}
      </textarea>
    {%- endif -%}
  {%- endunless -%}
<br>
<div class="checkbox">
    <input type="checkbox" value="" class="acceptTerms"> <span style="color: #E91B39; font-size: 8pt; letter-spacing: 0.2em;">THIS PRODUCT IS HANDMADE IN THE UK AND SHIPS WITHIN 2-3 DAYS VIA FEDEX. PLEASE ALLOW ADDITIONAL DELAYS THAT MAY OCCUR DUE TO COVID-19. MEASURE YOURSELF AND CONSULT SIZE CHART BEFORE ORDERING,AS YOUR NORMAL SIZE MAY DIFFER FROM THESE CUT & SEW GARMENTS. THESE ARE CUSTOM MADE AND THERE ARE NO RETURNS. CHECK BOX TO AGREE TO THESE TERMS AND CONTINUE WITH YOUR PURCHASE.</span>
  </div>

{% endform %}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-