how to put the Cart in the Nav bar ?

pascuald · March 24, 2014

Hello ,

I would like to put the Cart in the Nav bar and at the extreme right.

When i attach the Cart in the module 'Display nav' it works but…

the Cart is placed in a ligne below

No way to modify with Live edit…

Someone to help me ???

Thanks a lot

Pacual

dioniz · March 24, 2014

Is it possible to see your site?

pascuald · March 24, 2014

You can look at the second website at http://www.aneto.net/boutique/ (the real one is not yet open)

thank you for your time

Pascual

dioniz · March 24, 2014

have you tried to go to Modules > Positions > Display Nav and rearrange positions?

pascuald · March 24, 2014

Yes, and i also tried to move the cart bloc with live edit but it stays at the same place.

In fact, i was wondering if i had to change some lignes in css nav bar or in css cart ??

but as i am definitively not a developer, i am looking for some help :-)

if you have any idea , it iss nice for me

Pascual

vekia · March 24, 2014

btw. i see your cart in top navbar

solution is easy. from main div of the cart div remove col-sm-4 clearfix

then move module before block user info module on modules list: displayTop

effect:

pascuald · March 24, 2014

So funny to read you ,

but i just don't know what do you mean by " from main div of the cart div…"

Are you talking about a file ???? a module ?? in prestashop admin or a file that i have to open with texxt edit ??

I am goning to look at cart's module , as a start …

before begginner, this is what i am ;-)

thanks a lot

pascual

pascuald · March 24, 2014

And the legend must go on !!!!

i found it… i did it …

i just have to find how to put everybody on the same height (sorry for my poor english)

Thanks to you … moderator :-)

(but it is like you make me speak japanese for one or two minutes ah ah ah !!! )

Pascual

GrandNagus · June 3, 2014

Hi,

Great post, and using above method I have put my cart block in the nav bar(not displaytop) on the right hand side.

All looks good except when viewed on a phone or tablet. The cart block extends to full width and messes up the nav bar.

How cant I stop this?

Second question : what part of the CSS positions the cart drop down? Now I have moved it to the nav bar, there is a big gap when you view your cart.

Thanks

pascuald · June 4, 2014

Hello ,

Sorry but i really don't know nothing about phone version… i am not that good :-)

For the cart dop down position, if you have a gap it can be

- in blockcart.css file

- in the second part of the file ( part below - on line 'top'' that you change so it fits you cart position in navbar).

/*******************************************************************
Cart Block(Header) Styles
********************************************************************/
#header .cart_block { /*BLOC INFERIEUR DU PANIER*/
position: absolute;
top: 37px;
right: 0;
z-index: 100;
display: none;
height: auto;
background: #484848;
color: white;
width: 260px; }

…

I hope it helps you

Sincerely

erdem_ustun · October 20, 2014

btw. i see your cart in top navbar

solution is easy. from main div of the cart div remove col-sm-4 clearfix

then move module before block user info module on modules list: displayTop

effect:

Hi, Thanks for your reply but which files We will delete col-sm-4 clearfix

Please can you write name of css files.

thanks

pascuald · October 21, 2014

Hello Erdem (I don't know if Erdem is a first name) :-)

CSS file is for graphic modifications (wider , elments closer, colours, …)

Defaut-bootstrap / CSS / Modules / Blockcart / blockcart.css

TPL file is to modify the place of the cart (in the nav bar and at the right position)

defaut-Bootstrap / modules / blockcart / blockcart.TPL

replace 'col-sm-4 clearfix' with 'pull-right' like shown under, in my file

Then in 'Modules positions' , remove the module from 'Display TOP' and place it at the top in 'Display Header'

I hope it will help you. In case feel free to contact again

sincerely

pascual

***********************************************************************

{*

* 2007-2014 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Open Software License (OSL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/osl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

{if isset($blockcart_top) && $blockcart_top}

<div class=”pull-right{if $PS_CATALOG_MODE} header_user_catalog{/if}”> /* 'col-sm-4 clearfix' replaced with 'pull-right' */

{/if}

<a href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">

<b>{l s='Cart' mod='blockcart'}</b>

<span class="ajax_cart_quantity{if $cart_qties == 0} unvisible{/if}">{$cart_qties}</span>

<span class="ajax_cart_product_txt{if $cart_qties != 1} unvisible{/if}">{l s='Product' mod='blockcart'}</span>

<span class="ajax_cart_product_txt_s{if $cart_qties < 2} unvisible{/if}">{l s='Products' mod='blockcart'}</span>

{if $cart_qties > 0}

{if $priceDisplay == 1}

{assign var='blockcart_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}

{convertPrice price=$cart->getOrderTotal(false, $blockcart_cart_flag)}

{else}

{assign var='blockcart_cart_flag' value='Cart::BOTH_WITHOUT_SHIPPING'|constant}

{convertPrice price=$cart->getOrderTotal(true, $blockcart_cart_flag)}

{/if}

</span>

<span class="ajax_cart_no_product{if $cart_qties > 0} unvisible{/if}">{l s='(empty)' mod='blockcart'}</span>

{if $ajax_allowed && isset($blockcart_top) && !$blockcart_top}

{/if}

</a>

{if !$PS_CATALOG_MODE}

{if $products}

{foreach from=$products item='product' name='myLoop'}

{assign var='productId' value=$product.id_product}

{assign var='productAttributeId' value=$product.id_product_attribute}

<a class="cart-images" href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'cart_default')}" alt="{$product.name|escape:'html':'UTF-8'}" /></a>

<span class="quantity-formated"><span class="quantity">{$product.cart_quantity}</span> x </span><a class="cart_block_product_name" href="{$link->getProductLink($product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}">{$product.name|truncate:13:'...'|escape:'html':'UTF-8'}</a>

</div>

{if isset($product.attributes_small)}

<a href="{$link->getProductLink($product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'html':'UTF-8'}" title="{l s='Product detail' mod='blockcart'}">{$product.attributes_small}</a>

</div>

{/if}

{if !isset($product.is_gift) || !$product.is_gift}

{if $priceDisplay == $smarty.const.PS_TAX_EXC}{displayWtPrice p="`$product.total`"}{else}{displayWtPrice p="`$product.total_wt`"}{/if}

{else}

{l s='Free!' mod='blockcart'}

{/if}

</span>

</div>

{if !isset($customizedDatas.$productId.$productAttributeId) && (!isset($product.is_gift) || !$product.is_gift)}

<a class="ajax_cart_block_remove_link" href="{$link->getPageLink('cart', true, NULL, 'delete=1&id_product={$product.id_product}&ipa={$product.id_product_attribute}&id_address_delivery={$product.id_address_delivery}&token={$static_token}', true)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='remove this product from my cart' mod='blockcart'}"> </a>

{/if}

</span>

</dt>

{if isset($product.attributes_small)}

{/if}

{if isset($customizedDatas.$productId.$productAttributeId[$product.id_address_delivery])}

{if !isset($product.attributes_small)}

{/if}

{foreach from=$customizedDatas.$productId.$productAttributeId[$product.id_address_delivery] key='id_customization' item='customization' name='customizations'}

<a class="ajax_cart_block_remove_link" href="{$link->getPageLink("cart", true, NULL, "delete=1&id_product={$product.id_product|intval}&ipa={$product.id_product_attribute|intval}&id_customization={$id_customization}&token={$static_token}", true)|escape:"html":"UTF-8"}" rel="nofollow"> </a>

</div>

{if isset($customization.datas.$CUSTOMIZE_TEXTFIELD.0)}

{$customization.datas.$CUSTOMIZE_TEXTFIELD.0.value|replace:"<br />":" "|truncate:28:'...'|escape:'html':'UTF-8'}

{else}

{l s='Customization #%d:' sprintf=$id_customization|intval mod='blockcart'}

{/if}

</li>

{/foreach}

</ul>

{if !isset($product.attributes_small)}</dd>{/if}

{/if}

{if isset($product.attributes_small)}</dd>{/if}

{/foreach}

</dl>

{/if}

{l s='No products' mod='blockcart'}

</p>

{if $discounts|@count > 0}

{foreach from=$discounts item=discount}

{if $discount.value_real > 0}

{$discount.name|truncate:18:'...'|escape:'html':'UTF-8'}

</td>

-{if $priceDisplay == 1}{convertPrice price=$discount.value_tax_exc}{else}{convertPrice price=$discount.value_real}{/if}

</td>

{if strlen($discount.code)}

<a class="delete_voucher" href="{$link->getPageLink("$order_process", true)}?deleteDiscount={$discount.id_discount}" title="{l s='Delete' mod='blockcart'}" rel="nofollow">

</a>

{/if}

</td>

</tr>

{/if}

{/foreach}

</table>

{/if}

{if $shipping_cost_float == 0}

{l s='Free shipping!' mod='blockcart'}

{else}

{$shipping_cost}

{/if}

</span>

<span>

{l s='Shipping' mod='blockcart'}

</span>

</div>

{if $show_wrapping}

{assign var='cart_flag' value='Cart::ONLY_WRAPPING'|constant}

{if $priceDisplay == 1}

{convertPrice price=$cart->getOrderTotal(false, $cart_flag)}{else}{convertPrice price=$cart->getOrderTotal(true, $cart_flag)}

{/if}

</span>

<span>

{l s='Wrapping' mod='blockcart'}

</span>

</div>

{/if}

{if $show_tax && isset($tax_cost)}

<span>{l s='Tax' mod='blockcart'}</span>

</div>

{/if}

<span class="price cart_block_total ajax_block_cart_total">{$total}</span>

<span>{l s='Total' mod='blockcart'}</span>

</div>

{if $use_taxes && $display_tax_label == 1 && $show_tax}

<p>

{if $priceDisplay == 0}

{l s='Prices are tax included' mod='blockcart'}

{elseif $priceDisplay == 1}

{l s='Prices are tax excluded' mod='blockcart'}

{/if}

</p>

{/if}

</div>

<a id="button_order_cart" class="btn btn-default button button-small" href="{$link->getPageLink("$order_process", true)|escape:"html":"UTF-8"}" title="{l s='Check out' mod='blockcart'}" rel="nofollow">

<span>

{l s='Check out' mod='blockcart'}<i class="icon-chevron-right right"></i>

</span>

</a>

</p>

</div>

</div>

{/if}

</div>

{if isset($blockcart_top) && $blockcart_top}

</div>

{/if}

{counter name=active_overlay assign=active_overlay}

{if !$PS_CATALOG_MODE && $active_overlay == 1}

<h2>

<i class="icon-ok"></i>{l s='Product successfully added to your shopping cart' mod='blockcart'}

</h2>

</div>

<div>

<strong class="dark">{l s='Quantity' mod='blockcart'}</strong>

</div>

<div>

<strong class="dark">{l s='Total' mod='blockcart'}</strong>

</div>

<h2>

{l s='There are [1]%d[/1] items in your cart.' mod='blockcart' sprintf=[$cart_qties] tags=['<span class=ajax_cart_quantity"&gt]}

</span>

<span class="ajax_cart_product_txt {if $cart_qties > 1} unvisible{/if}">

{l s='There is 1 item in your cart.' mod='blockcart'}

</span>

</h2>

{l s='Total products' mod='blockcart'}

{if $priceDisplay == 1}

{l s='(tax excl.)' mod='blockcart'}

{else}

{l s='(tax incl.)' mod='blockcart'}

{/if}

</strong>

{if $cart_qties > 0}

{convertPrice price=$cart->getOrderTotal(false, Cart::ONLY_PRODUCTS)}

{/if}

</span>

</div>

{if $show_wrapping}

{l s='Wrapping' mod='blockcart'}

{if $priceDisplay == 1}

{l s='(tax excl.)' mod='blockcart'}

{else}

{l s='(tax incl.)' mod='blockcart'}

{/if}

</strong>

{if $priceDisplay == 1}

{convertPrice price=$cart->getOrderTotal(false, Cart::ONLY_WRAPPING)}

{else}

{convertPrice price=$cart->getOrderTotal(true, Cart::ONLY_WRAPPING)}

{/if}

</span>

</div>

{/if}

{l s='Total shipping' mod='blockcart'} {l s='(tax excl.)' mod='blockcart'}

</strong>

{if $shipping_cost_float == 0}

{l s='Free shipping!' mod='blockcart'}

{else}

{$shipping_cost}

{/if}

</span>

</div>

{if $show_tax && isset($tax_cost)}

<strong class="dark">{l s='Tax' mod='blockcart'}</strong>

</div>

{/if}

{l s='Total' mod='blockcart'}

{if $priceDisplay == 1}

{l s='(tax excl.)' mod='blockcart'}

{else}

{l s='(tax incl.)' mod='blockcart'}

{/if}

</strong>

{if $cart_qties > 0}

{if $priceDisplay == 1}

{convertPrice price=$cart->getOrderTotal(false)}

{else}

{convertPrice price=$cart->getOrderTotal(true)}

{/if}

</span>

</div>

<span>

<i class="icon-chevron-left left"></i>{l s='Continue shopping' mod='blockcart'}

</span>

<a class="btn btn-default button button-medium" href="{$link->getPageLink("$order_process", true)|escape:"html":"UTF-8"}" title="{l s='Proceed to checkout' mod='blockcart'}" rel="nofollow">

<span>

{l s='Proceed to checkout' mod='blockcart'}<i class="icon-chevron-right right"></i>

</span>

</a>

</div>

</div>

{/if}

{strip}

{addJsDef CUSTOMIZE_TEXTFIELD=$CUSTOMIZE_TEXTFIELD}

{addJsDef img_dir=$img_dir|addslashes}

{addJsDef ajax_allowed=$ajax_allowed|boolval}

{addJsDefL name=customizationIdMessage}{l s='Customization #' mod='blockcart' js=1}{/addJsDefL}

{addJsDefL name=removingLinkText}{l s='remove this product from my cart' mod='blockcart' js=1}{/addJsDefL}

{addJsDefL name=freeShippingTranslation}{l s='Free shipping!' mod='blockcart' js=1}{/addJsDefL}

{addJsDefL name=freeProductTranslation}{l s='Free!' mod='blockcart' js=1}{/addJsDefL}

{addJsDefL name=delete_txt}{l s='Delete' mod='blockcart' js=1}{/addJsDefL}

{/strip}

*******************************************************************

erdem_ustun · October 29, 2014

thanks for your reply.it is ok for cart block.Sameway I want to do it search block but I can not it.

Is it possible to place it in the same way for search block(picture1).

I would like to extend logo throughout the page(picture1).

How can I do it?

When I change the resolution cart block and search block changing places(picture2).

Edited October 29, 2014 by erdem_ustun (see edit history)

berkis · April 18, 2015

I have the same issuue but with different theme, and i cant figure out what to change in css. Can somebody help me a bit

Edited April 18, 2015 by berkis (see edit history)

how to put the Cart in the Nav bar ?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in