[SOLVED] Show text link when selected attributes

[viemonsta]

Is it possible to have text link show up when customers select one of selected attributes?

 

for a example:

I have groups call SIZE with attributes 30, 31, 32, 33, 34 and CUSTOM

if customers select CUSTOM size, it will show up text link in the bottom of attributes e.g "Contact Our Customer Service" or maybe showup "Chat icon"

 

i have try add code like this in my product.tpl

 

{if $group_attribute == Custom}
My text here
{/if}

 

and try this code too

 

{if $id_attribute == 6}
My text here
{/if}

 

but still no luck

 

any body in this forum have a solution for me? im using PS 1.4.10.

 

Thanks,

Edited April 18, 2013 by viemonsta (see edit history)

[NemoPS]

Hi,

You have to use javascript, and try something like this, with the custom attribute ID

 

$('YOUR BOX SELECTOR').change(function(){
if($(this).val == ATTRIBUTE_ID_HERE)
{
 $('.popup').fadeIn();
}
})

 

Of course, use your own selector for the box (can't check it on that version), and ID of the custom attribute. To get the ID inspect the box and see what's the value for the Custom option

 

Of course the .popup box, or whatever you want to show, must be there if you use this kind of approach

[viemonsta]

Hi nemo1, thanks for your answer

 

i have try your code but still no luck, this is the code:

 

$('div#attributes select').change(function(){
if($(this).val == 6)
{
$('.popup').fadeIn();
}
})

 

<div class="popup">
it's work!
</div>

 

div#attributes select is the box selector, and 6 is the value for the CUSTOM attribute.

or should i put the javascript code in product.js ??

 

thanks,

[NemoPS]

Where did you put it?

yes, that place would be great. Also, be sure you add it inside a jquery ready, and check if you have any JS errors when runs

[viemonsta]

Still no luck

 

this is what i already do.

 

1. in product.js file i put this code inside jquary ready function

 

$('div#attributes select').change(function(){
if($(this).val == 6)
{
$('.popup').fadeIn();
}
});

 

2. in product.tpl i put the .popup class at the bottom of div attributes

 

{if isset($groups)}
<!-- attributes -->
<div id="attributes">
{foreach from=$groups key=id_attribute_group item=group}
{if $group.attributes|@count}
<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} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
</p>
{/if}
{/foreach}
</div>
{/if}

<div class="popup">
it's work!
</div>

 

3. in global.css i add display:none to popup class

[NemoPS]

Really weird. Check that the change state is read by adding alert('test'); instead of the fadeIn

Edited April 17, 2013 by Nemo1 (see edit history)

[viemonsta]

Nob, nothing happen

i think the problem is in

if($(this).val == 6)

 

because when i try to change the javascript something like this

$('div#attributes select').change(function(){
alert('I am an alert box!');
});

change state is working properly.

Edited April 18, 2013 by viemonsta (see edit history)

[NemoPS]

Try to dump "$(this)" and see if you get the select, then try the .val, and see what you get

[viemonsta]

If i dump "$(this)" change state don't working, but if i dump ".val == 6" change state working for all value.

 

this is the code from my page source:

<select name="group_3" id="group_3" onchange="javascript:findCombination();$('#wrapResetImages').show('slow');;">
<option value="1" selected="selected" title="30">30</option>
<option value="2" title="31">31</option>
<option value="3" title="32">32</option>
<option value="4" title="33">33</option>
<option value="5" title="34">34</option>
<option value="6" title="Custom">Custom</option>
</select>

 

i think .val == 6 is correct, don't know why

[NemoPS]

Try this one

 

$('div#attributes select').change(function(){
   console.log($(this))
   console.log($(this).val()
});

 

Hey wait, did you write $(this).val?? That's wrong, it's .val()! With parenthesys

[viemonsta]

thanks nemo, it's working now, just added () after .val

 

$('div#attributes select').change(function(){
if($(this).val() == 6)
{
alert('I am an alert box!');
}
});

 

Thanks alot,

[mirapresta]

Hello Nemo

 

I am struggling with a similar issue for the last couple of days. It would be great if you could help me out to get a solution too...

 

I want to use the Jquery fancy box with the color picker attribute on the product page so that when the user clicks on a color, a fancybox/thickbox pops up (similar to product quick view or product image view in thickbox default ) where he can view the details/text etc in the fancy box.

 

I checked the solution you gave in here, and it seems that I just need to change the pop up window with the jquery fancybox functionality here. I tried doing it as well but it s not working out.

 

Please please help me if you can. Thanks so so much.

 

Regards

Mira

 

Try this one

 

$('div#attributes select').change(function(){
console.log($(this))
console.log($(this).val()
});

 

Hey wait, did you write $(this).val?? That's wrong, it's .val()! With parenthesys

[Sohaib Naseem]

Hey, i have the same issue as of yours, similarly i also want to add a text field when a user click CUSTOM as the value of attribute.

but i am not good at developing side, so can you help in this, that where to change what?

[AZC]

Hi, this worked fine, but how do i add values to the function? I want the popup to work for more than one attribute.

Thanks

[darrenmichael]

Hey, i have the same issue as of yours, similarly i also want to add a text field when a user click CUSTOM as the value of attribute.

but i am not good at developing side, so can you help in this, that where to change what?

Hi Sohaib, did you manage  to solve this issue?

[Sohaib Naseem]

No I was not able to solve this yet

[darrenmichael]

No I was not able to solve this yet

Ok, that's a shame. Thanks for letting me know.

[Sohaib Naseem]

any help that you can provide?

[darrenmichael]

any help that you can provide?

Unfortunately not, I am new to PrestaShop and this is one obstacle I have come across during my first build. But if any one else has info on how to achieve this I would be very greatful.

[AZC]

Unfortunately not, I am new to PrestaShop and this is one obstacle I have come across during my first build. But if any one else has info on how to achieve this I would be very greatful.

Hi, what exactly are you guys trying to do? Are you having difficulty with the solution provided or are you trying to do something different altogether?

Edited May 6, 2014 by AZC (see edit history)

[darrenmichael]

Hi, what exactly are you guys trying to do? Are you having difficulty with the solution provided or are you trying to do something different altogether?

Hi there AZC,

what I would like to do in Prestashop 1.6 is when somebody selects a 'custom size' attribute on a product is either a text box appear (within the product_attributes div) for the customer to type their size, or for a light box to appear with a link to the enquiry form.

I am not really sure what files I would need to edit.

 

Many thanks.

[Mark Agency]

Hi guys, great code it works for me softly! 

 

I have one question, well it code evaluates when you choose the attribute from the list, exactly in .onchange property, but how can I do the same with the "Add to cart" button, thanks!

 

I've used this but didn't work 

$('p#add_to_cart').onclick(function(){
if($(div#attributes select).val() == 33)
{
alert('Choose size first!');
}
else if ($(this).val() == 39) {
alert('Choose a color first!');
}
});

PS. For evaluate more than one value I use the following code 

 

$('div#attributes select').change(function(){
if($(div#attributes select).val() == 33)
{
alert('Choose size first!');
}
else if ($(this).val() == 39) {
alert('Choose a color first!');
}
});

[Sohaib Naseem]

we are having difficulty in solution provided as we are not good in developing side much. All we need is simple thing below

 

When a User click on attribute value then he shall get a popup window to fill out a text field

[AZC]

we are having difficulty in solution provided as we are not good in developing side much. All we need is simple thing below

 

When a User click on attribute value then he shall get a popup window to fill out a text field

I see. The issue which is solved above is only half of your problem. All it does is display some text when a specific item is chosen.

For custom attributes you can add a text box from the back office but this will not necessarily change the price depending on what people write if that is what you need?

[darrenmichael]

I see. The issue which is solved above is only half of your problem. All it does is display some text when a specific item is chosen.

For custom attributes you can add a text box from the back office but this will not necessarily change the price depending on what people write if that is what you need?

I dont need the custom text box to change the price, but I do need the custom text box to show next to the other attributes, not futher down the page near the more information. If not near the other attributes then as a pop up. Edited May 7, 2014 by darrenmichael (see edit history)

[Mark Agency]

Please help.

[AZC]

I dont need the custom text box to change the price, but I do need the custom text box to show next to the other attributes, not futher down the page near the more information. If not near the other attributes then as a pop up.

http://azcoweb.com/web1/prestashop/grape-juice/24-kedem-natural-white-grape-juice.html#

like this??

[AZC]

 

Hi guys, great code it works for me softly! 

 

I have one question, well it code evaluates when you choose the attribute from the list, exactly in .onchange property, but how can I do the same with the "Add to cart" button, thanks!

 

I've used this but didn't work 

$('p#add_to_cart').onclick(function(){
if($(div#attributes select).val() == 33)
{
alert('Choose size first!');
}
else if ($(this).val() == 39) {
alert('Choose a color first!');
}
});

PS. For evaluate more than one value I use the following code 

 

$('div#attributes select').change(function(){
if($(div#attributes select).val() == 33)
{
alert('Choose size first!');
}
else if ($(this).val() == 39) {
alert('Choose a color first!');
}
});

 

UPDATE: the click function is just "click" not "onclick" try that

 

also for some reason (this) does not seem to work probably because it is going on the ('p#add_to_cart') rather than the (div#attributes select)

 

so instead just put 

 

 

 

$('p#add_to_cart').click(function(){

if($('div#attributes select').val() == 33)

{

alert('Choose size first!');

}

else if ($('div#attributes select').val() == 39) {

alert('Choose a color first!');

}

});

Edited May 8, 2014 by AZC (see edit history)

[darrenmichael]

http://azcoweb.com/web1/prestashop/grape-juice/24-kedem-natural-white-grape-juice.html#

like this??

yes that exactly what I need, How difficult is that to implement?

[AZC]

yes that exactly what I need, How difficult is that to implement?

not too difficult. make sure you have a customized text box set up then

in your product.tpl move

 

 {if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}

<!-- description & features -->

{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}

{if isset($attachments) && $attachments}

<!--Download -->

<section class="page-product-box">

<h3 class="page-product-heading">{l s='Download'}</h3>

{foreach from=$attachments item=attachment name=attachements}

{if $smarty.foreach.attachements.iteration %3 == 1}<div class="row">{/if}

<div class="col-lg-4">

<h4><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">{$attachment.name|escape:'html':'UTF-8'}</a></h4>

<p class="text-muted">{$attachment.description|escape:'html':'UTF-8'}</p>

<a class="btn btn-default btn-block" href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">

<i class="icon-download"></i>

{l s="Download"} ({Tools::formatBytes($attachment.file_size, 2)})

</a>

<hr>

</div>

{if $smarty.foreach.attachements.iteration %3 == 0 || $smarty.foreach.attachements.last}</div>{/if}

{/foreach}

</section>

<!--end Download -->

{/if}

            

            

{if isset($product) && $product->customizable}

<!--Customization -->

<section class="page-product-box">

 

<!-- Customizable products -->

<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">

 

{if $product->uploadable_files|intval}

<div class="customizableProductsFile">

<h5 class="product-heading-h5">{l s='Pictures'}</h5>

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

{counter start=0 assign='customizationField'}

{foreach from=$customizationFields item='field' name='customizationFields'}

{if $field.type == 0}

<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}

{if isset($pictures.$key)}

<div class="customizationUploadBrowse">

<img src="{$pic_dir}{$pictures.$key}_small" alt="" />

<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >

<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />

</a>

</div>

{/if}

<div class="customizationUploadBrowse form-group">

<label class="customizationUploadBrowseDescription">

{if !empty($field.name)}

{$field.name}

{else}

{l s='Please select an image file from your computer'}

{/if}

{if $field.required}^*{/if}

</label>

<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />

</div>

</li>

{counter}

{/if}

{/foreach}

</ul>

</div>

{/if}

{if $product->text_fields|intval}

<div class="customizableProductsText">

 

<ul id="text_fields">

{counter start=0 assign='customizationField'}

{foreach from=$customizationFields item='field' name='customizationFields'}

{if $field.type == 1}

<li class="customizationUploadLine{if $field.required} required{/if}">

<label for ="textField{$customizationField}">

{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}

{if !empty($field.name)}

{$field.name}

{/if}

{if $field.required}^*{/if}

</label>

<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}

{if isset($textFields.$key)}

{$textFields.$key|stripslashes}

{/if}

{/strip}</textarea>

</li>

{counter}

{/if}

{/foreach}

</ul>

</div>

                        <p class="infoCustomizable">

{l s='After saving your customized product, remember to add it to your cart.'}

{if $product->uploadable_files}

<br />

{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}

</p>

{/if}

<p id="customizedDatas">

<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />

<input type="hidden" name="submitCustomizedDatas" value="1" />

<button class="button btn btn-default button button-small" name="saveCustomization">

<span>{l s='Save'}</span>

</button>

<span id="ajax-loader" class="unvisible">

<img src="{$img_ps_dir}loader.gif" alt="loader" />

</span>

</p>

</form>

<p class="clear required">^* {l s='required fields'}</p>

</section>

<!--end Customization -->

{/if}

{/if}

                   

to just after

 

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

{/if}

 

and before

 

</div> <!-- end product_attributes -->

 

this is possibly not the quickest or easiest way but then again i'm not an expert and i don't know if it causes other issues.

[darrenmichael]

not too difficult. make sure you have a customized text box set up then

in your product.tpl move

 

 {if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}

<!-- description & features -->

{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}

{if isset($attachments) && $attachments}

<!--Download -->

<section class="page-product-box">

<h3 class="page-product-heading">{l s='Download'}</h3>

{foreach from=$attachments item=attachment name=attachements}

{if $smarty.foreach.attachements.iteration %3 == 1}<div class="row">{/if}

<div class="col-lg-4">

<h4><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">{$attachment.name|escape:'html':'UTF-8'}</a></h4>

<p class="text-muted">{$attachment.description|escape:'html':'UTF-8'}</p>

<a class="btn btn-default btn-block" href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">

<i class="icon-download"></i>

{l s="Download"} ({Tools::formatBytes($attachment.file_size, 2)})

</a>

<hr>

</div>

{if $smarty.foreach.attachements.iteration %3 == 0 || $smarty.foreach.attachements.last}</div>{/if}

{/foreach}

</section>

<!--end Download -->

{/if}

            

            

{if isset($product) && $product->customizable}

<!--Customization -->

<section class="page-product-box">

 

<!-- Customizable products -->

<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">

 

{if $product->uploadable_files|intval}

<div class="customizableProductsFile">

<h5 class="product-heading-h5">{l s='Pictures'}</h5>

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

{counter start=0 assign='customizationField'}

{foreach from=$customizationFields item='field' name='customizationFields'}

{if $field.type == 0}

<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}

{if isset($pictures.$key)}

<div class="customizationUploadBrowse">

<img src="{$pic_dir}{$pictures.$key}_small" alt="" />

<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >

<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />

</a>

</div>

{/if}

<div class="customizationUploadBrowse form-group">

<label class="customizationUploadBrowseDescription">

{if !empty($field.name)}

{$field.name}

{else}

{l s='Please select an image file from your computer'}

{/if}

{if $field.required}^*{/if}

</label>

<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />

</div>

</li>

{counter}

{/if}

{/foreach}

</ul>

</div>

{/if}

{if $product->text_fields|intval}

<div class="customizableProductsText">

 

<ul id="text_fields">

{counter start=0 assign='customizationField'}

{foreach from=$customizationFields item='field' name='customizationFields'}

{if $field.type == 1}

<li class="customizationUploadLine{if $field.required} required{/if}">

<label for ="textField{$customizationField}">

{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}

{if !empty($field.name)}

{$field.name}

{/if}

{if $field.required}^*{/if}

</label>

<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}

{if isset($textFields.$key)}

{$textFields.$key|stripslashes}

{/if}

{/strip}</textarea>

</li>

{counter}

{/if}

{/foreach}

</ul>

</div>

                        <p class="infoCustomizable">

{l s='After saving your customized product, remember to add it to your cart.'}

{if $product->uploadable_files}

<br />

{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}

</p>

{/if}

<p id="customizedDatas">

<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />

<input type="hidden" name="submitCustomizedDatas" value="1" />

<button class="button btn btn-default button button-small" name="saveCustomization">

<span>{l s='Save'}</span>

</button>

<span id="ajax-loader" class="unvisible">

<img src="{$img_ps_dir}loader.gif" alt="loader" />

</span>

</p>

</form>

<p class="clear required">^* {l s='required fields'}</p>

</section>

<!--end Customization -->

{/if}

{/if}

                   

to just after

 

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

{/if}

 

and before

 

</div> <!-- end product_attributes -->

 

this is possibly not the quickest or easiest way but then again i'm not an expert and i don't know if it causes other issues.

Thank you so much for this. I am away from a computer at the moment, but will try to implement this tomorrow. I will let you know how I get on :-)

[Mark Agency]

 

UPDATE: the click function is just "click" not "onclick" try that

 

also for some reason (this) does not seem to work probably because it is going on the ('p#add_to_cart') rather than the (div#attributes select)

 

so instead just put 

 

 

 

$('p#add_to_cart').click(function(){

if($('div#attributes select').val() == 33)

{

alert('Choose size first!');

}

else if ($('div#attributes select').val() == 39) {

alert('Choose a color first!');

}

});

 

Thank you it works perfect! one more question last one, how can I edit the style (css) of alert? thank you

[AZC]

Thank you it works perfect! one more question last one, how can I edit the style (css) of alert? thank you

http://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box

[darrenmichael]

not too difficult. make sure you have a customized text box set up then

in your product.tpl move

 

 {if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}

<!-- description & features -->

{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}

{if isset($attachments) && $attachments}

<!--Download -->

<section class="page-product-box">

<h3 class="page-product-heading">{l s='Download'}</h3>

{foreach from=$attachments item=attachment name=attachements}

{if $smarty.foreach.attachements.iteration %3 == 1}<div class="row">{/if}

<div class="col-lg-4">

<h4><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">{$attachment.name|escape:'html':'UTF-8'}</a></h4>

<p class="text-muted">{$attachment.description|escape:'html':'UTF-8'}</p>

<a class="btn btn-default btn-block" href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">

<i class="icon-download"></i>

{l s="Download"} ({Tools::formatBytes($attachment.file_size, 2)})

</a>

<hr>

</div>

{if $smarty.foreach.attachements.iteration %3 == 0 || $smarty.foreach.attachements.last}</div>{/if}

{/foreach}

</section>

<!--end Download -->

{/if}

            

            

{if isset($product) && $product->customizable}

<!--Customization -->

<section class="page-product-box">

 

<!-- Customizable products -->

<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">

 

{if $product->uploadable_files|intval}

<div class="customizableProductsFile">

<h5 class="product-heading-h5">{l s='Pictures'}</h5>

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

{counter start=0 assign='customizationField'}

{foreach from=$customizationFields item='field' name='customizationFields'}

{if $field.type == 0}

<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}

{if isset($pictures.$key)}

<div class="customizationUploadBrowse">

<img src="{$pic_dir}{$pictures.$key}_small" alt="" />

<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >

<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />

</a>

</div>

{/if}

<div class="customizationUploadBrowse form-group">

<label class="customizationUploadBrowseDescription">

{if !empty($field.name)}

{$field.name}

{else}

{l s='Please select an image file from your computer'}

{/if}

{if $field.required}^*{/if}

</label>

<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />

</div>

</li>

{counter}

{/if}

{/foreach}

</ul>

</div>

{/if}

{if $product->text_fields|intval}

<div class="customizableProductsText">

 

<ul id="text_fields">

{counter start=0 assign='customizationField'}

{foreach from=$customizationFields item='field' name='customizationFields'}

{if $field.type == 1}

<li class="customizationUploadLine{if $field.required} required{/if}">

<label for ="textField{$customizationField}">

{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}

{if !empty($field.name)}

{$field.name}

{/if}

{if $field.required}^*{/if}

</label>

<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}

{if isset($textFields.$key)}

{$textFields.$key|stripslashes}

{/if}

{/strip}</textarea>

</li>

{counter}

{/if}

{/foreach}

</ul>

</div>

                        <p class="infoCustomizable">

{l s='After saving your customized product, remember to add it to your cart.'}

{if $product->uploadable_files}

<br />

{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}

</p>

{/if}

<p id="customizedDatas">

<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />

<input type="hidden" name="submitCustomizedDatas" value="1" />

<button class="button btn btn-default button button-small" name="saveCustomization">

<span>{l s='Save'}</span>

</button>

<span id="ajax-loader" class="unvisible">

<img src="{$img_ps_dir}loader.gif" alt="loader" />

</span>

</p>

</form>

<p class="clear required">^* {l s='required fields'}</p>

</section>

<!--end Customization -->

{/if}

{/if}

                   

to just after

 

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

{/if}

 

and before

 

</div> <!-- end product_attributes -->

 

this is possibly not the quickest or easiest way but then again i'm not an expert and i don't know if it causes other issues.

Worked perfectly Thank you so much!! 

btw I love the adaptation you have done to the template (on the web link you gave me on your other post).Looks really good.

 

Just come across another problem, how did you get your custom text to show in the basket area?

Edited May 10, 2014 by darrenmichael (see edit history)

[AZC]

Worked perfectly Thank you so much!! 

btw I love the adaptation you have done to the template (on the web link you gave me on your other post).Looks really good.

 

Just come across another problem, how did you get your custom text to show in the basket area?

Thanks. i'm quite new to this so appreciate that. Not sure I understand your last question? Please explain.

[darrenmichael]

Thanks. i'm quite new to this so appreciate that. Not sure I understand your last question? Please explain.

thanks for replying. I will try to explain the best I can.

I changed the position of the code in the product.tpl, and on the front office the custom text box was positioned with the other attributes (which is where I wanted it). When I later tested the custom text form every time I click save it added my product straight fo the cart with no custom text shown in the cart area.

 

I then went to the example link you gave me, typed in the custom field, press save, it alerted me it saved, I went to the cart and it showed me your product and and the custom text.

 

I changed my product.tpl code back to its orginal form and done another test. So I went to one of my products, scrolled down to the custom text box and typed something in and saved, I was alerted it had saved, so I added product to cart. When I checked my cart it showed the product and the custom text.

 

so for some reason when I move the product.tpl code to change the custom field location to under the attributtes the save button doesnt save my custom text, it acts as an add to cart button.

 

I experimented moving the custom field box to other positions, and they all worked as they should. For some reason I only get the issue when I change the position to u der the attributes.

[AZC]

thanks for replying. I will try to explain the best I can.

I changed the position of the code in the product.tpl, and on the front office the custom text box was positioned with the other attributes (which is where I wanted it). When I later tested the custom text form every time I click save it added my product straight fo the cart with no custom text shown in the cart area.

 

I then went to the example link you gave me, typed in the custom field, press save, it alerted me it saved, I went to the cart and it showed me your product and and the custom text.

 

I changed my product.tpl code back to its orginal form and done another test. So I went to one of my products, scrolled down to the custom text box and typed something in and saved, I was alerted it had saved, so I added product to cart. When I checked my cart it showed the product and the custom text.

 

so for some reason when I move the product.tpl code to change the custom field location to under the attributtes the save button doesnt save my custom text, it acts as an add to cart button.

 

I experimented moving the custom field box to other positions, and they all worked as they should. For some reason I only get the issue when I change the position to u der the attributes.

I also had that problem. Did you move it to exactly the place i mentioned? For some reason that i cant quite work out it depends how much of the code you move and exactly where you put it.

[darrenmichael]

I did move the code exactly, I also tried 4 or 5 times. I will play a little more to see if I can fine tune where To put the code. Have you a copy of your product.tpl for me to look at?

[AZC]

Not at my computer now. Will do so later.

[AZC]

I did move the code exactly, I also tried 4 or 5 times. I will play a little more to see if I can fine tune where To put the code. Have you a copy of your product.tpl for me to look at?

here you go.

product.txt

[darrenmichael]

here you go.

Thanks for this. I am really confused now tho. Again I tried to manual change the code, and I had the same issue with the cart not the custom text (and hitting the save button went straight to the cart). I've looked at the differences of our codes and could not notice anything different. As last resort I thought I would copy and paste your code into my product.tpl, and I still have the same issue.

 

I feel so close to getting the result I want, but just not quite there

[AZC]

Thanks for this. I am really confused now tho. Again I tried to manual change the code, and I had the same issue with the cart not the custom text (and hitting the save button went straight to the cart). I've looked at the differences of our codes and could not notice anything different. As last resort I thought I would copy and paste your code into my product.tpl, and I still have the same issue.

 

I feel so close to getting the result I want, but just not quite there

interesting. maybe its something in the back office, cant help you there unless i can see all the settings. can you post your product.tpl for me to look? thanks.

[Mark Agency]

Hi guys, actually I'm checking trought the add button the values with the pop up but in the sentense the second "if" is now working, can you help me, I cant find the error. Thanks.

$(modalCartProductjQuerySelector).unbind('click').click(function(){				
if($('div#attributes select').val() == 33) 
{ 
$("#color").show(); 
$("#fade").show(); 
}
else if ($(this).val() == 34)
{
$("#color").show();
$("#fade").show();
}

else 
modalAjaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, $(this), $('#quantity_wanted').val(), null);

[AZC]

 

Hi guys, actually I'm checking trought the add button the values with the pop up but in the sentense the second "if" is now working, can you help me, I cant find the error. Thanks.

$(modalCartProductjQuerySelector).unbind('click').click(function(){				
if($('div#attributes select').val() == 33) 
{ 
$("#color").show(); 
$("#fade").show(); 
}
else if ($(this).val() == 34)
{
$("#color").show();
$("#fade").show();
}

else 
modalAjaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, $(this), $('#quantity_wanted').val(), null);

which one? else if?

[Mark Agency]

which one? else if?

yes, this one

[AZC]

yes, this one

the else if for some reason doesn't work with this you have to put 

else if ($('div#attributes select').val() == 34)

[Mark Agency]

the else if for some reason doesn't work with this you have to put 

else if ($('div#attributes select').val() == 34)

No, it didn't work, this is the whole code, please check it for me, maybe I'm makong some mistake or something.

var modalAjaxCart;
var mc3Debug = false;

function initModalAjaxCart() {
	if (mc3Debug) console.log('initModalAjaxCart');
	modalAjaxCart = {
		//override every button in the page in relation to the cart (with a delay)
		overrideButtonsInThePageDelayed : function() {
			modalAjaxCart.overrideButtonsInThePage();
			setTimeout(function() { modalAjaxCart.overrideButtonsInThePage(); }, 300);
		},
		
		//override every button in the page in relation to the cart
		overrideButtonsInThePage : function(){
			if (mc3Debug) console.log('overrideButtonsInThePage');
			//for every 'add' buttons...
			$(modalCartjQuerySelector).unbind('click').click(function(){
				var idProduct =  $.trim($(this).attr('rel').replace('nofollow', '').replace('ajax_id_product_', ''));
				if ($(this).attr('disabled') != 'disabled') {
					if ($('input#quantity_wanted_'+idProduct).size() > 0 && !isNaN($('input#quantity_wanted_'+idProduct).val())) {
						modalAjaxCart.add(idProduct, null, false, $(this), $('input#quantity_wanted_'+idProduct).val());
					} else {
						modalAjaxCart.add(idProduct, null, false, $(this));
					}
				}
				return false;
			});
			//for product page 'add' button...
			$(modalCartProductjQuerySelector).unbind('click').click(function(){
							

                        if($('div#attributes select').val() == 33) 
{ 
$("#color").show(); 
$("#fade").show(); 
}
                        else if ($('div#attributes select').val() == 34)
{
$("#color").show();
$("#fade").show();
}

else 
modalAjaxCart.add( $('#product_page_product_id').val(), $('#idCombination').val(), true, $(this), $('#quantity_wanted').val(), null);
				return false;

			});
		},
		
		refreshCartOrder : function() {
			if (mc3Debug) console.log('refreshCartOrder');
			$('#order-detail-content:first').load(baseDir+'order.php?content_only=1 #order-detail-content:first');
		},
		
		// cart to fix display when using back and previous browsers buttons
		refresh : function(){
			if (mc3Debug) console.log('refresh');
			//send the ajax request to the server
			$.ajax({
				type: 'POST',
				headers: { "cache-control": "no-cache" },
				url: baseUri + '?rand=' + new Date().getTime(),
				async: true,
				cache: false,
				dataType : "json",
				data: 'controller=cart&ajax=true&token=' + static_token,
				success: function(jsonData)
				{
					modalAjaxCart.updateCart(jsonData, false);
				}
			});
		},
		
		// add a product in the cart via ajax
		add : function(idProduct, idCombination, addedFromProductPage, callerElement, quantity, whishlist){
			if (mc3Debug) console.log('add');
			if (addedFromProductPage && !checkCustomizations()) {
				alert(fieldRequired);
				return;
			}
			// avoid double-click
			if (addedFromProductPage) {
				$(modalCartProductjQuerySelector).attr('disabled', true).removeClass('exclusive').addClass('exclusive_disabled');
				$('.filled').removeClass('filled');
			} else {
				$(callerElement).attr('disabled', true);
			}
			if ($('#cart_block_list').hasClass('collapsed') && typeof(ajaxCart) != 'undefined') ajaxCart.expand();
			//send the ajax request to the server
			$.ajax({
				type: 'POST',
				url: modalCartBaseURI,
				async: true,
				cache: false,
				dataType : "json",
				data: 'controller=cart&add=1&ajax=true&qty=' + ((quantity && quantity != null) ? quantity : '1') + '&id_product=' + idProduct + '&token=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa=' + parseInt(idCombination): ''),
				success: function(jsonData)	{
					// add appliance to whishlist module
					if (whishlist && !jsonData.errors)
						WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
					
					modalAjaxCart.updateCart(jsonData, false);
					if (!jsonData.errors) modalAjaxCart.showModal("product_add", idProduct, idCombination);
					
					if (typeof(ajaxCart) != 'undefined' && !jsonData.errors) {
						ajaxCart.updateCartInformation(jsonData, addedFromProductPage);
					} else {
						//reactive the button when adding has finished
						if (addedFromProductPage)
							$(modalCartProductjQuerySelector).removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
						else
							$(callerElement).removeAttr('disabled');
					}
				},
				error: function(XMLHttpRequest, textStatus, errorThrown){
					alert("Impossible to add the product to the cart.\n\ntextStatus: '" + textStatus + "'\nerrorThrown: '" + errorThrown + "'\nresponseText:\n" + XMLHttpRequest.responseText);
					//reactive the button when adding has finished
					if (addedFromProductPage)
						$(modalCartProductjQuerySelector).removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
					else
						$(callerElement).removeAttr('disabled');
				}
			});
		},
		
		/* Modal Type:
		 * - product_add
		 * - pack_add
		 * - refresh
		 */
		showModal : function(type, idProduct, idCombination) {
			if (mc3Debug) console.log('showModal');
			if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc') modalAjaxCart.refreshCartOrder();
			if (modalCartType == 'jgrowl') {
				$.ajax({
					type: 'POST',
					url: modalCartPath+'controllers/front/ajax_front.php',
					cache: false,
					dataType : 'script',
					data: 'action='+type+'&id_product='+(typeof(idProduct) != 'undefined' ? '&id_product='+idProduct : '')+(typeof(idCombination) != 'undefined' ? '&id_product_attribute='+idCombination : '')+'&'+mc3_uniqid(),
					success: function(responseText) {}
				});
			} else {
				var modalUrl = modalCartPath+'controllers/front/ajax_front.php?action='+type+(typeof(idProduct) != 'undefined' ? '&id_product='+idProduct : '')+(typeof(idCombination) != 'undefined' ? '&id_product_attribute='+idCombination : '')+'&modal=true&width='+modalCartWidth+'&'+mc3_uniqid();
				$.nmManual(modalUrl,{
					nyroModalContainerClass: 'nyroModalContainer_' + modalCartType,
					showCloseButton: modalCartDisplayCloseButton,
					closeButton: '<a href="#" class="nyroModalClose nyroModalCloseButton nmReposition" title="close">Close</a>',
					sizes: {
						initW: modalCartWidth,
						w: modalCartWidth,
						minW: modalCartWidth
					},
					anim: {
						def: "fade",
						showBg: "fade",
						hideBg: "fade"
					},
					closeOnClick: true,
					callbacks: {
						afterShowCont:function() {
							setTimeout(function() { if (typeof($.nmTop()) != 'undefined') $.nmTop().resize(true); },100);
						}
					}
				});
			}
			modalAjaxCart.overrideButtonsInThePageDelayed();
		},
		
		// modal for advanced pack (deprecated - only do a refresh)
		showModalPack : function(id_pack, packProductId, packCombination, packProductExclude) {
			if (mc3Debug) console.log('showModalPack');
			if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc') modalAjaxCart.refreshCartOrder();
		},
		
		//remove a product from the cart via ajax
		remove : function(idProduct, idCombination, customizationId, idAddressDelivery){
			if (mc3Debug) console.log('remove');
			//send the ajax request to the server
			$.ajax({
				type: 'POST',
				url: modalCartBaseURI,
				async: true,
				cache: false,
				dataType : "json",
				data: 'controller=cart&delete=1&id_product=' + idProduct + '&ipa=' + ((idCombination != null && parseInt(idCombination)) ? idCombination : '') + ((customizationId && customizationId != null) ? '&id_customization=' + customizationId : '') + '&id_address_delivery=' + idAddressDelivery + '&token=' + static_token + '&ajax=true',
				success: function(jsonData)	{
					modalAjaxCart.updateCart(jsonData, true);
					if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc')
						deleteProductFromSummary(idProduct+'_'+idCombination+'_'+customizationId+'_'+idAddressDelivery);
				},
				error: function() {alert('ERROR: unable to delete the product');}
			});
		},
		
		// Update product quantity from the modal
		updateModalQty : function(action, id_product, id_product_attribute, id_address_delivery, id_customization) {
			if (mc3Debug) console.log('updateModalQty');
			//send the ajax request to the server
			$.ajax({
				type: 'GET',
				url: baseUri,
				async: true,
				cache: false,
				dataType: 'json',
				data: 'controller=cart'
					+'&ajax=true'
					+'&add'
					+'&getproductprice'
					+'&summary'
					+'&id_product='+id_product
					+'&ipa='+id_product_attribute
					+'&id_address_delivery='+id_address_delivery
					+ (action == 'del' ? '&op=down' : '')
					+ ((id_customization !== 0) ? '&id_customization='+id_customization : '')
					+'&qty=1'
					+'&token='+static_token,
				success: function(jsonData) {
					modalAjaxCart.updateCart(jsonData, true);
				},
				error: function() { alert('ERROR: unable to update product quantity'); }
			});
		},
		
		// Remove a product from the modal
		removeModalProduct : function(id_product, id_product_attribute, id_customization, id_address_delivery) {
			if (mc3Debug) console.log('removeModalProduct');
			modalAjaxCart.remove(id_product, id_product_attribute, id_customization, id_address_delivery);
		},
		
		//generally update the display of the cart
		updateCart : function(jsonData, refreshCall) {
			if (mc3Debug) console.log('updateCart');
			if (typeof(refreshCall) == 'undefined') refreshCall = false;
			modalAjaxCart.overrideButtonsInThePageDelayed();
			//user errors display
			if (jsonData.hasError)
			{
				var errors = '';
				for(error in jsonData.errors)
					//IE6 bug fix
					if(error != 'indexOf')
						errors += jsonData.errors[error] + "\n";
				alert(errors);
			} else {
				if (typeof(ajaxCart) != 'undefined') ajaxCart.updateCartEverywhere(jsonData);
				//if (typeof(ajaxCart) != 'undefined') ajaxCart.hideOldProducts(jsonData);
				if (typeof(ajaxCart) != 'undefined') ajaxCart.displayNewProducts(jsonData);
				if (typeof(ajaxCart) != 'undefined' && typeof(jsonData.discounts) != 'undefined') ajaxCart.refreshVouchers(jsonData);
				if (typeof(ajaxCart) != 'undefined') ajaxCart.refresh();
				
				if (typeof(jsonData.products) != 'undefined' && jsonData.products.length == 0) {
					// Close all modal if it's open
					mc3_closeNyroModal();
				} else {
					if (typeof(refreshCall) != 'undefined' && refreshCall == true) modalAjaxCart.showModal("refresh");
				}
			}
			modalAjaxCart.overrideButtonsInThePageDelayed();
		}
	}
	//modalAjaxCart.refresh();
	modalAjaxCart.overrideButtonsInThePageDelayed();
}

function mc3_uniqid(){
	var newDate = new Date;
	return newDate.getTime();
}

function mc3_closeNyroModal() {
	var current_window = window.dialogArguments || opener || parent || top;
	if (typeof($.nmTop()) != 'undefined') $.nmTop().nmCloseAll();
	if (typeof(window.dialogArguments) != 'undefined' && typeof(window.dialogArguments.$.nmTop()) != 'undefined') window.dialogArguments.$.nmTop().nmCloseAll();
	if (typeof(opener) != 'undefined' && opener != null && typeof(opener.$.nmTop()) != 'undefined') opener.$.nmTop().nmCloseAll();
	if (typeof(parent) != 'undefined' && parent != null && typeof(parent.$.nmTop()) != 'undefined') parent.$.nmTop().nmCloseAll();
	if (typeof(top) != 'undefined' && top != null && typeof(top.$.nmTop()) != 'undefined') top.$.nmTop().nmCloseAll();
	if (typeof(current_window) != 'undefined') {
		if (typeof(current_window.$.nmTop()) != 'undefined') current_window.$.nmTop().nmCloseAll();
		current_window.$('.nyroModalClose').click();
		current_window.$('.nyroModalBg').click();
	}
}

function mc3_continueShopping(){
	// Close all modal if it's open
	mc3_closeNyroModal();
}

function mc3_overrideButtonsInThePageLoop() {
	var interval = setInterval(function() {
		if (typeof(modalAjaxCart) != 'undefined') {
			modalAjaxCart.overrideButtonsInThePage();
		}
	}, 1000);
}
mc3_overrideButtonsInThePageLoop();

$(document).ready(function(){
	initModalAjaxCart();
});

if (typeof(document) != 'undefined') $(document).ready(function() { if (typeof(modalAjaxCart) != 'undefined') modalAjaxCart.overrideButtonsInThePageDelayed(); });
if (typeof(window) != 'undefined') $(window).load(function() { if (typeof(modalAjaxCart) != 'undefined') modalAjaxCart.overrideButtonsInThePageDelayed(); });

Thank you.

 

Regards

[AZC]

No, it didn't work, this is the whole code, please check it for me, maybe I'm making some mistake or something.

Thank you.

 

Regards

Where is this code?

[Mark Agency]

Where is this code?

Is a .js of a module that when you click in add to cart in product page it shows a resume of the shopping cart in a pop up, the place where I inserted the value check is before the action of add product to cart, first it evaluates if there is a default value selected if not it continues with the adding, when it evaluates size it works perfect, but if I choose any size for ex 'XS' and let color with default value the product is added to the cart, I check and recheck the values of validation and the values are correct, I don't now what else to do, thats why I'm here.

 

Thanks  

[AZC]

Can we have a link to the site?

[walidon]

Hi,

I want to add a link in front of the word "sizes" so that if the customers want to know the size they click on that link which will lead them a cms page that I created containing all the sizes in cm

here is the image

 

 

and make it like this

 

Please bear in mind that I have 3 languages, so I want that depending on the language!

 

Update: of course the size is an attribute.

 

Thank you very much in advance..

Walid

[Damiano]

hi,

sorry for my english....

i would add a textfield after drop-down-list, radio button, and color

i modify the file product.tpl and i add this

<li>

<input type="text field" class="attribute_text field" 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>

 

but it doesn't works....Someone can help me?...

I would like something like

 

http://pimentaemcasa.com.br/home/8-pimenta-personalizada.html

thanks

[easyafford]

the else if for some reason doesn't work with this you have to put 

else if ($('div#attributes select').val() == 34)

Hello

 

I am using 

 

$('div#attributes select').change(function(){

if($(div#attributes select).val() == 32)

{

alert('Choose size first!');

}

 ($('div#attributes select').val() == 33)

alert('Choose a color first!');

}

});

 

this code and I just want a working which shows when I click on radio button in attributes if I select number 1 it will show a Size form which show standard sized 12, 14, 16 

else if I select custom size in option 2 then it shows a form asking for measurements. Can anyone of you please help me in Doing so. I am not well familiar with prestashop codes. Please mention which file to be edited and which codes are to be used .

 

Thanks in advance. your help will be highly appreciated.