ShopSite Forums

Hello,

I have some simple custom templates in place that are working just fine on the pages, products and shopping cart page. But as soon as I click checkout and it takes me to the billing screen, my template is no longer applied. If I view source of the page I can see that my code is in there...my css files, my header and footer....but none of the css is being applied. Am I missing something?

Thanks!

Assuming that your checkout page is a https:// secure page, an references to external files like .css, .js, images, and flash files must also be secure or by default the browser will not load them.

-Loren

Ok that makes sense. So when I reference my stylesheets in the shopping cart template I currently have it like this:

<link rel="stylesheet" type="text/css" href="[-- OUTPUT_DIRECTORY_URL --]/publish/bootstrap.min.css">

Is there a built-in parameter that I can replace the OUTPUT_DIRECTORY_URL with that will be the secure version?

Try this:

Code: Select all

<link rel="stylesheet" type="text/css" href="[-- IF SC_USE_SECURITY --][-- STORE.SC_Secure_Image_URL --][-- ELSE --][-- OUTPUT_DIRECTORY_URL --][-- END_IF --]/publish/bootstrap.min.css">

-Loren

Ok so in trying this out I am seeing that the billing screen isn't actually using the template I thought it was. I thought the billing screen would use the cart template that is set in the back office under Commerce -> Ordering System -> Layout Info.

If this is not the case, which back office screen do I set the template for the billing screen?

Thanks!

Well it does look like the template is being applied as I see my header and footer html....but when I make a change to the template and publish the site....the billing screen seems unaffected....

Ok I got it....I just didn't update the css in the entire template. Thanks!

So I have a slightly different problem now. I am referencing a TTF file in my css to use a particular font. The font is located in a directory on the website outside of shopsite. My reference works on the main shopping cart page but once it gets to the secure page it doesn't seem to pull in the font file. How can I reference the URL of the TTF font file in the secure cart page template so that it will work?

Thanks!

Make sure you are using a valid secure URL when you are referencing the file from any secure screens. If the URL us not valid, or if it is not secure, then the browser will not load it from a secure page.

-Loren

The css file is working with the secure URL because all of the other styles work. The only piece that is not working is the font face. The reference to the font url though is not secure because it is part of the wordpress site which is outside of shopsite.

The main css file has this in it:

@font-face {
font-family: 'hand_of_seanregular';
src: url('http://www.thisisthesite.org/site3/wp-content/themes/folder/handsean-webfont.eot');
src: url('http://www.thisisthesite.org/site3/wp-content/themes/folder/handsean-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.thisisthesite.org/site3/wp-content/themes/folder/handsean-webfont.woff') format('woff'),
url('http://www.thisisthesite.org/site3/wp-content/themes/folder/handsean-webfont.ttf') format('truetype'),
url('http://www.thisisthesite.org/site3/wp-content/themes/folder/handsean-webfont.svg#hand_of_seanregular') format('svg');
font-weight: normal;
font-style: normal;
}

There are other references within the same css file that have URLs to images in other folders outside of shopsite just like the font above and those work fine. It is just the font that is not taking hold once it gets to a secure page, specifically the billing screen.

I don't know why those other references work, I just know that browsers typically won't load non-secure objects (images, .css files, .js files, flash objects, etc) on a secure page. And just because the files are not under a ShopSite-controlled directory doesn't mean it doesn't have a secure URL. If you have a secure certificate on that domain, or if your host provides a shared SSL URL for your sites, then it should have some kind of secure URL available to load from.

-Loren