Catalog and checkout pages in Big River are provided for a shopping cart experience. To link a catalog page to the correct checkout form, you will need to add the shopping cart widget link to your catalog page layout.


To begin, you will need to import the shopping cart widget script provided by Big River. To do this, follow these steps:

1. Open the Catalog page you wish to add the shopping cart link to.

2. Navigate to the "Layout" tab on the left hand navigation for the page.

3. Click "source" in the editor toolbar to view the HTML source of the layout.

4. At the top, insert the following:  

<script src="../scripts/shoppingcart.js"></script>

5. Click "source" in the editor toolbar again to exit the HTML version.

6. Use the "Save" button to save your changes.


Now we have added the widget script. Next we need to supply the shopping cart tag for the widget to act upon.

The tag will be where the shopping cart icon will be displayed. It will link to the checkout page that you specify in the tag's attributes.

To add the tag, do the following:

1. In the layout you opened previously to add the script tag to, once again select "source" from the editor toolbar.

2. Find where you would like to place the shopping cart icon in your page layout and insert the following tag, making sure you have valid HTML code (basic example):

  

<div style="float: right;" class="BR_shoppingcart" data-account="[INSERT YOUR BIG RIVER ACCOUNT NAME]" data-form="[INSERT YOUR CHECKOUT PAGE NAME]">&nbsp;</div>

 

The tag provides the following modifiable attributes:

 

Name Value Description
data-account Your Big River account name (i.e. myAccount) The data account attribute links to your Big River account to find your Checkout page
data-form The name of the Checkout form you want the Catalog page to checkout from (i.e. My+Checkout+Form) (Note you can replace spaces with + signs.) The checkout page name is able to find the correct checkout form to link to


After the widget takes affect on the shopping cart tag, it will produce the following (example account and form given):

 

<div style="float: right;" class="BR_shoppingcart" data-account="myAccount" data-form="My+Checkout+Form">
    <a href="https://transactions.myAccount.com/CampaignForm/myAccount/My+Checkout+Form" class="shoppingCartLink">
      <div class="shoppingCartIcon" />
      <span class="shoppingCartItems" >(Number of Items currently in the Cart appears here)</span>
    </a>
</div>

 

The default shopping cart icon looks like this:

and the number of shopping cart items will appear as a number within the cart.


To override the shopping cart style, write CSS rules for the following class:

 CSS class name  Default CSS Rules  Description/Use
shoppingCartIcon

 

background-image: url(../img/shoppingcart-br.png);
height: 25px;
width: 36px;
background-repeat: no-repeat;

 

This CSS class is responsible for displaying the shopping cart icon used, as well as its display size.
shoppingCartItems

 

position: relative;
top: -36px;
left: 15px;

 

This CSS class applies to the span that displays the number of items in the cart (if any.) It controls the position of the items relative to the shopping cart icon.