Question

有凝灰岩时间搞清楚这一点。我正在构建一个前端WooCommerce购物车组件，它会通过将产品ID传递到URL来将多个产品添加到购物车。网址结构最终看起来像http://cleancolor.staging.wpengine.com/?add-to-cart=2998,3339,2934，其中2998,3339,2934是WooCommerce产品ID。

这是一个实时工作版本（没有追加）http://studiorooster.com/dojo/cleancolor/ - 只需点击“5包”或“10包”并选择一个插件即可。我将产品ID附加到右侧列表的Addon名称，并具有名为data-itemid的属性

这是我的html块

<div class="col-md-3 clearfix" id="order_summary_box">
    <div class="summary-box">
        <div class="heading-total">Order Summary : <span class="color-txt" id="order_total"><span>$</span>0</span>
        </div>
        <div class="summary-basic-pack">
            <h5>Whats in Your Bundle</h5>
            <ul class="entree-add" id="entree-add">
                <li id="no-entrees">No Entrees Added</li>
            </ul>
            <ul class="pack-add" id="pack-add">
                <li id="no-addons">No Addons Selected</li>
            </ul>
        </div>
        <div class="orderbtn-area">
            <div class="order-btn-cont"><a href="" class="button" id="order_btn_id"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Subscribe Now !</a></div>
        </div>
    </div>
</div>

的jQuery

$('#get-started').delegate('.check-opt', 'click', function () {
    let cost = '0';
    let itemname = '';
    let first = '';
    let itemid = ''
    if ($(this).is(':checked')) {
        cost = $(this).attr('data');
        itemid = $(this).attr('data-itemid');
        order_additional_options += Number(cost);
        itemname = $(this).attr('value');
        first = itemname.slice(0, itemname.indexOf(" "));
        $("#no-addons").remove();
        $(".pack-add").append("<li data-cost='" + cost + "' data-id='item_" + first + cost + "' data-itemid='" + itemid + "'>" + itemname + itemid + "</li>");
    } else { // minus unchecked value
        cost = $(this).attr('data');
        itemname = $(this).attr('value');
        first = itemname.slice(0, itemname.indexOf(" "));
        order_additional_options -= Number(cost);
        $('[data-id=item_' + first + cost + ']').remove();
    }
    cart_update();
});
// on click order button submit the form

$('#order_btn_id').on("click", function () {
    $('a').attr("href", "http://cleancolor.staging.wpengine.com/?add-to-cart=");
});

Answer 1

确定窗口是否具有推送状态

查找添加到.pack-add的所有元素并提取其编号

编译,分隔字符串

以//*************开头和结尾的以下部分在下面的剪辑应该做的伎俩。可能你可以将它重构成一个函数。

// add and remove check box items on summary
$('#get-started').delegate('.check-opt', 'click', function () {
    let cost = '0';
    let itemname = '';
    let first = '';
    let itemid = ''
    if ($(this).is(':checked')) {
        cost = $(this).attr('data');
        itemid = $(this).attr('data-itemid');
        order_additional_options += Number(cost);
        itemname = $(this).attr('value');
        first = itemname.slice(0, itemname.indexOf(" "));
        $("#no-addons").remove();
        $(".pack-add").append("<li data-cost='" + cost + "' data-id='item_" + first + cost + "' data-itemid='" + itemid + "'>" + itemname + itemid + "</li>");
// ********************* INSERTED CODES
        var all_values=""
    $(".pack-add").children().each(function(){
        all_values+=$(this).attr('data-itemid')+" "

})
    console.log(all_values.trim().replace(" ",","));
    var query_string="?add-to-cart="+all_values.trim().replace(/ /g,",");
    if (history.pushState) {
        var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + query_string;
        window.history.pushState({path:newurl},'',newurl);
     }
// **********************END OF NEW CODES

    } else { // minus unchecked value
        cost = $(this).attr('data');
        itemname = $(this).attr('value');
        first = itemname.slice(0, itemname.indexOf(" "));
        order_additional_options -= Number(cost);
        $('[data-id=item_' + first + cost + ']').remove();
// ********************* INSERTED CODES
        var all_values=""
    $(".pack-add").children().each(function(){
        all_values+=$(this).attr('data-itemid')+" "

})
    console.log(all_values.trim().replace(" ",","));
    var query_string="?add-to-cart="+all_values.trim().replace(/ /g,",");
    if (history.pushState) {
        var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + query_string;
        window.history.pushState({path:newurl},'',newurl);
     }

    }
    cart_update();
});

使用JQuery将多个数据属性附加到URL并将其删除

1 个答案: