Envy theme- More Variants in the product page

[chiara94]

I used this code to add variants to my product, but the result is that i can display the variants only as dropdown list. If i display the variants as button, the selection of the variants works only for the first one and send you directly to the cart.

how I can fix this code to display the 2 drop-down list as button.

my url is adriabeachwear.com

And this is the code that I used

Code for the first variant dropdown
{% endcomment %}
<div class="product-form-option col-md-6 col-sm-12 col-12">
<div class="line-item-property__field">
<label>Taglia: slip</label><br>
<div class="product-options">
<button onclick="selectVariant('XXS(36)')" class="variant-btn">XXS (36)</button>
<button onclick="selectVariant('XS(38)')" class="variant-btn">XS (38)</button>
<button onclick="selectVariant('S(40)')" class="variant-btn">S (40)</button>
<button onclick="selectVariant('M(42)')" class="variant-btn">M (42)</button>
<button onclick="selectVariant('L(44)')" class="variant-btn">L (44)</button>
</div>
</div>
</div>

{% comment %}
Code for the second variant dropdown
{% endcomment %}
<div class="product-form-option col-md-6 col-sm-12 col-12">
<div class="line-item-property__field">
<label>Taglia reggiseno</label><br>
<div class="product-options">
<button onclick="selectVariant('1')" class="variant-btn">1</button>
<button onclick="selectVariant('2')" class="variant-btn">2</button>
<button onclick="selectVariant('3')" class="variant-btn">3</button>
<button onclick="selectVariant('4')" class="variant-btn">4</button>
<button onclick="selectVariant('5')" class="variant-btn">5</button>
</div>
</div>
</div>

[tim]

The code snippet you've shared is not complete. 

The idea is that when any of these buttons is clicked, browser must execute Javascript function selectVariant with relevant parameter.

However, there is no JS code.

By default, any button inside the form (product form in this case) submits your form with whatever selections are made. And since selectVariant is not defined, buttons perform their default function, same as you click "add to cart".

You can try this code instead:

<div class="more-data">
    <p class="line-item-property__field">
    <legend class="swatch-title">Taglia: slip</legend>
    <label><input type="radio" name="properties[Taglia: slip]" value="XXS (36)" checked=checked> XXS (36)</label>
    <label><input type="radio" name="properties[Taglia: slip]" value="XS (38)"> XS (38)</label>
    <label><input type="radio" name="properties[Taglia: slip]" value="S (40)"> S (40)</label>
    <label><input type="radio" name="properties[Taglia: slip]" value="M (42)"> M (42)</label>
    <label><input type="radio" name="properties[Taglia: slip]" value="L (44)"> L (44)</label>
  </p>

  <p class="line-item-property__field">
    <legend class="swatch-title">Taglia: reggiseno </legend>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="1" checked=checked> 1</label>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="2"> 2</label>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="3"> 3</label>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="4"> 4</label>
    <label><input type="radio" name="properties[Taglia: reggiseno]" value="5"> 5</label>
  </p>
</div>

<style>
  .line-item-property__field {
    line-height: 2.5;
  }
  .line-item-property__field input {
    appearance: none;
  }
  .line-item-property__field label {
    border: 1px solid var(--border-color);;
    min-width: 6em;
    display: inline-block;
    text-align: center;
    padding: 0 0.5rem;
  }
  .line-item-property__field  label:has(:checked) {
    color: black;
    box-shadow: inset 0 0 0 1px var(--color-primary);
  }
</style>

 

[chiara94]

thank you @tim , your code was working

but now they updated the theme and is not working anymore, and also changed the the style.

what code i need to go back to the same effect of before?

i send a pic where i have opened the console on the "brasiliana" variant (standard from product form)

thank you in advance

[tim · Accepted solution]

Yes, they've changed the structure and some CSS variables.

Hope they'll stick with this for some time...

Try this code instead:

<div class="more-data">
  {% assign form_id = 'product-form-' | append: section.id %}
  <p class="line-item-property__field">
    <legend class="swatch-title">Taglia: slip</legend>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="XXS (36)" checked=checked> XXS (36)</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="XS (38)"> XS (38)</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="S (40)"> S (40)</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="M (42)"> M (42)</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: slip]" value="L (44)"> L (44)</label>
  </p>

  <p class="line-item-property__field">
    <legend class="swatch-title">Taglia: reggiseno </legend>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="1" checked=checked> 1</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="2"> 2</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="3"> 3</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="4"> 4</label>
    <label><input type="radio" form={{ form_id }} name="properties[Taglia: reggiseno]" value="5"> 5</label>
  </p>
</div>

<style>
  .line-item-property__field {
    line-height: 2.5;
  }
  .line-item-property__field input {
    appearance: none;
  }
  .line-item-property__field label {
    border: 1px solid var(--border-color);;
    min-width: 7em;
    display: inline-block;
    text-align: center;
    padding: 0 0.5rem;
    margin-bottom: 5px;
  }
  .line-item-property__field  label:has(:checked) {
    color: black;
    box-shadow: inset 0 0 0 1px black;
  }
</style>

[chiara94]

just change the last part to match perfectly the original variants

".line-item-property__field label:has(:checked) {
color: white;
background: black;
}
</style>

"