Jump to content

[Free Module] Display Add To Cart Button In Product List Pages


Recommended Posts

  • 1 month later...
On 11/24/2019 at 7:12 AM, stevencage said:

Thanks a lot for this gr8 module, but is there any option to disable the customize button when i have the customize option enable on the product?

Hi,

We'll add this feature in our next update.

Share this post


Link to post
Share on other sites
  • 4 weeks later...
On 12/21/2019 at 1:42 AM, Staggi said:

Hellou, is this module still avaible? Cause when I click on the link it says that its delete... Thank you for answer!

Hi,

Yes the module is available and the download works fine for us.

If you still have an issue, you can download it from here: https://hipresta.com/free-prestashop-modules/9-display-add-to-cart-button-in-product-list-pages-module.html

Share this post


Link to post
Share on other sites
On 9/16/2019 at 4:16 AM, ender666 said:

Thank you for new version - is somehow possible to choose specific product attributes when adding product to cart? Because button is now adding default attributes and it is not good. 

+1

adding default attributes is not good.

@sum4444 New 1.0.8 soon ;-)

Share this post


Link to post
Share on other sites
  • 2 weeks later...

I have downloaded this module and installed it on my site but the cart is not doing anything I have cleared the cache looked at switching on the Ajax config but nothing is happening the cart appears but its not doing anything  any help appreciated my site is here www.Easymovepower.co.za.I am using Pretsashop 1.7.6.2 I 

Edited by Tim3011
added the version of presta shop used (see edit history)

Share this post


Link to post
Share on other sites

L' option de personalisation activée cache le bouton d'envoi au panier. Vous aviez parlé d'une mise a jour ?
Encore merci pour votre module trés pratique.
Trés bonne journée et tous mes voeux pour cette nouvelle année.

:-)

Share this post


Link to post
Share on other sites
On 1/6/2020 at 11:55 AM, Tim3011 said:

I have downloaded this module and installed it on my site but the cart is not doing anything I have cleared the cache looked at switching on the Ajax config but nothing is happening the cart appears but its not doing anything  any help appreciated my site is here www.Easymovepower.co.za

What's the PrestaShop version you use?

Share this post


Link to post
Share on other sites
22 hours ago, Tiri said:

L' option de personalisation activée cache le bouton d'envoi au panier. Vous aviez parlé d'une mise a jour ?
Encore merci pour votre module trés pratique.
Trés bonne journée et tous mes voeux pour cette nouvelle année.

🙂

We should have an update soon.

Share this post


Link to post
Share on other sites
Il y a 1 heure, sum4444 a dit :

We should have an update soon.

Thank a lot, i'm sorry to speak in french 😉 i forget to translate ...

And thank again for your Module. 🙂 Have a nice day.

Share this post


Link to post
Share on other sites
  • 3 weeks later...

Hi,

I installed the module on Presta 1.7.6 and I have a problem with the prices. Instead of showing with the comma, as the product prices for my country and currency, it's showing the prices with dots? Is there any easy change to be made in any of the files in the module?

This is the html for the product price <span itemprop="price" content="34.75">34,75 €</span>

This is the html for the add to cart product price <span itemprop="price" >34,75 €</span>

Other than that, it's working pretty well in our tests, so thank you very much. I would have sent you the translation of the module, but I'm afraid I've only translated the front office part.

Share this post


Link to post
Share on other sites

It works great. Thank you.

I like very much it disallows buying for not available products. 

Could you extend this module with filter of Product Categories and Customer Groups please? So it should limit access (disable Add to Cart Button) for some Groups to some Categories...

Share this post


Link to post
Share on other sites

I am using version v1.0.7 and the problem persists "quantityInput.TouchSpin is not a function"

if I refresh the page, the unit arrows come out again
but when I press another page, the error reappears again

 

image.thumb.png.5129d8a98852580477799e1d165b9881.png

Share this post


Link to post
Share on other sites
  • 1 month later...
On 2/14/2020 at 6:45 PM, Fractality said:

I am using version v1.0.7 and the problem persists "quantityInput.TouchSpin is not a function"

if I refresh the page, the unit arrows come out again
but when I press another page, the error reappears again

 

image.thumb.png.5129d8a98852580477799e1d165b9881.png

Can you please share your website URL so we can check?

Share this post


Link to post
Share on other sites

OK, I've installed the 1.0.8 version on my Presta v 1.7.5.0, enabled it, set it to display the quantity field but there is no change on the front-end. I tried to clear the cache, but nothing. I've checked the markup of my product listing (of it was somehow hidden via CSS) but there is nothing changed whatsovere.

 

Any ideas?

Share this post


Link to post
Share on other sites
6 hours ago, TinoArts said:

OK, I've installed the 1.0.8 version on my Presta v 1.7.5.0, enabled it, set it to display the quantity field but there is no change on the front-end. I tried to clear the cache, but nothing. I've checked the markup of my product listing (of it was somehow hidden via CSS) but there is nothing changed whatsovere.

 

Any ideas?

Can you share the URL please?

Share this post


Link to post
Share on other sites
  • 3 weeks later...

Hi, i install it and worked perfect

Please advise how can we change the text of the button "Add to Cart"

I tryed with the translation module but didn't know which field is the one i have the change.

thanks

Share this post


Link to post
Share on other sites
On 4/22/2020 at 5:06 AM, ArturoDeutsch said:

Hi, i install it and worked perfect

Please advise how can we change the text of the button "Add to Cart"

I tryed with the translation module but didn't know which field is the one i have the change.

thanks

You need to chose "module translation" in the menu, not "template translation" because the module contains its own label on cart button instead of reference to the template button.

The good thing is that I see the developer put in comments that in the future this button should be done by importing the standard/template cart button, so when that happens, all will be done automatically. But for now you need to translate it separately.

Also please mind that there are two save buttons "Save" and "Save and stay" on the translation page. The "Save and Stay" does not work for me properly, so I was using "Save" and going back and forth to this translation. Would be good if in the future there is just one translation block with one "Save" button and one "Save and Stay" button instead of multiple ones.

Share this post


Link to post
Share on other sites
On 5/1/2020 at 7:09 AM, Reynsick said:

How i desable quantity?

It's available in that module's config. Go to admin page, modules, click configure.

Share this post


Link to post
Share on other sites
On 5/1/2020 at 4:49 PM, GioNar said:

Hi 

I cannot download latest  version from hipresta 

Please can someone share it?

 

 

I still see it available for download on previous page (first post in this thread).

Share this post


Link to post
Share on other sites
On 5/4/2020 at 12:31 PM, przemko said:

I still see it available for download on previous page (first post in this thread).

I got it thank you

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Hi, I have a problem with this module on my website:

PS 1.7.6.4

www.birreadomicilio.it

The problem is that whenever I enter a category it works perfectly on the first page od the diplayed products, but as I enter the second, or third to see more products it just doesn't work in disabling the add to cart button when I exceed the stock amount.

Is there something I did wrong?

Thank you very much

Share this post


Link to post
Share on other sites
4 minutes ago, HiPresta said:

Hi,

We have checked and it seems to work just fine.

Can you send us the exact steps on how to recreate the issue?

Of course:

reach https://birreadomicilio.it

on the homepage the button works fine, but just try to click, e.g., on the category "birre" (i'm sorry it is only in italian). Here  you see the first nine products, and it still works fine, but as you click on the second page, for each product it doesn't check anymore the quantities in stock. Be aware that for each product i have no more the 3-4 qty available. if you try to toggle up and down with the numbers to be ordered you would see that it only works on the first page of each category, not anymore in the following.

Thank you very much

L

Share this post


Link to post
Share on other sites
On 5/17/2020 at 9:02 AM, HiPresta said:

Hi,

We have checked and it seems to work just fine.

Can you send us the exact steps on how to recreate the issue?

Hello dear sirs,

anything new?

Thank you

L

Share this post


Link to post
Share on other sites

I just noticed exactly the same issue as elle effe, that is: when you open a category page with many products, the check for available number of items works only on the first page. When you click "next" or a link to further pages of that category, the script responsible for checking stock when you increase/decrease number of ordered items fails. I noted two side effects:

1. There is no more control over how many items you may add to cart
2. jQuery fails on that page and page starts to throw/log errors in browser's console

@HiPresta: can you please see what's wrong and fix?

Share this post


Link to post
Share on other sites
32 minutes ago, HiPresta said:

Available version 1.0.9

Change log:

* Fixed Add to cart button issue when pagination used.

Hello,

I uninstalled the module, reinstalled version 1.0.9 but nothing has changed. Or better said, now it seems not to work even on the homepage...
What should I do?

L

Share this post


Link to post
Share on other sites
1 minute ago, elle effe said:

Hello,

I uninstalled the module, reinstalled version 1.0.9 but nothing has changed. Or better said, now it seems not to work even on the homepage...
What should I do?

L

Try to clear your browser caches.

If the issue persists send us the URL so we can check.

Share this post


Link to post
Share on other sites
3 minutes ago, HiPresta said:

Try to clear your browser caches.

If the issue persists send us the URL so we can check.

Cleared both prestashop and browser cache. 

URL: Https://birreadomicilio.it

The issues which still persists is that when I enter a category I could add as many items I want to the cart, because the module doesn't check for availability

L

Share this post


Link to post
Share on other sites

We could recreate the issue when product quantity is changed using up / down arrows.

Now this is fixed too.

Please download the file again and give it a try.

Share this post


Link to post
Share on other sites
23 hours ago, HiPresta said:

We could recreate the issue when product quantity is changed using up / down arrows.

Now this is fixed too.

Please download the file again and give it a try.

Now it works on desktop browsers, thank you, but not on mobile browsers...

Share this post


Link to post
Share on other sites
On 2/7/2018 at 4:15 PM, tresorsdargan said:

Too bad this is not available for the 1.6

For Prestashop 1.6 I think this might be useful... https://www.prestashop.com/forums/topic/279551-how-to-show-product-attribute-option-in-product-list/#elComment_2032500

This code is to give idea how you can achieve the things; I haven't used overrides or created modules. It is advisable to use overrides or create modules out of this idea. 

Edited by Divyesh Prajapati (see edit history)

Share this post


Link to post
Share on other sites
On 2/1/2018 at 3:57 PM, HiPresta said:

Display Add To Cart button in product list pages PrestaShop 1.7.x

add-to-cart.png.171c1721aeb3c32ca729a1455daf1a21.png

 

View Demo

 

 

hiaddtocartbutton_v1.0.9.zip 60.6 kB · 17 downloads

 

 

@HiPresta Awesome Module!!!

I can see in your demo that Add to Cart on product list works perfectly fine... That's great; but if I am having two different attributes (Size: S, M, L and Color: R, G, B), it will not allowing me to select particular combination of these attributes (e.g. Size- L and Color- B). It always takes default combination configured in product and add it to cart.

Correct this if I am missing anything here or assuming any wrong.

Thanks :)

Share this post


Link to post
Share on other sites
  • 2 weeks later...
On 6/4/2020 at 10:36 AM, Divyesh Prajapati said:

@HiPresta Awesome Module!!!

I can see in your demo that Add to Cart on product list works perfectly fine... That's great; but if I am having two different attributes (Size: S, M, L and Color: R, G, B), it will not allowing me to select particular combination of these attributes (e.g. Size- L and Color- B). It always takes default combination configured in product and add it to cart.

Correct this if I am missing anything here or assuming any wrong.

Thanks :)

Hi,

This module adds only Add to cart button and not attributes. It'll always add the default combination, 

Share this post


Link to post
Share on other sites
On 5/28/2020 at 10:48 AM, jeanluc.12 said:

Thanks for the free module. Is it possible to display the "Add to Cart" button for the selected categories only?

Hi,

We'll try to add this functionality in our future updates.

Share this post


Link to post
Share on other sites
  • 2 weeks later...

Hello,

I have a problem with changing quantity of product which I would like to order. It happens when I switch from grid view to list view. In grid view I can increase and decrease quantity of products by arrows, but after switch from grid to list view I cannot change it by arrows. Only If I manually write quantity of products.

Any ideas where the problem could be? https://www.freshfarm.sk/sk/74-alpha-spirit-complete-soft

Thanks for respond.

Prestashop 1.7

Bez názvu.png

Share this post


Link to post
Share on other sites

Hello,
on my website "add to cart" button is visible only to logged in users.
I made a small modification, it may be useful to someone.

in hiaddtocartbutton.php "', show_price' => $params['product']['show_price']"

$params['product']['customizable'] : false,

    'product_url' => $params['product']['url'],

    'available_qty' => $available_qty,

	'show_price' => $params['product']['show_price']

in addtocartbutton.tpl "{if $show_price}.....{/if}"

{if $show_price}
<form action="{$urls.pages.cart}" method="post" class="hiaddtocart">
    {if $customizable}
        <a 
            href="{$product_url}" 
            class="btn btn-primary"
        >
            {l s='Customize' mod='hiaddtocartbutton'}
        </a>
  .
  .
  .
  .
        <span class="product-availability">
            <i class="material-icons product-unavailable"></i>
            {l s='There are not enough products in stock' mod='hiaddtocartbutton'}
        </span>
    {/if}
</form>
{/if}

HiPresta maybe you could add such functionality in any of the next versions? (only for logged in users)

best regards!

Edited by qlimmax (see edit history)

Share this post


Link to post
Share on other sites

Hi Presta !! :D
Super module! thanks a lot!

I have a comment:
When the product have combinations and the pre-determined combination is out of stock, the button "add to cart" gets disabled... even when another options have stock. The clients simply pass away and do not enter to check another combinations, so I have to maintain the combinations of all products in this condition when i'm out of stock of principal.
My suggestion is change the button text to "select one option" when this happens to force the client to enter in products page and select one valid combination. 

Another comment I sent by email, but did not have an answer :ph34r::rolleyes:
There's a way to put the button "Add to cart" inside the "quick view" tab (disabling quick view option) ??
image.png.8daabb8486b718ef834a107cf36b250d.png

Thanks !!

Edited by fercaldas (see edit history)

Share this post


Link to post
Share on other sites
front.js:107 Uncaught TypeError: quantityInput.TouchSpin is not a function
    at HTMLInputElement.<anonymous> (front.js:107)
    at Function.each (jquery-3.3.1.min.js:31)
    at w.fn.init.each (jquery-3.3.1.min.js:31)
    at createQuantitySpin (front.js:105)
    at front.js:21

When I browse the subcategory pages I get an error and the buttons do not load

Share this post


Link to post
Share on other sites

Hello! first of all thanks for this useful module.

I have a problem, I installed the module and it duplicated the add to cart and qty when you are inside the product page like this:

addtocart.thumb.png.016516ce3867eead2b5b9f2d4a1d1395.png

 

Is there a way to disable it there?

Thanks!

Share this post


Link to post
Share on other sites

hello, the add to cart button is not being shown on the product page and the cart button is not shown at the header of the home page. i have enabled the module and cleared the cache but it still doesnt work. what should i do? my website is www.xannera.com   and this happens even when i have one attribute or multiple attributes. this also happens to the currency selector

Edited by info@xannera.com (see edit history)

Share this post


Link to post
Share on other sites
On 7/16/2020 at 5:28 PM, info@xannera.com said:

hello, the add to cart button is not being shown on the product page and the cart button is not shown at the header of the home page. i have enabled the module and cleared the cache but it still doesnt work. what should i do? my website is www.xannera.com   and this happens even when i have one attribute or multiple attributes. this also happens to the currency selector

Hi,

Does the module still installed? I can't see it.

Share this post


Link to post
Share on other sites
On 7/10/2020 at 1:31 AM, fercaldas said:

Hi Presta !! :D
Super module! thanks a lot!

I have a comment:
When the product have combinations and the pre-determined combination is out of stock, the button "add to cart" gets disabled... even when another options have stock. The clients simply pass away and do not enter to check another combinations, so I have to maintain the combinations of all products in this condition when i'm out of stock of principal.
My suggestion is change the button text to "select one option" when this happens to force the client to enter in products page and select one valid combination. 

Another comment I sent by email, but did not have an answer :ph34r::rolleyes:
There's a way to put the button "Add to cart" inside the "quick view" tab (disabling quick view option) ??
image.png.8daabb8486b718ef834a107cf36b250d.png

Thanks !!

Hi, we'll add these options in our next updates.

Share this post


Link to post
Share on other sites
On 7/13/2020 at 6:11 PM, selljus.pl said:

front.js:107 Uncaught TypeError: quantityInput.TouchSpin is not a function
    at HTMLInputElement.<anonymous> (front.js:107)
    at Function.each (jquery-3.3.1.min.js:31)
    at w.fn.init.each (jquery-3.3.1.min.js:31)
    at createQuantitySpin (front.js:105)
    at front.js:21

When I browse the subcategory pages I get an error and the buttons do not load

Please share the URL where we can see the issue.

Share this post


Link to post
Share on other sites
On 7/16/2020 at 1:02 AM, vgrassb said:

Hello! first of all thanks for this useful module.

I have a problem, I installed the module and it duplicated the add to cart and qty when you are inside the product page like this:

addtocart.thumb.png.016516ce3867eead2b5b9f2d4a1d1395.png

 

Is there a way to disable it there?

Thanks!

It seems your theme uses the hook displayProductListReviews in product page but shouldn't.

You can try to modify the file /hiaddtocartbutton/hiaddtocartbutton.php and add the following code at the beginning of the function "hookDisplayProductListReviews" 

if (Dispatcher::getInstance()->getController() == 'product') {
            return;
}

Like this: 

2020-07-20_19-48-43.png

 

  • Thanks 1

Share this post


Link to post
Share on other sites
  • 1 month later...

Hi there, great module, working fine for me. Is it possible to remove the  "Product successfully added to your shopping cart" pop up that appears every time I click the "add to cart" button??

Just add it to the cart without the pop up, because it makes the shopping process too slow. My site is efridgemagnets.com

Regards.

Share this post


Link to post
Share on other sites
  • 1 month later...
On 10/8/2020 at 10:45 AM, Rjworld said:

Add to cart button not working in homepage on my website

Kindly help me asap.

i solved all console  errors(red liners) and now all working fine, this issue occurred due to javascript errors.

Share this post


Link to post
Share on other sites
3 hours ago, vkmaxx said:

The module on the first page and HiPresta website is still. 1.0.9 (not 1.0.10)

Hi, you're using the latest version of the module, you can ignore the number. We'll fix it in our next update.

Share this post


Link to post
Share on other sites

My small modification, in /modules/hiaddtocartbutton/views/templates/hook/addtocartbutton.tpl after changing from

{if $availability != 'available' && $availability != 'last_remaining_items'}
                disabled
{/if}>

to

{if $availability != 'available' && $availability != 'last_remaining_items'}
                disabled
				>
				<i class="material-icons shopping-cart"></i> {l s='Out of stock' mod='hiaddtocartbutton'}
{else}
				>
				<i class="material-icons shopping-cart"></i> {l s='Add To Cart' mod='hiaddtocartbutton'}
{/if}

You can display Out of stock text on disabled button. Demo at https://www.r24fans.pl/15-wentylatory-sufitowo-scienne

Share this post


Link to post
Share on other sites

Hello,


First, thank you for this module it is well appreciated.

I first found the 1.0.2 version on a website and then encountered the pagination problem where the plus and minus didn't display on the next pages of a product list page.

I then downloaded the 1.0.10 version and I've just upgraded the module. I see that you used prestashop.on('updateFacets', function (param) so that the createQuantitySpin() functionnality is reloaded when ajax reloads a part of the page. I've tested the product list page with a module that does ajax call (advanced search 4 - filters) but it doesn't work. The minus and plus disappear when the part of the page is reloaded.

Isn't updateFacets supposed to work in that case?

Do I have to put the filter module on a hidden position for it to be taken into acocunt on updateFacets?

I see on the devdocs that updateFacets is: "On every product list page (category, search results, pricedrop and so on), the list is updated via ajax calls if you change filters or sorting options. Each time the facets is reloaded, this event is triggered."

Share this post


Link to post
Share on other sites
14 minutes ago, pranab13 said:

version and I've just upgraded the module. I see that you used prestashop.on('updateFacets', function (param) so that the createQuantitySpin() functionnality is reloaded when ajax reloads a part of the page. I've tested the product list page with a module that does ajax call (advanced search 4 - filters) but it doesn't work. The minus and plus disappear when the part of the page is reloaded.

Isn't updateFacets supposed to work in that case?

Do I have to put the filter module on a hidden position for it to be taken into acocunt on updateFacets?

I see on the devdocs that updateFacets is: "On every product list page (category, search results, pricedrop and so on), the list is updated via ajax calls if you change filters or sorting options. Each time the facets is reloaded, this event is triggered."

I've just seen that there is also updateProductList on the dev docs of Prestashop. I tested with that and it displays the minus and plus back when the filters are chosen.

I just added : 


    prestashop.on('updateProductList', function (param) {
        setTimeout(function(){
            createQuantitySpin();
        }, 2000);
    });

after that on the front.js

    prestashop.on('updateFacets', function (param) {
        setTimeout(function(){
            createQuantitySpin();
        }, 2000);
    });    

If someone have Advanced Search 4 or another module that can be a solution.

Share this post


Link to post
Share on other sites
On 9/6/2019 at 9:54 PM, altaiir123 said:

Hi guys,

I've made some custom modifications to this module for better integration with default prestashop 1.7 theme and did few bugfixing.

The whole idea was to change the way how module is attached to product thumbnails. Instead of stick it right below the price I've expanded whole thumbnail to properly fit the button.

  • Thanks to this change the button is little higher and fits fluently to the whole design
  • Spacing after product thumbnail rows are now bigger and looks more "natural"
  • Fixed trimming the bottom of the price for some fonts
  • I get rid of thumbnail shadow overlapping

In order to apply this fix you will need to modify module file: front.css located in hiaddtocartbutton/views/css or add lines to your custom.css

Inside front.css replace .hiaddtocart block with this code:


.hiaddtocart{
    position: relative;
    text-align: center;
    width: 100%;
    top: 0;
    padding-top: .475rem;
    min-height: 3.5rem;
    background: #fff;
}

Notice that "box-shadow" was intentionally https://videoinfographica.com

Next, add these lines at the end of front.css


#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
	height: 370px;
	margin-bottom: 10px;
}					/* Product thumbnail height increase and disable spacing */
#products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description {
	height: 120px;
}					/* Product thumbnail description position alignment */
#products .highlighted-informations, .featured-products .highlighted-informations, .product-accessories .highlighted-informations, .product-miniature .highlighted-informations {
	height: 100px;
}					/* Product thumbnail moving slider position alignment */
#products .thumbnail-container .product-thumbnail, .featured-products .thumbnail-container .product-thumbnail, .product-accessories .thumbnail-container .product-thumbnail, .product-miniature .thumbnail-container .product-thumbnail {
height:calc(100% - 120px);
}					/* Product thumbnail image position alignment */
#products article.product-miniature.js-product-miniature, article.product-miniature.js-product-miniature {
	margin-bottom: 0px;
}					/* Module @hiaddtocartbutton miniature spacing disable */
.pagination .page-list {margin-top: 20px;}					/* Product page bottom page selector margin */
.pagination>div:first-child {margin-top: 20px;}			/* Product page bottom item counter margin */

If you don't want to edit the module files, simply add everything listed above to the custom.css

Now your thumbnails should look like they were designed to have "add to cart" button. :) Keep in mind this is not official update, so might not work for everyone. Feel free to try.

Works for me. God bless you.

Share this post


Link to post
Share on other sites

views/templates/hook/addtocartbutton.tpl

from:

<button 
            class="btn btn-primary add-to-cart" 
            data-button-action="add-to-cart" 
            type="submit"
            {if $availability != 'available' && $availability != 'last_remaining_items'}
                disabled
            {/if}>
            <i class="material-icons shopping-cart"></i> {l s='Add To Cart' mod='hiaddtocartbutton'}
        </button>

        <span class="product-availability">
            <i class="material-icons product-unavailable"></i>
            {l s='There are not enough products in stock' mod='hiaddtocartbutton'}
        </span>
  

 

To:

<button
            class="btn btn-primary add-to-cart"
            data-button-action="add-to-cart"
            type="submit"
            {if $availability != 'available' && $availability != 'last_remaining_items'}
                disabled>

                    <i class="material-icons product-unavailable"></i>
                    {l s='Out Of Stock' mod='hiaddtocartbutton'}
        </button>

              {else}
          <button
                  class="btn btn-primary add-to-cart"
                  data-button-action="add-to-cart"
                  type="submit">
                <i class="material-icons shopping-cart"></i>
                {l s='Add To Cart' mod='hiaddtocartbutton'}

              {/if}

          </button>

 

 

Share this post


Link to post
Share on other sites
Le 06/09/2019 à 8:54 PM, altaiir123 a dit :

Hi guys,

I've made some custom modifications to this module for better integration with default prestashop 1.7 theme and did few bugfixing.

The whole idea was to change the way how module is attached to product thumbnails. Instead of stick it right below the price I've expanded whole thumbnail to properly fit the button.

  • Thanks to this change the button is little higher and fits fluently to the whole design
  • Spacing after product thumbnail rows are now bigger and looks more "natural"
  • Fixed trimming the bottom of the price for some fonts
  • I get rid of thumbnail shadow overlapping

In order to apply this fix you will need to modify module file: front.css located in hiaddtocartbutton/views/css or add lines to your custom.css

Inside front.css replace .hiaddtocart block with this code:


.hiaddtocart{
    position: relative;
    text-align: center;
    width: 100%;
    top: 0;
    padding-top: .475rem;
    min-height: 3.5rem;
    background: #fff;
}

Notice that "box-shadow" was intentionally removed.

Next, add these lines at the end of front.css


#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
	height: 370px;
	margin-bottom: 10px;
}					/* Product thumbnail height increase and disable spacing */
#products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description {
	height: 120px;
}					/* Product thumbnail description position alignment */
#products .highlighted-informations, .featured-products .highlighted-informations, .product-accessories .highlighted-informations, .product-miniature .highlighted-informations {
	height: 100px;
}					/* Product thumbnail moving slider position alignment */
#products .thumbnail-container .product-thumbnail, .featured-products .thumbnail-container .product-thumbnail, .product-accessories .thumbnail-container .product-thumbnail, .product-miniature .thumbnail-container .product-thumbnail {
height:calc(100% - 120px);
}					/* Product thumbnail image position alignment */
#products article.product-miniature.js-product-miniature, article.product-miniature.js-product-miniature {
	margin-bottom: 0px;
}					/* Module @hiaddtocartbutton miniature spacing disable */
.pagination .page-list {margin-top: 20px;}					/* Product page bottom page selector margin */
.pagination>div:first-child {margin-top: 20px;}			/* Product page bottom item counter margin */

If you don't want to edit the module files, simply add everything listed above to the custom.css

Now your thumbnails should look like they were designed to have "add to cart" button. :) Keep in mind this is not official update, so might not work for everyone. Feel free to try.

Hello, i do that on my custom.css.

It's working well but just have a probleme with responsive... Any idea to fixe that ?

See capture:

1865272926_Capturedecran2020-10-26a11_21_05.png.d706aacbdd638115cb4868125d7ee3e1.png

 

Thank for help 🙂

 

Share this post


Link to post
Share on other sites
Il y a 2 heures, residentbea a dit :

essayez simplement moins de mots ou quittez le panier d'icônes 

Hi, thank for help.

I don't realy understand what you mind.
But actually i change the padding and it's ok. 

Share this post


Link to post
Share on other sites
hace 23 minutos, Thierry L dijo:

Hi, thank for help.

I don't realy understand what you mind.
But actually i change the padding and it's ok. 

Sorry my bad English  😂

En Español:

Intenta poner menos palabras o quitar el icono del carrito de la compra.

Google traslate:

essayez de mettre moins de mots ou de supprimer l'icône du panier.

😅

Share this post


Link to post
Share on other sites
il y a 13 minutes, residentbea a dit :

Sorry my bad English  😂

En Español:

Intenta poner menos palabras o quitar el icono del carrito de la compra.

Google traslate:

essayez de mettre moins de mots ou de supprimer l'icône du panier.

😅

thank you, just need to change padding

.hiaddtocart button.btn-primary {
display: inline-block;
padding: .5rem .1rem;
}

Thank to your help

Share this post


Link to post
Share on other sites
  • 1 month later...