change the assigned value of a liquid variable based on radio select

change the assigned value of a liquid variable based on radio select

wixkraft
Shopify Partner
2 0 0

hey have two products which i have assigned in my block settings i want to know how i can change the variable 
value of the assigned product from one two another based on radio clicks.

 

{%- assign product = block.settings.featured_product | default: product | default: collections['all'].products.first -%}

 

in above i want to toggle block.settings.featured_product and block.settings.featured_product-2  based on below radio checks
<div>
<label>
<input type="radio" name="featured_product_toggle" value="1" checked>
{{ block.settings.featured_product.title }}
</label>
<label>
<input type="radio" name="featured_product_toggle" value="2">
{{ block.settings.featured_product-2.title }}
</label>
</div>


how i can do that 

 

Replies 2 (2)

brandonc555
Visitor
1 0 0

To toggle between block.settings.featured_product and block.settings.featured_product-2 based on radio clicks in Liquid, use the following approach:

HTML:

<div>
  <label>
    <input type="radio" name="featured_product_toggle" value="1" checked>
    {{ block.settings.featured_product.title }}
  </label>
  <label>
    <input type="radio" name="featured_product_toggle" value="2">
    {{ block.settings.featured_product-2.title }}
  </label>
</div>

<div id="product-container">
  <div class="product-title">{{ block.settings.featured_product.title }}</div>
  <div class="product-description">{{ block.settings.featured_product.description }}</div>
</div>

<div id="product-1" style="display: none;">
  <div class="product-title">{{ block.settings.featured_product.title }}</div>
  <div class="product-description">{{ block.settings.featured_product.description }}</div>
</div>
<div id="product-2" style="display: none;">
  <div class="product-title">{{ block.settings.featured_product-2.title }}</div>
  <div class="product-description">{{ block.settings.featured_product-2.description }}</div>
</div>

This code allows you to toggle the displayed product information based on the selected radio button.

wixkraft
Shopify Partner
2 0 0

I guess you misunderstood i want to change the value of this liquid variable {%- assign product = block.settings.featured_product | default: product | default: collections['all'].products.first -%} based on input select as it will change the assigned product to my featured product