In order to add a dynamic shopping bag link on your site there are two steps:

  1. Add the script tag to the <head> section of all of your pages that will contain a product frame or shopping bag
  2. Put the shopping bag link on your page wherever you want your users to see the shopping bag link (for example, in the top navigation).

In the <head> section of your page(s)

Add the script tag to the <head> section of all of your pages that will contain a product frame or shopping bag. Replace {API TOKEN} with your api token.

<script type="text/javascript" id='lux-shop-loader' src='//api.shoppable.com/assets/js/shop.js?token={API TOKEN}'></script>

In the <body> of your page

Add the div tag to the <body> section of your page where you want the frame to appear.

<a href="#" class="lux-cart-frame" data-checkout="https://my.site.com/checkout/" data-style="modal">SHOPPING BAG</a> <span class="lux-cart-label">&nbsp;</span>
  • You must set the data-checkout attribute to be the location of the checkout page on your site
  • The data-style attribute determines what method to use when displaying the Shopping Bag.
    • data-style="modal" has the Shopping Bag appear via an overlay effect with static backdrop.
    • data-style="popover" has the Shopping Bag appears overlayed but with no static backdrop.
  • The <a> tag is the link that will trigger to shopping bag popover to appear.
    • The text within the tag, shown below as 'SHOPPING BAG' can be set to anything you want.
    • The CSS class lux-cart-frame can be used to apply styles to this link.
  • The <span> tag will be used by the Shoppable platform to display the current number of items within the shopping bag.
    • The CSS class lux-cart-label can be used to apply styles to this text.

Shopping bag frame data attributes

Attribute Default Allowed Values Description
data-checkout

REQUIRED

No default Any valid URL Full URL of the checkout page on your site
data-style

REQUIRED

No default modal The attribute `data-style="modal"` has the Shopping Bag appear via an overlay effect with static backdrop.
data-show-powered-by

OPTIONAL

false 1 or true (boolean) Toggles the displaying of the "Powered by 72Lux" logo on the shopping bag modal. We recommend you always enable this, but the default is to not show it for backwards compatibility reasons.
data-show-privacy-policy-link

OPTIONAL

false 1 or true (boolean) Toggles the displaying of the link to 72Lux's privacy policy on the shopping bag modal. We recommend you always enable this, but the default is to not show it for backwards compatibility reasons.
data-empty-message

OPTIONAL

No Any string (HTML friendly) Gives control over what an empty shopping cart will display to a visitor.