Need help displaying the price of variants within the variant picker as shown in the example below. I am using the Dawn theme.
Thank you!
Hi @RyanWTS
You can refer code below. I created for Dawn theme(sections/main-product.liquid)
.......................................................................................................................................................................................................................................................
{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
<variant-radios
class="no-js-hidden"
data-section="{{ section.id }}"
data-url="{{ product.url }}"
{{ block.shopify_attributes }}
>
{% assign title_variant = product.selected_or_first_available_variant.title | split: ' / ' %}
{%- for option in product.options_with_values -%}
{% assign index = forloop.index %}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input
type="radio"
data-position="{{ option.position }}"
id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}
checked
{% endif %}
>
{% assign currentTitle = '' %}
{% for titleFariant in title_variant %}
{% if index != 1 and index == forloop.index %}
{% assign currentTitle = currentTitle | append: value %}
{% else %}
{% assign currentTitle = currentTitle | append: titleFariant %}
{% endif %}
{% unless forloop.last %}
{% assign currentTitle = currentTitle | append: ' / ' %}
{% endunless %}
{%- endfor -%}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
{% if index != 1 %}
{% for variant in product.variants %}
{% if currentTitle == variant.title %}
<span class="price">{{ variant.price | money }}</span>
{% endif %}
{% endfor %}
{% endif %}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json" id="productJSON">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}
<variant-selects
class="no-js-hidden"
data-section="{{ section.id }}"
data-url="{{ product.url }}"
{{ block.shopify_attributes }}
>
{%- for option in product.options_with_values -%}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{%- for value in option.values -%}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}
selected="selected"
{% endif %}
>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{%- endunless -%}
.......................................................................................................................................................................................................................................................
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
var Shopify = Shopify || {};
// ---------------------------------------------------------------------------
// Money format handler
// ---------------------------------------------------------------------------
Shopify.money_format = "${{amount}}";
Shopify.formatMoney = function(cents, format) {
if (typeof cents == 'string') { cents = cents.replace('.',''); }
var value = '';
var placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
var formatString = (format || this.money_format);
function defaultOption(opt, def) {
return (typeof opt == 'undefined' ? def : opt);
}
function formatWithDelimiters(number, precision, thousands, decimal) {
precision = defaultOption(precision, 2);
thousands = defaultOption(thousands, ',');
decimal = defaultOption(decimal, '.');
if (isNaN(number) || number == null) { return 0; }
number = (number/100.0).toFixed(precision);
var parts = number.split('.'),
dollars = parts[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands),
cents = parts[1] ? (decimal + parts[1]) : '';
return dollars + cents;
}
switch(formatString.match(placeholderRegex)[1]) {
case 'amount':
value = formatWithDelimiters(cents, 2);
break;
case 'amount_no_decimals':
value = formatWithDelimiters(cents, 0);
break;
case 'amount_with_comma_separator':
value = formatWithDelimiters(cents, 2, '.', ',');
break;
case 'amount_no_decimals_with_comma_separator':
value = formatWithDelimiters(cents, 0, '.', ',');
break;
}
return formatString.replace(placeholderRegex, value);
};
$(document).ready(function(){
var Pjson = $('#productJSON').html();
Pjson = JSON.parse(Pjson);
$("variant-radios input").click(function(){
var Options = $("variant-radios .product-form__input input:checked");
if(Options.length > 1){
var crrPossition = $(this).data('position');
$("variant-radios input").each(function(){
var __this = $(this);
var dataPosition = __this.data('position');
if( dataPosition != 1){
var titleOption = ''
Options.each(function( index ){
let slah = ' / ';
if(index == (Options.length - 1))
slah = '';
if($(this).data('position') == dataPosition ){
titleOption = titleOption + __this.val() + slah
}else{
titleOption = titleOption + $(this).val() + slah
}
})
Pjson.forEach(function(variant){
if(variant.title == titleOption ){
__this.next().find('.price').html(Shopify.formatMoney(variant.price,'{{ shop.money_format }}'))
}
})
}
})
}
});
});
</script>
Hi,
Maybe I suggest code below:
1. Go to snippets/product-variant-options.liquid
2. Replace code below
{% comment %}
Renders product variant options
Accepts:
- product: {Object} product object.
- option: {Object} current product_option object.
- block: {Object} block object.
- picker_type: {String} type of picker to dispay
Usage:
{% render 'product-variant-options',
product: product,
option: option,
block: block
picker_type: picker_type
%}
{% endcomment %}
{%- liquid
assign variants_available_arr = product.variants | map: 'available'
assign variants_option1_arr = product.variants | map: 'option1'
assign variants_option2_arr = product.variants | map: 'option2'
assign variants_option3_arr = product.variants | map: 'option3'
assign product_form_id = 'product-form-' | append: section.id
-%}
{%- for value in option.values -%}
{%- liquid
assign option_disabled = true
for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
endcase
endfor
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = 'url(' | append: image_url | append: ')'
elsif value.swatch.color
assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
else
assign swatch_value = nil
endif
-%}
{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}
{%- capture label_unavailable %}
<span class="visually-hidden label-unavailable">
{{- 'products.product.variant_sold_out_or_unavailable' | t -}}
</span>
{%- endcapture %}
{%- if picker_type == 'swatch' -%}
{% assign checked = false %}
{% if option.selected_value == value %}
{% assign checked = true %}
{% endif %}
{%
render 'swatch-input',
id: input_id,
name: option.name,
value: value | escape,
product_form_id: product_form_id,
checked: checked,
disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: label_unavailable
%}
{%- elsif picker_type == 'button' -%}
<input
type="radio"
id="{{ input_id }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}
checked
{% endif %}
{% if option_disabled %}
class="disabled"
{% endif %}
>
<label for="{{ input_id }}">
{{ value -}}
{{ label_unavailable }}
</label>
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}
selected="selected"
{% endif %}
{% if swatch_value and picker_type == 'swatch_dropdown' %}
data-option-swatch-value="{{ swatch_value }}"
{% endif %}
>
{% if option_disabled -%}
{{- 'products.product.value_unavailable' | t: option_value: value -}}
{%- else -%}
{{- value -}}
{%- endif %}
{% for variant in product.variants %}
{% if value == variant.title %}
<span class="price"> - {{ variant.price | money }}</span>
{% endif %}
{% endfor %}
</option>
{%- endif -%}
{%- endfor -%}3. Go to Customize theme -> select product -> update variant picker setting from Pills to Dropdown
Community Blog Articles
A guide to Shopify POS Launch and Operations success
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024
Community Connect: Recap March 24’
We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024
Shopify Store Design: Expert Advice from Stephen’s World
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024