如何将JavaScript的值分配给Shopify上的Liquid?

huangapple go评论56阅读模式
英文:

How to assign javascript value to liquid on shopify?

问题

{% assign protein_option = selected_variant_title %}
英文:

i got the value of html radio button from javascript code and i want to assign that value to variable of shopify liquid code can i do that.

<span id="selected_variant_title">{{ selected_variant_title }}</span>


<script>
    jQuery(document).ready(function() {
      // Handle change event for radio buttons
      $('input[type="radio"]').change(function() {
        // Retrieve the selected value
        var proteinValue = $('input[name="meal_radio_input"]:checked').val();
        console.log("Test", $('input[name="meal_radio_input"]:checked').val());
        });
    });
    var selected_variant_title = '';

function handleRadioChange() {
  var radioButtons = document.getElementsByName('meal_radio_input');
  for (var i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
      selected_variant_title = radioButtons[i].value;
      console.log('Selected value: ' + selected_variant_title);
      break;
    }
  }

  // Update the content of the selected_variant_title span element
  var selectedVariantTitleElement = document.getElementById('selected_variant_title');
  selectedVariantTitleElement.textContent = selected_variant_title;
}

I want assign selected_variant_title in a liquid veriable like as
{% assign protein_option = selected_variant_title %}

答案1

得分: 1

由于Liquid是一种渲染端语言,您将无法做到这一点。
相反,您可以将Liquid的值分配给JS变量。

英文:

As Liquid is a rendered side language you won't be able to do that.
To the contrary you may assign Liquid value to JS vars.

答案2

得分: -1

你不能这样做,因为液体代码会首先运行,然后是JavaScript,所以在这种情况下,你需要完全使用JavaScript。

英文:

You cant do that as liquid code runs first and Javascript next,so you need to use javascript in this case completely.

huangapple
  • 本文由 发表于 2023年6月22日 20:27:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/76531901.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定