In Prestashop 1.7, mini cart doesn’t support dropdown cart. Because Prestashop 1.7 removed this feature which is really need for any ecommerce store. So, today I’m going to show you how can we add dropdown cart with hover. To avail this feature just follow this simple steps.
Step 1:
Go to in your theme directory
/module/ps_shoppingcart/ps_shoppingcart.tpl
You need to put below code after <div class=”blockcart cart-preview> which is below the <div id=”_desktop_cart”>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | {if $cart.products_count > } <div class="ht_cart cart-hover-content"> <ul> {foreach from=$cart.products item=product} <li class="cart-wishlist-item"> {include 'module:ps_shoppingcart/ps_shoppingcart-product-line.tpl' product=$product} </li> {/foreach} </ul> <div class="cart-summary"> <div class="cart-subtotals"> {foreach from=$cart.subtotals item="subtotal"} <div class="{$subtotal.type}"> <span class="label">{$subtotal.label}</span> <span class="value">{$subtotal.value}</span> </div> {/foreach} </div> <div class="cart-total"> <span class="label">{$cart.totals.total.label}</span> <span class="value">{$cart.totals.total.value}</span> </div> </div> <div class="cart-wishlist-action"> <a class="cart-wishlist-viewcart" href="{$cart_url}">view cart</a> <a class="cart-wishlist-checkout" href="{$urls.pages.order}">{l s='Check Out' d='Shop.Theme.Actions'}</a> </div> </div> {else} <div class="ht_cart cart-hover-content"> <p class="no-item">There is no itme in your cart.</p> </div> {/if} |
Step 2:
Go to in your theme directory
/module/ps_shoppingcart/ps_shoppingcart-product-line.tpl
Now, you have to put below code:
1 2 3 4 5 | {if $product.images} <div class="minicart-img"> <img src="{$product.images.0.bySize.small_default.url}" title="{$product.name}"/> </div> {/if} |
Step 3:
Now, you have to edit css style to give it better look. 🙂
If you still have any doubts, feel free to ask in comments and we’ll reply as soon as possible.
July 16, 2019 at 2:05 pm
Buenas,
Gracias por su explicación. Pero tengo una duda, los productos del carrito solo aparecen si se refresca la pagina. Como se podrÃa hacer para que se actualizara sin necesidad de atualizar la pagina.
Gracias.
July 19, 2019 at 10:19 am
¿Puede verificar que el módulo del carrito de la compra esté enganchado en el gancho de displayHeader?