Greyed out sizes(attributes) when out of stock

[yaloe2017 1]

Hello,

My shop is almost finished. There is one thing i cannot archive.

I want my shoe sizes to be greyed out when the are out of stock.

I know I can hide them via the backend (Display unavailable product attributes on the product page) 

Thank you!

Edited August 18, 2017 by yaloe2017 (see edit history)

[yaloe2017 1]

I fixed this issue:

 

In product.tpl (add the black lines)

 

<ul id="group_{$id_attribute_group}">

                    {foreach from=$group.attributes key=id_attribute item=group_attribute}

                    {if {$group.attributes_quantity[{$id_attribute|intval}]} > 1} //product higher then 0 is stock

                        <li class="input-container float-left">

                            <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"

                                   name="group[{$id_attribute_group}]"

                                   value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>

                            <span class="radio-label">{$group_attribute.name}</span>

                        </li>

                        {/if}

                        {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1} // product lower then -1 is out of stock

                        <li class="input-container out-of-stock-float-left">

                            <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"

                                   name="group[{$id_attribute_group}]"

                                   value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>

                            <span class="radio-label">{$group_attribute.name}</span>

                        </li>

                        {/if}

                    {/foreach}

                </ul>

 

You can style using CSS:

 

For example to use color red and line through:

 

/* out of stock css */

li.input-container.out-of-stock-float-left {

    float: left !important;

    color: red !important;

}

li.input-container.out-of-stock-float-left span.radio-label {

    text-decoration: line-through;

}

/* end out of stock css */

 

Cheers 

Edited August 18, 2017 by yaloe2017 (see edit history)

[Piter17 1]

Hello,

 

I need the same solution, but for presta 1.7. Anyone can help me?

[Piter17 1]

BUMP

[Knowband Plugins 122]

Can need to make the similar changes in the following file for PS1.7

theme/{your_theme}/templates/catalog/partials/product-variants.tpl

[matejmili 1]

Hi!

I use Prestashop 1.7.5.1

theme/{your_theme}/templates/catalog/partials/product-variants.tpl

I have make changes but don't working fine.

Can anyone help me how to fix it?

<div class="product-variants">
  {foreach from=$groups key=id_attribute_group item=group}
    {if !empty($group.attributes)}
    <div class="clearfix product-variants-item">
      <span class="control-label">{$group.name}</span>
      {if $group.group_type == 'select'}
        <select
          class="form-control form-control-select"
          id="group_{$id_attribute_group}"
          data-product-attribute="{$id_attribute_group}"
          name="group[{$id_attribute_group}]">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
          {/foreach}
        </select>
      {elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
          {if {$group.attributes_quantity[{$id_attribute|intval}]} > 1} //product higher then 0 is stock
            <li class="pull-left input-container">
              <label>
                <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
                <span
                  {if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}" {/if}
                  {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}
                ><span class="sr-only">{$group_attribute.name}</span></span>
              </label>
            </li>
            {/if}
          {/foreach}
        </ul>
      {elseif $group.group_type == 'radio'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
          {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1} // product lower then -1 is out of stock
            <li class="input-container pull-left">
              <label>
                <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
                <span class="radio-label">{$group_attribute.name}</span>
              </label>
            </li>
            {/if}
          {/foreach}
        </ul>
      {/if}
    </div>
    {/if}
  {/foreach}
</div>

 

[D. Tengler 163]

Commented text need to be changed.
Comment in HTML or TPL is <!-- you comment -->
Now the comment is only // (valid for PHP)

Find two differences in the original code and in the code I modified.
Basic knowledge is required for any HTML, TPL or PHP editing. !!!

<div class="product-variants">
  {foreach from=$groups key=id_attribute_group item=group}
    {if !empty($group.attributes)}
    <div class="clearfix product-variants-item">
      <span class="control-label">{$group.name}</span>
      {if $group.group_type == 'select'}
        <select
          class="form-control form-control-select"
          id="group_{$id_attribute_group}"
          data-product-attribute="{$id_attribute_group}"
          name="group[{$id_attribute_group}]">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
          {/foreach}
        </select>
      {elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
          {if {$group.attributes_quantity[{$id_attribute|intval}]} > 1} <!-- product higher then 0 is stock -->
            <li class="pull-left input-container">
              <label>
                <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
                <span
                  {if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}" {/if}
                  {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}
                ><span class="sr-only">{$group_attribute.name}</span></span>
              </label>
            </li>
            {/if}
          {/foreach}
        </ul>
      {elseif $group.group_type == 'radio'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
          {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1} <!-- product lower then -1 is out of stock -->
            <li class="input-container pull-left">
              <label>
                <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
                <span class="radio-label">{$group_attribute.name}</span>
              </label>
            </li>
            {/if}
          {/foreach}
        </ul>
      {/if}
    </div>
    {/if}
  {/foreach}
</div>

 

Edited April 12 by D. Tengler (see edit history)

[matejmili 1]

thank you! I'm a beginner so I don't have much experience..

I don't understand how to make that red line, that size should be crossed when it is sold out??

[D. Tengler 163]

Add custom style to TPL code.

Quote

<li class="input-container pull-left">

to:

Quote

<li class="input-container pull-left" style="color:red !important; text-decoration: line-through;">

You edit this in the code section where count is <1. In this code section, you need to add a condition when count = 0.

If you don't have the knowledge, it's better to hire someone and you're done in a few minutes.

[matejmili 1]

now it's red all, i want it to be just sold out red and strikethrough.

[matejmili 1]

i want same this

[D. Tengler 163]

upload your product-variants.tpl file here

[matejmili 1]

 

product-variants.tpl

[D. Tengler 163]

I don't want the original, I need the one you modified.

[matejmili 1]

sorry, here again.

product-variants.tpl

[D. Tengler 163]

You didn't even copy the code that yaloe2017 put here !!!

[matejmili 1]

sorry, i has add code but then get error on product page

product-variants.tpl

[D. Tengler 163]

test:

https://e-apps.eu/test/ps-17/women/2-11-brown-bear-printed-sweater.html#/3-velikost-l

[D. Tengler 163]

Modified code for Prestashop 1.7.

In attachment.

Disable clicked values and change color to red.

product-variants.tpl

[matejmili 1]

now work, thank you very much!

[D. Tengler 163]

You can click on the gray heart below the posts of all users who posted help here.

You will appreciate the effort and time devoted to this thread.

[Piter17 1]

50 minut temu, D. Tengler napisał:

Modified code for Prestashop 1.7.

In attachment.

Disable clicked values and change color to red.

product-variants.tpl 4.27 kB · 2 downloads

Hi,

You are invaluable, thank you so much!

I have got just a question about disabled attributes. Is it possible to grey them out, but make still active? I need the option: let me know, when the product is available again.

 

P.S I fixed it:)

 

You have to change:

 

<li class="input-container" style="pointer-events: none; float: left !important;">

to

<li class="input-container" style="pointer-events: auto; float: left !important;">

 

Edited April 12 by Piter17 (see edit history)

[D. Tengler 163]

I write a module on it to allow more settings, even for a drop-down list or colors.

Tomorrow will be ready 😉
Will be free, but download only from my site.

[D. Tengler 163]

7 minutes ago, Piter17 said:

Hi,

You are invaluable, thank you so much!

I have got just a question about disabled attributes. Is it possible to grey them out, but make still active? I need the option: let me know, when the product is available again.

 

P.S I fixed it:)

<span class="radio-label" style="color:red !important; text-decoration: line-through;background: silver !important;border: 2px solid silver;">......

<li class="input-container" style="float: left !important;">

 

[Mayret Moda Colombia 1]

On 4/12/2020 at 3:59 PM, D. Tengler said:

I write a module on it to allow more settings, even for a drop-down list or colors.

Tomorrow will be ready 😉
Will be free, but download only from my site.

Hi,

Do you have any news of that brilliant module?

[D. Tengler 163]

I'm doing the last testing.

[Mayret Moda Colombia 1]

1 hour ago, D. Tengler said:

I'm doing the last testing.

Ok! I will wait. It will be compatible with PS1.7X?

[D. Tengler 163]

PS 1.6.1 to 1.7.6

Only radio buttons.

My test page PS 1.7.6 here:

https://e-apps.eu/test/ps-17/women/2-69-brown-bear-printed-sweater.html#/3-velikost-l

Edited April 13 by D. Tengler (see edit history)

[Mayret Moda Colombia 1]

1 hour ago, D. Tengler said:

PS 1.6.1 to 1.7.6

Only radio buttons.

My test page PS 1.7.6 here:

https://e-apps.eu/test/ps-17/women/2-69-brown-bear-printed-sweater.html#/3-velikost-l

It looks great, but I have a question, How does it behave with 1 size-color combination?

For example: https://e-apps.eu/test/ps-17/men/1-hummingbird-printed-t-shirt.html

If there is no stock of black for any size, is black and all sizes disabled?

sorry for my english

[D. Tengler 163]

Only sizes radio buttons.

For other options I would have to write a java script that checks all the options.
This is no longer easy.

[LucasV 3]

On 4/12/2020 at 3:59 PM, D. Tengler said:

I write a module on it to allow more settings, even for a drop-down list or colors.

Tomorrow will be ready 😉
Will be free, but download only from my site.

Hi! Thanks for your work on this issue. 
I can't seem to find your module on your website, can I download it somewhere? 

Thanks.

Lucas

[webmarko 0]

Hello,

I would like to do the same thing, this my file template (Prestashop version 1.7.6.5)

Thank you so much for your hellp

product-variants.tpl

[ndiaga 307]

Hi,

You  can  read  this  tutorials  : https://blog.prestatuts.com/prestashop-desable-product-combinations-when-out-of-stock/

[webmarko 0]

I'm confused to use this code for my template file, can you please explain more.

Thank you so much

[ndiaga 307]

3 minutes ago, webmarko said:

I'm confused to use this code for my template file, can you please explain more.

Thank you so much

This   code   was  for   a  custom  website  but  if  you read  the  code  carefully   you  can  implement  it  in   your  website  as well.

Edited May 20 by ndiaga (see edit history)

[webmarko 0]

I'm having trouble putting this code into my file, could you help me please?

Thank you so much

[bencassell 0]

This doesn't work for 1.7.6.5, I'm guessing because you can disable "out of stock" from view.

 

I'd still really like the combination to show with a red line through it, is there a way to do it?