Customize Variant selector appearance

StephDStephD Posts: 2Member
Hi everyone, I'm also kind of new to eCom customization, can anyone tell me how I can access the files behind this bit of code so I can customize the design of matrix variant selection? (the part in bold)

<div class="product-option row">
        <div class="col-md-12">
          {{ product | html_product_configure | raw }}
        </div>
</div>

The original drop-down list is terrible looking, I'd like to go for color dots or something like this.
I've changed many things through the CSS but I can't find a way to access the PHP/Twig code...
Thank you

6 comments

  • michaelsteelemichaelsteele Posts: 42Member
    Bumping this
  • JoeyJoey Posts: 152Administrator, Moderator, Lightspeed Staff moderator
    The product configure snippet is provided as-is by the platform and can not be modified:
     {{ product | html_product_configure | raw }} 
    There are, however, ways to make the variant selector look different. The easiest way is to apply CSS to style the select box.

    If you want to go further you can create your own select list or individual boxes per option. Each variant has its own URL, basically the product URL + Variant ID

    First you need to get a list of the variants:
    {% for variant in product.variants %}

    And check if there are more then 1 variant:
    {% if product.variants |length >1 %}

    Then create a list of available Variants with a link to the specific variant:
    <ul class="buttons-or-list">
      {% for variant in product.variants %}
         <li class="{% if not variant.stock.available %}unavailable{% elseif variant.id == product.vid %}selected{% elseif variant.id != product.vid%}not-selected{% endif %}">
           <a href="{{ ( product.url ~ '?id=' ~ variant.id) | url }}" title="{% if variant.stock.available %}{{ 'In stock' | t }}{% else %}{{ 'Out of stock' | t }}{% endif %}">
              {{ variant.title | split(':')|last }}
           </a>
          </li>
       {% endfor %}
    </ul>

    You can style the above list any way you want, or create div's, endless options.

    If you have multi-attribute variants (matrices) you will need to use the split filter:
    <ul class="buttons-or-list">
    {% for variant in product.variants %}
    <li class="{% if not variant.stock.available %}unavailable{% elseif variant.id == product.vid %}selected{% elseif variant.id != product.vid%}not-selected{% endif %}">
    <a href="{{ ( product.url ~ '?id=' ~ variant.id) | url }}" title="{% if variant.stock.available %}{{ 'In stock' | t }}{% else %}{{ 'Out of stock' | t }}{% endif %}">
    {% if 'Color:' in variant.title and 'Size:' in variant.title %}
    {% set splittitle = variant.title | split('","')[0] %}
    {{ splittitle | trim('"Color: ') }}
    {% set splittitle = variant.title | split('"Size: ')[1] %}
    {{ splittitle[:-1] }}
    {% elseif 'Color' in variant.title and 'Size' not in variant.title %}
    {{ variant.title | split(': ')|last }}
    {% elseif 'Size' in variant.title and 'Color' not in variant.title %}
    {{ variant.title | split(': ')|last }}
    {% endif %}
    </a>
    </li>
    {% endfor %}
    </ul>

    You need to modify the code above if you use different attributes.

    Hope this helps!
    eCom Support Team
    Lightspeed HQ
  • ljorikljorik Posts: 4Member

    i have a question regarding this, i'd like to modify the variant selector drop down menu but i'd like to grey out sold variants, how exactly do i accomplish this in the code, i tried multiple things with no succes yet

  • JoeyJoey Posts: 152Administrator, Moderator, Lightspeed Staff moderator

    @ljorik The above example with the customized list can do this, notice the unavailable class:

    class="{% if not variant.stock.available %}unavailable
    


    eCom Support Team
    Lightspeed HQ
  • adlamoureuxadlamoureux Posts: 10Member

    @Joey is there a way use the code you supplied above and NOT reload the full page when a variable it picked, and just load the correct picture?

    I have taken out the herf portion and it works to not reload the page and will add the correct page via the button, but i am still trying to change the picture on the page to reflect the correct variable. I do see that you can click a thumbnail and it doesn't reload the page, how can i do the same.


    thanks

  • adlamoureuxadlamoureux Posts: 10Member

    Also if you use the code that you mentioned above it will put each variant together as one choice.. example (BLUE : MEDIUM) , (BLUE : LARGE) , etc...

    Is it possible to allow two choices? Example one row is color BLUE, RED, GREEN buttons.. Then below is the sizes , SMALL MED, LARGE.

    Once both color and size is selected than the page updates to show the correct item and you can add it to the cart.

    Thanks

Sign In or Register to comment.