Required attribute selection

[sandokan71]

Hello everyone,

 

I'm missing something important on the product page.

 

If I have attributes to choose like sizes , I would like to have one or both of the following :

 

1. an alert message (pop up or on the page), if the customer doesn't make any choice ( leaving the default attibute as it is.

 

2. hide the add to cart button if the customer doesn't make any choice ( this behaviour already works on Prestashop 1.4. if the product is out of stock)

 

hope someone got a solution or an idea...i think it is too risky to leave people proceed without forcing them to select an option. you would end up with lots of customers returning their products because it wasn't what they wanted....

 

Thanks....

[CartExpert.net]

Hello!

 

You can create Javascript function for it and put an onSubmit="return YOUR_FUNCTION_NAME();" to the form.

[vinaym]

this may be helpful

[sandokan71]

hi... thaks for your replies...

 

could one of you share the code for this solution ?

[vinaym]

i did this in four steps

1. added js function to validate selection

   function validateSelection(selectId,msg){ 	
     if($('#' + selectId +" option:selected").length && $('#' + selectId).prop("selectedIndex") != 0){ 	
   return true; 	
      } 	
     alert(msg); 	
     return false; 	
   } 	

   
   

2. add default blank option

   <option value="" title="">{l s='Select One'}</option>

   
   

3. removed the following line to avoid selecting the default attribute managed from bo

    {if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if}

   
   

4. added following line in the submit-form button to validate the selection is combination is available

   {if isset($groupName)} onclick="return validateSelection('{$groupName}','####TEXT FOR ALERT####');"{/if}
   

   
   

 

this is done on the product.tpl file.

[sandokan71]

Hy vinaym.

 

Thank you for posting your code. Unfortunatly there's something that doesn't work with it for me. Maybe it's because of the Prestashop version ? I'm using 1.4.

 

Here is my attributes group's code :

<p>
   <label for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'}</label>
   {assign var="groupName" value="group_$id_attribute_group"}
   <select name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};" >
 {foreach from=$group.attributes key=id_attribute item=group_attribute}
 <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} {/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}" >{$group_attribute|escape:'htmlall':'UTF-8'}</option>
 {/foreach}
   </select>
  </p>

 

As you see, the option value is retrieved by code. If I add your default blank option, it will be repeated along with other attributes.

 

My submit button code looks like this :

<p{if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE} style="display: none;"{/if} id="add_to_cart" class="buttons_bottom_block"><input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" /></p>

 

How can I add a single default option value, without repeating it and have it recognized on submit ?

 

Don't know if it's possible but I hope so...maybe there is just a little modification to do on your code.

 

Greetings to Jaipur

[vinaym]

fortunately i did this for ps 1.4

 

this is done on the tpl code, where it will be added just once

 

try putting the blank option below the start of select tag and above the foreach loop.

put the onsubmit statement inside the submit button tag

[sandokan71]

Maybe almost there...I placed the blank option where you said and it works correctly now...no repeat any more.

But I still got no result. The Js function is on top of the tpl where it should be...

 

And here is the submit button tag :

 

<p{if (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order OR (isset($restricted_country_mode) AND $restricted_country_mode) OR $PS_CATALOG_MODE} style="display: none;"{/if} id="add_to_cart" class="buttons_bottom_block">
	  <input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" {if isset($groupName)} onclick="return validateSelection('{$groupName}','####TEXT FOR ALERT####');"{/if}/></p>

 

What happens is that the default attribute shows correctly but I got the the message underneath: The combination does not exist for this product. Please choose another.

 

If you've done it on 1.4. it should work for me too ???

[vinaym]

<option value="{$group.default|intval}" title="Select One" >{l s='Select One'}</option>

this is the correct line, i missed this previously.

 

This will also show up the price of the default attribute.

It should be working now.

[sandokan71]

Almost done !

 

Thanks. I finally got the popup message when clicking the add to cart button. To be perfect now, it should just do the following :

 

- show the message only when

<option value="{$group.default|intval}" title="Select One" >{l s='Select One'}</option>

 

is selected

 

and

 

- not adding the product to the cart, when clicking add to cart.

 

I'm not sure if your solution is supposed to do that already or if it needs additional coding.

 

It would be great if I just could have this working like this.

 

I really appreciate your contribution so far anyway....

[vinaym]

is this doesn't worked?

[sandokan71]

Hi,

 

It works for the alert message but the product is added to the cart with the default attribute at the same time...the adding shoul be deactivated during the message alert...

[vinaym]

have u put the return false statement for the case when default is selected in the js code?

[sandokan71]

yes i did...i copied your js function...

[vinaym]

can you point me to the page where this applied?

 

i recently found this, may be helpful.

Edited January 23, 2012 by vinaym (see edit history)

[sandokan71]

hi...i'm still in developpement mode so I cannot give you any url...

 

I tried also the solution that you found...it's not too bad too..

[sandokan71]

I tried the the default javascript alert from Presto-Changeo http://www.presto-changeo.com/en/content/7-default-attribute-alert which has been discussed here before.

 

I wonder if anybody tried to customize message box with jquery and css (modalbox)....or if someone could give me a hint on how to do it

[Pluncker]

@sandokan71

Did you find a solution? Vinayms code is not working for me either...

[cara_ionutz]

i did this in four steps

1. added js function to validate selection

   function validateSelection(selectId,msg){ 	
      if($('#' + selectId +" option:selected").length && $('#' + selectId).prop("selectedIndex") != 0){ 	
   return true; 	
   	} 	
      alert(msg); 	
      return false; 	
   } 	

   
   

2. add default blank option

   <option value="" title="">{l s='Select One'}</option>

   
   

3. removed the following line to avoid selecting the default attribute managed from bo

    {if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if}

   
   

4. added following line in the submit-form button to validate the selection is combination is available

   	{if isset($groupName)} onclick="return validateSelection('{$groupName}','####TEXT FOR ALERT####');"{/if}
   

   
   

 

this is done on the product.tpl file.

 

Hello where we should add this in product.tpl? which line?for ps 1.4

[mhu100]

i did this in four steps

1. added js function to validate selection

   function validateSelection(selectId,msg){ 	
   			   if($('#' + selectId +" option:selected").length && $('#' + selectId).prop("selectedIndex") != 0){ 	
   			return true; 	
   				} 	
   			   alert(msg); 	
   			   return false; 	
   			} 	

   
   

2. add default blank option

   <option value="" title="">{l s='Select One'}</option>

   
   

3. removed the following line to avoid selecting the default attribute managed from bo

    {if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if}

   
   

4. added following line in the submit-form button to validate the selection is combination is available

   				{if isset($groupName)} onclick="return validateSelection('{$groupName}','####TEXT FOR ALERT####');"{/if}
   

   
   

 

this is done on the product.tpl file.

 

Is this working with version 1.2.4.0?

[melksog]

This work for 1.5.6 or anyone kwnos a solution or module in this version, thanks!.

[haunter]

But this is solving only attributes with option, I will post here my complete solution for colors, select and options...

[afshop]

But this is solving only attributes with option, I will post here my complete solution for colors, select and options...

 

Hi Haunter,

 

did you found the complete solution for PS 1.5.6 ?

 

Thanks

Angela

[afshop]

Hi,

 

It works for the alert message but the product is added to the cart with the default attribute at the same time...the adding shoul be deactivated during the message alert...

 

Hi,

I did all the steps, but i have this same problem, the product is added to the cart with the default attribute at the same time. How did you solve it?

 

Thanks

Angela

[elise furniture]

I need a solution to this as well. Any luck with solving it?

[benedettopresta]

This site has it, but i don't know how they did it, I would also like to be able to do it. 

 

http://www.bikiniworld-capsule.com/capsule/san-gallo/36-bikini-san-gallo-nero.html#/

[atilla06]

hi dear friends.

 

I solved this problem. root/theme/theme name/product.the TPL file in <div id="attributes">click on you can fix this problem by updating as follows.

 

<div id="attributes">

<div class="clearfix"></div>

{foreach from=$groups key=id_attribute_group item=group}

{if $group.attributes|@count}

<fieldset class="attribute_fieldset">

<label class="attribute_label" {if $group.group_type != 'color' && $group.group_type != 'radio'}for="group_{$id_attribute_group|intval}"{/if}>{$group.name|escape:'html':'UTF-8'} </label>

{assign var="groupName" value="group_$id_attribute_group"}

<div class="attribute_list">

{if ($group.group_type == 'select')}

<select class="form-control attribute_select no-print" name="{$groupName}" id="group_{$id_attribute_group|intval}" required>

<option value="" selected="selected" class="selected"> -- Please Select --</option>

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

<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} {/if} title="{$group_attribute|escape:'html':'UTF-8'}">{$group_attribute|escape:'html':'UTF-8'}</option>

{/foreach}

</select>

{elseif ($group.group_type == 'color')}

<ul id="color_to_pick_list" class="clearfix">

{assign var="default_colorpicker" value=""}

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

{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}

<li{if $group.default == $id_attribute} {/if}>

<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">

{if $img_color_exists}

<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />

{/if}

</a>

</li>

{if ($group.default == $id_attribute)}

{$default_colorpicker = $id_attribute}

{/if}

{/foreach}

</ul>

<input type="hidden" class="color_pick_hidden" name="{$groupName|escape:'html':'UTF-8'}" value="{$default_colorpicker|intval}" />

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

<ul>

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

<li>

<input type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />

<span>{$group_attribute|escape:'html':'UTF-8'}</span>

</li>

{/foreach}

</ul>

{/if}

</div> <!-- end attribute_list -->

</fieldset>

{/if}

{/foreach}

</div> <!-- end attributes -->

[pradeepmehtarec]

 

hi dear friends.

 

I solved this problem. root/theme/theme name/product.the TPL file in <div id="attributes">click on you can fix this problem by updating as follows.

 

<div id="attributes">

<div class="clearfix"></div>

{foreach from=$groups key=id_attribute_group item=group}

{if $group.attributes|@count}

<fieldset class="attribute_fieldset">

<label class="attribute_label" {if $group.group_type != 'color' && $group.group_type != 'radio'}for="group_{$id_attribute_group|intval}"{/if}>{$group.name|escape:'html':'UTF-8'} </label>

{assign var="groupName" value="group_$id_attribute_group"}

<div class="attribute_list">

{if ($group.group_type == 'select')}

<select class="form-control attribute_select no-print" name="{$groupName}" id="group_{$id_attribute_group|intval}" required>

<option value="" selected="selected" class="selected"> -- Please Select --</option>

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

<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} {/if} title="{$group_attribute|escape:'html':'UTF-8'}">{$group_attribute|escape:'html':'UTF-8'}</option>

{/foreach}

</select>

{elseif ($group.group_type == 'color')}

<ul id="color_to_pick_list" class="clearfix">

{assign var="default_colorpicker" value=""}

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

{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}

<li{if $group.default == $id_attribute} {/if}>

<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">

{if $img_color_exists}

<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />

{/if}

</a>

</li>

{if ($group.default == $id_attribute)}

{$default_colorpicker = $id_attribute}

{/if}

{/foreach}

</ul>

<input type="hidden" class="color_pick_hidden" name="{$groupName|escape:'html':'UTF-8'}" value="{$default_colorpicker|intval}" />

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

<ul>

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

<li>

<input type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />

<span>{$group_attribute|escape:'html':'UTF-8'}</span>

</li>

{/foreach}

</ul>

{/if}

</div> <!-- end attribute_list -->

</fieldset>

{/if}

{/foreach}

</div> <!-- end attributes -->

 

 

 

Hi Atilla06

 

Great work. Thanks a lot lot lot for this. I was looking for a solution from a long time, Prestashop should really make changes to this default behaviors.

Anyway thanks again and in my shop I am now able to force customers to select a size, before they could add item to card.

 

 

Just one question, is this also possible to do the same thing for color too? i mean, customers should be forced to select BOTH size and color attribute before then can add item to card. Presently with your code customer are only required to select the size? 

 

Do you have a solution for that or is that just my website behaving like that?

 

Thanks a lot anyway.

 

Regards

[nikketrikke]

Hello yes it works but on carousel or category pages or subpages/subcategories the ADD TO CART buttone permit to add the DEFAULT combination and it must be FORCED to NOT PERMIT this.

Anyone have a solution ?

thanks

[sudar46]

Anyone have a solution ?

good works

[editorstefan]

 

hi dear friends.

 

I solved this problem. root/theme/theme name/product.the TPL file in <div id="attributes">click on you can fix this problem by updating as follows.

 

<div id="attributes">

<div class="clearfix"></div>

{foreach from=$groups key=id_attribute_group item=group}

{if $group.attributes|@count}

<fieldset class="attribute_fieldset">

<label class="attribute_label" {if $group.group_type != 'color' && $group.group_type != 'radio'}for="group_{$id_attribute_group|intval}"{/if}>{$group.name|escape:'html':'UTF-8'} </label>

{assign var="groupName" value="group_$id_attribute_group"}

<div class="attribute_list">

{if ($group.group_type == 'select')}

<select class="form-control attribute_select no-print" name="{$groupName}" id="group_{$id_attribute_group|intval}" required>

<option value="" selected="selected" class="selected"> -- Please Select --</option>

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

<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} {/if} title="{$group_attribute|escape:'html':'UTF-8'}">{$group_attribute|escape:'html':'UTF-8'}</option>

{/foreach}

</select>

{elseif ($group.group_type == 'color')}

<ul id="color_to_pick_list" class="clearfix">

{assign var="default_colorpicker" value=""}

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

{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}

<li{if $group.default == $id_attribute} {/if}>

<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">

{if $img_color_exists}

<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />

{/if}

</a>

</li>

{if ($group.default == $id_attribute)}

{$default_colorpicker = $id_attribute}

{/if}

{/foreach}

</ul>

<input type="hidden" class="color_pick_hidden" name="{$groupName|escape:'html':'UTF-8'}" value="{$default_colorpicker|intval}" />

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

<ul>

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

<li>

<input type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />

<span>{$group_attribute|escape:'html':'UTF-8'}</span>

</li>

{/foreach}

</ul>

{/if}

</div> <!-- end attribute_list -->

</fieldset>

{/if}

{/foreach}

</div> <!-- end attributes -->

 

 

This is the closest to solution i've got. Now it displays Slect and add to cart button hidden. '

But even if i select a value it still doenst show add to cart button. I must refresh page so the URL has #value in it.

 

I think it must load the page each time i select an attribute.

[SolidMind]

maybe,

 

in your product.tpl

around line 348.  

Add following code:

<option value="0" selected="selected" disabled><span >Please select...</span></option>

just before:

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

This gives an default option that not exists, and therefore the add to cart button is hidden.

 

Unfortunately this will affects all drop down selection lists..