在 liquid 代码的不同部分使用 javascript 变量

Question

我是个菜鸟...正在尝试修改我的 shopify 商店中的代码。

我需要在函数中使用 javascript 变量来显示交货日期。

如何在 liquid 文件中的不同 javascript 代码之间传递变量？

                   {% if shippingtype == 'long' %}         

            <script> var shippingtime = 'long'; </script>

            {% else %}

             <script>  var shippingtime = 'short';   </script>

            {% endif %}


            <script> 

alert(shippingtime); //and do other stuff with variable

</script>

Answer 1

恐怕这样不行。你可以像上面那样做，但这不是一个干净的方法。而是将您的值设置在文档中您可以从中读取的位置，例如 input 元素。

<input type="hidden" name="shippingtime" value="{{ shippingtime }}"/>

然后在 JavaScript 中检查那个 input 元素的 value 并相应地处理。

// Select the input.
const input = document.querySelector('input[name="shippingtime"]');

// Get the value of the input.
const { value } = input;

每当您浏览页面时，您都会重新加载所有内容，包括所有 JS。但是您可以使用 Web Storage API 存储变量。要么将它们存储在 sessionStorage 的会话中（存储直到浏览器关闭），要么无限期地使用 localStorage。对于此示例，我将使用 sessionStorage.

// Stores the value.
sessionStorage.setItem('shippingtime', value);

在另一个页面上，您可以检查存储是否有名为 shippingtime 的项目。

const shippingTime = sessionStorage.getItem('shippingtime');
if (shippingTime !== null) {
  // Use the shippintTime value here.
  console.log(shippingTime);
}

希望这对您有所帮助。如果您有任何疑问或我不清楚，请告诉我。

在 liquid 代码的不同部分使用 javascript 变量

Using javascript variable in different parts of liquid code

javascript

liquid

shopify