Plugin API

Augusta Freestyle Plugin Document



AUGUSTA FREESTYLE PLUGIN API DOCUMENTATION



Purpose:

Provide instructions to embed iframe plugin code onto a website.

Overview:

Plugin will allow customer to embed Augusta Freestyle sublimation catalog page in their site and customize the design in such way the end user will be able to browse through the sublimation product and customize design and submit the design for further processing from the customer site only.

The iframe works best with a full width header/footer page. Page Header and page footer Height should be fix. The iframe is mobile responsive, so if width of iframe is less than 1024px then it will display a more mobile friendly view.

Step to Embed Iframe:
  • Build a page on your site on the path /configurator
  • Put the Plugin code between page header and page footer of page where Augusta Sublimation product need to display.
  • In order to configure your account on our end please provide us:
    1. Email address for orders
    2. Email/phone for their customer support
    3. Domain where the iframe will be hosted
    4. Customer account number with us
Plugin code:

<!-- iFrame HTML Section --> <div id="loaderAlign"> <div class="loader"></div> </div> <div id="iframediv" style="display: none;height: 2905px;min-height: 600px;"> <iframe id="myIframe" scrolling="no" height="100%" width="100%" onload="sendParentHeightToChild();" src="https://www.augustasportswear.com/custom-sublimation"></iframe> </div> <!-- iFrame CSS Section --> <style> #loaderAlign{ height: 100vh; display: flex; justify-content: center; align-items: center; } .loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <!-- iFrame Javascript --> <script type="text/javascript"> let pageUrl = location.href; let domainUrl = document.domain; let pageQuery = null; var iframeHasSameDomainUrl = true; let categoryArray = [ {'name' : 'lacrosse', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'baseball', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'basketball', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'soccer', 'discount' : 5, 'addlLeadTime' : 2, 'moq':6, 'moqPrice':60}, {'name' : 'football', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'hockey', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'fleece', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'track', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'training', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60}, {'name' : 'softball', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'polo', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : '5-day-turbo', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'volleyball', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'babe-ruth-turbo', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'accessories', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'compression', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 }, {'name' : 'semi-sublimated', 'discount' : 5, 'addlLeadTime' : 2,'moq':6, 'moqPrice':60 } ]; let categoryShareMapper = { 'lacrosse' : 'lacrosse', 'baseball' : 'baseball', 'basketball' : 'basketball', 'soccer' : 'soccer', 'football' : 'football', 'hockey' : 'hockey', 'fleece' : 'fleece', 'track' : 'track', 'training' : 'training', 'softball' : 'softball', 'polos' : 'polo', 'turbo' : '5-day-turbo', 'volleyball' : 'volleyball', 'babe ruth turbo' : 'babe-ruth-turbo', 'masks, gaiters,' : 'accessories', 'compression' : 'compression', 'semi-sublimated' : 'semi-sublimated' }; window.onmessage = (e) => { let data = e.data.toString(); if(e.data.domainUrl){ iframeHasSameDomainUrl = false; pageUrl = e.data.pageUrl; pageQuery = e.data.pageQuery; let domain = e.data.domainUrl; domainUrl = domain.replace(/^https?:\/\//,''); setIframeSrc(); var iframeSrc = getIframeSrc(); } if (data.indexOf('asgIframeHeight') > -1) { var iframeHeight = e.data.split(":"); document.getElementById('iframediv').style.height = iframeHeight[1] + 'px'; } if (data.indexOf('reLoadIframe') > -1) { //document.getElementById("showSummary").style.display = "none"; setIframeSrc(); } if (data.indexOf('scrollToTop') > -1) { window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } if (data.indexOf('asgPageName') > -1) { var pageName = e.data.split(":"); if (pageName[1] == 'configurator') document.getElementById("myIframe").setAttribute("scrolling", "yes"); else { document.getElementById("myIframe").setAttribute("scrolling", "no"); } } /* The code below shows example of capturing the snumber and total when order submitted. */ /* if ( (data.indexOf('asgOrderTotal') > -1) || (data.indexOf('asgSNumber') > -1) ) { let input = data.split(":"); if(input[0] === 'asgOrderTotal'){ document.getElementById("showTotal").innerHTML = "Total: $"+input[1]; } if(input[0] === 'asgSNumber'){ document.getElementById("showSNumber").innerHTML = "SNumber: "+input[1]; } document.getElementById("showSummary").style.display = "block"; } */ }; function sendParentHeightToChild() { var child = document.getElementById("myIframe").contentWindow; var elemTop = document.getElementById("iframediv").offsetTop; var windowHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight; var calcHeight = windowHeight - elemTop; if (child.postMessage) { child.postMessage("parentHeight:" + calcHeight, '*'); child.postMessage("parentDomain:" + domainUrl, '*'); } } function sendDataToChild() { var child = document.getElementById("myIframe").contentWindow; if (child.postMessage) { child.postMessage("loadNextPageIframe", '*'); } } function getCurrentUrlParams () { if(iframeHasSameDomainUrl === false){ return pageQuery; } else { let queryString = (function(params) { if (params === "") return {}; let obj = {}; for (let i = 0; i < params.length; ++i) { let value = params[i].split('=', 2); if (value.length === 1) obj[value[0]] = ""; else obj[value[0]] = decodeURIComponent(value[1].replace(/\+/g, " ")); } return obj; })(window.location.search.substr(1).split('&')); return queryString; } } function setIframeSrc () { let url = getIframeSrc(); if(url) { document.getElementById('myIframe').src = url; } setTimeout(function(){ document.getElementById("iframediv").style.display = "block"; document.getElementById("loaderAlign").style.display = "none"; }, 1000); } function getIframeSrc () { let queryString = getCurrentUrlParams(); if(queryString && queryString['categoryName']){ let categoryName = queryString['categoryName']; return generateUrl((categoryName.toLowerCase()).trim()) }else { let currentURL = pageUrl; let url = currentURL.split("?"); let urlArray = url[0]; let urlHrefArray = urlArray.split('/'); let categoryName = null; urlHrefArray.forEach(function(urlEntity) { categoryArray.forEach(function(category){ if( (urlEntity.toLowerCase()).trim() === ((category.name).toLowerCase()).trim() ){ categoryName = ((category.name).toLowerCase()).trim(); } }) }) return generateUrl(categoryName); } } function isConfiguratorPage () { let queryString = getCurrentUrlParams(); if(queryString && queryString['sNumber']){ return true; } return false; } function generateUrl(categoryName){ if(!categoryName) return false; let currentIframeUrl = document.getElementById('myIframe').src; let replaceText = 'custom-sublimation-'+categoryName; if(isConfiguratorPage()){ replaceText = 'Configurator'; categoryName = categoryShareMapper[categoryName]; } else if( (categoryName === '5-day-turbo') || (categoryName === 'semi-sublimated') ) { replaceText = categoryName; } let queryString = getCurrentUrlParams(); let Index = categoryArray.findIndex(x => ((x.name).toLowerCase()).trim() === categoryName ); let categoryObj = categoryArray[Index]; let url = currentIframeUrl.split('?'); let urlArray = url[0]; let paramsArray = url[1]; let urlHrefArray = urlArray.split('/'); let urlHrefReplaceEntity = urlHrefArray[urlHrefArray.length -1]; url[0] = urlArray.replace(urlHrefReplaceEntity, replaceText); let newUrl = url.join('?'); let href = new URL(newUrl); let categoryObjLength = Object.keys(categoryObj).length; if(categoryObjLength) { Object.keys(categoryObj).forEach(function(key){ href.searchParams.delete(key); href.searchParams.set(key, categoryObj[key]); }) } if(isConfiguratorPage()){ Object.keys(queryString).forEach(function(key){ href.searchParams.delete(key); href.searchParams.set(key, queryString[key]); }) } return href.toString(); } document.onreadystatechange = function () { if (document.readyState == "complete") { if(iframeHasSameDomainUrl){ setIframeSrc(); } window.onscroll = function() { if (isScrolledIntoView()) { sendDataToChild(); } }; function isScrolledIntoView() { var elem = document.getElementById("iframediv"); var docViewTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var docViewBottom = docViewTop + windowHeight; var elemTop = elem.offsetTop; var elemBottom = elemTop + elem.offsetHeight; return ((elemBottom <= docViewBottom)); } } } </script>
Wix specific code:

If you are using the website builder named Wix, then you will need to add additional code before you add the rest of the code.

WIX Plugin code:

<!-- WIX Section --> <!-- #html1 is WIX page Id, where to embed iframe code and using of the same pageId, need to post message object to iframe --> import wixLocation from 'wix-location'; $w.onReady(() => { let obj = { 'domainUrl': wixLocation.baseUrl, 'pageUrl': wixLocation.url, 'pageQuery': wixLocation.query } $w("#html1").postMessage(obj); });
IFrame Category:

You can display different category by passing query string parameter categoryName to your page.

Sample link to your page: https://xyz.com/configurator?categoryName=baseball

Sample link to your page: https://xyz.com/configurator?categoryName=soccer

Lead Time :

If Customer wants to add lead time days in addition to the Augusta Lead Time then update the categoryArray addlLeadTime accordingly.
For example:

categoryArray = [
		{'name' : 'baseball', 'discount' : 20, 'addlLeadTime' : 2 }

MSRP Discount :

If Customer wants to discount Augusta MSRP then update the categoryArray discount with percentage amount accordingly. The maximum percentage allowed is 20.
For example:

categoryArray = [
		{'name' : 'baseball', 'discount' : 20, 'addlLeadTime' : 2 }

Increasing the MSRP is also supported by using a negative discount.
For example:

categoryArray = [
		{'name' : 'baseball', 'discount' : -20, 'addlLeadTime' : 2 }

Hiding the MSRP is supported by using discount value -1000.
For example:

categoryArray = [
		{'name' : 'baseball', 'discount' : -1000, 'addlLeadTime' : 2 }

Save and Share:

We have a feature to share the custom design below is the sample url for share design https://xyz.com/configurator?sNumber=S741687&categoryName=Basketball
Plugin code will redirect user to configurator page and open the respective design.
This requires the path /configurator to have iframe embedded.

MOQ(Minimum Order Quantity)

In order to display a MOQ message, you can update the categoryArray "moq" accordingly.

You can also communicate an extra charge for order below the MOQ using the parameter "moqPrice" in the categoryArray.

For example:

categoryArray = [
		{'name' : 'baseball', 'discount' : 20, 'addlLeadTime' : 2,'moq':12, 'moqPrice':60 }

Submit the design:

On Configurator page user can select design change color on color tab add/remove text/logo on text and logo tab. on the roster tab user can select size specify team/player name by entring roster data. Once roster data adds user can review the selection on summary tab and process the order here user need to give the contact information and the submit the design for processing. Once the Design submit will send the email to customer service with the submit design detail for further processing.

Note:

Here is an example page hosting the iframe for reference:http://asiimages.com/configurator/