Show ALL available sizes on hover and not just one (the selected)

AMPALI
New Member
11 0 0

I have tried searching these forums for help on how to make all the available sizes show up on hover on product page listed in "All products" page. 

Right now it's only showing option 1 which is "36/38" but not the other available sizes. How can I change it to be all available sizes?

 

The link to the site is: https://mnpn1rbroiowwz38-27035304014.shopifypreview.com (Products --> ALL)

 

Hope someone can help. Thanks in advance! 

0 Likes
PieterIEDM
Shopify Partner
31 3 5

Hi, I see 3 sizes on some of the products.

 

Zinnia Dress
DKK 768,00
  • AVAILABLE IN

    36/38 38/40 40/42
0 Likes
AMPALI
New Member
11 0 0

Hi.

 

Yes I manually just made new spans as a temporary solution. But I would still like how to use liquid instead of spans that will change as soon one of the sizes is sold out.


0 Likes
AMPALI
New Member
11 0 0

Before the code was this:

 

<ul class="product-accordion-content view-more" id="hoverul">
{% assign current_variant = product.selected_or_first_available_variant %}
<li class="detail-item"><p id="hoverdetails">AVAILABLE IN</p> <p><span class="variant_selected" id="hoverdetails1">{{ current_variant.title }}</span></p></li>

 

I need to know what I should replace {{ current_variant.title }}

 

 

0 Likes
PieterIEDM
Shopify Partner
31 3 5

Hi,

 

This is the code that I used to achieve the same effect on a website we are building for a client.

 

<span class="grid-item-sizes">
{% unless sold_out %}      
  {% unless product.has_only_default_variant %}
    {% for option in product.options_with_values %}
      {% assign downcased_option = option.name | downcase %}
        {% if downcased_option contains 'size' %}
          {% assign is_size = true %}
          {% for value in option.values %}
            {% assign variant_available = true %}
            {% if product.options.size == 1 %}
              {% unless product.variants[forloop.index0].available  %}
                {% assign variant_available = false %}
              {% endunless %}
            {% endif %}
          <p class="{% unless variant_available %}soldout {% endunless %}">{{ value | escape }}</p>
          {% endfor %}      
        {% endif %}
    {% endfor %}
  {% endunless %}      
{% endunless %}
</span>

This loops through all variants called size and returns them.

0 Likes
AMPALI
New Member
11 0 0

Hi.

 

Thank you very much. I have inserted the code and now it's showing all the sizes no matter if it's in inventory or not.

Do you know how I can edit the code so it also shows when the size is not in stock like on the product page (crossed)?

 

Thanks

 

0 Likes
PieterIEDM
Shopify Partner
31 3 5

I tried working through it, to modify it, but a problem comes in as soon as you have a product in different colors and sizes. Each color and size combination has a variant ID, so if you have a dress in 3 colours with 4 sizes it will show 12 options on your product hover information. This is due to you having to query the variant id, to be able to check if the item is in stock or not. 

 

If I come across a solution, I will let you know.

0 Likes
AMPALI
New Member
11 0 0

@PieterIEDM wrote:

I tried working through it, to modify it, but a problem comes in as soon as you have a product in different colors and sizes. Each color and size combination has a variant ID, so if you have a dress in 3 colours with 4 sizes it will show 12 options on your product hover information. This is due to you having to query the variant id, to be able to check if the item is in stock or not. 

 

If I come across a solution, I will let you know.


Alright. Thank you!

0 Likes
DISSCONDUCT
New Member
1 0 0

Hi, 

 

I think this code solves my problem too. I am not an expert so is there someone who can help and explain where do i put the code? 

 

Thanks in advance, 

 

Randy 

0 Likes