Jump to content
yaloe2017

Greyed out sizes(attributes) when out of stock

Recommended Posts

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!


post-1431922-0-20291900-1503084578_thumb.png

Edited by yaloe2017 (see edit history)

Share this post


Link to post
Share on other sites

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  :mellow:

post-1431922-0-20896300-1503086772_thumb.png

Edited by yaloe2017 (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Hello,

 

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

Share this post


Link to post
Share on other sites

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

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

  • Like 1

Share this post


Link to post
Share on other sites

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?1495781568_ScreenshotatApr1210-46-14.thumb.png.a43d0dff2709a46a67da712346484b63.png

<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>

 

Share this post


Link to post
Share on other sites
Posted (edited)

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 by D. Tengler (see edit history)

Share this post


Link to post
Share on other sites

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??

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Screenshot at Apr 12 14-32-42.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
Posted (edited)
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 by Piter17 (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites
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;">

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Thank you so much

Share this post


Link to post
Share on other sites
Posted (edited)
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 by ndiaga (see edit history)

Share this post


Link to post
Share on other sites

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

Thank you so much

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More