Variant Selection issue

Prince1995 · ‎07-18-2024

I'm adding a size variant to my theme. I've added frontend code for variant selection and JavaScript to handle it. The problem is, the script works correctly on my homepage but not consistently on other pages like collection pages. On collection pages, it only works on some products. I've added the JavaScript in theme.liquid file within the body tag at the end. Could someone please help? I've attached the code for reference.

Frontend Code -

{%- form 'product', product, is: 'product-form', id: form_id -%}

{%- assign button_disabled = false -%}
{%- assign button_size = button_size | default: 'xl' -%}

{%- if product.selected_or_first_available_variant.available -%}
{%- if product.template_suffix contains 'pre-order' -%}
{%- capture button_content -%}{{ 'product.general.pre_order_button' | t }}{%- endcapture -%}
{%- else -%}
{%- capture button_content -%}{{ 'product.general.add_to_cart_button' | t }}{%- endcapture -%}
{%- endif -%}
{%- else -%}
{%- capture button_content -%}{{ 'product.general.sold_out_button' | t }}{%- endcapture -%}
{%- assign button_disabled = true -%}
{%- endif -%}

<div class="product-grid-options-size" id="product-{{ product.id }}">
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
{% if downcased_option contains 'size' %}
{% assign option_index = forloop.index0 %}
{% assign displayed_sizes = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless displayed_sizes contains value %}
<div class="altli {% unless variant.available %}soldout{% endunless %} {% if variant.id == product.selected_or_first_available_variant.id %}selected{% endif %}">
<a title="{{ value }}" class="size-selector {% if variant.id == product.selected_or_first_available_variant.id %}selected{% endif %}" data-variant-id="{{ variant.id }}" data-product-id="{{ product.id }}">{{ value }}</a>
</div>
{% assign displayed_sizes = displayed_sizes | append: value | append: ',' %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</div>

<buy-buttons class="buy-buttons {% if show_payment_button %}buy-buttons--multiple{% endif %}" template="{{ product.template_suffix | escape }}" form="{{ form_id }}">
{%- render 'button', content: button_content, type: 'submit', size: button_size, disabled: button_disabled, secondary: show_payment_button, subdued: button_disabled, background: atc_button_background, text_color: atc_button_text_color -%}

{%- if show_payment_button -%}
{% if product.selected_or_first_available_variant.available %}
<div class="shopify-payment-button">
<button type="button" id="flo-buy-now-button" onclick="handleFloBuyNowBtn(event)" class="shopify-payment-button__button shopify-payment-button__button--unbranded" name="flo-buy-now-button">
{{ 'Buy it now' }}
</button>
</div>
{%- endif -%}
<style>
#shopify-section-{{ section.id }} .shopify-payment-button {
{%- unless product.selected_or_first_available_variant.available -%}
display: none;
{%- endunless -%}
{%- if payment_button_background != blank and payment_button_background != 'rgba(0,0,0,0)' -%}
--button-background: {{ payment_button_background.rgb }};
{%- endif -%}
{%- if payment_button_text_color != blank and payment_button_text_color != 'rgba(0,0,0,0)' -%}
--button-text-color: {{ payment_button_text_color.rgb }};
{%- endif -%}
}
</style>
{%- endif -%}
</buy-buttons>
{%- endform -%}

Javascript code -

// Ensure the default size is marked as selected when the page loads
var defaultSelector = productElement.querySelector('.size-selector.selected');
if (defaultSelector) {
defaultSelector.click();
}
});
});
</script>

oscprofessional · ‎07-23-2024

Hello@Prince1995
Please Check this JS script

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Ensure this event listener runs only once
    var productElements = document.querySelectorAll('.product-grid-options-size');

    productElements.forEach(function(productElement) {
        var sizeSelectors = productElement.querySelectorAll('.size-selector');

        sizeSelectors.forEach(function(selector) {
            selector.addEventListener('click', function(event) {
                event.preventDefault();

                var productId = this.getAttribute('data-product-id');
                var variantId = this.getAttribute('data-variant-id');

                // Remove 'selected' class from all size selectors within this product
                sizeSelectors.forEach(function(sel) {
                    sel.classList.remove('selected');
                });

                // Add 'selected' class to the clicked size selector
                this.classList.add('selected');

                // Update the hidden input with the selected variant ID
                document.getElementById('variant-id-' + productId).value = variantId;
            });
        });

        // Ensure the default size is marked as selected when the page loads
        var defaultSelector = productElement.querySelector('.size-selector.selected');
        if (defaultSelector) {
            defaultSelector.click(); // Trigger click to initialize state
        }
    });
});
</script>

please check JS and Apply for your template

Variant Selection issue

Variant Selection issue

Community Blog Articles