Edit History

On 6/1/2018 at 6:03 PM, Mariano said:

Hi everybody, I was able to solve this feature for my needs.
I tested on PS 1.6.1.17

Sorry for my english.

I took the base from https://github.com/redwert/prestashop-color-and-size

For a shoes sell site, I needed to manage several size attributes. (men size, women size, child size, mix size) 

I used 1 combo select and colors attribute for every product (more than one combo select is not needed for my purpose).

Example: for a product I have
Red -> 7, 8, 9, 10
Blue -> 8,9,10
White -> 7,9

When I click on Red, the combo is setting with size 7,8,9,10. Click on Blue, the combo only shows 8,9,10, etc.
The unavailable combinations doesn't shows.

The difference with https://github.com/redwert/prestashop-color-and-size is that the "ID Size attribute" may vary (men size, women size, child size, mix size). For clothes Size possibly one "ID Size attribute" is enough.

Thats why I assert dinamically the prefix "group_" for the select combo.

The code for HideUnavailableSizesnew.js is
 

var colorAttributteID='3'; // Set your color attribute ID - in my case is 3


$(document).ready(function(){
  var sizeList={};

// Get all the sizes availables from the unique combo select on screen

  $('select[name^="group_"] option').each(function(){ 
    if (sizeList[this.text]==undefined){
      sizeList[this.text]=$(this).val(); // get size list option values
    }    
  });

  var currentColor;
  currentColor=combination.attributes_values[colorAttributteID]; // get current color
  renewSizeList(sizeList, currentColor);
  
// Catch the click on color attribute  
  $('[name=group_'+ colorAttributteID +']').parent().children('ul').children('li').children('a').click(function(){
    currentColor=$(this).attr('name');
    renewSizeList(sizeList, currentColor);
  });
    
});

//Clear the combo select and set the combo with the corresponding sizes values for the choosen color
function renewSizeList(sizeList, currentColor){
  $('select[name^="group_"]').empty(); //clear list
  var theSize;
  var sizeAttrID;
  sizeAttrID = $('select[name^="group_"]').attr( 'id' ).substr(6); //Get the id of the
    
  for(var key in combinationsFromController) {
    if (combinationsFromController[key].attributes_values[colorAttributteID]==currentColor){ //if this combination with current color
      theSize=combinationsFromController[key].attributes_values[sizeAttrID];
        $('select[name^="group_"]').append('<option value="'+sizeList[theSize]+ '" title="'+theSize+ '">' +theSize+'</option>'); //build the select again
        }
  }
  
// Sort the combo list
  $(function() {
  // choose target dropdown
  var select = $('select[name^="group_"]');
  select.html(select.find('option').sort(function(x, y) {
    // to change to descending order switch "<" for ">"
    return $(x).text() > $(y).text() ? 1 : -1;
  }));

//Set the first option selected
      $('select[name^="group_"] option:first').attr('selected','selected');        
// Set the current value on screen - in PS above the combo select there is a <span> tag
    $('select[name^="group_"]').prev().text($('select[name^="group_"] option:first').text());
  });
};

 

I hope this works!! regards

 

is it available for PS 1.7. ? 
actually am not be able to upload this module to my PS website 
then i found another way to add given js to my custom.js file.

On 6/1/2018 at 6:03 PM, Mariano said:

Hi everybody, I was able to solve this feature for my needs.
I tested on PS 1.6.1.17

Sorry for my english.

I took the base from https://github.com/redwert/prestashop-color-and-size

For a shoes sell site, I needed to manage several size attributes. (men size, women size, child size, mix size) 

I used 1 combo select and colors attribute for every product (more than one combo select is not needed for my purpose).

Example: for a product I have
Red -> 7, 8, 9, 10
Blue -> 8,9,10
White -> 7,9

When I click on Red, the combo is setting with size 7,8,9,10. Click on Blue, the combo only shows 8,9,10, etc.
The unavailable combinations doesn't shows.

The difference with https://github.com/redwert/prestashop-color-and-size is that the "ID Size attribute" may vary (men size, women size, child size, mix size). For clothes Size possibly one "ID Size attribute" is enough.

Thats why I assert dinamically the prefix "group_" for the select combo.

The code for HideUnavailableSizesnew.js is
 

var colorAttributteID='3'; // Set your color attribute ID - in my case is 3


$(document).ready(function(){
  var sizeList={};

// Get all the sizes availables from the unique combo select on screen

  $('select[name^="group_"] option').each(function(){ 
    if (sizeList[this.text]==undefined){
      sizeList[this.text]=$(this).val(); // get size list option values
    }    
  });

  var currentColor;
  currentColor=combination.attributes_values[colorAttributteID]; // get current color
  renewSizeList(sizeList, currentColor);
  
// Catch the click on color attribute  
  $('[name=group_'+ colorAttributteID +']').parent().children('ul').children('li').children('a').click(function(){
    currentColor=$(this).attr('name');
    renewSizeList(sizeList, currentColor);
  });
    
});

//Clear the combo select and set the combo with the corresponding sizes values for the choosen color
function renewSizeList(sizeList, currentColor){
  $('select[name^="group_"]').empty(); //clear list
  var theSize;
  var sizeAttrID;
  sizeAttrID = $('select[name^="group_"]').attr( 'id' ).substr(6); //Get the id of the
    
  for(var key in combinationsFromController) {
    if (combinationsFromController[key].attributes_values[colorAttributteID]==currentColor){ //if this combination with current color
      theSize=combinationsFromController[key].attributes_values[sizeAttrID];
        $('select[name^="group_"]').append('<option value="'+sizeList[theSize]+ '" title="'+theSize+ '">' +theSize+'</option>'); //build the select again
        }
  }
  
// Sort the combo list
  $(function() {
  // choose target dropdown
  var select = $('select[name^="group_"]');
  select.html(select.find('option').sort(function(x, y) {
    // to change to descending order switch "<" for ">"
    return $(x).text() > $(y).text() ? 1 : -1;
  }));

//Set the first option selected
      $('select[name^="group_"] option:first').attr('selected','selected');        
// Set the current value on screen - in PS above the combo select there is a <span> tag
    $('select[name^="group_"]').prev().text($('select[name^="group_"] option:first').text());
  });
};

 

I hope this works!! regards

 

is it available for PS 1.7. ?