Как динамически контролировать видимость элементов управления в Liquid Template - PullRequest
Новая
       21

Как динамически контролировать видимость элементов управления в Liquid Template

0 голосов
/ 07 мая 2019

В шаблоне «Жидкость» можно динамически настраивать видимость элемента управления в зависимости от условия.Например, я хочу следующий вывод, но вводимые текстовые поля должны отображаться только тогда, когда пользователь нажимает соответствующую кнопку-переключатель 

<input type="radio" name="questions" value="q1" />Question 1<br />
<input type="text" name="ans1" /><br />
<input type="radio" name="questions" value="q2" />Question 2<br />
<input type="text" name="ans2" /><br />
<input type="radio" name="questions" value="q3" />Question 2<br />
<input type="text" name="ans3" /><br />

1 Ответ

0 голосов
/ 30 мая 2019

Жидкость выполняется на стороне сервера, поэтому это невозможно. Вы можете создать логику, чтобы скрыть их при загрузке, но она никогда не изменится, если вы напишите ее в жидкости.

Я думаю, что это лучше всего сделать с помощью JavaScript. Все темы Shopify включают также jQuery, который станет вашим золотым билетом.

Вот пример: 

const inputs = {
  'input_1': {
    hides: ['.some_option_1']
  },
  'input_2': {
    hides: ['.some_option_2', '.some_option_3']
  },
  'input_3': {
    hides: []
  }
};

for (let input_key in inputs) {
  const input = $(`[name="${input_key}"]`);

  input.on('click', () => {
    const hides = inputs[input_key].hides.join(',');

    $('.option').show();
    $(hides).hide();
  });
}

С вашим HTML вот так: 

<button name="input_1" placeholder="1">Input 1</button>
<button name="input_2" placeholder="2">Input 2</button>
<button name="input_3" placeholder="3">Input 3</button>

<p class="option some_option_1">
  Option 1
</p>
<p class="option some_option_2">
  Option 2
</p>
<p class="option some_option_3">
  Option 3
</p>

Вот скрипка JS: https://jsfiddle.net/brydom/16f894Lt/

...