Advertisement
customfiy

hulk option with customify

Feb 17th, 2019
155
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.52 KB | None | 0 0
  1. <div id="left-side"> {{ customify-widget }}</div>
  2. <div id="right-side">
  3. <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  4. <link itemprop="availability" href="http://schema.org/InStock">
  5. <meta itemprop="priceCurrency" content="{{ shop.currency }}">
  6. <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
  7. <h1 itemprop="name">{{ product.title }}</h1> {% assign form_grid = false %} {% if form_method == "standard" or product.variants.size == 1 %}
  8. <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>
  9. <form name="customify_form" id="customify_form" action="/cart/add" method="post" enctype="multipart/form-data">
  10. <input type="file" id="customify-upload" style="display: none" />
  11. <input type="hidden" id="customify_id" name="properties[customify_id]" /> {% if product.variants.size == 1 %}
  12. <input type="hidden" value="{{ product.variants.first.id }}" name="id" />{% else %}
  13. <select name="id" id="productSelect" class="product-single__variants"> {% for variant in product.variants %} {% if variant.available %}
  14. <option data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>{% else %}
  15. <option disabled="disabled"> {{ variant.title }} - Sold Out</option> {% endif %} {% endfor %} </select>{% endif %}{{ product_color_grid }}{{ customify_text_widget }}
  16. <div class="customify-form-rown">
  17. {% include 'hulkcode_options' %}
  18. </div>
  19. <div class="customify-form-row">
  20. <label for="Quantity">Quantity</label>
  21. <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
  22. </div>
  23. <div class="customify-form-row">
  24. <label id="note-label" for="note">Note</label>
  25. <textarea id="note" name="properties[customify_note]"></textarea>
  26. </div>
  27. <div class="customify-form-row">
  28. <button id="back-product" style="display: none; margin-right: 10px; " type="button" class="btn"> <span>&laquo; BACK</span> </button>
  29. <button type="submit" name="add" id="customify-addtocart" class="btn"> <span id="AddToCartText">ADD TO CART</span> </button>
  30. </div>
  31. </form>
  32. <div class="customify-form-row"> {{ product.description }}</div> {% else %} {% assign form_grid = true %}
  33. <div id="customify-variant-table">
  34. <input type="file" id="customify-upload" style="display: none" />{{ product_color_grid }}{{ customify_text_widget }}
  35. <table width="100%" border="0" cellspacing="0" cellpadding="0" name="id" style="display:block;!important">
  36. <tbody>
  37. <tr class="{% cycle 'rx','ry' %}">{% for option in product.options %}
  38. <th>{{ option }}</th> {% endfor %}
  39. <th scope="col" class="center">Price</th>
  40. <th scope="col" style="width: 80px;" class="textright">Quantity</th>
  41. </tr> {% for variant in product.variants %} {% if variant.available %}
  42. <tr class="{% cycle 'xx','yy' %}" id="variant_tr-{{ variant.id }}"> {% for option in product.options %}
  43. <td class='text'>{{ variant.options[forloop.index0] }}</td> {% endfor %}
  44. <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>
  45. <td> {% if variant.available %}
  46. <input data-idx="{{ variant.id }}" class='qty_input' type="text" value="0" name="qty_{{variant.id}}" id="qty_{{ variant.id}}" /> {% else %} Sold {% endif %}</td>
  47. </tr> {% endif %} {% endfor %}</tbody>
  48. </table>
  49. <div class="msg-info" style="display: none; padding: 10px 0px;"></div>
  50. </div>
  51. <div class="customify-form-row">
  52. <button id="back-product" style="display: none; margin-right: 10px; " type="button" class="btn"> <span>&laquo; BACK</span> </button>
  53. <button type="submit" name="add" id="customify-addtocart" class="btn"> <span id="AddToCartText">ADD TO CART</span> </button>
  54. </div> {% endif %}</div>
  55. </div>{% if form_grid %}
  56. <br />
  57. <div class="customify-form-row"> {{ product.description }}</div>
  58. <script type="text/javascript">
  59. var the_form = $("#customify-variant-table");
  60. success_div = the_form.find(".msg-info");
  61.  
  62. function add_to_cart_mass(t) {
  63. Shopify.queue = [];
  64. var i = 0;
  65. the_form.find('.qty_input').each(function() {
  66. idx = $(this).attr('data-idx');
  67. qty = $(this).val() * 1;
  68. if (qty > 0) {
  69. Shopify.queue.push({
  70. variant_id: idx,
  71. quantity: qty,
  72. properties: {
  73. 'customify_id': t
  74. }
  75. });
  76. i++;
  77. }
  78. });
  79. if (i > 0) Shopify.moveAlong();
  80. }
  81. Shopify.moveAlong = function() {
  82. if (Shopify.queue.length) {
  83. $('#customify-addtocart').attr('disable', true).html("<span id='AddToCartText'>Processing..</span>");
  84. var request = Shopify.queue.shift();
  85. Shopify.addItem(request.variant_id, request.quantity, request.properties, Shopify.moveAlong);
  86. } else {
  87. success_div.html('<span>Item(s) Added to the Cart!</span> <a href="/cart">View cart</a>').fadeIn(300).delay(7000).fadeOut(300);
  88. $('#customify-addtocart').attr('disable', false).html("<span id='AddToCartText'>" + add_to_cart_text + "</span>");
  89. window.location = "/cart"
  90. }
  91. };
  92. Shopify.addItem = function(id, qty, properties, callback) {
  93. var params = {
  94. quantity: qty,
  95. id: id
  96. };
  97. if (properties != false) {
  98. params.properties = properties;
  99. }
  100. $.ajax({
  101. type: 'POST',
  102. url: '/cart/add.js',
  103. dataType: 'json',
  104. data: params,
  105. success: function() {
  106. if (typeof callback === 'function') {
  107. callback();
  108. }
  109. },
  110. error: function() {}
  111. });
  112. }
  113. </script> {% else %} {{ "option_selection.js" | shopify_asset_url | script_tag }}
  114. <script type="text/javascript">
  115. $(document).ready(function() {
  116. function getUrlParams(e, n) {
  117. n || (n = window.location.href), e = e.replace(/[\[\]]/g, "\$&");
  118. var r = new RegExp("[?&]" + e + "(=([^&#]*)|&|#|$)"),
  119. a = r.exec(n);
  120. return a ? a[2] ? decodeURIComponent(a[2].replace(/\+/g, " ")) : "" : null
  121. }
  122. var variant_id = getUrlParams("variant");
  123. $("select[name='id']").val(variant_id);
  124. console.log("script proceed");
  125. var selectCallback2 = function(variant, selector) {
  126. $("#variant_price").html(Shopify.formatMoney(variant.price, "{{ shop.money_with_currency_format }}"));
  127. $("#compare_price").html(Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_with_currency_format }}"));
  128. if (variant.inventory_management == "shopify" && variant.inventory_policy == "deny" && variant.old_inventory_quantity == 0) {
  129. $("#customify-addtocart").prop("disabled", true);
  130. $("#recreation-button").hide();
  131. $("#AddToCartText").text("SOLD OUT");
  132. } else {
  133. $("#recreation-button").show();
  134. $("#customify-addtocart").prop("disabled", false);
  135. }
  136. };
  137. jQuery(function($) {
  138. new Shopify.OptionSelectors("productSelect", {
  139. product: {{ product | json }},
  140. onVariantSelected: selectCallback2,
  141. enableHistoryState: true
  142. }); {{ %
  143. if product.options.size == 1 and product.options.first != "Title" %
  144. }}$(".selector-wrapper:eq(0)").prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>'); {{ % endif %
  145. }} {{ %
  146. if product.variants.size == 1 and product.variants.first.title contains "Default" %
  147. }}
  148. $(".selector-wrapper").hide(); {{ % endif %
  149. }}
  150. });
  151. });
  152.  
  153. function add_to_cart(t) {
  154. document.getElementById("customify_id").value = t;
  155. document.getElementById("customify_form").submit();
  156. }
  157. $(window).on("load", function() {
  158. $("#customify_form div").removeClass("selectreplace");
  159. });
  160. </script> {% endif %}
  161. <script type="text/javascript">
  162. $(document).ready(function() {
  163. if ($("#main-container").parents(".customify-back").length > 0) {
  164. $("#back-product").show().attr("onclick", "window.location='{{ product.url }}'");
  165. }
  166. });
  167. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement