Customify Infinity

<div id="left-side"> {{ customify-widget }}</div>
<div id="right-side">
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <link itemprop="availability" href="http://schema.org/InStock">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
        <h1 itemprop="name">{{ product.title }}</h1> {% assign form_grid = false %} {% if form_method == "standard" or product.variants.size == 1 %}
        <div class="customify-form-row"> <span id="ProductPrice" class="customify-price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}"> <span id="variant_price" >{{ product.price | money }}</span> </span>{% if product.compare_at_price > product.price %} <span id="PriceA11y" class="visually-hidden">Price</span> <s id="compare_price" class="product-single__sale-price"> {{ product.compare_at_price_max | money }} </s> {% endif %}</div>
        <form name="customify_form" id="customify_form" action="/cart/add" method="post" enctype="multipart/form-data">
            <input type="file" id="customify-upload" style="display: none" />
            <input type="hidden" id="customify_id" name="properties[customify_id]" /> {% if product.variants.size == 1 %}
            <input type="hidden" value="{{ product.variants.first.id }}" name="id" />{% else %}
            <select name="id" id="productSelect" class="product-single__variants"> {% for variant in product.variants %} {% if variant.available %}
                <option data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>{% else %}
                <option disabled="disabled"> {{ variant.title }} - Sold Out</option> {% endif %} {% endfor %} </select>{% endif %}{{ product_color_grid }}{{ customify_text_widget }}
            <div class="customify-form-row">
            <div id="infiniteoptions-container"></div>
              <script type="text/javascript">  window.productJSON = window.productJSON || {{ product | json }};</script>
            </div>
            <div class="customify-form-row">
                <label for="Quantity">Quantity</label>
                <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>
            <div class="customify-form-row">
                <label id="note-label" for="note">Note</label>
                <textarea id="note" name="properties[customify_note]"></textarea>
            </div>
            <div class="customify-form-row">
                <button id="back-product" style="display: none; margin-right: 10px; " type="button" class="btn"> <span>&laquo; BACK</span> </button>
                <button type="submit" name="add" id="customify-addtocart" class="btn"> <span id="AddToCartText">ADD TO CART</span> </button>
            </div>
        </form>
        <div class="customify-form-row"> {{ product.description }}</div> {% else %} {% assign form_grid = true %}
        <div id="customify-variant-table">
            <input type="file" id="customify-upload" style="display: none" />{{ product_color_grid }}{{ customify_text_widget }}
            <table width="100%" border="0" cellspacing="0" cellpadding="0" name="id" style="display:block;!important">
                <tbody>
                    <tr class="{% cycle 'rx','ry' %}">{% for option in product.options %}
                        <th>{{ option }}</th> {% endfor %}
                        <th scope="col" class="center">Price</th>
                        <th scope="col" style="width: 80px;" class="textright">Quantity</th>
                    </tr> {% for variant in product.variants %} {% if variant.available %}
                    <tr class="{% cycle 'xx','yy' %}" id="variant_tr-{{ variant.id }}"> {% for option in product.options %}
                        <td class='text'>{{ variant.options[forloop.index0] }}</td> {% endfor %}
                        <td value="{{ variant.id }}" title="" class="center">{{ variant.price | money }} {% if variant.compare_at_price > variant.price %} <del>{{ variant.compare_at_price | money }}</del>{% endif %}</td>
                        <td> {% if variant.available %}
                            <input data-idx="{{ variant.id }}" class='qty_input' type="text" value="0" name="qty_{{variant.id}}" id="qty_{{ variant.id}}" /> {% else %} Sold {% endif %}</td>
                    </tr> {% endif %} {% endfor %}</tbody>
            </table>
            <div class="msg-info" style="display: none; padding: 10px 0px;"></div>
        </div>
        <div class="customify-form-row">
            <button id="back-product" style="display: none; margin-right: 10px; " type="button" class="btn"> <span>&laquo; BACK</span> </button>
            <button type="submit" name="add" id="customify-addtocart" class="btn"> <span id="AddToCartText">ADD TO CART</span> </button>
        </div> {% endif %}</div>
</div>{% if form_grid %}
<br />
<div class="customify-form-row"> {{ product.description }}</div>
<script type="text/javascript">
    var the_form = $("#customify-variant-table");
    success_div = the_form.find(".msg-info");

    function add_to_cart_mass(t) {
        Shopify.queue = [];
        var i = 0;
        the_form.find('.qty_input').each(function() {
            idx = $(this).attr('data-idx');
            qty = $(this).val() * 1;
            if (qty > 0) {
                Shopify.queue.push({
                    variant_id: idx,
                    quantity: qty,
                    properties: {
                        'customify_id': t
                    }
                });
                i++;
            }
        });
        if (i > 0) Shopify.moveAlong();
    }
    Shopify.moveAlong = function() {
        if (Shopify.queue.length) {
            $('#customify-addtocart').attr('disable', true).html("<span id='AddToCartText'>Processing..</span>");
            var request = Shopify.queue.shift();
            Shopify.addItem(request.variant_id, request.quantity, request.properties, Shopify.moveAlong);
        } else {
            success_div.html('<span>Item(s) Added to the Cart!</span> <a href="/cart">View cart</a>').fadeIn(300).delay(7000).fadeOut(300);
            $('#customify-addtocart').attr('disable', false).html("<span id='AddToCartText'>" + add_to_cart_text + "</span>");
            window.location = "/cart"
        }
    };
    Shopify.addItem = function(id, qty, properties, callback) {
        var params = {
            quantity: qty,
            id: id
        };
        if (properties != false) {
            params.properties = properties;
        }
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            dataType: 'json',
            data: params,
            success: function() {
                if (typeof callback === 'function') {
                    callback();
                }
            },
            error: function() {}
        });
    }
</script> {% else %} {{ "option_selection.js" | shopify_asset_url | script_tag }}
<script type="text/javascript">
    $(document).ready(function() {
        function getUrlParams(e, n) {
            n || (n = window.location.href), e = e.replace(/[\[\]]/g, "\$&");
            var r = new RegExp("[?&]" + e + "(=([^&#]*)|&|#|$)"),
                a = r.exec(n);
            return a ? a[2] ? decodeURIComponent(a[2].replace(/\+/g, " ")) : "" : null
        }
        var variant_id = getUrlParams("variant");
        $("select[name='id']").val(variant_id);
        console.log("script proceed");
        var selectCallback2 = function(variant, selector) {
            $("#variant_price").html(Shopify.formatMoney(variant.price, "{{ shop.money_with_currency_format }}"));
            $("#compare_price").html(Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_with_currency_format }}"));
            if (variant.inventory_management == "shopify" && variant.inventory_policy == "deny" && variant.old_inventory_quantity == 0) {
                $("#customify-addtocart").prop("disabled", true);
                $("#recreation-button").hide();
                $("#AddToCartText").text("SOLD OUT");
            } else {
                $("#recreation-button").show();
                $("#customify-addtocart").prop("disabled", false);
            }
        };
        jQuery(function($) {
            new Shopify.OptionSelectors("productSelect", {
                product:  {{ product | json }},
                onVariantSelected: selectCallback2,
                enableHistoryState: true
            }); {{ %
                if product.options.size == 1 and product.options.first != "Title" %
    }}$(".selector-wrapper:eq(0)").prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>'); {{ % endif %
            }} {{ %
                if product.variants.size == 1 and product.variants.first.title contains "Default" %
                                           }}
            $(".selector-wrapper").hide(); {{ % endif %
            }}
        });
    });

    function add_to_cart(t) {
        document.getElementById("customify_id").value = t;
        document.getElementById("customify_form").submit();
    }
    $(window).on("load", function() {
        $("#customify_form div").removeClass("selectreplace");
    });
</script> {% endif %}
<script type="text/javascript">
    $(document).ready(function() {
        if ($("#main-container").parents(".customify-back").length > 0) {
            $("#back-product").show().attr("onclick", "window.location='{{ product.url }}'");
        }
    });
</script>