Step-by-step guide on Setting up the bronto.sca.cart object using Bronto JSON

I have implemented the Bronto Tag Manager to track cart details successfully.

After including the Bronto Commerce JavaScript snippet on my page, I am now able to create the bronto.sca object.

While bronto.sca.config() and bronto.sca.id are returning values as expected, unfortunately, bronto.sca.cart always returns null.

Below is the code snippet that I am currently using:

<script type="text/javascript">
 $("#Run").click(function()
   {
       alert('Run clicked');
       debugger();
       bronto.init;

      var brontoCart = {
          "cartPhase": "ORDER_REVIEW",
          "currency": "USD",
          "subtotal": 990.00,
          "discountAmount": 0,
          "taxAmount": 110.00,
          "grandTotal": 880.00,
           "orderId": "1331",
           "emailAddress": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eea881819a8b9cae9f998bc09881">[email protected]</a>",
           "cartUrl": "http://localhost:5000/cart#view",
          "lineItems": new Array()
        };
       bronto.sca.addToCart(brontoCart);
     });

</script>

<script data-name="__br_tm" type="text/javascript">
var _bsw = _bsw || [];
_bsw.push(['_bswId', 'xxxxxxxxxxxxxx']);
(function() {
var bsw = document.createElement('script'); 
bsw.type ='text/javascript';    
bsw.async = true;
bsw.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'js.bronto.com/c/********************/xxxxxxxxxxxxxxxxxxxxxxxxxxxxx/s/b.min.js';
var t = document.getElementsByTagName('script')[0]; 
t.parentNode.insertBefore(bsw, t);
})();

I also need guidance on how to incorporate the Bronto JSON into a webpage effectively.

Answer №1

I am in search of information regarding the proper way to create the Bronto JSON object. The closest reference I found is at this link.

Although I have not configured it in Bronto, I have set up a JSON object that is automatically tracked. My implementation may differ slightly as I believe there is no manual action required to register a cart once you have defined the necessary variable settings within Bronto. This can be done via this interface.

Please note: If you have integrated the Bronto JSON on your site, the Order Capture JavaScript is not necessary. To track conversions and orders, you need to construct a JavaScript object with relevant data from your site and send it to Bronto using the bronto.orders.send function within a listener for the "bronto.commerce.ready" event. An example is provided below.

<script type="text/javascript">
  document.addEventListener("bronto.commerce.ready", function() {
    bronto.orders.send({
  "customerOrderId": 12345,
  "emailAddress": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0cec1cdc5e0c5d8c1cdd0ccc58ec3cfcd">[email protected]</a>",

It seems like the issue in your case lies in how you are sending the cart (highlighted above).

Overall, I believe the JSON object is defined under the "shadowDiv1" entry in your cart view according to the initial help documentation linked above.

shadowDiv1 Enter the name of the JavaScript object to render hidden on the current page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting JSON data into a personalized format

My data file is in json format with the following content: [ { "name": "enable_replica", "value": "on"}}", { "name": "enable_production", "value": "on" }, { &q ...

Using jQuery for communication between a parent and a popup tab

There have been numerous discussions on the topic of communication between a popup and its parent using window.opener.$('#myDiv'). However, once a popup is launched, how can the parent target and manipulate a specific div within the popup? ...

Exploring the optimal approach for distinguishing between numbers and strings in a JavaScript/Typescript class

I recently encountered a situation with my Typescript/React solution where I defined a property as a number and set the input type to "number", but when the state value was placed in an input field, it would change to a string unless properly handled. In ...

How can I move a TableItem from one material UI component to another using drag-and-drop?

I am facing an issue where I need to drag a ListItem from one List component to another. I am uncertain about how to accomplish this in Material UI. ...

Converting complex JSON into a Pandas data frame

The JSON data I am dealing with is structured as follows: { "4.0": { "A1": { "dR-14": 1.181, "ev": 1.102, "move11": 1.259, "move6": 1.259, "sILo": 1.2 ...

Processing a JSON array of objects in AngularJS

When using Angular's fromJson function to parse a JSON string, I encountered an issue. If the JSON is a simple array like "[1, 2]", the code works fine. However, I need to work with an array of dictionaries instead. var str = "[{'title' ...

Filling the alert dialog with a JSON-based list view

Having trouble populating an alert dialog with a JSON response, but encountering the following error: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.ListView.setAdapter(android.widget.ListAdapter)' on a nu ...

Circular dependency situation encountered in Angular 2 shared module

I'm currently working on a share module setup that is structured as follows: @NgModule({ exports: [ CommonModule, HttpModule, OneModule, TwoModule ] }) export class SharedModule { } The OneModule imports the SharedModule in order ...

Tips for getting the setInterval function to work with a progress bar even when a tab is not in focus

After browsing through similar questions, I couldn't find the answer I was looking for. As a newbie in programming experimenting with JavaScript Progress Bar, I encountered an issue where the progress bar would pause and the counter wouldn't coun ...

What is the best way to keep tab content fixed when switching?

I've successfully implemented tab switching, but I need to make the content fixed. How can I achieve this so that no matter the length of the content, it remains fixed in its position when switching tabs? The current issue is that when the content is ...

Styling elements conditionally with AngularJS-controlled CSS

Looking for some guidance in Angular as a newcomer. I am attempting to adjust a style when clicked. On my page, I have multiple content spaces created using the same template. Upon clicking a "more" link, I desire to expand that specific section. I have ac ...

The issue of an undefined Node.js variable post "await"

While I know similar questions have been asked before, I assure you that I've gone through them; however, I'm still facing a challenge. I have a simple code snippet to retrieve a token for a 3rd-party API service: let tok = ''; const g ...

Encountering a NextJS error with head component

Trying to incorporate the head element into a NextJS page format has proven challenging. Despite consulting the official documentation, implementing next/head to add <head> has resulted in an error within the code block. Code: import Head from &apos ...

Issue with Vue plugin syntax causing component not to load

I'm facing an issue with a Vue plugin that I have. The code for the plugin is as follows: import _Vue from "vue"; import particles from "./Particles.vue"; const VueParticles = (Vue: typeof _Vue, options: unknown) => { _Vue. ...

Three.js: Modifying values within dat.GUI is not allowed

I have added a "comboBox" to my dat.GUI instance in order to select possible values. However, when I run my application, the dat.GUI appears with the comboBox but it seems to be frozen - I cannot change its default value. Below is the code snippet that dem ...

Executing NestJS code after applying a pipe but before reaching the method handler

Is it possible to insert additional code after all the pipes have transformed but before the method handler is called? https://i.sstatic.net/IjQvv.png ...

How to maximize efficiency by utilizing a single function to handle multiple properties in Angular

I have 2 distinct variables: $scope.totalPendingDisplayed = 15; $scope.totalResolvedDisplayed = 15; Each of these variables is connected to different elements using ng-repeat (used for limitTo) When the "Load More" button is clicked (ng-click="loadMore( ...

Highchart won't load data from a PHP JSON request

Having trouble populating my Highchart with JSON data. The data shows up correctly on the webpage, but when using Highcharts, nothing happens. Once I remove the PHP and input static numbers, the chart generates successfully. In summary, Highcharts does n ...

"Encountering an access denial error while trying to load a texture in JavaScript using Three.js: Restricted

I'm having trouble loading a texture in my JavaScript program using Three.js. Everything seems to be working fine with rendering a few objects, but as soon as I add the following code: var grzybSkin = THREE.ImageUtils.loadTexture('grzybuv.png&a ...

Issue with the Ajax auto-complete feature in Internet Explorer

I am facing an issue with my "ajax suggestion list" getting hidden behind the "select menu" located right below the text box that triggers the ajax function. This problem only occurs in IE 6.0, while it works fine in other browsers. I have already disabled ...