Demitry

hi, I need some help to solve an interesting code logic puzzle with an addon for header scrolling on the product_info.php page. This one: https://apps.oscommerce.com/eZbEr&headerscroll-for-oscv2-3-4-bs-edge This is a module for the product_info.php page where a customer can check the HeaderScroll checkbox and each time they load a product page, that page will load scrolled past the header. This spotlights the product offering with each product view and the customer has full control to enable or disable this feature for their session. ~~~~ What I have not been able to solve is how to set the HeaderScroll checkbox to be enabled (checked) by default when the customer’s session starts. The user’s checkbox input is stored in sessionStorage. I tried the most obvious… setting the checkbox $checked value to true,.. and I tried the same using jQuery on document ready, but with both of these tactics the checkbox only flashes checked for a split second and then applies the unchecked status from sessionStorage. The challenge is to possibly set sessionStorage to have the checkbox enabled, but only on the very first instance (product page visit). Otherwise it will always revert to being checked on each new product page load regardless of the customer’s preferred selection. Here is the jQuery for the sessionStorage part of this feature: // HeadScroll save checkbox state to session $(function(){ $('#scroll').each(function() { var $el = $(this); $el.prop('checked', sessionStorage[$el.prop('id')] === 'true'); }); $('#scroll').on('change', function() { var $el = $(this); sessionStorage[$el.prop('id')] = $el.is(':checked'); }); }); Any help would be greatly appreciated. PS: Please note that this is not a support thread for this addon. I’m just trying to get some assistance to improve it for the osC community.

@frankl Frank, Thanks man, but seems like I'm the only one having this issue. So, no need to waste time on it. Thank you for all your help.

my lowest version for Upgrade All Calls is 2.7 and the other one is now only 3.1 I tried that 2.7, but no improvement, ..still getting the same error. I tested the validity of the redirect URI and that came back good. I don't know, ..I think I have to put it down and perhaps try it again when I have the site in production (off the sub-domain).

@frankl could it be the API version? I updated it to the latest v3.1 what is your's set at?

@frankl I tried replicating everything you have and unchecked all permissions, but not attributes,.. and I'm still getting the same error. The https may be the cause of it. or it may be that this is on a subdomain. I tried it with https setting, but my subdomain is not https. And it did not work in changing that callback URI to https. So, I don't know,.. maybe it's just not meant to be.

@frankl Thanks Frank, I hid my prior comment before seeing your reply. I appreciate the help. I cannot seem to get past the this error - see screenshot below. The thing is that I followed the instructions in the PDF but they did not work for me. So I Googled how to do this and found this set of instructions: https://auth0.com/docs/connections/social/facebook I had to register with https://auth0.com The http://your_site/your_folder/login_with_facebook.php for the callback URI does not work. So, according to autho.com instructions I tried their version of http://[MY AUTH0 USER NAME].auth0.com/login/callback and that does not work either. Has anyone run into this issue before and found a solution? No matter what I do, I get the same error when testing the login authentication.

@Tsimi hi Lambros, Thanks for that. I figured Andrea was referring to the top navigation bar, but forgot that the BS code affects both since I don't use that bar.

I just installed this addon and had the same issue with the font awesome icons not displaying. However, my challenge is slightly different, in that I upgraded my Font Awesome version to the latest version (v5.2.0). This requires slightly different code for some icons and other changes in CSS if that is what you choose to use to display those icons. The new font awesome changes in CSS did not work for me so, I changed the button link function to that of osC and adjusted some of the CSS button code. Even with these changes not all font awesome icon classes worked. As an example, here is what my Facebook sub-module file looks like. /includes/modules/social_login_modules/templates/facebook.php <style> .loginBtn-facebook { background-color:#4267b2; background-image:linear-gradient(#4267b2, #3B55A0); text-shadow:0 -1px 0 #354C8C; } .loginBtn-facebook:hover, .loginBtn-facebook:focus { background-color:#5B7BD5; background-image:linear-gradient(#5B7BD5, #4864B1); color:#fff; } </style> <div class="buttonSet buttonDiv"><?php echo tep_draw_button(MODULE_SOCIAL_LOGINS_FACEBOOK_PUBLIC_TEXT, 'fab fa-facebook-square fa-lg', tep_href_link('login_with_facebook.php'), 'primary', null, 'btn-lg loginBtn loginBtn-facebook'); ?></div> If you have v4.7.0 of Font Awesome, you would just change the font awesome class in that link code and I think you only have to remove the "b" (stands for brand) from "fab" so it would be fa fa-facebook-square fa-lg. The fa-lg is the sizing of the icon. A bit further in the link code is btn-lg, this is the Bootstrap code for the button size. There is also btn-md for medium and btn-sm for small, which is the default and does not need to be added. And it would be good for anyone using this addon to read the following article on the pros and cons of using social logins. One of the things I got out of this article is that you want to limit your social login options to 3 or 4. Having too many is not good. https://www.humix.be/blog/10-advantages-disadvantages-social-logins/ As for selecting which social logins to use, here is an article on it with a list of top social media sites. Surprisingly, Google+, Twitter, and LinkedIn are not in the top 5. https://www.dreamgrow.com/top-15-most-popular-social-networking-sites/

@puggybelle Andrea, Are you referring to the navigation bar at the very top of the page, because I don't use that on my site. I do use several of the sub-module buttons from it though. Could you pm me a screenshot of what you are referring to?

@puggybelle Andrea, The font color is in the bootstrap.css file, but you should be fine if you add the following to your user.css file. /* changes the menu font color and background */ .navbar-default .navbar-nav > li > a { color: #fff; } .navbar-default .navbar-nav > li > a:hover { color: red; background-color: #eee; } .navbar-default .navbar-nav > li > a:focus { color: #fff; background-color: #0066cc; } Please note that these are colors I use and you would need to change them to those of your own. My menu links are set to white on a blue background and will change to red with a light gray background on hover. See screenshot below. I don't recommend changing these settings in the bootstrap.css file because you will need to regenerate the minified version of that file, as well as add those same changes to the two .map files. Adding this to the user.css file should be sufficient. And always remember to hard refresh (SHIFT CTRL R) the browser to view the new changes.

@puggybelle hi Andrea, I'm not sure if this will work for your store, but this is what I used. Add this to your user.css file and after you upload it to the server, be sure to do a hard refresh (SHIFT CTRL R) of your browser. You have to do that every time you make any CSS change. /* this will center the menu links */ .navbar-nav { width:100%; text-align:center; } .navbar-nav > li { float:none; display:inline-block; } The font color and button colors are in the bootstrap.css file, I think. I'll look for it and get back to you.

@cDGo IT Consultancy Thank you Domé, that does look interesting. I will add it and see how it works. Thank you for sharing that.

@cDGo IT Consultancy hi Domé, could you share what you did to make that change? Thanks.

@radhavallabh Kavita, Just a note on nested directories and SEO. Search engine bots generally do not crawl 4th tier links. So, a good rule to adhere to when building your site structure, is to keep your most relevant pages at 3 tiers or less. So, the following structure would be as deep as you want to go with your most relevant pages. Category (tier 1) Sub-category (tier 2) Sub-subcategory (tier 3) Product pages If you have multiple nested directories, this is bad for SEO and relatedly, it becomes more confusing and overwhelming for the customer. Remember, each link the customer has to click is a conscious decision. The more decisions a customer has to make, the more complex the journey becomes to buying one of your products. And ideally it is best practice to keep categories, sub-categories, and sub-subcategories to 5 – 7 each (though you can have unlimited products in each category). This makes it easier for a customer to skim these categories. When you have too many categories, it’s human nature to skip over most if not all of them. If you have a lot of products, then you should focus on improving your site’s search feature. About a third of your visitors will go straight for the search bar, and even more if you have a ton of products to choose from.

ok, my fault.. I thought it was not just category images, but an image for each product. Sorry about that. I use both, the horizontal menu and the thumbnailer, ..I just do not opt for displaying images in the menu for similar reason that Kavita mentioned.