[SOLVED] Add to Cart replace when there customizations

[Superbegood31]

Hello everyone,

 

I'm trying to see to replace the button "Add to cart" where the product contains mandatory customizations.

No worries to reveal a "Customize" button instead but how:

- Replace "Add to Cart" when customizations were recorded by the client
- Do not make it appear that when customizations are required

My little piece of code to temporary product.tpl

{if $product->customizable == 1}
<a href="#customizationForm" class="exclusive customizable" title="{l s='Customizer'}"><span>{l s='Customizer'}</span></a>
{else}
<button type="submit" name="Submit" class="exclusive">
<span>{l s='Add to cart'}</span>
</button>
{/if}

My little piece of code to temporary product.css

.customizable:before{
	content:"\f1a2"!important;
}

Thank you in advance for your help.

Edited May 13, 2014 by SWITCHBOARD (see edit history)

[Superbegood31]

up please

[Superbegood31]

re-up please

[vekia]

hello

you posted code like
 

{if $product->customizable == 1}
<a href="#customizationForm" class="exclusive customizable" title="{l s='Customizer'}"><span>{l s='Customizer'}</span></a>
{else}
<button type="submit" name="Submit" class="exclusive">
<span>{l s='Add to cart'}</span>
</button>
{/if}

so it works? or not? what kind of problem you've got with this code?

[Superbegood31]

Hello,

 

This code is correct but when we save customization the button "add to cart" i would like to show add to cart and hide customizer...

 

I think that I must also modifies the function savecustomization but I can not do ...

 

Sorry for my english

 

Thanks

[Superbegood31]

That's what I did:

product.js

- Adding function aftersaveCustomization ( )

function aftersaveCustomization()
{
    $('#customizer').css('display', 'none');
    $('#addcart').css('display', 'block');
}

- Call of function aftersaveCustomization ()

    $(document).on('click', 'button[name=saveCustomization]', function(e){
        saveCustomization();
        aftersaveCustomization();
    });

product.tpl

{if $product->customizable == 1}
   <a id="customizer" href="#idTab10" class="exclusive customizable" title="{l s='Customizer'}">
      <span>{l s='Customizer'}</span>
   </a>
   <button id="addcart" type="submit" name="Submit" class="exclusive addcart">
      <span>{l s='Add to cart'}</span>
   </button>
{else}
   <button style="display:block" type="submit" name="Submit" class="exclusive">
      <span>{l s='Add to cart'}</span>
   </button>
{/if}

product.css

#customizer{
    display: block;
}
#addcart{
    display: none;
}

But the problem is that once the saving customization the button add to cart still does not appear ...

I feel that aftersaveCustomization function does not work ...

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

[Superbegood31]

nobody to help me ?

[Superbegood31]

Little up

[falkor]

Hello,

I'll try to help you and explain a little.
You've added your function aftersaveCustomization() after saveCustomization() which contain jquery submit function

$('#customizationForm').submit();

AFAIK submit() function doing exacly same thing like input type=submit, so it makes non ajax request which submit form
[http://api.jquery.com/submit/]
If its true page reloads and your function never will be called.
So you need to achive this in other way, somehow check if customisation were saved in $_POST array and then display or not add to cart.

Hope it helped.
Good Luck

Edited May 9, 2014 by falkor (see edit history)

[Superbegood31]

@ falkor: Thank you for your feedback.

Do you have any idea to implement this feature?

Thank you in advance

[Superbegood31]

hello,

Where can I place the aftersavecustomization function once refreshed the page ?

[Superbegood31]

Up please

[falkor]

Hello again,

 

I think easiest way to achive this check in js value of field(s) you set as required to show Add to cart button like:
 

if($('textarea').val() != ""){
    show add to cart
}

Second way is override init function product controller http://doc.prestashop.com/display/PS16/Overriding+default+behaviors
just by adding similar if like above and check correct value in $_POST
http://www.php.net/manual/en/reserved.variables.post.php
and if its correct assign smarty value which will help you in .tpl file.

Like I said first way is easier to achive, but second will help you avoid FOUC (http://en.wikipedia.org/wiki/Flash_of_unstyled_content)

[Superbegood31]

@ falkor:

Hello and thank you for your help

I fail to implement ...

I'm not a developer ...

[falkor]

Ok, so I've added textarea customization, hes ID is textField0 (You can check it in page source (ctrl + u in firefox), in firebug or browser web inspector.

if($('#textField0').val() != ""){
   $('#add_to_cart').show();
}

jQuery is gr8 because you can use css selectors to point on element.
If #textField0 is empty hes value is equal "" (empty) so your button will be hidden (cause you set display to none in your css file), but when someone save something in this field our if statement will return True, so #add_to_cart will appear just like a wild Pokemon in grass.

[Superbegood31]

I try this :

product.tpl

								{if isset($product) && $product->customizable && !isset($_POST['customizationForm'])}
								<a id="customizer" href="#idTab10" class="exclusive customizable" title="{l s='Customizer'}">
									<span>{l s='Customizer'}</span>
								</a>
								<button id="addcart" type="submit" name="Submit" class="exclusive addcart">
									<span>{l s='Add to cart'}</span>
								</button>
								{else}
								<button type="submit" name="Submit" class="exclusive">
									<span>{l s='Add to cart'}</span>
								</button>
								{/if}

product.css

#customizer{
	display: block;
}
#addcart{
	display: none;
}
.invisible{
	display: none!important;
}
.visible{
	display: block!important;
}

product.js

    $(document).on('click', '#customizedDatas input', function(e){
        $('#customizedDatas input').hide();
        $('#ajax-loader').fadeIn();
        $('#customizedDatas').append(uploading_in_progress);
        aftersaveCustomization();
    });

...

function aftersaveCustomization()
{
	$('#customizer').addClass('invisible');
	$('#addcart').addClass('visible');
}

but it does not work

[Superbegood31]

I think I have finally found
product.tpl

								{if isset($product) && $product->customizable}
								<a id="customizer" href="#idTab10" class="exclusive customizable" title="{l s='Customizer'}">
									<span>{l s='Customizer'}</span>
								</a>
								<button id="addcart" type="submit" name="Submit" class="exclusive">
									<span>{l s='Add to cart'}</span>
								</button>
								{else}
								<button type="submit" name="Submit" class="exclusive">
									<span>{l s='Add to cart'}</span>
								</button>
								{/if}

product.js

add

aftersaveCustomization();

after

initLocationChange();

function aftersaveCustomization()
{
	if($('#textField0').val() != ""){
		$('#customizer').addClass('invisible');
		$('#addcart').addClass('visible');
	}
	else {
		$('#customizer').addClass('visible');
		$('#addcart').addClass('invisible');
	}
}

Enjoy

   

[falkor]

Good job, if possible mark topic as solved, and add [sOLVED] to topic name in full edit options.

[Superbegood31]

Of course

 

And thanks again for your help

[A1TH]

Hello,
I was looking for something like this for such long time.

 

Great !

At least, I solved one issue about button scolling to customization tab.

 

But, I guess i miss something :

Indeed, after saving customization the button "customiser" doesnt change to "add to cart" and remain the same, and therefore I can't add the product to cart.

 

Can you help me ?

Do I need to delete some lines or add some lines to files product.tpl /.js /.css ?

Thanks for your help.

Edited August 8, 2014 by A1TH (see edit history)

[bubbleman]

Hi, I have the same problems that A1TH, Im little bit confuse about which modifications are needed.

 

Thansks,