Skip to main content

Live Spot Price Chart Widget

The NFusion live spot price chart widget displays real-time precious metals prices on the Scottsdale Mint website. Unlike WooCommerce product prices (which update every minute via the pricing pipeline), this widget fetches live data directly from NFusion's CDN and updates continuously.

Location​

nfusion/live-price-chart/         ← Widget source and build files
├── package.json                  ← npm dependencies
├── webpack.mix.js                ← Webpack Mix build config
├── mix-manifest.json             ← Compiled asset manifest
├── src/                          ← Source SCSS and JavaScript
└── widgetcdn.nfusionsolutions.com/ ← NFusion CDN files (reference/local copy)

What the Widget Displays​

  • Spot price for gold, silver, platinum, and/or palladium
  • Price change (dollar and percentage) from previous close
  • Bid / Ask spread (if configured)
  • Historical price chart (1 day, 1 week, 1 month options)
  • Auto-refreshing data (no page reload required)

Build​

cd nfusion/live-price-chart
npm install

# Development (watch mode)
npm run dev

# Production build
npm run production

Embedding the Widget​

Option 1: Elementor HTML Widget​

  1. Edit a page in Elementor
  2. Drag an HTML widget onto the page
  3. Paste the NFusion widget embed code:
<div id="ScottsdaleMintLivePriceChart"></div>
<script src="https://widgetcdn.nfusionsolutions.com/widget/js/your-widget-id.js"></script>

(Actual widget ID is configured in your NFusion account and may differ)

Option 2: Custom Elementor Widget​

The theme includes a dedicated Live Spot Price Elementor widget (registered in inc/class-elementor-widgets.php) that wraps the NFusion embed code. This is the preferred method as it provides Elementor editor controls for:

  • Widget ID / configuration key
  • Metal types to display (gold, silver, platinum, palladium)
  • Chart type (line chart, table)
  • Color scheme (light/dark)
  • Widget dimensions

Widget Configuration​

Widget settings are managed in your NFusion account portal at nfusionsolutions.com. The widget configuration determines:

  • Which metals are displayed
  • Default time period for the chart
  • Price format (USD, per troy oz vs per gram)
  • Color scheme

The NFUSION_PRODUCT_CATALOG_BASE_URL environment variable points to the account-specific NFusion catalog URL.

Caching Behavior​

The NFusion chart widget does not go through WordPress caching:

  • The widget JavaScript is served from NFusion's CDN
  • Price data is fetched directly by the browser from NFusion's real-time API
  • CloudFront passes through NFusion CDN requests (different domain)

This means chart prices are always current regardless of WordPress object cache or CloudFront HTML caching state.

Troubleshooting​

IssueSolution
Widget not displayingCheck browser console for JavaScript errors; verify widget ID is correct in NFusion account
Prices outdatedNFusion CDN issue — check NFusion status page
Widget not matching site designAdjust colors in NFusion account portal widget settings
Widget blocks page loadMove widget script to footer; verify async/defer loading