possible way to call minicart javascript from external file

[tom0360]

I was looking over the minicart code and was considering trying to call the javascript from an external file instead of having the code embeded in the html page. Because of the shopsite variables used within the minicart code, is this a possibility and if so how could I go about doing this.


Thanks,
Tom

[Jim]

Which "shopsite variables" are you conserned with? If they are template tags such as [-- SHOPPING_CART_URL --] then you can just replace those with actual value instead of the tag.

You should be able to make it an external file that is included.

[loren_d_c]

Here is a doc page with Mini Cart javascript code examples that don't use custom template tags:

http://www.shopsite.com/help/10.1/en-US/install/minicart.examples1.html

So you could easily put this code in a function in an external .js file, include this file in the head section of your pages, then just call the javascript function wherever on the page that you want the Mini Cart to display.

-Loren

[tom0360]

Jim and Loren, thank you for the replies and information.

My main concern was with the [-- SHOPPING_CART_URL --] tag and if it may contain session cookie data. There were other tags also like [-- STORE.Item --] It is possible I have extra coding in my script for the minicart now.

This is what I am currently using:

#### Mini Cart Summary Display ####

#### YOU CAN CHANGE THESE VALUES IF NEEDED ####
[-- VAR.MiniCartTextColor MORE_INFO.LinkColor --]
[-- VAR.MiniCartBackgroundColor "transparent" --]
[-- VAR.ShowCart "no" --]
[-- VAR.MiniCartColor "black" --]
[-- VAR.TextAlign "left" --]

#### DON'T CHANGE ANYTHING BELOW HERE ####

<script language="javascript">
var cookies=document.cookie; //read in all cookies
var start = cookies.indexOf("ss_cart_[-- STORE_Serial_Number --]=");
var cartvalues = "";
var linecount = 0;
var start1;
var end1;
var tmp;

// Start Output
document.write("<div style=\"color: [-- VAR.MiniCartTextColor --];");
document.write("background-color: [-- VAR.MiniCartBackgroundColor --];");
document.write("text-align: [-- VAR.TextAlign --];");
document.write("font-family: Verdana, Arial, Helvetica, sans-serif;");
document.write("font-size: 8pt;");
document.write("\">\n");

[-- IF VAR.ShowCart "yes" --]
document.write("<a href=\"[-- SHOPPING_CART_URL --]\"");
document.write("style=\"text-decoration: underline;");
document.write("color: [-- VAR.MiniCartTextColor --];");
document.write("\">");
document.write("<img src=\"[-- OUTPUT_DIRECTORY_URL --]/media/themesmedia/cart-[-- VAR.MiniCartColor --].gif\" border=\"0\" name=\"cart\" align=\"top\">");
document.write("</a> ");
[-- END_IF --]

document.write("<a href=\"[-- SHOPPING_CART_URL --]\"");
document.write("style=\"text-decoration: underline;");
document.write("color: #5A5DA5;");
document.write("\">");
document.write("View Cart");
document.write("</a>");
document.write("&nbsp;");
document.write("|");
document.write("&nbsp;");
document.write("<a href=\"[-- SHOPPING_CART_URL --]\"");
document.write("style=\"text-decoration: underline;");
document.write("color: #5A5DA5;");
document.write("\">");
document.write("<img src=\"[-- OUTPUT_DIRECTORY_URL --]/media/themesmedia/checkout.gif\" border=\"0\" name=\"checkout\" align=\"top\">");
//document.write("Check Out");//
document.write("</a>");

if (start == -1) //No cart cookie
{
document.write("</div>\n");
}
else //cart cookie is present
{
start = cookies.indexOf("=", start) +1;
var end = cookies.indexOf(";", start);

if (end == -1)
{
end = cookies.length;
}

cartvalues = unescape(cookies.substring(start,end)); //read in just the cookie data

start = 0;
while ((start = cartvalues.indexOf("|", start)) != -1)
{
start++;
end = cartvalues.indexOf("|", start);
if (end != -1)
{
linecount++;

if (linecount == 2) // Total Quantity of Items
{
tmp = cartvalues.substring(start,end);
colon = tmp.indexOf(":", 0);
document.write("<br>[-- STORE.Contains --] <b>");
document.write(tmp.substring(colon+1,end - start));
document.write("</b>");
if ((tmp.substring(colon+1,end - start)) == 1 )
{
document.write(" [-- STORE.Item --]");
}
else
{
document.write(" [-- STORE.Items --]");
}
}

if (linecount == 3) // Product Subtotal
{
tmp = cartvalues.substring(start,end);
colon = tmp.indexOf(":", 0);
document.write("<br>[-- STORE.Subtotal --]: <b>");
document.write(tmp.substring(colon+1,end - start));
document.write("</b>");
}

start = end;
}
else
break;
}
} // end while loop

//close minicart HTML
document.write("</div>\n");
</script>

Thanks for your help,
Tom

[Jim]

The url will not contain any session data, it is just the url to the shopping cart.
[-- STORE.Item --] is the text you have configured for "Item" on one of the Preferences > Store Text > screens. (not sure which one )

You might want to look at the Template tag cheat sheet or specifcation to see what all the tags mean.
http://www.shopsite.com/help/10.1/en-US ... sheet.html
http://www.shopsite.com/help/10.1/en-US ... .spec.html

Another thing you could probably do is enable the minicart on a test page and then publish the page. The copy the minicart javascript from the html created for that page and use that.

[tom0360]

Thanks Jim,

I will check it out and give it a shot setting it up today.




Tom

[tom0360]

When placing the [-- SHOPPING_CART_URL --] in the javascript should it contain everything up to storeid= and the long series of codes and numbers after it?



Thanks,
Tom

[Jim]

On the help page http://www.shopsite.com/help/10.1/en-US ... ples1.html
it gives detail instructions on what you need to change and how it should be formatted.

Step 3 shows the url with the storeid. Note that the storeid can change each time it is generated since it is an encrypted value. You could also just use the text version of the storid which you use when you login. If you do that do not include the * infront of it.

[tom0360]

So According to the shop site help page, step 3: I am to add the information after the store id. I guess what I don't understand is if this id is an encrypted value and I hard cord it in an external javascript isn't the value always going to remain what I hard coded in the javascript file?


Thanks,
Tom


The info I am referring to:

3. Put In Your Store's Shopping Cart URL

In this step, you will put the URL to your store's shopping cart into the mini cart code.

1. Switch back to the ShopSite back office window.
2. Click the Merchandising Icon, then click OrderAnywhere.
3. Select any product in the list of products -- it doesn't matter which one.
4. Click Show Selected HTML.
5. On the OrderAnywhere HTML screen, use your mouse to carefully select part of the second line of HTML (the line that says "View Cart" near the end). Click and drag your mouse to select everything between the quotation marks. It should start with "http" and end with "show" like this:

http://www.mystore.com/sc/order.cgi?sto ... ction=show
6. With that text selected (highlighted), type Ctrl+C (Command-C) to copy it to the clipboard.
7. Switch back to the text editing application that contains the mini cart code.
8. Use your mouse to select the cartURL near the top of the code, then type Ctrl+V to paste in the URL for your store. Be sure to leave the quotation marks.

var cartURL="http://www.mystore.com/sc/order.cgi?storeid=*1a484557c5eb4b795d9463eed85a11&function=show";
9. Save the file

[Jim]

The encrypted value is fine to have hard coded into the style sheet. Like I mentioned you could even use the text version instead of the encrypted one if you want. You just need to make sure that it a valid encrypted one, that you get from the Order Anywhere screen.

[tom0360]

Thanks Jim for clearing that up for me.


Tom