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:
  • Ensure you have jQuery loaded on your page
  • 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:

<div id="iframediv" style="height: 2905px;min-height: 600px;"> <iframe src="https://www.augustasportswear.com/custom-sublimation" id="myIframe" frameborder="0" scrolling="no" height="100%" width="100%" onload="sendParentHeightToChild();"></iframe> </div> <script type="text/javascript"> if (typeof $ == 'undefined' && typeof jQuery == 'undefined') { document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js" crossorigin="anonymous"><\/script>'); } else if (typeof $ == 'undefined') { $=jQuery; } let categoryArray = [ {'name' : 'baseball', 'discount' : 20, 'addlLeadTime' : 2,'moq':12, 'moqPrice':60 }, {'name' : 'basketball', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'soccer', 'discount' : 20, 'addlLeadTime' : 2, 'moq':12, 'moqPrice':60}, {'name' : 'football', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'hockey', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'fleece', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'track', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'training', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'softball', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'polo', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : '5-day-turbo', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'volleyball', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'babe-ruth-turbo', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'accessories', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'compression', 'discount' : 20, 'addlLeadTime' : 2}, {'name' : 'semi-sublimated', 'discount' : 20, 'addlLeadTime' : 2} ]; let categoryShareMapper = { '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' }; var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; var eventer = window[eventMethod]; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; var iframeSrc = getIframeSrc(); eventer(messageEvent, function (e) { if (e.data.indexOf('scrollToTop') == -1 && e.data.indexOf('asgIframeHeight') == -1 && e.data.indexOf('asgPageName') == -1 && e.data.indexOf('reLoadIframe') == -1) return; if (e.data.indexOf('asgIframeHeight') > -1) { var iframeHeight = e.data.split(":"); document.getElementById('iframediv').style.height = iframeHeight[1] + 'px'; } if (e.data.indexOf('reLoadIframe') > -1) { setIframeSrc(); } if (e.data.indexOf('scrollToTop') > -1) { $("html, body").animate({ scrollTop: 0 }, "slow"); } if (e.data.indexOf('asgPageName') > -1) { var pageName = e.data.split(":"); if (pageName[1] == 'configurator') $("#myIframe").attr("scrolling", "yes"); else { $("#myIframe").attr("scrolling", "no"); } } }, false); function sendParentHeightToChild() { var child = $("#myIframe").get(0).contentWindow; var elemTop = $("#iframediv").offset().top; var windowHeight = $(window).height(); var calcHeight = $(window).height() - elemTop; if (child.postMessage) { child.postMessage("parentHeight:" + calcHeight, '*'); child.postMessage("parentDomain:" + document.domain, '*'); } } function sendDataToChild() { var child = $("#myIframe").get(0).contentWindow; if (child.postMessage) { child.postMessage("loadNextPageIframe", '*'); } } function getCurrentUrlParams () { 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(); document.getElementById('myIframe').src = url; } function getIframeSrc () { let queryString = getCurrentUrlParams(); if(queryString && queryString['categoryName']){ let categoryName = queryString['categoryName']; return generateUrl((categoryName.toLowerCase()).trim()) }else { let currentURL = location.href; 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 currentURL = location.href; return (currentURL.indexOf('configurator') > -1 || currentURL.indexOf('sNumber') > -1); } function generateUrl(categoryName){ 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); 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).ready(function () { setIframeSrc(); $(window).scroll(function () { if (isScrolledIntoView($("#iframediv"))) { sendDataToChild(); } }); function isScrolledIntoView(elem) { var $elem = $(elem); var $window = $(window); var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom)); } }); </script>
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 }

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/