Prestashop Cart Ajax

CalamarsCompany!
39 Posts
CalamarsCompany! posted this 26 April 2018

Hello,
The problem that I have in the theme created with Themler is that when an user adds a product to the cart the ajax popup asking if the user wants to continue shopping or go to checkout is not showing:

http://palomacabadas.com/es/best-sellers/75-libro-10-sindrome-de-extraterrestre-edicion-2017.html

I have checked the module "cart block" the "Ajax cart" option is set to yes

In Preferences > Modules, the option "rRedirect after adding product to cart" is set in "Cart Summary"

Prestashop 1.6.1.18

Thanks in advance

Hello, The problem that I have in the theme created with Themler is that when an user adds a product to the cart the ajax popup asking if the user wants to continue shopping or go to checkout is not showing: http://palomacabadas.com/es/best-sellers/75-libro-10-sindrome-de-extraterrestre-edicion-2017.html I have checked the module "cart block" the "Ajax cart" option is set to yes In Preferences > Modules, the option "rRedirect after adding product to cart" is set in "Cart Summary" Prestashop 1.6.1.18 Thanks in advance
Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 27 April 2018

Hello,

It is supposed to work as following with Themler theme: when Ajax cart is enabled and you add a product to the cart, the button text changes to "Added" without navigating to the Shopping cart page. Let us know if it doesn't work in this way.

Sincerely,
Nettie,
BillionDigital Team

Hello, It is supposed to work as following with Themler theme: when Ajax cart is enabled and you add a product to the cart, the button text changes to "Added" without navigating to the Shopping cart page. Let us know if it doesn't work in this way. Sincerely, Nettie, BillionDigital Team
CalamarsCompany!
39 Posts
CalamarsCompany! posted this 03 May 2018

Hello,

Yes, it is how it works, but I want to show the ajax pop up asking to the customer to continue shopping or go to check out. How can I do that?

Best regards,

Hello, Yes, it is how it works, but I want to show the ajax pop up asking to the customer to continue shopping or go to check out. How can I do that? Best regards,
Support Team
Support Team posted this 03 May 2018

Hello,

Unfortunately, Themler Add to Cart button does not support this Prestashop pop-up.

Sincerely,
Nettie,
BillionDigital Team

Hello, Unfortunately, Themler Add to Cart button does not support this Prestashop pop-up. Sincerely, Nettie, BillionDigital Team
CalamarsCompany!
39 Posts
CalamarsCompany! posted this 03 May 2018

So,

Do I lose this functionality in prestashop?

I think that this is important in an e-ccommerce. Some other solution?

So, Do I lose this functionality in prestashop? I think that this is important in an e-ccommerce. Some other solution?
Support Team
Support Team posted this 03 May 2018

Hello,

Theoretically, you may try replacing Themler Add to Cart button with the Prestashop built-in code for the Add to Cart button inside the CMS Code control if you know the code. Unfortunately, it looks like there are no other solutions.

Sincerely,
Nettie,
BillionDigital Team

Hello, Theoretically, you may try replacing Themler Add to Cart button with the Prestashop built-in code for the Add to Cart button inside the CMS Code control if you know the code. Unfortunately, it looks like there are no other solutions. Sincerely, Nettie, BillionDigital Team
CalamarsCompany!
39 Posts
CalamarsCompany! posted this 03 May 2018

OK Nettie,

This was our second option, but, I suggest includes this function in themler. It is very important!

Thank you,

OK Nettie, This was our second option, but, I suggest includes this function in themler. It is very important! Thank you,
Support Team
Support Team posted this 03 May 2018

Hello,

I see. Sorry for this inconvenience. We'll keep it in our wishlist for future implementation, if this becomes technically possible.

Sincerely,
Nettie,
BillionDigital Team

Hello, I see. Sorry for this inconvenience. We'll keep it in our wishlist for future implementation, if this becomes technically possible. Sincerely, Nettie, BillionDigital Team
Linkebel
163 Posts
Linkebel posted this 09 May 2018

Hi,

here is the solution I used before stopping Themeler,
I hope it still works

CSS

------- In Themeler Additional CSS

.black_overlay{

        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }

.white_content {

        display: none;
        position: fixed;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 30%;
        padding: 16px;
        border: 16px solid #006637;
        background-color: white;
        z-index:1002;
        overflow: auto;
                text-align: center;
    }

PopUp

--------- In Additional head html (add bloc html in the header)

<div id="light" class="white_content"><br><br>Le produit a ÈtÈ ajoutÈ ‡ votre panier.<br><br><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="bd-button">Continuer mes achats</a> <a href="http://shop.bioshanti.be/fr/commande" class="bd-button">Aller au panier</a></div>
        <div id="fade" class="black_overlay"></div>

--------- several language

{if $lang_iso == fr}
<div id="light" class="white_content"><br><br>Le produit a ÈtÈ ajoutÈ ‡ votre panier.<br><br><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="bd-button">Continuer mes achats</a> <a href="http://shop.bioshanti.be/fr/commande" class="bd-button">Aller au panier</a></div>
        <div id="fade" class="black_overlay"></div>
{/if} 





{if $lang_iso == en}
<div id="light" class="white_content"><br><br>Product was successfully added to your shopping cart.<br><br><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="bd-button">Shopping</a> <a href="http://shop.bioshanti.be/fr/commande" class="bd-button">Checkout</a></div>
        <div id="fade" class="black_overlay"></div>
{/if} 




{if $lang_iso == nl}
<div id="light" class="white_content"><br><br>Product was successfully added to your shopping cart.<br><br><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="bd-button">Shopping</a> <a href="http://shop.bioshanti.be/fr/commande" class="bd-button">Checkout</a></div>
        <div id="fade" class="black_overlay"></div>
{/if} 

in template

-------- Edit- product-list.tpl
-------- search "add to cart"

onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"

----- exemple ligne 461 product-list.tpl

<a class=" bd-productbuy-5 bd-button button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&amp;id_product={$product.id_product|intval}&amp;token={$static_token}", false)|escape:'html':'UTF-8'}" rel="ajax_id_product_{$product.id_product|intval}" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

Hi, here is the solution I used before stopping Themeler, I hope it still works CSS --- ------- In Themeler Additional CSS .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: fixed; top: 25%; left: 25%; width: 50%; height: 30%; padding: 16px; border: 16px solid #006637; background-color: white; z-index:1002; overflow: auto; text-align: center; } PopUp -------- --------- In Additional head html (add bloc html in the header) <div id="light" class="white_content"><br><br>Le produit a ÈtÈ ajoutÈ ‡ votre panier.<br><br><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="bd-button">Continuer mes achats</a> <a href="http://shop.bioshanti.be/fr/commande" class="bd-button">Aller au panier</a></div> <div id="fade" class="black_overlay"></div> --------- several language {if $lang_iso == fr} <div id="light" class="white_content"><br><br>Le produit a ÈtÈ ajoutÈ ‡ votre panier.<br><br><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="bd-button">Continuer mes achats</a> <a href="http://shop.bioshanti.be/fr/commande" class="bd-button">Aller au panier</a></div> <div id="fade" class="black_overlay"></div> {/if} {if $lang_iso == en} <div id="light" class="white_content"><br><br>Product was successfully added to your shopping cart.<br><br><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="bd-button">Shopping</a> <a href="http://shop.bioshanti.be/fr/commande" class="bd-button">Checkout</a></div> <div id="fade" class="black_overlay"></div> {/if} {if $lang_iso == nl} <div id="light" class="white_content"><br><br>Product was successfully added to your shopping cart.<br><br><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="bd-button">Shopping</a> <a href="http://shop.bioshanti.be/fr/commande" class="bd-button">Checkout</a></div> <div id="fade" class="black_overlay"></div> {/if} in template ------------- -------- Edit- product-list.tpl -------- search "add to cart" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" ----- exemple ligne 461 product-list.tpl <a class=" bd-productbuy-5 bd-button button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&amp;id_product={$product.id_product|intval}&amp;token={$static_token}", false)|escape:'html':'UTF-8'}" rel="ajax_id_product_{$product.id_product|intval}" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

Last edited 09 May 2018 by Linkebel

CalamarsCompany!
39 Posts
CalamarsCompany! posted this 09 May 2018

Hello Linkebel,

Thank you very much for your help. Yout code is working perfectly!!

Now I need the pop up in the product detail template not only in product-list.tpl. I have tried adding the code:

onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"

in file product.tpl, but it is not working. Any idea?

Best regards,

Hello Linkebel, Thank you very much for your help. Yout code is working perfectly!! Now I need the pop up in the product detail template not only in product-list.tpl. I have tried adding the code: onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" in file product.tpl, but it is not working. Any idea? Best regards,
Linkebel
163 Posts
Linkebel posted this 09 May 2018

Unfortunately I no longer use either Themler or Prestashop (now Wordpess with Woocommerce and template Divi)

I can not test and help you.

But at first glance I would have put that in product.tpl, but be careful because in my memory there are 2 links to edit and if you do only 1 of 2 it will not work.

If it does not always work, I advise you to download all the folder themes in your computer, you open the file with a code editor like Brackets and you do a search in all the files of "add to cart" and you should have all the files that use the link, you do some testing and you should find the right link.

Good luck.

Unfortunately I no longer use either Themler or Prestashop (now Wordpess with Woocommerce and template Divi) I can not test and help you. But at first glance I would have put that in product.tpl, but be careful because in my memory there are 2 links to edit and if you do only 1 of 2 it will not work. If it does not always work, I advise you to download all the folder themes in your computer, you open the file with a code editor like Brackets and you do a search in all the files of "add to cart" and you should have all the files that use the link, you do some testing and you should find the right link. Good luck.
CalamarsCompany!
39 Posts
CalamarsCompany! posted this 14 May 2018

Hi,

Thanks again. I could do it:

  • Edit the product.tpl (in my case I had a second product.tpl inside "includes" folder in the Thembler template)
  • Search the &lt;input&gt; tag related with the "Add to cart" button.
  • add onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'". You will have something like:

&lt;input type name value class&gt;

Thanks for your help and best regards,

Hi, Thanks again. I could do it: - Edit the product.tpl (in my case I had a second product.tpl inside "includes" folder in the Thembler template) - Search the `&lt;input&gt;` tag related with the "Add to cart" button. - add onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'". You will have something like: `&lt;input type name value class&gt;` Thanks for your help and best regards,
You must log in or register to leave comments