E-junkie Cart Script code conflicts with Bootstrap 5
« Return to Shopping Cart Buttons
The Problem:
In order to use the standard E-junkie shopping cart display that appears as an overlay within your own site's sales pages, you need to copy and paste at least one block of our Cart Script code into every page that has any number of our Cart buttons. You would obtain that Cart Script code from your E-junkie Dashboard under Manage Products > Get Purchase Buttons/Links.
However, sites which load the latest major version of Bootstrap (v.5) may have problems related to the fact that Bootstrap5 and E-junkie Cart Script both load their own built-in versions of the jQuery javascript library, which may not play nice together in some cases.
Easy Solution:
If you're not coding your own site from scratch or otherwise not very "techy", the simplest solution to this would be to simply omit the E-junkie Cart Script code from your site. In this case, any E-junkie Cart buttons on your site would still work in "fallback mode" by opening a new browser window/tab to display the cart whenever a buyer clicks a Cart button, rather than displaying the cart overlay within your own pages.
Savvier Solution:
If you're pretty knowledgeable about Web site coding and able to rearrange your site's HTML code manually, we can offer the following workaround that should allow you to use both Bootstrap5 and E-junkie Cart Script code together.
In a nutshell, this approach tells Bootstrap5 not to use jQuery, and then if you still need to use jQuery for your own purposes anyway, it separately loads jQuery (apart from Bootstrap5) and E-junkie Cart Script in a place and sequence that eliminates the conflict. This method should allow your site to use the E-junkie cart overlay along with all functionaltiy of Bootstrap5 together.
This HTML page template provides an outline of this approach that you can implement in your site:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- current CDN link for Bootstrap5 goes here -- e.g.: -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- your other HEAD code goes here -->
</head>
<!-- add data-bs-no-jquery="true" to your BODY to tell Bootstrap5 not to use jQuery: -->
<body data-bs-no-jquery="true">
<!-- your page layout/content HTML goes here -->
<!-- current CDN link for jQuery (if you need to use that) goes here -- e.g.: -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<!-- current CDN link for Bootstrap5 Bundle (if you use that) goes here -- e.g.: -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- any other jQuery library goes here -->
<!-- E-junkie Cart Script code goes at the very end of the BODY element here: -->
<script type="text/javascript">function EJEJC_lc(th) { return false; }; </script>
<script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript"></script>
</body>
</html>