login template module location

Support desk for Multipurpose Quark Theme
GK User
Sat Mar 19, 2016 8:53 pm
12/3 quark ecommerce quickinstall
www.ahgoobaby.com

Is there a way to provide users with a login / logout link in the usual top right corner of the site (just above the shopping cart or near it) so that customers who have existing accounts can login/logout? Right now I have only figured out a way to display login in the menu footer (see site). Any help or recommendation would be appreciated.
User avatar
Expert Boarder

teitbite
Wed Mar 23, 2016 1:09 pm
Hi

No, I'm afraid this is not provided since template is using VM and the login can be used during purchase in a convenient way.
User avatar
Moderator

GK User
Wed Mar 23, 2016 4:04 pm
I am not following your point about virtuemart having convenient login. We have shopper groups with different pricing based on shopper group - standard virtuemart feature. If you have to wait to checkout to log in, then you are shopping essentially as a guest which provides default pricing - not shopper group pricing which requires the customer first to log in. Waiting for checkout to have the only login option is not convenient - it is confusing as customer will not want to even shop when they cannot find a place to see the products in their prices loaded within their account. For guests and for generic shoppers who do not have special shopper group pricing, I agree no need for log in feature, but for all other shopper groups, the feature is mandatory and for that reason having an option to log in prior to checkout is mandatory. This template is billed by gavick as an ecommerce-friendly template, yet there is no place to log in outside of virtuemart checkout? I can place it now in either the main menu or the footer menu, but this is not the typical option for a store login. I see in the template module there is a "login" position - in fact it came standard with the template quickinstall, yet I cannot figure out how to have it show in the login location.

Simple "login" text to the left of the module position where the cart icon is on the top left of the screen is the obvious location where it should exist. Can you all help me figure out how to get the login module existing in the quickinstall demo to work in the login template position?
User avatar
Expert Boarder

teitbite
Sun Mar 27, 2016 6:03 pm
Hi

In that case a closed to what You need would be to:

1. Publish Login module in module position "login", make it show on every page.

2. Create a menu item "Login" and in the Menu Params (GavickPro) section (if You cannot see such section please install and publish Menu Params plugin which can be found in rest_files package in template download section), a class "gk-login-popup":
User avatar
Moderator

GK User
Mon Mar 28, 2016 4:23 pm
yes, but where is the module position "login" publishing to in the template? I can only see / get to the login from a menu item. For the reasons discussed above, it either is lost putting it in the footer menu location or poor use of space putting it as one of the few main menu items in the main menu. The ideal location would be to put it just to the left of the shopping cart icon. That icon is published everywhere also, so there must be a template position for it. Can I not simply publish the login to a small text link in this location?

Separately, is "gk-login-popup" supposed to be a modal / popup box overlay? See where it currently is on my site - selecting it brings up a page (which is fine, but wanted to make sure it is appearing as it should).
User avatar
Expert Boarder

teitbite
Sat Apr 02, 2016 10:44 am
Hi

There is no such module position in this template, but if You will do as I said in my last post, than move the Login menu item at the very end of the menu so it will appear close to cart button. When You will have it there You can even turn this menu item into an icon, so there will be no difference as there would be a module position for that.
User avatar
Moderator

GK User
Tue Apr 05, 2016 9:56 pm
I didn't realize I could have text icons for every other menu item and then use an icon instead of text for only one of them. How do i turn a menu item into an icon? And if I make the icon small, is there a way to reduce the amount of horizontal space it takes up to the left and right of the jpg/icon?
User avatar
Expert Boarder

GK User
Thu Apr 14, 2016 6:52 pm
Ok - I have this working relatively well now. Is there a way to set the icon so that upon mouseover it is a different icon? For example, dark grey icon jpg, but on mouseover, it turns to light grey icon jpg? This would allow the customer more of a call to action feeling I think.
User avatar
Expert Boarder

teitbite
Wed Apr 20, 2016 8:25 am
Hi

It's very hard to make it change to a different icon from a state You have it now since it's a regular image, so lets get rid of the image and use it as a backgorund :) Try with this code in css:

Code: Select all
a.gk-login-popup {
    background: url('http://www.ahgoobaby.com/images/AGB/General/signingreen4.png') no-repeat 0 0 transparent;
    width: 55px;
    height: 35px;
    display: inline-block;
}

a.gk-login-popup:hover {
    background-image: url('http://www.ahgoobaby.com/images/AGB/General/signingreen4hover.png');
}

a.gk-login-popup img {
    display: none;
}
User avatar
Moderator

GK User
Thu Apr 21, 2016 9:56 pm
This worked well, but the only problem is that after logging in, the log in module automatically changes from icon to text "MY ACCOUNT". Since adding your CSS, the background image remains at the dimensions of the icon while at the same time "MY ACCOUNT" appears which not only overlap but MY ACCOUNT now word wraps to the dimensions of the icon. Once logged in, I'm ok with the icon disappearing and having MY ACCOUNT appear OR having MY ACCOUNT no longer appear but I would need the CSS to add a third icon image which I could create for MY ACCOUNT.

I removed your CSS for the time being as the overlapping looks very awkward while the site is live. Looking forward to your reply as we are SO close!
User avatar
Expert Boarder

teitbite
Mon Apr 25, 2016 1:44 pm
Hi

Try my code with one extra line:

Code: Select all
a.gk-login-popup {
    background: url('http://www.ahgoobaby.com/images/AGB/General/signingreen4.png') no-repeat 0 0 transparent;
    width: 55px;
    height: 35px;
    display: inline-block;
    text-indent: -999em;
}

a.gk-login-popup:hover {
    background-image: url('http://www.ahgoobaby.com/images/AGB/General/signingreen4hover.png');
}

a.gk-login-popup img {
    display: none;
}
User avatar
Moderator

GK User
Sat May 07, 2016 9:34 pm
I just tried this and it appears to remove the signin icon from the mobile menu when in mobile mode keeping only the MY ACCOUNT in its place. This per above is acceptable. But unfortunately in desktop mode, the original signin icon still appears and the MY ACCOUNT icon is still there. Is there a way to get what works in mobile to work in desktop also? In the alternative, I can create a third icon to take this icon's place for MY ACCOUNT if that is easier.
User avatar
Expert Boarder

teitbite
Mon May 09, 2016 11:59 am
Hi

Problem is that there is no My Account button for mobile at all. The only accessible is in the menu after clicking menu icon. But most importantly there is no "My Account" words even in the menu. Have You removed that?
User avatar
Moderator


cron