Mini Basket


https://forum.kartris.com/Topic2096.aspx
Print Topic | Close Window

By Robin - Thu 23 May 2013
Hi

I am new to Kartris and I am trying to set up a shopping mini basket view similar to the example store kannwin.com whereby the basket show a "view basket" and "make enquiry" options that shows all the time. The installed mini basket version only has a hover that then shows the view basket in a pop up window. I have googled and found something on

frontend.mini.compactversion in the config section, but this seems to be redundant.

I have checked the source code in the browser and there seems to be a javascript code within the mini basket which I cannot find in the installed version.

I am fairly new to asp.net and it is probably a simple solution once you know how.

Any advise would be greatly appreciated.

I have installed versions 2.0, 1.4 & 1.3 and cannot find a way to display the mini basket.

Thanks

Robin

 
By Paul - Fri 24 May 2013
Hi Robin,

You're in luck, this is actually fairly simply to do. The hover effect is purely CSS; the basket is actually there all the time, but only shows when the pointer hovers over it.

If you go to your skin folder and find the template.css file, you can find the minibasket CSS near the bottom.

If you find these two lines:

#minibasket #minibasket_main            { visibility: hidden; z-index: 111; height: 0px; width: 200px; text-align: left; margin-top: -13px; position: absolute; letter-spacing: 0; }

#minibasket:hover #minibasket_main { visibility: visible; height: auto; position: absolute; background-color: #777; border: solid 1px #666; padding: 40px 8px 8px 8px; margin-left: 12px; z-index: 500; }


You can see that the first one sets the visibility of main area of the basket to hidden. The second line handles the hover on the minibasket, setting the main area visible.

If you remove the visibility: hidden; from the first style, then remove the second style, you should have the basket visible all the time.

You'll then find another issue in that it is absolutely positioned, so it kind of covers other content rather than flows in it. If you search those minibasket styles for this,

position: absolute;


and change to

position: relative;


This should address this.

You'll probably need to play around with some other styles, and may decide to move the minibasket control in the Template.master to another place, add a side column, etc.

We're working on more v2 skins, but in the mean time I have added some v1.4 ones to the download page. These should be largely v2 compatible. The black and orange one and classic ones have multiple column format, so you might find those useful in seeing how the CSS and Template.master is for such a layout.
By Robin - Fri 24 May 2013
Hi Paul

Many thanks for your quick response, it worked great, will play around with the multi column skins that you added to the download section.

Regards

Robin