将值从页面表单传递到 Shopify Liquid 中的 javascript

问题描述 投票:0回答:1

我在 Shopify 的页面模板中使用链接列表,我需要将其长度传递给 javascript 代码段。我不知道该怎么做。

页面模板包含此行:

{% assign linklist = linklists['link-list-1'] %}

页面包含一个 id="submit-table" 的表单,类似于以下代码:

<form>
    <input type="submit" value="Add..." id="submit-table"/>
        ...
</form>

首先,我需要表单包含链接列表的长度值。不知道该怎么做。

然后我需要将该长度值传递给这个脚本(这是一个片段)。另外,不知道该怎么做。

<script type="text/javascript" charset="utf-8">
//<![CDATA[
// Including jQuery conditionally.
if (typeof jQuery === 'undefined') {
    document.write({{ "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" | script_tag | json }});
    document.write('<script type="text/javascript">jQuery.noConflict();<\/script>');
}
//]]>
</script>

<script>

$(document).ready(function () {
    $("#quantity-0").focus();    
    $("#submit-table").click(function(e) {     
        e.preventDefault();
        var toAdd = new Array();
        var qty;
        //I need the link list length value here
        for(i=0; i < length; i++){
        
            toAdd.push({
                variant_id: $("#variant-"+i).val(),        
                quantity_id: $("#quantity-"+i).val() || 0
            });
        }
        function moveAlong(){
            //I need the link list length value here
            if (toAdd.length) {
                var request = toAdd.shift();
                var tempId= request.variant_id;
                var tempQty = request.quantity_id;
                var params = {
                    type: 'POST',
                    url: '/cart/add.js',
                    data: 'quantity='+tempQty+'&id='+tempId,
                    dataType: 'json',
                    success: function(line_item) { 
                        //console.log("success!");
                        moveAlong();

                    },
                    error: function() {
                        //console.log("fail");
                        moveAlong();
                        
                    }
                };
                $.ajax(params);
            }
            else {              
                document.location.href = '/cart';
            }  
        };
        moveAlong();
    });
});
</script>

该脚本包含在我的 theme.liquid 代码中,如下所示:

{% include 'order-form-script' %}

参考资料:

tetchi 博客 » Shopify 教程:如何创建订单
http://www.tetchi.ca/shopify-tutorial-order-form/#comment-10129

https://gist.githubusercontent.com/Tetsuro/2932935/raw/568ccb0574f46eb450e298ab2ccb800e673d8fa2/jquery.order-form.js.liquid

https://gist.githubusercontent.com/Tetsuro/2932738/raw/7c0c5aea3cd59b35194f61e2c6c0b1c7f852f9fb/page.order-form.liquid

javascript html forms shopify liquid
1个回答
1
投票

首先,我需要表单包含链接列表的长度值。

有这样的事吗?

<form>
    <input type="submit" value="Add..." id="submit-table" />
    <input type="hidden" id="linklist-length" name="linklist-length" value="{{ linklists.link-list-1.links.size }}" />
    ...
</form>

然后我需要将该长度值传递给此脚本(这是一个片段)。

通过 id 访问值(或者如果您想要更具体的选择器,参见此处):

var length = $("#linklist-length").val();
© www.soinside.com 2019 - 2024. All rights reserved.