Insérer un dropdown panier dans Prestashop 1.7

Comme vous avez certainement pu le constater, pas mal de fonctionnalités ont disparus dans la version 1.7 de Prestashop. je trouve personnellement qu’il y a encore énormément de bugs, l’ergonomie laisse vraiment à désirer notamment sur la partie mobile….

Une des fonctionnalités qui a été supprimée est le dropdown panier. Voici un tutoriel qui va vous permettre de le remettre.

Tout ce passe dans le module ps_shoppingcart qui si situe à l’intérieur de votre thème, dans cet exemple précis c’est le thème par défaut soit ../themes/classic/modules/ ps_shoppingcart

Étape 1: ouvrir le fichier ps_shoppingcart-product-line.tpl et remplacer l’ensemble du code par celui-ci

 
<div class="dropdown-product-item">
	<span class="dropdown-product-remove">
    	<a  class="remove-from-cart" rel="nofollow" href="{$product.remove_from_cart_url}" data-link-action="remove-from-cart" title="{l s='remove from cart' d='Shop.Theme.Actions'}"
><i class="material-icons">&#xe5cd;</i>
		</a>
	</span>
	{if $product.images}
    	<img class="dropdown-product-thumb" src="{$product.images.0.bySize.small_default.url}" title="{$product.name}"/>
    {/if} 
    <div class="dropdown-product-info">
    	<a class="dropdown-product-title" href="shop-single.html">{$product.name|truncate:20:'...'}</a>
        <span class="dropdown-product-details">{$product.quantity} x {$product.price}</span>
        {if $product.customizations|count}
    	<span class="dropdown-product-details">
        <ul>
            {foreach from=$product.customizations item='customization'}
                <li>
                    <ul>
                        {foreach from=$customization.fields item='field'}
                            <li>
                                {if $field.type == 'text'}
                                    <span>{$field.text nofilter}</span>
                                {else if $field.type == 'image'}
                                    <img src="{$field.image.small.url}">
                                {/if}
                            </li>
                        {/foreach}
                    </ul>
                </li>
            {/foreach}
        </ul>
    </span>
	{/if}
	</div>
   </div>

Étape 2: ouvrir le fichier ps_shoppingcart.tpl et remplacer l’ensemble du code par celui-ci

<div id="_desktop_cart">
  <div class="blockcart cart-preview {if $cart.products_count > 0}active{else}inactive{/if}" data-refresh-url="{$refresh_url}">
    <div class="dropdown">
     <button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="material-icons shopping-cart">shopping_cart</i>
        <span class="hidden-sm-down">{l s='Cart' d='Shop.Theme.Checkout'}</span>
        <span class="cart-products-count">({$cart.products_count})</span>
      </button>
		 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
			 <div class="toolbar-dropdown">
     			 {if $cart.products_count > 0}
       				 {foreach from=$cart.products item=product}
						{include 'module:ps_shoppingcart/ps_shoppingcart-product-line.tpl' product=$product}
				  {/foreach}
				<div class="toolbar-dropdown-group">
 				{foreach from=$cart.subtotals item="subtotal"}
                 	<div class="col-xs-6">{$subtotal.label}</span></div>
                  	<div class="col-xs-6 text-right">{$subtotal.value}</div>
                {/foreach}
   					<div class="col-xs-6">{$cart.totals.total.label}</div>
                    <div class="col-xs-6 text-right">{$cart.totals.total.value}</div>
				</div>
 			 </div>
			<div class="toolbar-dropdown-total">
  				<a class="btn-checkout btn btn-primary" href="{$urls.pages.order}">{l s='Check Out' d='Shop.Theme.Actions'}</a>
  				<a class="btn-view btn btn-secondary" href="{$cart_url}">{l s='View cart' d='Shop.Theme.Actions'}</a>
          	</div>	
  			{else}
  				<p>{l s='Your cart is empy' d='Shop.Theme.Actions'}</p>
     		 {/if}
    	</div>
  	</div>
 </div>
</div>

A noter: par défaut Prestashop va présenter le tarif comme cela

– Sous Total
– Livraison
– Total

Le prix total peut induire en erreur. En effet, si le client n’est pas connecté à son compte, Prestashop indiquera les frais de port les moins chers. Hors si le client habite aux Etats-Unis, les frais de port peuvent considérablement varier et entrainer ainsi un risque d’abandon lors de la finalisation de la commande. (voir depuis le début des frais de livraison à 4€ pour au final être à 10€, il y a de quoi être un peu surpris….)

Pour cela, on va remplacer le code suivant

<div class="toolbar-dropdown-group">
 {foreach from=$cart.subtotals item="subtotal"}
     <div class="col-xs-6">{$subtotal.label}</span></div>
     <div class="col-xs-6 text-right">{$subtotal.value}</div>
  {/foreach}
     <div class="col-xs-6">{$cart.totals.total.label}</div>
     <div class="col-xs-6 text-right">{$cart.totals.total.value}</div>
</div>

Par

<div class="toolbar-dropdown-group"> 
  <div class="col-xs-6">{l s='Total' d='Shop.Theme.Actions'}</span></div> 
  <div class="col-xs-6 text-right">{$cart.subtotals.products.value}</div>
 </div>

 

Étape 3: on va ajouter un peu de CSS, pour cela on ouvre le fichier custom.css, qui se situe dans ../themes/asset/css/custom.css et on insère le code suivant :

#header .blockcart.cart-preview .dropdown .dropdown-menu {
	padding: 10px 15px;
	top: 30px !important;
	width: 260px !important;
	min-width: 260px !important;
	right: -0.85rem;
	left: inherit !important;
	box-shadow: 0 7px 22px -5px rgba(47,56,68,0.2);
}
#header .blockcart.cart-preview .dropdown-toggle {
	background: none;
	border: none;
}
#header .blockcart.cart-preview .dropdown-product-item {
	display: table;
	position: relative;
	width: 100%;
	padding: 9px 0;
	border-top: 1px dashed #d8e0e6
}
#header .blockcart.cart-preview .dropdown-product-item:first-child {
	border-top: 0
}
#header .blockcart.cart-preview .dropdown-product-item>.dropdown-product-thumb, .dropdown-product-item>.dropdown-product-info {
	display: table-cell;
	vertical-align: top
}
#header .blockcart.cart-preview .dropdown-product-item>.dropdown-product-thumb {
	width: 55px;
	border-radius: 50%;
	overflow: hidden
}
#header .blockcart.cart-preview .dropdown-product-item>.dropdown-product-thumb>img {
	display: block;
	width: 100%
}
#header .blockcart.cart-preview .dropdown-product-item > .dropdown-product-remove {
	display: block;
	position: absolute;
	top: 9px;
	right: -10px;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
#header .blockcart.cart-preview .dropdown-product-item > .dropdown-product-remove i {
	color: #ff5252 !important;
}
#header .blockcart.cart-preview .dropdown-product-item>.dropdown-product-info {
	padding-right: 15px;
	padding-left: 12px
}
#header .blockcart.cart-preview .dropdown-product-item .dropdown-product-title {
	display: block;
	padding-top: 2px;
	transition: color .3s;
	color: #373a3c !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none
}
#header .blockcart.cart-preview .dropdown-product-item .dropdown-product-title:hover {
	color: #0da9ef
}
#header .blockcart.cart-preview .dropdown-product-item .dropdown-product-details {
	color: #9da9b9;
	font-size: 14px
}
#header .blockcart.cart-preview .blockcart {
	background: #f1f1f1;
	height: 3rem;
 padding: .75rem;
 margin-left: .9375rem;
	text-align: center;
	white-space: nowrap;
}
#header .blockcart.cart-preview .toolbar-dropdown-group {
	display: table;
	width: 100%;
	padding: 9px 0;
	border-top: 1px solid #e1e7ec;
	border-bottom: 1px solid #e1e7ec;
	font-size: 14px;
}
#header .blockcart.cart-preview .toolbar-dropdown-group div {
	padding-bottom: 2px
}
#header .blockcart.cart-preview .text-right {
	text-align: right;
}
#header .blockcart.cart-preview .btn-checkout, #header .blockcart.cart-preview .btn-view {
	display: block;
	width: 100%;
	margin-top: 12px;
	margin-bottom: 12px;
	height: 36px;
	padding: 0 18px;
	padding-right: 18px;
	padding-left: 18px;
	padding-right: 18px;
	padding-left: 18px;
	border-radius: 18px;
	font-size: 17px;
	line-height: 34px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: all .4s;
	text-align: center;
}
#header .blockcart.cart-preview .btn-view {
	background-color: #f5f5f5;
	border-color: #e1e7ec;
	color: #606975 !important;
}
#header .blockcart.cart-preview .btn-view:hover {
	background-color: #cbcbcb !important
}

RESULTAT

 

 

 

 

 

Articles similaires

Taille des Images du thème par défaut de Prestashop 1.6
views 6563
Ce tutoriel va vous permettre de connaitre la taille des images du thème par défaut de Prestashop La plupart des images que vous téléchargez dans le back-office doivent être enregistrées au format .jpg ou .png. Attention pour activer le format png il faut aller dans Préférences > Images et dans la partie "Options de génération d'images", cochez dans format d'image : Utiliser le PNG uniquemen...
Quelques variables qui peuvent vous aider pour votre mise en page – Prestashop 1.7 ...
views 13613
Dans le tuto du jour, je vais énumérer quelques variables de PrestaShop 1.6 PrestaShop 1.7 qui peuvent vous aider pour personnaliser votre site. N'hésitez pas à les partager via les commentaires ------------------ Insérez un lien vers une page CMS dans un fichier TPL Prestashop 1.6 : {$link->getCmsLink()} Exemple : l'id de la page cms est 3

Vider le cache dans Prestashop 1.6 et Prestashop 1.7
views 27094
Pourquoi vide t-on le cache dans Prestashop ?  Lorsque vous modifiez des codes dans prestashop pour améliorer par exemple le thème graphique, il se peut que vous ne  visualisez pas ces changements dans le front-office. Il faut savoir que par défaut, Prestashop a activé le cache qui garde en mémoire tous les paramètres et la mise en forme de votre site. Il est donc nécessaire de purger c...
Liste des variables smarty : Prestashop 1.7
views 12506
Je vais énumérer dans ce tutoriel, les variables utlisées dans Prestashop 1.7, Pour les découvrir, vous avez deux methodes. Pour les deux méthodes, il faut ouvrir le fichier header.tpl qui se situe dans themes/nomdevotretheme/templates/_partials/header.tpl. En haut de page, vous insérez soit 1) {debug}, lorsque vous allez allez sur votre site vous allez avoir une fenêtre qui va s'ouvrir avec...
Comment relier son compte Paypal à sa boutique Prestashop 1.6
views 6222
Encore aujourd'hui, une partie des consommateurs ont peur d'utiliser sa carte de crédit sur un site internet, en particulier à des marques encore peu connues sur le marché. C'est pour cela que je conseille de proposer différents modes de paiement sur son site e-commerce comme Paypal, virement..... En plus si vous avez un bug sur l'un de vos modes de paiement, le client pourra toujours en choisi...

Une réponse à “Insérer un dropdown panier dans Prestashop 1.7”

  1. Marie dit :

    Bonjour,

    Petite question comment mettre l’icone caddie lorsqu’elle n’y est pas ?

    Par avance merci,

    Marie

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *