jquery - 使用 1 个添加到购物车按钮将 2 个产品添加到购物车 Shopify-6ren

jquery - 使用 1 个添加到购物车按钮将 2 个产品添加到购物车 Shopify

转载作者：行者123 更新时间：2023-12-04 12:58:39

我想在购物车中添加 2 个产品 加入购物车 按钮。我有两个选择选项，其中一种产品具有相同的变体。添加到购物车按钮将添加相同的产品但不同的变体产品。这是我的选择选项代码。

<div class="product-single-variant-item">
    <label>Power (Left Eye)</label>
    <select name="id_left" id="productSelect_left">
        {% for variant in product.variants %}
            {% if variant.available %}
                 <option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}>
                    {% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
                    {{ variantname[0] }}
                </option>
            {% else %}
                <option disabled="disabled">
                    {% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
                    {{ variantname[0] }} - (Out of Stock)
                </option>
            {% endif %}
        {% endfor %}
    </select>
</div>
<div class="product-single-variant-item">
    <label>Power (Right Eye)</label>
    <select name="id_right" id="productSelect_right">
        {% for variant in product.variants %}
            {% if variant.available %}
                 <option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}>
                    {% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
                    {{ variantname[1] }}
                </option>
            {% else %}
                <option disabled="disabled">
                    {% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
                    {{ variantname[1] }} - (Out of Stock)
                </option>
            {% endif %}
        {% endfor %}
    </select>
</div>

HTML 生成代码

<div class="product-single-variant d-none d-md-flex align-items-center mt-auto">
    <div class="product-single-variant-item">
        <label>Power (Left Eye)</label>
        <select name="id_left" id="productSelect_left">


            <option value="34353935515783" selected="selected">

                ±0.00
            </option>



            <option value="34353935548551">

                -0.50
            </option>



            <option value="34353935581319">

                -0.75
            </option>



            <option disabled="disabled">

                -1.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -1.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -1.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -1.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -2.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -2.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -2.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -2.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -3.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -3.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -3.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -3.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -4.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -4.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -4.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -4.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -5.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -5.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -5.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -5.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -6.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -6.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -7.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -7.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -8.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -8.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -9.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -9.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -10.00 - (Out of Stock)
            </option>


        </select>
    </div>
    <div class="product-single-variant-item">
        <label>Power (Right Eye)</label>
        <select name="id_right" id="productSelect_right">


            <option value="34353935515783" selected="selected">

                ±0.00
            </option>



            <option value="34353935548551">

                -0.50
            </option>



            <option value="34353935581319">

                -0.75
            </option>



            <option disabled="disabled">

                -1.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -1.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -1.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -1.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -2.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -2.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -2.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -2.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -3.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -3.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -3.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -3.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -4.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -4.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -4.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -4.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -5.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -5.25 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -5.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -5.75 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -6.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -6.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -7.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -7.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -8.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -8.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -9.00 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -9.50 - (Out of Stock)
            </option>



            <option disabled="disabled">

                -10.00 - (Out of Stock)
            </option>


        </select>
    </div>


</div>

我认为可以通过 来完成AJAX .但是我不知道怎么办 AJAX 要求。我正在尝试使用 添加类似的内容AJAX .

$(function(){
    var variantLeft = $('#productSelect_left option:selected').val();
    var variantRight = $('#productSelect_right option:selected').val();
    var totalVariant = [variantLeft, variantRight];
    $('#AddToCart').on('click', function(){
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            data: {
                quantity: 1,
                id: totalVariant
            },
            dataType: 'json',
            success: function (data){}
        });
    });
});

但是我的代码不起作用，只能添加一个变体并选择第一个变体。我的选择也不适用于 select .需要帮忙!

这是引用 site我多么想要。输出应该是这样的。

$enter image description here$

最佳答案

这可以在没有 Javascript 的情况下通过在变体选择上使用 name="id[]"来实现:

<select name="id[]" id="productSelect_left">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}">
        {{ variant.title }}
      </option>  
    {% endfor %}
</select>

然后:

<select name="id[]" id="productSelect_right">
    {% for variant in product.variants %}
       <option value="{{ variant.id }}">
          {{ variant.title }}
       </option>
    {% endfor %}
</select>

当然都是 在相同的“添加到购物车”表单中 .
一段时间没有使用它，但应该可以工作(这是一个已知的解决方案)。
如果您使用 Ajax API，您可以简单地在提交事件上序列化表单。

关于jquery - 使用 1 个添加到购物车按钮将 2 个产品添加到购物车 Shopify，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62401020/

文章推荐： android - androidx app启动如何改善冷启动时间？

文章推荐： opengl - MSAA 的抗锯齿问题，绘制具有深度和 FBO 的 CSG

文章推荐： Pytorch 找不到 CUDA 设备

php - 如何过滤属于特定类别的帖子 [产品]
我需要按不同类别过滤我网站上的产品。例如，如果您选择“DRINKS”类别，它将向我显示属于该类别的产品。为了更好地解释自己。我需要按类别过滤我网站的出版物 [产品]，例如，在选择一个类别时说“饮料
c# - 获取列表中每个项目的对象集合(产品)
我有 orders 集合，其中包含 products 集合。我将一些产品 ID 作为列表传递给该方法。我需要返回与任何匹配的产品列表input 列表中的 id。我需要像这样使用 foreach 循环
Xcode 产品 -> 存档已禁用
我已经为临时分发进行存档好几个月了，但今天突然我无法这样做，因为“存档”菜单项已被禁用。我没有改变任何东西。我完成了该项目的配置设置，看起来没问题。我的临时个人资料即将在 14 天后过期。这可能是问
MYSQL:产品-属性关系
我正在尝试找出产品和产品属性之间的关系。我有一个 product 表和一个 product_attributes 表。产品可以具有多种属性。我需要查询来查找具有一个特定属性和另一个属性之一的所有产品。
mysql - 产品、类别和公司之间的数据库关系
我正在使用 MySQL Workbench 创建 EER 图。实现产品、类别和公司表之间关系的最佳方式是什么？我正在考虑这种关系，但考虑到我想让公司的客户管理自己的产品/类别，这是最好的方式吗？如
Python itertools.产品
我正在使用 itertools 包，并尝试在具有 900 个值的数组中创建 1、2 和 3 的所有可能组合，然后将其转换为 30 x 30 矩阵。我必须执行此操作的代码在下面并且工作正常。 for d
python - 我该如何着手定制夹层墨盒商店/产品？
我有几个关于 Cartridge 启动器的问题: 我的产品不需要评级或发布日期。他们永远不会出售。一些产品是可下载的，因此“num_in_stock”不相关或本质上是无限制的。没有颜色选项，只有尺寸。
MySQL:(产品)价格的首选列类型？
在 MySQL 中，存储产品价格(或一般货币)的首选列类型是什么？谷歌知道我经常使用 DECIMAL of FLOAT，但我想知道哪个更好。我存储的价格范围是 0.01 到 25.00。当然更高的值
产品、开发、测试人手一份：升级上线检查清单大全
在软件开发过程中，尤其是在准备将新功能或修复后的版本上线之前，进行详尽的自测和上线前检查是至关重要的。以下是一个从多个维度综合考量的上线升级检查清单（Checklist），旨在帮助团队确保软件质量、稳
php - 使用自定义元查询显示带有简码的 WooCommerce 产品
我正在创建一个闪购网站，并且我已经在主页和商店页面上根据日期范围显示产品。但我也想根据其他地方的日期范围显示产品，因此使用简码。这是我的代码: function testt($meta_query)
php - 以编程方式批量创建 WooCommerce 产品
可以在 WooCommerce 上批量创建产品吗？我正在使用 wp-cli Product 命令，但似乎我必须一个一个地创建。 'My product 1'), array('title'
excel - 使用自定义元动态定价规则导入 WooCommerce 产品
我有一个带有数量和价格列的 excel 文件，我用它来为插件 WooCommerce Dynamic Pricing 创建必要的输出的定价规则。我几乎想通了，但是 WooCommerce 进口商正在
wordpress - 按自定义属性对象过滤 WooCommerce 产品
我刚刚继承了一个woocommerce项目，我需要将主页更改为仅显示特定品牌。他们设置了 Product-Data => Attribute => pa_brand。如果我打印 pa_brand 数
php - 在自己的插件中获取所有 WooCommerce 产品
在插件中如何使用 wc_get_products() 获取产品。或者有其他方法可以做到吗？ if ( in_array( 'woocommerce/woocommerce.php', apply_fi
statistics - 任何用于计算文件下载和页面浏览量的 Plone 产品？
我正在做一个无法从公司网络外部访问的内部网，他们希望在 Plone 中显示一些关于文件下载和最常查看的页面的不错的统计数据。由于网络限制，我无法使用谷歌分析或任何类型的外部服务，那么是否有任何产品可
security - 产品 key 优化
我正在就以下问题寻求建议: 保留哪些产品 key 属于哪个客户端的列表。例如，如果我的产品 key 为 8456-7894-4567-7894，则应该这样设计，以便将列表写入数据库而不是文件。如何将
.net - 产品 API 的完整列表
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
php - 尝试添加搜索栏管理面板菜单栏搜索 woocommerce 产品
尝试将产品搜索栏添加到 Wordpress 管理栏后端，以进行 Woocommerce 产品搜索。它将位于后端管理菜单栏的顶部，这样无论您在后端的哪个位置，都可以搜索 woo 的产品。我很接近但在小绊
wordpress - 根据属性查询 WooCommerce 产品
这让我抓狂.. 我正在尝试根据特定属性查询和输出 WooCommerce 产品。例如，我设置了一个名为 on 的属性，可能的值为 yes或 no . 我使用以下查询: $args = array(
json - 获取所有 Shopify 产品
我正在尝试从 Shopify 商店获取所有产品的 JSON。我一直在向 {STORE URL}/products.json 端点。但这最终只显示了商店提供的部分产品(很多，但不是全部)。当我将参数更改

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 使用 1 个添加到购物车按钮将 2 个产品添加到购物车 Shopify