Question

在我的shopify网站上，我有一个带有请求按钮的产品页面，点击后应该将用户重定向到另一个页面上，该页面上有一个表单。

单击产品页面上的按钮应将产品标题从该页面传递到另一页面，并将该字符串变量放入表单中供用户查看，以便他们可以使用其信息填写表单的其余部分

这是我的链接：

<a href="/pages/other-page#request-form">REQUEST ITEM</a>

需要传递的内容：

{{ product.title }}

需要放置的地方（#form_text）：

<form id="request-form" method="post">
    <input id="first_name" name="firstName" placeholder="First Name*" type="text" value="" /> 
    <input id="last_name" name="lastName" placeholder="Last Name*" type="text" value="" /> 
    <textarea id="form_text" name="content" placeholder="What item do you want?"></textarea> 
    <input id="requestFormSubmit" type="submit" value="SUBMIT" /> 
</form>

我如何编写url查询字符串来传递此液体变量？

编辑：

感谢@TylerSebastion，我能够让它发挥作用。

链接：

<a href="/pages/other-page#request-form?product={{ product.title | url_param_escape }}">REQUEST ITEM</a>

以下是我在表单页面上使用的代码：

$(function() {
    var product = getParameterByName('product');
    $("#form_text").text(product);

    function getParameterByName(product) {
        url = window.location.href;
        product = product.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + product + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
         if (!results) return null;
         if (!results[2]) return '';
         return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
});

Answer 1

您可以通过查询参数传递它。

<a href="/pages/other-page#request-form?product={{ product.title }}">REQUEST ITEM</a>

至于将其添加到表单中，请使用方法from this post和

$(function() {
    $("form #form_text").val(getParameterByName("product"));
});

我还建议，如果您在使用的模板引擎中尽可能地对产品名称进行网址编码，然后再将其附加到网址。

如果看起来有一个请求对象，但是，在Shopify / Liquid模板引擎中 - 我会尝试类似

<textarea id="form_text" name="content" placeholder="What item do you want?">{{ request.params.product }}</textarea>

并完全放弃了JS（对于这个例子）

Url查询字符串 - 传递液体值以在另一页上填写表单

编辑：

1 个答案: