![\"\"](\"http:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2018\/07\/dropdown-panier.png\")
<\/a><\/p>\n\u00c9tape 1<\/strong><\/span>: ouvrir le fichier ps_shoppingcart-product-line.tpl et remplacer l’ensemble du code par celui-ci<\/p>\n \u00c9tape 2<\/strong>:<\/span> ouvrir le fichier ps_shoppingcart.tpl et remplacer l’ensemble du code par celui-ci<\/p>\n A noter:<\/strong> par d\u00e9faut Prestashop va pr\u00e9senter le tarif comme cela<\/p>\n – Sous Total Le prix total peut induire en erreur. En effet, si le client n\u2019est pas connect\u00e9 \u00e0 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\u00e9rablement varier et entrainer ainsi un risque d\u2019abandon lors de la finalisation de la commande. (voir depuis le d\u00e9but des frais de livraison \u00e0 4\u20ac pour au final \u00eatre \u00e0 10\u20ac, il y a de quoi \u00eatre un peu surpris\u2026.)<\/p>\n Pour cela, on va remplacer le code suivant<\/p>\n Par<\/strong><\/p>\n <\/p>\n \u00c9tape 3:<\/strong> 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\u00e8re le code suivant :<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n \r\n<div class=\"dropdown-product-item\">\r\n\t<span class=\"dropdown-product-remove\">\r\n \t<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'}\"\r\n><i class=\"material-icons\"><\/i>\r\n\t\t<\/a>\r\n\t<\/span>\r\n\t{if $product.images}\r\n \t<img class=\"dropdown-product-thumb\" src=\"{$product.images.0.bySize.small_default.url}\" title=\"{$product.name}\"\/>\r\n {\/if} \r\n <div class=\"dropdown-product-info\">\r\n \t<a class=\"dropdown-product-title\" href=\"shop-single.html\">{$product.name|truncate:20:'...'}<\/a>\r\n <span class=\"dropdown-product-details\">{$product.quantity} x {$product.price}<\/span>\r\n {if $product.customizations|count}\r\n \t<span class=\"dropdown-product-details\">\r\n <ul>\r\n {foreach from=$product.customizations item='customization'}\r\n <li>\r\n <ul>\r\n {foreach from=$customization.fields item='field'}\r\n <li>\r\n {if $field.type == 'text'}\r\n <span>{$field.text nofilter}<\/span>\r\n {else if $field.type == 'image'}\r\n <img src=\"{$field.image.small.url}\">\r\n {\/if}\r\n <\/li>\r\n {\/foreach}\r\n <\/ul>\r\n <\/li>\r\n {\/foreach}\r\n <\/ul>\r\n <\/span>\r\n\t{\/if}\r\n\t<\/div>\r\n <\/div><\/pre>\n<div id=\"_desktop_cart\">\r\n <div class=\"blockcart cart-preview {if $cart.products_count > 0}active{else}inactive{\/if}\" data-refresh-url=\"{$refresh_url}\">\r\n <div class=\"dropdown\">\r\n <button class=\"dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n <i class=\"material-icons shopping-cart\">shopping_cart<\/i>\r\n <span class=\"hidden-sm-down\">{l s='Cart' d='Shop.Theme.Checkout'}<\/span>\r\n <span class=\"cart-products-count\">({$cart.products_count})<\/span>\r\n <\/button>\r\n\t\t <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\">\r\n\t\t\t <div class=\"toolbar-dropdown\">\r\n \t\t\t {if $cart.products_count > 0}\r\n \t\t\t\t {foreach from=$cart.products item=product}\r\n\t\t\t\t\t\t{include 'module:ps_shoppingcart\/ps_shoppingcart-product-line.tpl' product=$product}\r\n\t\t\t\t {\/foreach}\r\n\t\t\t\t<div class=\"toolbar-dropdown-group\">\r\n \t\t\t\t{foreach from=$cart.subtotals item=\"subtotal\"}\r\n \t<div class=\"col-xs-6\">{$subtotal.label}<\/span><\/div>\r\n \t<div class=\"col-xs-6 text-right\">{$subtotal.value}<\/div>\r\n {\/foreach}\r\n \t\t\t\t\t<div class=\"col-xs-6\">{$cart.totals.total.label}<\/div>\r\n <div class=\"col-xs-6 text-right\">{$cart.totals.total.value}<\/div>\r\n\t\t\t\t<\/div>\r\n \t\t\t <\/div>\r\n\t\t\t<div class=\"toolbar-dropdown-total\">\r\n \t\t\t\t<a class=\"btn-checkout btn btn-primary\" href=\"{$urls.pages.order}\">{l s='Check Out' d='Shop.Theme.Actions'}<\/a>\r\n \t\t\t\t<a class=\"btn-view btn btn-secondary\" href=\"{$cart_url}\">{l s='View cart' d='Shop.Theme.Actions'}<\/a>\r\n \t<\/div>\t\r\n \t\t\t{else}\r\n \t\t\t\t<p>{l s='Your cart is empy' d='Shop.Theme.Actions'}<\/p>\r\n \t\t {\/if}\r\n \t<\/div>\r\n \t<\/div>\r\n <\/div>\r\n<\/div><\/pre>\n
\n– Livraison
\n– Total<\/p>\n<div class=\"toolbar-dropdown-group\">\r\n {foreach from=$cart.subtotals item=\"subtotal\"}\r\n <div class=\"col-xs-6\">{$subtotal.label}<\/span><\/div>\r\n <div class=\"col-xs-6 text-right\">{$subtotal.value}<\/div>\r\n {\/foreach}\r\n <div class=\"col-xs-6\">{$cart.totals.total.label}<\/div>\r\n <div class=\"col-xs-6 text-right\">{$cart.totals.total.value}<\/div>\r\n<\/div><\/pre>\n<div class=\"toolbar-dropdown-group\"> \r\n <div class=\"col-xs-6\">{l s='Total' d='Shop.Theme.Actions'}<\/span><\/div> \r\n <div class=\"col-xs-6 text-right\">{$cart.subtotals.products.value}<\/div>\r\n <\/div><\/pre>\n#header .blockcart.cart-preview .dropdown .dropdown-menu {\r\n\tpadding: 10px 15px;\r\n\ttop: 30px !important;\r\n\twidth: 260px !important;\r\n\tmin-width: 260px !important;\r\n\tright: -0.85rem;\r\n\tleft: inherit !important;\r\n\tbox-shadow: 0 7px 22px -5px rgba(47,56,68,0.2);\r\n}\r\n#header .blockcart.cart-preview .dropdown-toggle {\r\n\tbackground: none;\r\n\tborder: none;\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item {\r\n\tdisplay: table;\r\n\tposition: relative;\r\n\twidth: 100%;\r\n\tpadding: 9px 0;\r\n\tborder-top: 1px dashed #d8e0e6\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item:first-child {\r\n\tborder-top: 0\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item>.dropdown-product-thumb, .dropdown-product-item>.dropdown-product-info {\r\n\tdisplay: table-cell;\r\n\tvertical-align: top\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item>.dropdown-product-thumb {\r\n\twidth: 55px;\r\n\tborder-radius: 50%;\r\n\toverflow: hidden\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item>.dropdown-product-thumb>img {\r\n\tdisplay: block;\r\n\twidth: 100%\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item > .dropdown-product-remove {\r\n\tdisplay: block;\r\n\tposition: absolute;\r\n\ttop: 9px;\r\n\tright: -10px;\r\n\tfont-size: 13px;\r\n\tline-height: 1;\r\n\tcursor: pointer;\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item > .dropdown-product-remove i {\r\n\tcolor: #ff5252 !important;\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item>.dropdown-product-info {\r\n\tpadding-right: 15px;\r\n\tpadding-left: 12px\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item .dropdown-product-title {\r\n\tdisplay: block;\r\n\tpadding-top: 2px;\r\n\ttransition: color .3s;\r\n\tcolor: #373a3c !important;\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\ttext-decoration: none\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item .dropdown-product-title:hover {\r\n\tcolor: #0da9ef\r\n}\r\n#header .blockcart.cart-preview .dropdown-product-item .dropdown-product-details {\r\n\tcolor: #9da9b9;\r\n\tfont-size: 14px\r\n}\r\n#header .blockcart.cart-preview .blockcart {\r\n\tbackground: #f1f1f1;\r\n\theight: 3rem;\r\n padding: .75rem;\r\n margin-left: .9375rem;\r\n\ttext-align: center;\r\n\twhite-space: nowrap;\r\n}\r\n#header .blockcart.cart-preview .toolbar-dropdown-group {\r\n\tdisplay: table;\r\n\twidth: 100%;\r\n\tpadding: 9px 0;\r\n\tborder-top: 1px solid #e1e7ec;\r\n\tborder-bottom: 1px solid #e1e7ec;\r\n\tfont-size: 14px;\r\n}\r\n#header .blockcart.cart-preview .toolbar-dropdown-group div {\r\n\tpadding-bottom: 2px\r\n}\r\n#header .blockcart.cart-preview .text-right {\r\n\ttext-align: right;\r\n}\r\n#header .blockcart.cart-preview .btn-checkout, #header .blockcart.cart-preview .btn-view {\r\n\tdisplay: block;\r\n\twidth: 100%;\r\n\tmargin-top: 12px;\r\n\tmargin-bottom: 12px;\r\n\theight: 36px;\r\n\tpadding: 0 18px;\r\n\tpadding-right: 18px;\r\n\tpadding-left: 18px;\r\n\tpadding-right: 18px;\r\n\tpadding-left: 18px;\r\n\tborder-radius: 18px;\r\n\tfont-size: 17px;\r\n\tline-height: 34px;\r\n\t-webkit-transform: translateZ(0);\r\n\ttransform: translateZ(0);\r\n\ttransition: all .4s;\r\n\ttext-align: center;\r\n}\r\n#header .blockcart.cart-preview .btn-view {\r\n\tbackground-color: #f5f5f5;\r\n\tborder-color: #e1e7ec;\r\n\tcolor: #606975 !important;\r\n}\r\n#header .blockcart.cart-preview .btn-view:hover {\r\n\tbackground-color: #cbcbcb !important\r\n}<\/pre>\nRESULTAT<\/strong><\/span><\/h1>\n
\u00a0
![\"\"](\"http:\/\/www.majory-cubizolles.fr\/blog\/wp-content\/uploads\/2018\/07\/dropdown-panier-1.png\")
<\/a><\/strong><\/span><\/h1>\n