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

Question

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

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

这是我的 link:

<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，我能够让它工作。

link:

<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"));
});

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

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

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

并完全放弃 JS（对于此示例）

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

Url Query String - Passing liquid values to fill out form on another page

html

javascript

jquery

liquid

shopify

编辑：