• Priority: 0
  • Status: Closed
  • Theme: Venedor
  • Assigned To: Fred
  • Private: No
  • Open Date: 19.03.20, 21:40
  • Opened by: Patrick Snoeck
  • Closed by: Fred
  • Closed on: 04.04.20, 11:15
  • Reason: Closed
  • Comment: Glad to help!

Ticket #17070 - Cart in sticky header as SVG symbol

Hi,

Is it posible to get the cart in the sticky menu as a SVG icon (like the search icon) on the right of the search box icon?

Thanks

Kind Regards,

Patrick

Comments

Fred 20 Mar 2020, 11:40

Try to move Shopping Cart module into the “displayTop” hook

Patrick Snoeck 20 Mar 2020, 16:38

That worked! Thanks. How/where do I change it to a SVG cart the same as the searchbox? So a square with in it a cart?

Fred 21 Mar 2020, 12:09

to hide the text and leave the icon only use the following code
.cart-title {display:none}

Patrick Snoeck 21 Mar 2020, 12:18

That worked. Where/how can I Change the logo to “si-cart” SVG in the same size as the search logo?

Fred 23 Mar 2020, 13:40

Here is it https://take.ms/SZsXr and here is a tutorial https://venedor3.promokit.eu/promokit/documentation/#svg

Patrick Snoeck 23 Mar 2020, 21:41

Sorry, my mistake….

I mean where can I change the green cart to the “si-cart” of the SVG section. If possible I want a square around it like in the attachment.
So the cart is in the same color/style as the Search block.

Could you help me with that?

Thanks.

Attachments:

OldNewCart.pdf (31.7 KiB)
Fred 24 Mar 2020, 12:07

you can do that in the file /themes/venedor/modules/ps_shoppingcart/ps_shoppingcart.tpl
and a square around it you can make with a CSS

Patrick Snoeck 24 Mar 2020, 12:28

Could you make it for me? I don’t no how to do CSS…

And when this is done and the client put something in the cart do I see a number of the products that are in the cart? Because we have hide the text? I would like only to see a number like in the attachment. (if possible in green).

Please let me know what would be the costs.

Attachments:

Document1.pdf (13.8 KiB)
Fred 25 Mar 2020, 14:33

We have a lot of customer’s tickets and really don’t have time for customisations.
try following CSS:

.blockcart a {border: 2px solid #333;padding: 4px;}
Patrick Snoeck 25 Mar 2020, 19:40

In the /themes/venedor/modules/ps_shoppingcart/ps_shoppingcart.tpl
This is the code: 

<div id="desktop_cart" class="h-100">
   <div class="blockcart cart-preview h-100 {if $cart.products_count > 0}active{else}inactive{/if}" data-refresh-url="{$refresh_url}">
     <div class="header dd_el relative h-100">
       <a rel="nofollow" href="{$cart_url}" class="h-100 relative cart-icon flex-container align-items-center">
         <svg class="svgic maincolor"><use xlink:href="#si-cart"></use></svg>
         <span class="cart-title">{$cart.summary_string} - {$cart.totals.total.value}</span>
       </a>

I see already #si-cart is in the code only not showing on the website as the SVG icon as in file themeforest-GDLSe7Tz-venedor-responsive-prestashop-theme/documentation/1.7/index.html#!/svg

Also the code 

.blockcart a {border: 2px solid #333;padding: 4px;}

Doesn’t show anything on the website.

Could you help out?

Fred 28 Mar 2020, 12:23

1. just replace #si-cart icons with another icon what available in the theme http://venedor3.promokit.eu/promokit/documentation/#svg 2. make sure you have disabled all possible cache in your website

Patrick Snoeck 28 Mar 2020, 17:06

Dear Fred,

I changed it to a si-instagram , that worked out ok, only the color is green, so maybe when I change te color to black I see the si-cart as in the documentation?
Where can I change the cart to black? And where do I have to put “.blockcart a {border: 2px solid #333;padding: 4px;}”

Thanks.

Fred 29 Mar 2020, 12:54

You need to use Developer Tools of your browser to easily change the such small things. Check out this video https://www.youtube.com/watch?v=wcFnnxfA70g

Patrick Snoeck 29 Mar 2020, 17:51

That part I know, but I don’t know how to find where I can change the color, and where to put the code for the block around the cart.

I guess the green cart is with full color because of the code #shadow-root (closed), but don’t know where to change it.

Attachments:

Cart.docx (716.2 KiB)
Fred 31 Mar 2020, 12:20

Here is it https://take.ms/3IxUB

Patrick Snoeck 03 Apr 2020, 22:22

Found it. Thanks.