Skip to content

Instantly share code, notes, and snippets.

@Anandapriyan

Anandapriyan/shopify-iframe-pub

Created March 17, 2017 02:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Anandapriyan/f6ad1a4b08f4e76ef8e9348077c8d139 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Anandapriyan/f6ad1a4b08f4e76ef8e9348077c8d139 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
shopify-iframe-pub
window.mobileAndTabletcheck = function() {
var check = false;
(function(a) {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
})(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
console.log('window.mobileAndTabletcheck', window.mobileAndTabletcheck());
if (window.mobileAndTabletcheck()) {
// change iframe position to fixed here using jquery
$("#iframe").css('position', 'fixed');
$("#iframe").css('height', '100%');
$("#header").css('display', 'none');
$("#footer").attr("style", "opacity: 0");
$("#iframe").css('z-index', '2147483647');
console.log('loading mobile device',$("footer"),$("header"));
} else {
// do nothing
$("#iframe").css('position', 'inherit');
console.log('do nothing')
}
$( ".wrapper.main-content" ).css('min-width', '100%');
$(".grid__item.post-large--two-thirds.push--post-large--one-sixth").css('left', '0%').css('min-width', '100%');
$('#sidebar').css('display','none');
var clearLocalStorage = function(someStuff) {
var promise = new Promise(function(resolve, reject){
console.log('clearLocalStorage method completed');
console.log('inside then');
localStorage.clear();
resolve();
});
return promise;
};
var cnt = 0;
var sendToLocalCart = function(cartFullContent) {
console.log('inside the content212');
var message = {
message: {
'cartValues': cartFullContent
}
};
var iframe = $('#iframe')[0];
iframe.contentWindow.postMessage(message, '*');
// clearText();
console.log('inside the content');
}
$(document).ready(function() {
var h3Label = "Received a message from IFrame:";
var res = true;
addIframeListener();
if (window.iframeLoaded) {
var iframe = $('#iframe')[0];
connectToIFrame(iframe);
};
function addIframeListener() {
var iframe = $('#iframe')[0];
console.log('Iframe Onload : ', iframe);
if (iframe) {
iframe.onload = function() {
connectToIFrame(iframe);
}
}
};
function connectToIFrame(iframe) {
iframe.contentWindow.postMessage('connect', '*');
console.log("connectToIFrame from Parent ");
//movetogbView();
};
function clearText() {
document.getElementById("message1").value = "";
};
window.addEventListener("message", receiveMessage, false);
function receiveMessage(e) {
console.log('Event Listen', cnt);
if (cnt === 0) {
cnt++;
console.log("message received to store: ", e.data);
if (e.data != 'tic!') {
console.log('inside if check',JSON.parse(e.data))
var response = $.parseJSON(e.data);
SplitMessage(response.message);
} else {
cnt = 0;
}
} else {
cnt--;
console.log("message received store: ", e.data);
if (e.data != 'tic!') {
console.log('inside else check',JSON.parse(e.data))
var response = $.parseJSON(e.data);
SplitMessage(response.message);
} else {
cnt = 0;
}
}
};
/* window.addEvent('message', function(e) {
console.log('Event Listen', cnt);
if (cnt === 0) {
cnt++;
console.log("message received",e.data);
var response = $.parseJSON(e.data);
SplitMessage(response.message);
}
});
addEvent(document.querySelector('form'), 'submit', function(e) {
if (e.preventDefault) e.preventDefault();
var message = JSON.stringify({
message: document.getElementById("message1").value
});
var iframe = $('#iframe')[0];
iframe.contentWindow.postMessage(message, '*');
clearText();
e.returnValue = false;
});
addEvent(document.getElementById("message1"), 'click', function(e) {
clearText();
});*/
//...To get the text from the Url..
var params = {};
if (location.search) {
var parts = location.search.substring(1).split('&');
for (var i = 0; i < parts.length; i++) {
var nv = parts[i].split('=');
if (!nv[0]) continue;
params[nv[0]] = nv[1] || true;
}
}
//...To get deviceId
var iframe = $('#iframe')[0];
console.log('ifrmae : ', iframe);
var deviceId = '';
deviceId = params.deviceId;
if (deviceId !== undefined && deviceId !== null) {
console.log('src: ', iframe.src);
iframe.src = iframe.src + '&deviceId=' + deviceId;
console.log('in layout/_page.html if', iframe);
}
//.. deviceId get ended here...
});
var countItem = 0;
var cartFullContent = [];
function cartPageinfo() {
var jqxhr = $.getJSON("/cart.js", function(data) {
console.log("success", data);
// console.log(data.responseText);
// var cartFullFromQuery = data.responseText;
var JSONObjectofCartFullFromQuery = data;
console.log(JSONObjectofCartFullFromQuery);
console.log(JSONObjectofCartFullFromQuery.items);
var cartitems = JSONObjectofCartFullFromQuery.items;
cartFullContent = [];
for (var i = 0; i < cartitems.length; i++) {
//cartFullContent.push(productNameDe + "|" + idNameD + "|" + qtyForCart);
var singleProductIncart = {};
singleProductIncart['product_name'] = cartitems[i].product_title;
singleProductIncart['qtyTempId'] = cartitems[i].id;
singleProductIncart['content'] = 'cartProduct';
singleProductIncart['qty'] = cartitems[i].quantity.toString();
singleProductIncart['price'] = cartitems[i].price;
singleProductIncart['product_img'] = cartitems[i].image;
cartFullContent.push(singleProductIncart);
}
console.log(" cartFullContent : ", cartFullContent);
console.log("cnt variable check : ", cnt);
sendToLocalCart(cartFullContent);
});
}
var product_id;
var qty;
var productName;
var productList = [];
var productNameList = [];
function SplitMessage(message) {
if (message !== "") {
console.log('check message : ', message);
if (message&&message.startsWith('iframeStyle')&&!mobileAndTabletcheck()) {
var msgSplit = message.split("|");
console.log('iframStyle_message : ', msgSplit[1]);
//var iframeStyle = document.getElementById('iframe');
//iframeStyle.style = msgSplit[1];
document.getElementById('iframe').style = msgSplit[1];
// document.getElementById('iframe').style = "z-index: 9000; border: 0px; position: fixed; top: 5%; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 90%;"
cnt = 0;
console.log('iframeStyle : -- ', document.getElementById('iframe'));
} else if (message&&message.startsWith('cartValues')) {
console.log('cartValues', message);
var msgSplit = message.split("|");
console.log('cartValues splited', msgSplit);
product_id = parseInt(msgSplit[4].trim());
qty = parseInt(msgSplit[2].trim());
productName = msgSplit[3].trim();
console.log("message is " + product_id + " q " + qty + " productName " + productName);
cnt = 0;
updateReceivedText(product_id, qty, productName);
} else if (message&&message.startsWith('productUrl')) {
console.log('product Url : ', message);
var msgSplit = message.split("|");
console.log('cartValues', msgSplit);
product_id = parseInt(msgSplit[1].trim());
productName = msgSplit[2].trim();
var productUrl = msgSplit[3].trim();
//var shopurl = String(document.getElementById("shopurl").innerHTML);
cnt = 0;
//var cart_value = "%GLOBAL_CartItems%";
console.log("shopurl: ", Shopify);
window.location.href = '//'.concat(Shopify.shop,productUrl);
} else if (message&&message.startsWith('iframeLoaded')) {
cnt = 0;
cartPageinfo();
cnt = 0;
movetogbView()
.then(clearLocalStorage);
}
};
}
function updateReceivedText(product_id, qty, productName) {
$.ajax({
url: '/cart/add.js',
dataType: 'json',
type: 'post',
contentType: 'application/json',
data: JSON.stringify( {quantity: qty,id: product_id} ),
processData: false,
success: function( data, textStatus, jQxhr ){
console.log('success adding cart');
$('.cart-count.header-bar__cart-count').load(document.URL + ' .cart-count.header-bar__cart-count');
},
error: function( jqXhr, textStatus, errorThrown ){
console.log( 'errorThrown adding cart' );
}
});
}
var movetogbView = function() {
var promise = new Promise(function(resolve, reject){
console.log('movetogbView method completed');
if (typeof(Storage) !== "undefined") {
console.log('localstorage: ', localStorage.getItem("productId"));
var GbviewProductId = localStorage.getItem("productId");
console.log('gbviewProductId : ', GbviewProductId);
console.log('gbviewProductId : ', typeof(GbviewProductId));
if (GbviewProductId !== null) {
var message = {
message: {'platformProductId':GbviewProductId}
};
var iframe = $('#iframe')[0];
iframe.contentWindow.postMessage(message, '*');
resolve();
}
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
});
return promise;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment