Question

我正在为摄影师设立一个商店，并将不同的产品选项设置为变体。我希望允许用户成功将产品添加到购物车，而无需选择所有可用的变体。

这是我设置为变体的属性/术语的示例：

因此应允许客户选择一个选项（变体）并添加到购物车。目前它失败并说我需要从每个属性中选择一个变体

所以我的问题很简单：如何在不需要所有变体选择的地方制作它？

我的方法：我认为有一些事情可行。首先，我认为可能有一个action or hook我可以插入来使这不是必需的。或者我可以将jquery用于modify the add to cart url，这样当用户点击“添加到购物车”按钮时，产品ID和变体ID就会传递给我想要将该变体仅添加到购物车的网址。

有什么想法吗？

更新我试图通过一些jQuery来管理它。我有它只允许选择一个输入，并根据选择添加或删除类。当用户点击“添加到购物车”按钮时，它会将所有.not-active输入名称属性添加到数组中。我知道以下网址会有效：http://my-url.com/?add-to-cart=976&variation_id=1186&attribute_pa_downloads=print-300dpi&attribute_pa_high-definition-aluminum=0&attribute_pa_photo-tiles=0&attribute_pa_canvas-gallery-wraps=0&attribute_pa_custom-prints=0因此我需要一种方法来实现这种动态。目前我坚持如何构建我的网址以包含所有POST参数，以便它通过验证并将添加到购物车。话虽如此，鉴于下面的代码，我如何构建我的网址，以便它重定向所有参数并添加到购物车（构建网址是我认为我没有工作的唯一的东西。）

var selectedName;
        var selectedValue;

        //Shop only allow one radio to be checked
        $('input.selectOne').on('change', function(){
            $('input.selectOne').not(this).prop('checked', false).removeClass('active').addClass('not-active');
            $(this).addClass('active').removeClass('not-active');

            selectedName = $(this).attr('name');
            selectedValue = $(this).val();
        });

        $('.single_add_to_cart_button').click(function(e){
            e.preventDefault();

            console.log(selectedName);
            console.log(selectedValue);

            //Works :http://my-url.com/?add-to-cart=976&variation_id=1186&attribute_pa_downloads=print-300dpi&attribute_pa_high-definition-aluminum=0&attribute_pa_photo-tiles=0&attribute_pa_canvas-gallery-wraps=0&attribute_pa_custom-prints=0
            var productID = $('input[name="product_id"]').val();
            var variationID = $('input[name="variation_id"]').val();
            var location = window.location.href;  //Get URL to redirect to cart

            var emptyOptions = [];

            $('.not-active').map(function() {
                return this.name;
            }).each(function(i, str) {
                if (!~$.inArray(str, emptyOptions) && str != selectedName) emptyOptions.push(str: '0&');
            });

            console.log(emptyOptions);

            alert(location + 'add-to-cart=' + productID + '&variation_id=' + variationID + '&' + $.each(emptyOptions));

        });

JSFiddle

Answer 1

对于其他任何人来说，我最终用jQuery和Woocommerce Radio Buttons Plugin解决了这个问题。

在我的本地JS文件中，我添加了这个，它将处理允许一个选择，然后创建添加到购物车网址。

var selectedName;
        var selectedValue;

        //Shop only allow one radio to be checked
        $('input.selectOne').on('change', function(){
            $('input.selectOne').not(this).prop('checked', false).removeClass('active').addClass('not-active');
            $(this).addClass('active').removeClass('not-active');

            selectedName = $(this).attr('name');
            selectedValue = $(this).val();
        });

        $('.single_add_to_cart_button').click(function(e){
            e.preventDefault();

            //console.log(selectedName);
            //console.log(selectedValue);

            //Works :http://my-url.com/?add-to-cart=976&variation_id=1186&attribute_pa_downloads=print-300dpi&attribute_pa_high-definition-aluminum=0&attribute_pa_photo-tiles=0&attribute_pa_canvas-gallery-wraps=0&attribute_pa_custom-prints=0
            var productID = $('input[name="product_id"]').val();
            var variationID = $('input[name="variation_id"]').val();
            var location = window.location.href;  //Get URL to redirect to cart

            var emptyOptions = {};

            $('.not-active').map(function() {
                return this.name;
            }).each(function(i, str) {

                if (!~$.inArray(str, emptyOptions) && str != selectedName) emptyOptions[str] = 0;
            });

            //console.log(emptyOptions);

            window.location = location + '?add-to-cart=' + productID + '&variation_id=' + variationID + '&' + selectedName + '=' + selectedValue + '&' + $.param(emptyOptions);

        });

Woocommerce允许选择一个变体

1 个答案: