Jump to content

Greyed out sizes(attributes) when out of stock

yaloe2017

By yaloe2017 ,
in General topics

 Share Followers 18

Recommended Posts

yaloe2017

yaloe2017 1

Posted
Posted (edited)

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
yaloe2017

yaloe2017 1

Posted
Posted (edited)

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
  • 2 years later...
  • 6 months later...
matejmili

matejmili 1

Posted
Posted

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

Daniel Tengler 426

Posted
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
Daniel Tengler

Daniel Tengler 426

Posted
Posted

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
Piter17

Piter17 1

Posted
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
Daniel Tengler

Daniel Tengler 426

Posted
Posted
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
Mayret Moda Colombia

Mayret Moda Colombia 1

Posted
Posted
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
  • 2 weeks later...
LucasV

LucasV 3

Posted
Posted
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
  • 4 weeks later...
ndiaga

ndiaga 339

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

bencassell 0

Posted
Posted

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
  • 1 month later...
  • 1 month later...
Aja2800

Aja2800 1

Posted
Posted
On 4/14/2020 at 6:44 AM, D. Tengler said:

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.

Did you make this module? I would be happy to pay for it, really need this functionality for my shop :)

Share this post

Link to post
Share on other sites
ndiaga

ndiaga 339

Posted
Posted (edited)
8 minutes ago, Aja2800 said:

Did you make this module? I would be happy to pay for it, really need this functionality for my shop :)

Hi,

Yes, I  solve   a  client's   problem  with  a  module.

Edited by ndiaga (see edit history)

Share this post

Link to post
Share on other sites
  • 4 weeks later...
chemocycling

chemocycling 0

Posted
Posted
On 4/12/2020 at 4: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

where we can download that module . i cant find it 

thanks

Share this post

Link to post
Share on other sites
  • 3 weeks later...
Inter Svetainė

Inter Svetainė 6

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

Add custom style to TPL code.

to:

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.

Please never use !important in CSS. Just add needed styling in custom.css or similar file to overwrite theme or/and global CSS declarations.

Share this post

Link to post
Share on other sites
  • 4 weeks later...
rosejaafar

rosejaafar 1

Posted
Posted (edited)
On 8/19/2017 at 4:05 AM, yaloe2017 said:

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  

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

I have make changes but don't working fine.

Can anyone help me how to fix it?

 

 

Edited by rosejaafar (see edit history)

Share this post

Link to post
Share on other sites
rosejaafar

rosejaafar 1

Posted
Posted
6 hours ago, Inter Svetainė said:

Could You try to mark places in screenshot where to look at and what You want to do?

my size attributes don't work properly after i make a change and just a certain size appear. it should appear from size S to 3XL and position of the size  not well organized .Please help me😕

Screenshot (583)_LI.jpg

Share this post

Link to post
Share on other sites
rosejaafar

rosejaafar 1

Posted
Posted
6 hours ago, Inter Svetainė said:

Could You try to mark places in screenshot where to look at and what You want to do?

i want my sizes attributes same like this,,i have use the code but not work well

 

greyed.png

Share this post

Link to post
Share on other sites
Inter Svetainė

Inter Svetainė 6

Posted
Posted
6 hours ago, rosejaafar said:

i want my sizes attributes same like this,,i have use the code but not work well

 

greyed.png

How good You are in the programing? HTML from 1 to 10. CSS from 1 to 10. PHP from 1 to 10. Are You familiar with Prestashop 1.7.x structure?

I need to know this to help You.

Share this post

Link to post
Share on other sites
rosejaafar

rosejaafar 1

Posted
Posted
1 hour ago, Inter Svetainė said:

How good You are in the programing? HTML from 1 to 10. CSS from 1 to 10. PHP from 1 to 10. Are You familiar with Prestashop 1.7.x structure?

I need to know this to help You.

I'm IT student and still learning about programming..my HTML knowledge from 8 to 9,,but PHP about 5 to 6...Nope,,im not familiar with Prestashop 1.7 structure,,first time i'm create website use prestashop.Please help me to find the error..This website for my internship project.

Share this post

Link to post
Share on other sites
Daniel Tengler

Daniel Tengler 426

Posted
Posted

obrazek.png.1d449b5945bcfee6c44501c0040be966.png
 

./themes/classic/templates/catalog/_partials/product-variants.tpl

find: 

{elseif $group.group_type == 'radio'}

change to: 

{elseif $group.group_type == 'radio'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="input-container float-xs-left" {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1}style="pointer-events:none;"{/if}>
              <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" {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1}style="color:red;"{/if}>{if {$group.attributes_quantity[{$id_attribute|intval}]} < 1}<strike>{$group_attribute.name}</strike>{else}{$group_attribute.name}{/if}</span>
              </label>
            </li>
          {/foreach}
        </ul>
      {/if}

obrazek.png.ddfe55b25309bbdbcccd8139b960d313.png

  • Like 1
  • Sad 1

Share this post

Link to post
Share on other sites
  • 3 weeks later...
  • 2 weeks later...
rb10

rb10 1

Posted
Posted
On 11/14/2020 at 7:58 AM, 4you.software said:

obrazek.png.1d449b5945bcfee6c44501c0040be966.png
 

./themes/classic/templates/catalog/_partials/product-variants.tpl

find: 


{elseif $group.group_type == 'radio'}

change to: 


{elseif $group.group_type == 'radio'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="input-container float-xs-left" {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1}style="pointer-events:none;"{/if}>
              <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" {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1}style="color:red;"{/if}>{if {$group.attributes_quantity[{$id_attribute|intval}]} < 1}<strike>{$group_attribute.name}</strike>{else}{$group_attribute.name}{/if}</span>
              </label>
            </li>
          {/foreach}
        </ul>
      {/if}

obrazek.png.ddfe55b25309bbdbcccd8139b960d313.png

hi thanks for you, how i can apply this also for color attribute ?

 

Share this post

Link to post
Share on other sites
rb10

rb10 1

Posted
Posted
40 minutes ago, ndiaga said:

https://blog.prestatuts.com/prestashop-desable-product-combinations-when-out-of-stock/

thanks, but this explain only for radio and not for color

i need for this code part   (i wanna have color like as grey but clickable)  

 {elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
         
            <li class="float-xs-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>
          {/foreach}
        </ul>

 

 

Share this post

Link to post
Share on other sites
Daniel Tengler

Daniel Tengler 426

Posted
Posted

It's all working for me.
Everything can be done, such as a crossed out color and text completion.
I don't want anyone to contact me in a private message.
If I want to answer, I will answer, if I want to give codes, I will give them.
Programming gives me bread, advice in the forum gives me nothing.

@ndiaga will definitely advise you.

obrazek.png.29945b8a2b4eda33882ddb20a9909c73.png

Share this post

Link to post
Share on other sites
rb10

rb10 1

Posted
Posted
17 minutes ago, 4you.software said:

It's all working for me.
Everything can be done, such as a crossed out color and text completion.
I don't want anyone to contact me in a private message.
If I want to answer, I will answer, if I want to give codes, I will give them.
Programming gives me bread, advice in the forum gives me nothing.

@ndiaga will definitely advise you.

obrazek.png.29945b8a2b4eda33882ddb20a9909c73.png

sorry for my message, i understand perfectly! 

for this result you have used code quoted over, because i can't see part for color.

thanks, and sorry again!

Share this post

Link to post
Share on other sites
  • 1 month later...
alebupal

alebupal 0

Posted
Posted

Hi, thank you very much for the code, but I have a problem that I cannot solve.
I have two attributes: size and color.
I have:
Product X: color red, size L with 5 units.
Product X: blue color, size L with 0 units.
With this code, the product X with size L and blue color on the web is shown with stock because the stock is the sum of both sizes.
Is there any possible solution?

 

Share this post

Link to post
Share on other sites
  • 5 weeks later...
MerseyRay

MerseyRay 26

Posted
Posted

@Daniel Tengler Thankyou, that code is working fine

Could something like this code be utilized for an out-of-stock button on the category list of products

Something along the lines of this

{if variants exist and stock is greater than 1 on any attribute}
    <Choose options button>
{else}
  {if in-stock}
    <View Product>
  {else}
    <Out of stock button}
{/if}

 

Or if that's not possible, how about to add a product flag to the product on category list view saying "Out of stock"

Many thanks

Share this post

Link to post
Share on other sites
Daniel Tengler

Daniel Tengler 426

Posted
Posted (edited)

Product list

Here is an example of how to find out if a product has variants, how quantity are in stock, etc ...

 

./themes/classic/templates/catalog/_partials/miniatures/product.tpl 

{if $product.main_variants}
	all variants quantity: {$product.quantity_all_versions} <br />
	default variant quantity: {$product.quantity} <br />
				
	{if $product.quantity_all_versions > 0}
		yes, count quantity all variants in stock <br />
	{else}
		all variant quantity <= 0 <br />
	{/if}
				
	{if $product.quantity > 0}
		yes, default variant in stock <br />
	{else}
		default variant quantity <= 0 <br />
	{/if}
{else}
	product quantity without variant: {$product.quantity}
				
	{if $product.quantity > 0}
		yes, product in stock <br />
	{else}
		product out of stock, quantity <= 0 <br />
	{/if}
{/if}

 

Edited by Daniel Tengler (see edit history)

Share this post

Link to post
Share on other sites
MerseyRay

MerseyRay 26

Posted
Posted (edited)

HI Daniel,

thanks for the reply and help.

Can I just check that the first line is correct ?   {if $product.main_variants}

Its just that some of my products with variants says this is false so uses the code after the {else} statement.

If I remove all that first line, the {else} and the last line {/if} then the variables do show the count for all the variants correctly, so they are fine.

 

Many thanks

Ray

Edited by MerseyRay (see edit history)

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
 Share
Followers 18
Go to topic listing
×
×
  • Create New...

Important Information

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

  I accept