CODEWITHSUNDEEP
shopifyproductliquidvariant
Liquidishard
Liquidishard

Reputation: 1

Liquid: Show Text for specific Product Variant

can you help me figure out how to show a notification for specific variants? If customer selected "IPhone 14" show notification "Thats a Pre-order" and hide this message if the customer changes to "IPhone 13".

{% if selected variant.name contains '14' %}
    {p} Thats a Pre-order {/p}
  {% endif %}

The main Problem is, that the URL does not change by selecting the variant. Otherwise i could simply check the URL. But in my Case the URL is always the same..

Upvotes: 0

Views: 1822

Answers (3)

Sankalp S Raul
Sankalp S Raul

Reputation: 69

You can do this with Shopify metafields. Add a metafiled data to the variant For example: Product - iPhone - variant - iPhone 14, iPhone 13, iPhone SE

Variant Metafield - namespace&key :pro.preorder Value - Preorder

In the javascript on the change of variant, you can add a condition if the metafield is not empty then show this:

{{variant.metafields.pro.preorder}}

The output will be the value you wrote for that metafield: Preorder

Upvotes: 0

ByGio1
ByGio1

Reputation: 131

You can use js to show an specific text for some options and then hide it with all other options, something like this:

$(document).on('change', '.js-variant-id-text', function() {
  let
    variant_id = this.value,
    variant_text = $('.single-product-text[data-variant="' + variant_id + '"]');
  variant_text.show()
  //get all single product text div's, if it isn't a variant text, hide it.
  $(".single-product-text").not(variant_text).hide()
})
.single-product-text {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="{{option_name}}" id="select-{{option_name}}" class="js-variant-id-text">
  <option class="js-variant-radio" value="placeholder" disabled selected>Select one</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div class="single-product-text single-option-selector" data-variant="1" style="">Some text for option 1</div>
<div class="single-product-text single-option-selector" data-variant="2" style="">Some text for option 2</div>
<div class="single-product-text single-option-selector" data-variant="3" style="">Some text for option 3</div>

Upvotes: 1

drip
drip

Reputation: 12933

You have a misunderstanding on how liquid works.

Liquid finish executing before the DOM is loaded. (a.k.a the moment you see the page liquid is finished and no code will be processed after that).

What you are describing is interacting with the DOM elements (select or radio buttons) and expecting liquid to execute some code after the variant is changed, which is not possible.

Long story short you need to use Javascript to handle this logic, not liquid.

Upvotes: 2

Related Questions