Jump to content

Greyed out sizes(attributes) when out of stock

yaloe2017

By yaloe2017
in General topics

 Share

Recommended Posts

yaloe2017 Newbie

yaloe2017

Posted
  • Author
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)
  • Thanks 1
Link to comment
Share on other sites
  • 2 years later...
  • 6 months later...
matejmili Newbie

matejmili

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>

 

Link to comment
Share on other sites
Piter17 Newbie

Piter17

Posted
Posted (edited)
50 minut temu, Guest 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)
Link to comment
Share on other sites
Mayret Moda Colombia Newbie

Mayret Moda Colombia

Posted
Posted
1 hour ago, Guest 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

Link to comment
Share on other sites
  • 2 weeks later...
LucasV Apprentice

LucasV

Posted
Posted
On 4/12/2020 at 3:59 PM, Guest 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

Link to comment
Share on other sites
  • 4 weeks later...
  • 1 month later...
  • 1 month later...
Aja2800 Newbie

Aja2800

Posted
Posted
On 4/14/2020 at 6:44 AM, Guest 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 :)

Link to comment
Share on other sites
  • 4 weeks later...
  • 3 weeks later...
Inter Svetainė Apprentice

Inter Svetainė

Posted
Posted
On 4/12/2020 at 3:20 PM, Guest 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.

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

rosejaafar

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)
Link to comment
Share on other sites
rosejaafar Newbie

rosejaafar

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

Link to comment
Share on other sites
rosejaafar Newbie

rosejaafar

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.

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

rb10

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 ?

 

Link to comment
Share on other sites
rb10 Contributor

rb10

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>

 

 

Link to comment
Share on other sites
rb10 Contributor

rb10

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!

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

alebupal

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?

 

Link to comment
Share on other sites
  • 5 weeks later...
Ray UK Collaborator

Ray UK

Posted
Posted

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

Link to comment
Share on other sites
Guest

Guest

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 Guest (see edit history)
Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

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)
Link to comment
Share on other sites
  • 3 months later...
  • 2 years later...
LuiMai91 Newbie

LuiMai91

Posted
Posted
On 14/11/2020 at 8:57 AM, rosejaafar dice:

Done,, my size attribute greyed out already for out of stock product,,thank you for your help☺️

Screenshot (599).png

Hi everyone, i need this same solution for my clothing store, PS 1.7.6.1, i can't see messages of "Guest" user that seem to give the correct solution, can help me?

Thanks

Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

Posted
Posted (edited)

@LuiMai91

In your product-variants.tpl file, copy my "Span" section from here :) 

{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}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
                <span class="radio-label" {if {$group.attributes_quantity[{$id_attribute|intval}]} < 1}style="color:red;"><strike>{$group_attribute.name}</strike>{else}"> {$group_attribute.name}{/if}</span>
              </label>
            </li>
          {/foreach}
        </ul>
      {/if}

 

Edited by MerseyRay (see edit history)
Link to comment
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
Go to topic listing
×
×
  • Create New...