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..
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.
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>
Related
<template>
<select class="form-control" id="sel2" v-model="genre_id">
<option v-for="genre in genres" v-bind:key="genre.id">
{{genre.name}}
</option>
</select
<template/>
<script>
data() {
return {
genre_id: '',
}}
<script>
The code above gets all the genres and once one is picked it returns the genre.name. My question is, instead of returning the genre.name how can I return the genre.id even though I picked the name on my select form?
Add a value attribute:
<select class="form-control" id="sel2" v-model="genre_id">
<option v-for="genre in genres" v-bind:key="genre.id" :value="genre.id">
{{ genre.name }}
</option>
</select>
The value attribute specifies the value to be sent to a server when a form is submitted.
The content between the opening and closing tags is what the browsers will display in a drop-down list. However, the value of the value attribute is what will be sent to the server when a form is submitted.
Note: If the value attribute is not specified, the content will be passed as a value instead.
Reference
I'm automating the download of a report. There is a dropdown for status that needs changing to the value "Started". I've managed to change the value in my code but when you manually make the change the report screen for the site updates automatically. My code doesn't manage to do this.
I'm wondering if there's an extra element that might need changing. Does anyone have any idea what I'm missing?
element on the site:
<select data-bind="value: leads.overall_status, options: [null, 'not_started', 'quoted_with_quotes', 'quoted_without_quotes', 'started', 'open_accounts'], optionsText: BrokerLeadsGridModel.overall_status_renderer" style="width: 160px;vertical-align: baseline;display: inline;" class="form-control">
<option value="">Any</option>
<option value="not_started">Not Started</option>
<option value="quoted_with_quotes">Quoted</option>
<option value="quoted_without_quotes">No Quotes</option>
<option value="started">Started</option>
<option value="open_accounts">Open</option>
</select>
My Code:
Doc.getElementsByClassName("form-control")(0).Value = "started"
Did you try attribute = value css selector?
doc.querySelector("[value=started]").selected = True
I upgraded the jquery library from 1.4.2 to 3.4.0 Have a drop down. .val() is returning the selected value as expected, but .text() is returning is entire object. Need to know how to get the displayed text for the selected option.
$('#properties').change(function(){
var selected_id=$('#properties option:selected').val();
var selected_value=$('#properties option:selected').text();
$('#idresult').text(selected_id);
$('#textresult').text(selected_value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select id="properties" style="width: 100%; height: 80px;" size="6">
<option value="1">Country</option>
<option value="3">City</option>
<option value="4">Metro Area (Only U.S.)</option>
<option value="2">State/Province</option>
<option value="5">Zip Code (Only U.S.)</option>
</select>
<div id="textresult"></div>
<div id="idresult"</div>
it is working fine when I tried it on jsfiddle and stackoverflow code snippet. But in my code, it is not giving the below values. Any ideas what might have gone wrong. It works fine when I switch back jquery to 1.4.2
selected_id is 1 as expected.
selected_value is k.fn.init [option, prevObject: k.fn.init(1)].
Expecting it to be "Country"
I'm trying to use tooltipster jQuery plugin, but it doesn't work for or tag :
I've just tried this simple code :
<div id="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
--> div works fine
<select id="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
--> select doesn't work
<span id="my-tooltip">
test with span
</span>
--> span doesn't work
Could you please help me ?
here is my page
thank you all !
From looking at your code and site the issue is due to your multiple use of the id my-tooltip. IDs should only be used once to identify one node. A simple test can be done to prove this using jQuery, try running this on the page:
jQuery('#my-tooltip')
You'll see that only one node is returned, this is the one that has your initialised tooltip.
To fix this you'll need to change your nodes to use classes, i.e.
<div class="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
<select class="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
<span class="my-tooltip">test with span</span>
In your tooltipster setup, you'll want to have the following selector and options enabled:
jQuery('.my-tooltip').tooltipster({
// Original setup
content: jQuery('<span><img src="/../../../popup.png" /> <strong>This text is in bold case !</strong></span>')
// Additional options
multiple: true,
contentAsHTML: true
});
I hope this helps! :)
I have a shared view that is going to be called for each item in a collection. In this view I want to have a dropdown list that will contain the Id, Text and image url of the information selected item. When an Item is selected I want to show the image in an image tag.
I got to this code
<select id="themes" onchange="javascript:document.getElementById('themePlaceHolder').src=this.options[this.selectedIndex].getAttribute('data-url')">
<option value="" data-Url="" >Select a theme</option>
#foreach(Theme theme in Model.Themes) {
<option value="#theme.Id" data-url="#theme.Url" >#theme.Name</option>
}
</select>
<img id="themePlaceHolder" src="" />
This works perfectly when my collection has only one element, but if it has 2 or more, I have issues with the ID used to identify the image tag because it is duplicated.
Is there anyway to generate the ID so it isn't duplicated but still reference it on my onchange element?
Try with jQuery:
Pseudo code:
<select class="themes">
<option value="" data-Url="" >Select a theme</option>
#foreach(Theme theme in Model.Themes) {
<option value="#theme.Id" data-url="#theme.Url" >#theme.Name</option>
}
</select>
<img id="themePlaceHolder" src="" />
$(".themes").change(function(){
// to get selected text
$(this + " option:selected").text();
// to get selected value
$(this).val();
// Now do what ever you want using this value
});