Quick add to cart

Fast add to cart makes the client shopping experience faster and better! This feature creates a "add to cart" button on

// init global variables:

// CSS selector for each product, initialized by product_finder()
let page_products_selector;

// init functions:

function Get(yourUrl) {
    var Httpreq = new XMLHttpRequest();
    async: true;
    Httpreq.open("GET", yourUrl, false);
    Httpreq.send(null);
    return Httpreq.responseText;
}

function init_icon_cdn() {
    let icon_style = document.createElement("link");
    icon_style.setAttribute("rel", "stylesheet");
    icon_style.setAttribute(
        "href",
        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    );
    document.head.appendChild(icon_style);
}

// updates page_products_selector with product selector values
function product_finder() {
    /******/
    (function(modules) {
        // webpackBootstrap
        /******/ // The module cache
        /******/
        var installedModules = {}; // The require function
        /******/
        /******/
        /******/
        function __webpack_require__(moduleId) {
            /******/
            /******/ // Check if module is in cache
            /******/
            if (installedModules[moduleId]) {
                /******/
                return installedModules[moduleId].exports;
                /******/
            } // Create a new module (and put it into the cache)
            /******/
            /******/
            var module = (installedModules[moduleId] = {
                /******/
                i: moduleId,
                /******/
                l: false,
                /******/
                exports: {},
                /******/
            }); // Execute the module function
            /******/
            /******/
            /******/
            modules[moduleId].call(
                module.exports,
                module,
                module.exports,
                __webpack_require__
            ); // Flag the module as loaded
            /******/
            /******/
            /******/
            module.l = true; // Return the exports of the module
            /******/
            /******/
            /******/
            return module.exports;
            /******/
        } // expose the modules object (__webpack_modules__)
        /******/
        /******/
        /******/
        /******/
        __webpack_require__.m = modules; // expose the module cache
        /******/
        /******/
        /******/
        __webpack_require__.c = installedModules; // define getter function for harmony exports
        /******/
        /******/
        /******/
        __webpack_require__.d = function(exports, name, getter) {
            /******/
            if (!__webpack_require__.o(exports, name)) {
                /******/
                Object.defineProperty(exports, name, { enumerable: true, get: getter });
                /******/
            }
            /******/
        }; // define __esModule on exports
        /******/
        /******/
        /******/
        __webpack_require__.r = function(exports) {
            /******/
            if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
                /******/
                Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
                /******/
            }
            /******/
            Object.defineProperty(exports, "__esModule", { value: true });
            /******/
        }; // create a fake namespace object // mode & 1: value is a module id, require it // mode & 2: merge all properties of value into the ns // mode & 4: return value when already ns object // mode & 8|1: behave like require
        /******/
        /******/
        /******/ /******/ /******/ /******/ /******/
        __webpack_require__.t = function(value, mode) {
            /******/
            if (mode & 1) value = __webpack_require__(value);
            /******/
            if (mode & 8) return value;
            /******/
            if (mode & 4 && typeof value === "object" && value && value.__esModule)
                return value;
            /******/
            var ns = Object.create(null);
            /******/
            __webpack_require__.r(ns);
            /******/
            Object.defineProperty(ns, "default", { enumerable: true, value: value });
            /******/
            if (mode & 2 && typeof value != "string")
                for (var key in value)
                    __webpack_require__.d(
                        ns,
                        key,
                        function(key) {
                            return value[key];
                        }.bind(null, key)
                    );
            /******/
            return ns;
            /******/
        }; // getDefaultExport function for compatibility with non-harmony modules
        /******/
        /******/
        /******/
        __webpack_require__.n = function(module) {
            /******/
            var getter =
                module && module.__esModule ?
                /******/
                function getDefault() {
                    return module["default"];
                } :
                /******/
                function getModuleExports() {
                    return module;
                };
            /******/
            __webpack_require__.d(getter, "a", getter);
            /******/
            return getter;
            /******/
        }; // Object.prototype.hasOwnProperty.call
        /******/
        /******/
        /******/
        __webpack_require__.o = function(object, property) {
            return Object.prototype.hasOwnProperty.call(object, property);
        }; // __webpack_public_path__
        /******/
        /******/
        /******/
        __webpack_require__.p = ""; // Load entry module and return exports
        /******/
        /******/
        /******/
        /******/
        return __webpack_require__(
            (__webpack_require__.s = "./src/scripts/productFinder.js")
        );
        /******/
    })(
        /************************************************************************/
        /******/
        {
            /***/
            "./node_modules/@medv/finder/finder.js":
            /*!*********************************************!*\
            !*** ./node_modules/@medv/finder/finder.js ***!
            \*********************************************/
            /*! exports provided: finder */
            /***/
                function(module, __webpack_exports__, __webpack_require__) {
                "use strict";
                __webpack_require__.r(__webpack_exports__);
                /* harmony export (binding) */
                __webpack_require__.d(__webpack_exports__, "finder", function() {
                    return finder;
                });
                var Limit;
                (function(Limit) {
                    Limit[(Limit["All"] = 0)] = "All";
                    Limit[(Limit["Two"] = 1)] = "Two";
                    Limit[(Limit["One"] = 2)] = "One";
                })(Limit || (Limit = {}));
                let config;
                let rootDocument;

function penalty(path) {
                    return path
                        .map((node) => node.penalty)
                        .reduce((acc, i) => acc + i, 0);
                }

function attr(input) {
                    const attrs = Array.from(input.attributes).filter((attr) =>
                        config.attr(attr.name, attr.value)
                    );
                    return attrs.map((attr) => ({
                        name: "[" +
                            cssesc(attr.name, { isIdentifier: true }) +
                            '="' +
                            cssesc(attr.value) +
                            '"]',
                        penalty: 0.5,
                    }));
                }

function classNames(input) {
                    const names = Array.from(input.classList).filter(config.className);
                    return names.map((name) => ({
                        name: "." + cssesc(name, { isIdentifier: true }),
                        penalty: 1,
                    }));
                }

function any() {
                    return {
                        name: "*",
                        penalty: 3,
                    };
                }

function nthChild(node, i) {
                    return {
                        name: node.name + `:nth-child(${i})`,
                        penalty: node.penalty + 1,
                    };
                }

function dispensableNth(node) {
                    return node.name !== "html" && !node.name.startsWith("#");
                }

function maybe(...level) {
                    const list = level.filter(notEmpty);
                    if (list.length > 0) {
                        return list;
                    }
                    return null;
                }

function notEmpty(value) {
                    return value !== null && value !== undefined;
                }

function* combinations(stack, path = []) {
                    if (stack.length > 0) {
                        for (let node of stack[0]) {
                            yield* combinations(
                                stack.slice(1, stack.length),
                                path.concat(node)
                            );
                        }
                    } else {
                        yield path;
                    }
                }

function sort(paths) {
                    return Array.from(paths).sort((a, b) => penalty(a) - penalty(b));
                }

function* optimize(
                    path,
                    input,
                    scope = {
                        counter: 0,
                        visited: new Map(),
                    }
                ) {
                    if (path.length > 2 && path.length > config.optimizedMinLength) {
                        for (let i = 1; i  config.maxNumberOfTries) {
                                return; // Okay At least I tried!
                            }
                            scope.counter += 1;
                            const newPath = [...path];
                            newPath.splice(i, 1);
                            const newPathKey = selector(newPath);
                            if (scope.visited.has(newPathKey)) {
                                return;
                            }
                            if (unique(newPath) && same(newPath, input)) {
                                yield newPath;
                                scope.visited.set(newPathKey, true);
                                yield* optimize(newPath, input, scope);
                            }
                        }
                    }
                }

/***/
            },

/***/
            "./src/scripts/productFinder.js":
            /*!**************************************!*\
            !*** ./src/scripts/productFinder.js ***!
            \**************************************/
            /*! no exports provided */
            /***/
                function(module, __webpack_exports__, __webpack_require__) {
                "use strict";
                __webpack_require__.r(__webpack_exports__);
                /* harmony import */
                var _medv_finder__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
                    /*! @medv/finder */
                    "./node_modules/@medv/finder/finder.js"
                );

function _objectSpread(target) {
                    for (var i = 1; i  maxCount) {
                            maxCount = _maxCount;
                            maxCurrency = c;
                        }
                    }

return currenciesToElementsMap[maxCurrency].map(function(_ref2) {
                        var el = _ref2.el;
                        return el;
                    });
                }

function mapElementsToCurrencies(elements, collection) {
                    var currenciesToElements = {};
                    elements.forEach(function(el) {
                        var count = 0;
                        var item;
                        collection.forEach(function(c) {
                            var rgx = collection === ISOS ? "\\b".concat(c, "\\b") : c;
                            var match = el.innerText.match(new RegExp(rgx, "g"));
                            match = (match && match.length) || 0;
                            match *= 6;

if (match > count) {
                                count = match;
                                item = c;
                            }
                        });

if (count > 0) {
                            currenciesToElements[item] = currenciesToElements[item] ?
                                currenciesToElements[item].concat({
                                    el: el,
                                    count: count,
                                }) :
                                [{
                                    el: el,
                                    count: count,
                                }, ];
                        }
                    });
                    return currenciesToElements;
                }

function getLargerElement(elements) {
                    var largest,
                        differentSize = false,
                        size = 0;
                    elements.forEach(function(el, index) {
                        var rect = el.getBoundingClientRect();

var _size = rect.height + rect.width;

if (index > 0 && Math.abs(_size - size) > 200) {
                            differentSize = true;
                        }

if (_size - 200 > size) {
                            largest = el;
                            size = _size;
                        }
                    });
                    return differentSize && largest;
                }

function getCommonSelector(elements) {
                    var tags = {};
                    elements.forEach(function(el) {
                        if (el.clientHeight === 0) return;
                        if (tags[el.nodeName]) tags[el.nodeName].push(el);
                        else tags[el.nodeName] = [el];
                    });
                    var maxCount = 0,
                        tagName = "",
                        commonClasses = [],
                        classStr = "";
                    Object.keys(tags).forEach(function(tag) {
                        if (tags[tag].length > maxCount) {
                            maxCount = tags[tag].length;
                            tagName = tag;
                            tags[tag].forEach(function(el) {
                                var classList = Array.from(el.classList);

if (commonClasses.length) {
                                    commonClasses = commonClasses.filter(function(className) {
                                        return classList.includes(className);
                                    });
                                } else {
                                    commonClasses = classList;
                                }
                            });
                        }
                    });

if (commonClasses.length) {
                        classStr = commonClasses.reduce(function(acc, val) {
                            return isNaN(val[0]) ? acc + "." + val : acc;
                        }, "");
                    }

return tagName + classStr;
                }

function search() {
                    var target =
                        arguments.length > 0 && arguments[0] !== undefined ?
                        arguments[0] :
                        document.body;
                    var children = Array.from(target.children);
                    children = filterTags(children);
                    children = filterMaxCurrency(children);
                    if (children.length === 0) return false;
                    else if (children.length === 1) return search(children[0]);
                    var largestElement = getLargerElement(children);
                    return largestElement ?
                        search(largestElement) :
                        Object(_medv_finder__WEBPACK_IMPORTED_MODULE_0__["finder"])(
                            target
                        ) +
                        " " +
                        getCommonSelector(children);
                }

var cssSelector = search();
                console.log("Selector:", cssSelector);
                console.dir(document.querySelectorAll(cssSelector));

// global:
                page_products_selector = cssSelector;

/***/
            },

/******/
        }
    );
}

function create_addtc_buttons(selector) {
    let prods = document.querySelectorAll(selector);
    for (let prod in prods) {
        let temp_item = prods[prod];
        let temp_item_height = temp_item.offsetHeight;
        let temp_item_position = window
            .getComputedStyle(temp_item, null)
            .getPropertyValue("position");

// search for url that takes us to items's product page and append ".json"
        let data_url = create_data_finding_url(selector, prod); // done

// create addtc button
 let add_btn = document.createElement("button");
 add_btn.innerHTML = `<a></a>`;
 add_btn.firstChild.setAttribute("tw-ref", data_url);
 add_btn.style.backgroundColor = "white";
 add_btn.style.textColor = "black";
 add_btn.style.borderRadius = "50%";
 add_btn.style.borderColor = "black";
 add_btn.style.boxShadow = "1px 1px 9px 1px #000000";
 add_btn.style.height = "45px";
 add_btn.style.width = "45px";

// append button to item
        temp_item.appendChild(add_btn);

// on any button click
 add_btn.firstChild.onclick = function() {
 add_btn.innerHTML = `<a></a>`;
 // get product's json data from product page
 let data = Get(data_url);
 setTimeout(function() {
 // sort through product data for variant id and then trigger addtc
 find_and_add_product(data);
 }, 1000);
 setTimeout(function() {
 add_btn.innerHTML = `<a></a>`;
 }, 1800);
 };
 }
}

// given a product, finds the url for the JSON representation of the product page
function create_data_finding_url(selector, item_num) {
    let prod = document.querySelectorAll(selector)[item_num];
    let prod_str = prod.innerHTML;
    let href;

let re = /href=".+"/gi;
    if (re.test(prod_str) == true) {
        href = prod_str.match(re)[0];
        if (href.indexOf(" ") != -1) {
            href = href.substring(0, href.indexOf(" "));
        }
    }

// removes gibberish from url:
    href = href.substring(href.indexOf('"') + 1, href.lastIndexOf('"'));

if (href.indexOf(".co.") != -1) {
        href = href.substring(href.indexOf("/"), href.length);
    }

if (href.indexOf("?") != -1) {
        href = href.substring(0, href.indexOf("?"));
    }

href = href + ".json";
    return href;
}

// sort through product data for variant id and then trigger addtc
function find_and_add_product(json_str) {
    json_data = JSON.parse(json_str);
    let variant_id = json_data["product"]["variants"][0]["id"];

// cart is initialized and permalink works
    if (document.cookie.indexOf("cart=") != -1) {
        let prod_chain = "/cart/" + variant_id + ":1";

// check for other previous cart items
        let prev_item_chain = find_prev_cart_data();

// append previous cart items to our addtc url
        if (prev_item_chain.length > 1) {
            prod_chain = prod_chain + "," + prev_item_chain;
        }

// add all previous and new items in 1 request
        console.log(prod_chain);

Get(prod_chain);

location.reload();
    }
    // cart not initialized, must use form instead of permalink and open new tab
    // only for the first addtc - after this the cart is initiated
    else {
        let form_wrap = document.createElement("div");
        form_wrap.innerHTML =
            `
        
            
            
            
         
        `;
        form_wrap.style.display = "none";
        document.body.appendChild(form_wrap);

sessionStorage.setItem("tw_cart_init", "YES");
        document.getElementById("tw-submit").click();
    }
}

// check for other previous cart items and add them to our addtc url
function find_prev_cart_data() {
    let cart = Get("/cart.json");
    let variant_ids_pre;
    let variant_ids_final = [];
    let quantities_final = [];
    let re = /variant_id":[0-9]*/gi;
    let re2 = /quantity":[0-9]*/gi;
    if (re.test(cart) == true) {
        variant_ids_pre = cart.match(re);
        quantities_final = cart.match(re2);
    }

// remove "variant_id":" from each list item
    if (variant_ids_pre) {
        for (v_id in variant_ids_pre) {
            variant_ids_final.push(
                variant_ids_pre[v_id].substring(12, variant_ids_pre[v_id].length) +
                ":" +
                quantities_final[v_id].substring(10, quantities_final[v_id].length)
            );
        }
    }

// return string version of our addtc url pattern
    return variant_ids_final.join();
}

// run script:

init_icon_cdn();

// find and store page_products_selector:
product_finder();

create_addtc_buttons(page_products_selector);

Overview

Quick add to cart makes the client shopping experience faster and better! This feature creates a "add to cart" button on top of every product you have! No configuration needed and easy to use.