The implementation of Videowise with Headless Shopify includes two parts 👇
Scripts initialization (Adding
Videowisescripts 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 not 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 me setup to the correct myshopify.com domain
videowiseInfo.pid ➔ must be set in the following way:
product id - if a product page is beeing rendered
null, or empty string‘’if it’s not a product page
NOTES on custom/sitename.js
For all Shopify headless implementation, when the installation code is passed to the site’s dev team, we will create a js file with the site’s name and place it on S3 in the bucket reeview, inside folder custom
This allows us to inject custom functionality without asking the site’s dev team for frequent changes.
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;
}
DEPRECATED METHOD BASED ON Shopify var
Step 1: Script Initialization:
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 Shopify = {
shop: 'shop-name.myshopify.com', currency:{active:’USD’, rate:’1.0’}
};
var __st = {
rid: null,
p: 'home'
};
</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>
shop-name.myshopify.com - replace this with your shopname
The __st variable above must be set like this:
var __st = { rid: null, p: 'home' }; -> for all pages which are not PDP
and like this:
var __st = { rid: $rid, p: 'product'}; -> for PDP pages
You will need to change $rid with the product id
When adding scripts to a website, it's recommended to verify their correct implementation. You can do this by navigating to the DevTools ➔ console tab. Use the shortcut Command + Option + J on a Mac, or Control + Shift + J on other systems.
If you see the log below, it indicates that the Videowise scripts have been added correctly 👇
At this point, Videowise is fully set up and ready to use, allowing you to add widgets to your website. If you experience any challenges, such as missing fields to insert the copied code from the app, we suggest reaching out to your development team. They can assist with implementing the code or providing an alternative solution for the automation framework
Step 2: Setting Fields for Contentful:
Contentful enables you to create a field for adding data. It's not entirely clear if it supports proper HTML code parsing, but it might be an option for organizing the data.
Contentful Docs:
Another option could be to hardcode the embed widget into your code.
Call recap/plan:
Notes From the client: 3 main points to implement:
Video Optimization
Review Section
Product Slider
Steps based on the call:
Inject the code above to your website, we would recommend checking it on the dev site first
Test the env and make sure it works properly (based on console messages)
Add a field (Videowise code -
single/multi-line text) for Metaobject entry (Extend current metaobject)Parse the value in the code with the condition if
metaobject.videowise.value ≠ blankthen replace the current HTML (video, image, etc) and use our codeContent Phase (Videowise can help with this), by the way, we’ll provide support on each step 🙂
HEADLESS - SINGLE CUSTOM FILE
need to change jsonElem
create a new file containing reference to customer domain ➔ upload in “reeview” bucket on S3
var jsonElem = document.getElementById("product-select-default-hydration-data");
var pageType = "home";
var rid = null;
if (jsonElem.id) {
var productData = JSON.parse(jsonElem.textContent);
pageType = "product";
rid = productData?.product?.id;
console.log(rid, "product id");
}
var SKIP_CART = true;
var FORCE_DOMAIN = true;
var VIDEOWISE_FAST_INLINE_VIDEO_PLAYER = true;
var Shopify = {
shop: "blendjet.myshopify.com",
};
var __st = {
rid: rid,
p: pageType,
};
var videowiseStyle = document.createElement("link");
videowiseStyle.setAttribute("type", "text/css");
videowiseStyle.setAttribute("rel", "stylesheet");
videowiseStyle.setAttribute(
"href",
"https://assets.videowise.com/style.css.gz"
);
videowiseStyle.setAttribute("id", "videowise-style-css");
document.head.appendChild(videowiseStyle);
var vendorJs = document.createElement("script");
vendorJs.setAttribute("src", "https://assets.videowise.com/vendors.js.gz");
vendorJs.setAttribute("id", "videowise-vendors-js");
document.head.appendChild(vendorJs);
var clientJs = document.createElement("script");
clientJs.setAttribute("src", "https://assets.videowise.com/client.js.gz");
clientJs.setAttribute("id", "videowise-client-js");
document.head.appendChild(clientJs);