How Can I Set EU Cookie Law Compliance on my 3dcart Store?

If your business is in Europe, you may be required by your local laws to display cookie consent on your store. If so, there are many javascript and jquery scripts that can be used for this purpose.

For the most part, these scripts are easy to implement and will display a disclaimer to visitors announcing that your site uses cookies for its functionality. The visitor can then click on an “accept” dialog to hide the disclaimer.

As mentioned, there are many free scripts available online that can help you implement this. 3dcart works best with javascript or jquery scripts, so a simple search on Google for the phrases “EU Cookie Directive” and “jquery” should point you in the right direction.

To help you along the way, we’ve prepared the following article which will help you install a very basic script called jquery.cookiebar which offers this basic cookie law compliance functionality.

Also note that the script described and used in this article is not developed nor managed by 3dcart. It is a free script readily available by clicking this link.

As such, we are unable to provide direct support or troubleshooting services for the script, and we assume no responsibility in its use. For documentation on using and customizing the script, please refer to the link above.

Ok, we’re done with the disclaimer. The rest of this process will be fun. Let’s get to it!

Before You Begin

Please be sure to have the following ready before you proceed.

  • An FTP client such as Filezilla or CuteFTP
  • Your store’s FTP login information
  • The jquery.cookiebar files (see file attachment at the bottom of this article)
  • A devil may care attitude about editing your store’s frame.html file (required)
  • A cavalier, “if at first you don’t succeed…” predisposition for trial and error. (optional but highly recommended)

Step 1 – Download the attached Zip File

  1. Scroll down to the bottom of this article and download the attached Zip File. (See jquery.cookiebar.zip)
  2. Unzip the file to retrieve the files from it.

You should have 2 files in the zip archive.

  • jquery.cookiebar.css
    the style sheet used for the jquery cookie disclaimer
  • jquery.cookiebar.js
    the javascript that controls the function.

To continue:

  1. Create a new folder on your computer and call it “eu_cookiebar”
  2. Place the files you unzipped earlier into this new folder.

Now that you have the files needed, our next step will be to upload it to your site via FTP. But first, you need to know which theme folder to upload it to, so let’s find that out first.

Finding your Theme

  1. Log into your 3dcart Online Store Manager
  2. Go to Settings ->Design ->Themes & Styles
  3. Make note of the theme your site is using

Armed with the theme folder information, proceed to the next step.

Step 2 – FTP to your Store

  1. Connect to your store’s FTP access.
  1. Once you’re logged in via FTP, go to web/assets/templates/[themefolder]

Be sure to replace “[themefolder]” with your theme’s folder name.

  1. Upload your eu_cookiebar folder (created earlier) to the theme folder in FTP

Alright. That was the hard part. We’re halfway there. Onto the next step!

Step 3 – Editing your frame.html file

Next, we need to reference the javascript on your site’s frame.html file.

Although this step might be a little scary, we’ll do our best to make it as painless and easy as possible.

From your 3dcart Online Store Manager:

  1. Go to Settings ->Design ->Themes & Styles
  2. Click on the “Edit HTML” button
  3. Click on the “edit” button for your frame.html as shown here.
  4. Look for the closing head tag within the HTML coding.

Hint:
The closing head tag looks like this:

</head>

Add the following code right before the closing head tag.

<!–START: EU Cookie Bar –>
<link rel=”stylesheet” type=”text/css” href=”/assets/templates/[template]/eu_cookiebar/jquery.cookiebar.css”>
<script src=”/assets/templates/[template]/eu_cookiebar/jquery.cookiebar.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery.cookieBar();
});
</script>
<!–END: EU Cookie Bar –>

Save your changes and let’s go test your store!

Now, when you first visit your store, you will see the following banner located at the top.

Clicking on the “I Understand” button will hide the banner and the disclaimer won’t appear anymore until the session cookie is reset or expires – which it is set to do after a year has passed.

Note:
If you are unable to see the banner, try clearing your browser’s cache or using an alternate browser since you likely have a session cookie already on your browser.

The settings of the actual script are pretty easy to configure as well.

Again, please refer to the scripts original documentation for specifics on what each setting does.