The implementation of Videowise with Headless Shopify includes two parts 👇
Scripts initialisation (Adding Videowise scripts to the website)
Setting the locations where you want to use widgets
Current Method Based on videowiseInfo var
The window.videowiseInfo var will be used on all non-Shopify platforms (Sfcc, Magento, Woo) and also on headless Shopify.
Minimum implementation for headless Shopify
To add scripts to your website, insert the following code before the closing body tag.
<script>
var SKIP_CART=true;
var FORCE_DOMAIN = true;
var VIDEOWISE_FAST_INLINE_VIDEO_PLAYER = true;
var videowiseInfo = {
cartType: 'Shopify',
shop: 'shop-name.myshopify.com',
currency:'USD',
currencyRate:'1',
pid: 'the_shopify_product_id'
};
</script>
<link rel="stylesheet" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://assets.videowise.com/style.css.gz" id="videowise-style-css">
<script defer="" src="https://assets.videowise.com/vendors.js.gz" id="videowise-vendors-js"></script>
<script defer="" src="https://assets.videowise.com/client.js.gz" id="videowise-client-js"></script>
<script defer="" src="https://assets.videowise.com/custom/sitename.js" id="videowise-custom-js"></script>
NOTES on correctly populating the videowiseInfo
videowiseInfo.shop ➔ must be set up to the correct myshopify.com domain
videowiseInfo.pid ➔ must be set in the following way:
product id - if a product page is being rendered
null, or an empty string‘’if it’s not a product page
Full structure for ➔ window.videowiseInfo
{
addToCartUrl: string;
cartURL: string;
checkoutURL: string;
currency: string;
currencyRate: string;
cartType: '' | 'shopify' | 'magento' | 'sfcc' | 'tapcart';
host: string;
locale: string;
pid: string;
productDetailsURL: string;
siteID: string;
withLiveStream: boolean;
}