customify new widget custom

<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" />
            {% 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">
                <label for="Quantity" class="cst_qty_label">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" class="cst_note_label" >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 cst_price_label">Price</th>
                        <th scope="col" style="width: 80px;" class="cst_qty_label 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>
<br />
<div class="customify-form-row"> {{ product.description }}</div>
{% unless form_grid %}
{{ "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").show(); {{ % endif %
            }}
        });
    });

    $(window).on("load", function() {
        $("#customify_form div").removeClass("selectreplace");
    });
</script> {% endunless %}
<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>