Display SSL Certificate in Header

[LaughingHorse]

I have purchased a Comodo certificate, and I would like to put the code for it in the header right next to the box showing the cart

How do I do that?

Thank You!

 

[bsmither]

Are you using Foundation? When you say, "the box showing the cart," there is no "box" until you click on the basket icon, and then the "box" is a popup.

If any other skin (and even for Foundation), there is this third-party mod.

But, in the template main.php:

Find:
    {include file='templates/box.currency.php'}
    {include file='templates/box.language.php'}
    {include file='templates/box.session.php'}

Add above it:
<div class="right text-center">Test</div>

Replace "Test" with whatever you want.

 

[LaughingHorse]

Thank you for your reply!

I am using Foundation.

On line 64 I found

 <div class="right text-center show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"><i class="fa fa-bars fa-2x"></i></a> <a class="button white tiny show-small-search" href="#"><i class="fa fa-search fa-2x"></i></a></div>

So I would put the code

<div class="right text-center">Test</div>

right below that

and above the current line 65

{include file='templates/box.currency.php'}

Is my understanding correct?

[bsmither]

Correct. After you get what you want to display working, we can add more code to display it in a different style when viewing the store on a mobile device.

[LaughingHorse]

Thank You!

I'd like to get it closer to the Login/Register text and Cart icon instead of where it is now.

 

[bsmither]

Can we have your web address?

[LaughingHorse]

https://realdefender.com/cube

 

[bsmither]

Add this new line:
<div class="right text-center">Test</div>

Keeping the <div> and </div> tags, replace just the word Test with whatever you want.

I see just <a style=x>...</a>. Please fit this SSL Seal within the <div class="right text-center"> and </div> tags.

[LaughingHorse]

Thank you! 

My Mistake.

If I wanted it above the featured product instead. Would I add the line

<div class="right text-center">Test</div>

Above this starting at line 96?

 <div class="large-3 columns show-for-large-up">
                  {include file='templates/box.featured.php'}
                  {include file='templates/box.popular.php'}
                  {include file='templates/box.sale_items.php'}
               </div>

It looks really ugly where it is right now in the header.

Thank You!

[Dirty Butter]

I've struggled to get the look I wanted for my SSL pics as well. I ended up putting them up in the left hand corner - https://dirtybutter.com/plushcatalog

At one time I had created a logo with less width and created a column there for the pics.

[bsmither]

<div class="large-3 columns show-for-large-up">
{* NEW *}
  {include file='templates/box.badge.php'}
{* END *}
  {include file='templates/box.featured.php'}
  {include file='templates/box.popular.php'}
  {include file='templates/box.sale_items.php'}
</div>


In the file box.badge.php:
<div class="panel" id="box-badge">
   <h3>Shop Securely</h3>
   {* All the SSL Badge stuff starts here. *}

   {* All the SSL Badge stuff ends here. *}
</div>

Putting the badge in a side panel makes it all a bit easier.

[LaughingHorse]

Thank You!

So I would create a template box.badge.php and then call it from template main.php

is that correct?

It's all starting to make sense to me

 

Dirty Butter - Yeah, it's really difficult to get the look right.

[LaughingHorse]

Got it.

When I tried it at first the box was not big enough. Error in my coding.

Then I changed the <h3> to <p><strong></strong></p>

With the SSL badge below the code below

<div class="panel" id="box-badge">
<div align="center">
        <p><strong>Shop Safely</strong></p>
   {* All the SSL Badge stuff starts here. *}
       Badge code
   {* All the SSL Badge stuff ends here. *}
</div>
</div>

Looks Great!

Thanks a million!

One other question.

If I wanted to grab the cart icon and showing what is in the cart, and put that into the WordPress part or my site.

Would I just make an include for [cart]/[skins]/[foundation]/templates/box.basket.php

in the header in WP?

 

I did put stuff in the basket, then go to the WP part of my site, then back to the CC part and the stuff remained in the basket, so i guess the sessions are staying as long as I'm in the domain.

[bsmither]

That will probably not work. I say that because adding an item to the cart is an ajax request: ?_g=ajaxadd, with POSTed values of quantity=1 and add=1 (the product_id).

The response is the rendered and populated template file box.basket.php -- HTML code -- rendered by Smarty and populated by CubeCart. So, no. Including the template into WP will get you the raw template.

I am trying to determine what response I would get if I POSTed a product_id of '0' or a quantity of '0'. Would CubeCart still return the HTML? If so, it will be up to you to make WP issue the proper POST request and scrape the result for the data you want.

On the other hand, a code snippet could be built to augment Cubecart's AJAX listener and return exactly what you want.

 

[Dirty Butter]

What will you do about mobile? I tried your site on my Kindle and you've lost your ssl icons.

[LaughingHorse]

@ Dirty Butter - Thank you. It looks like that will be an issue.

When you scrolled down, did the certificate appear?

I just tested it with google's mobile friendly tester

https://www.google.com/webmasters/tools/mobile-friendly/

that only shows and tells you if your URL is mobile friendly.

So the certificate did not appear, and neither did the right hand column in the body (which is where the certificate is)

@ bsmither any ideas on a fix?

[Dirty Butter]

Bsmither had suggested in regard to something else that I use the Responsive Design View of the Web Developer Firebug Addon for FireFox. You can test your store on a variety of mobile device sizes.

[bsmither]

View your site on a mobile device. If that is impractical, then adjust the width your browser's window to be somewhat narrow. The store's display should reconfigure by hiding the right column ("medium"). Continue adjusting your browser's window to be very narrow. The store's display will reconfigure again to have a layout appropriate for a mobile device ("small").

Firefox's Responsive Design Views gives pre-set width/height values for common mobile devices, and limits the "viewport" to those dimensions, while keeping the browser window at a comfortable width so that all your browser toolbars are completely accessible.

So, when viewing the Foundation skin at "medium" setting (when the right column disappears), look over the what you see and decide where you want the SSL badge to be shown. Do the same for the "small" setting.

[LaughingHorse]

Interesting situation.

For some reason, the mobile devices do not like the new box.

I thought it might be that the code for the SSL has a link to ab image at the Comodo site.

So I tested and put the SSL badge in the main part of the site. Right under the site name, and the badge shows up in mobile.

I did find a good site with a lot of alternative devices to test sites to see if they are mobile friendly.

http://mobiletest.me

Why do you think the mobile devices do not like the new I added in?

I left the new box with the SSL badge, and the SSL badge in the main part of the home page up.

I added the code in the Filemanager | documents | [main page] area right above the bxSlider

https://realdefender.com/cube

Additionally, in using the mobile browser test site above, and from a google link to see what a site would look like  on a mobile device, the entire left hand column disappears.

 

Edited June 6, 2015 by LaughingHorse
More Info

[bsmither]

I mentioned all that in the reply just above your latest.

It's not because the devices "do not like" the badge code -- it is because Foundation is a responsive skin and its layout structure changes to make the viewing experience as best as possible, based on the width of the viewport.

In a viewport that is 1280 pixels wide, Foundation is "large" and will show the right column. In a viewport that is 800 pixels wide, Foundation is "medium" and will not show the right column, and will collapse the top menu bar to a single "Shop by Category". In a viewport that is 600 pixels wide, Foundation is "small", will not show the right column, will collapse the top menu bar to a single "Shop by Category", collapse the login, search, and basket to simple icons, and change a few other things.

So, when viewing the Foundation skin at "medium" setting (when the right column disappears), look over the what you see and decide where you want the SSL badge to be shown. Do the same for the "small" setting.

I recommend not having it in the HomePage document as that only shows on the homepage.

[LaughingHorse]

Then I guess it is back to the header. Maybe to the right of the search box?

 

*!*!*!*!*!*! UPDATE *!*!*!*!*!*!*!

I Added

<div class="right text-center">[SSL Badge Code]</div>

 <div class="right text-center show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"><i class="fa fa-bars fa-2x"></i></a> <a class="button white tiny show-small-search" href="#"><i class="fa fa-search fa-2x"></i></a></div>
        <div class="right text-center">[SSL Badge Code]</div>
                         
                           {include file='templates/box.currency.php'}
                        {include file='templates/box.language.php'}
                        {include file='templates/box.session.php'}

 

Now the badge shows between Login/Register and the Cart icon.

Is there a way to hide this badge in the header except when in mobile?

Edited June 6, 2015 by LaughingHorse
Update