Advertisement
Guest User

Untitled

a guest
May 23rd, 2018
110
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.07 KB | None | 0 0
  1.             <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm--{{ section.id }}" class="product-single__form">
  2.               {% unless product.has_only_default_variant %}
  3.                 {% for option in product.options_with_values %}
  4.                   <div class="radio-wrapper js product-form__item">
  5.                     <label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
  6.                      for="ProductSelect-option-{{ forloop.index0 }}">
  7.                       {{ option.name | escape }}
  8.                     </label>
  9.                     {% if section.settings.product_selector == 'radio' %}
  10.                       <fieldset class="single-option-radio"
  11.                        name="{{ option.name | handleize }}"
  12.                        id="ProductSelect-option-{{ forloop.index0 }}">
  13.                         {% assign option_index = forloop.index %}
  14.                         {% for value in option.values %}
  15.                           {% assign variant_label_state = true %}
  16.                           {% if product.options.size == 1 %}
  17.                             {% unless product.variants[forloop.index0].available  %}
  18.                               {% assign variant_label_state = false %}
  19.                             {% endunless %}
  20.                           {% endif %}
  21.                           <input type="radio"
  22.                            {% if option.selected_value == value %} checked="checked"{% endif %}
  23.                            {% unless variant_label_state %} disabled="disabled"{% endunless %}
  24.                            value="{{ value | escape }}"
  25.                            data-index="option{{ option_index }}"
  26.                            name="{{ option.name | handleize }}"
  27.                            class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
  28.                            id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
  29.                           <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
  30.                         {% endfor %}
  31.                       </fieldset>
  32.                     {% else %}
  33.                       <select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
  34.                         {% for value in option.values %}
  35.                           <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
  36.                         {% endfor %}
  37.                       </select>
  38.                     {% endif %}
  39.                   </div>
  40.                 {% endfor %}
  41.               {% endunless %}
  42.  
  43.               <select name="id" id="ProductSelect" class="product-single__variants no-js">
  44.                 {% for variant in product.variants %}
  45.                   {% if variant.available %}
  46.                     <option {% if variant == product.selected_or_first_available_variant %}
  47.                      selected="selected" {% endif %}
  48.                      data-sku="{{ variant.sku }}"
  49.                      value="{{ variant.id }}">
  50.                       {{ variant.title }} - {{ variant.price | money_with_currency }}
  51.                     </option>
  52.                   {% else %}
  53.                     <option disabled="disabled">
  54.                       {{ variant.title }} - {{ 'products.product.sold_out' | t }}
  55.                     </option>
  56.                   {% endif %}
  57.                 {% endfor %}
  58.               </select>
  59.  
  60.               {% if section.settings.quantity_enabled %}
  61.               <div class="product-single__quantity">
  62.                 <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
  63.                 <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
  64.               </div>
  65.               {% endif %}
  66.  
  67.               <div class="product-single__add-to-cart">
  68.                 <button style="border-radius:7px" type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} add-to-cart--full-width{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
  69.                   <span class="add-to-cart-text">
  70.                     {% if current_variant.available %}
  71.                       {{ 'products.product.add_to_cart' | t }}
  72.                     {% else %}
  73.                       {{ 'products.product.sold_out' | t }}
  74.                     {% endif %}
  75.                   </span>
  76.                 </button>
  77.                
  78.                 <br>
  79.                 <br>
  80.                 <img src="https://cdn.shopify.com/s/files/1/0002/6938/5737/files/product_desc_below_abover.png?12779137995016663574">
  81.                
  82.                
  83.               </div>
  84.             </form>
  85.            
  86. {% if product.tags contains 'special-order' %}          
  87.  
  88. <style>#progress_bar{margin-top:15px}.progressbar.progressbar{background:#ffe8e8;border:0px solid whitesmoke;height:11px}.progressbar.progressbar div{background:#d95350;height:11px}.progressbar.progressbar.active div{-webkit-animation:2s linear 0s normal none infinite running progress-bar-stripes;animation:2s linear 0s normal none infinite running progress-bar-stripes}.progress-striped.progressbar.progressbar div{background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));background-size:40px 40px}.items-count{margin-top:0px;margin-bottom:0px}.count{color:#a94442;padding:1px}.items-count p{padding-bottom:5px;margin:0;text-transform:uppercase;font-weight:700;text-align:center;font-family:"Open Sans",Arial,sans-serif}.progressbar{position:relative;display:block;background-color:#ca0000;border:1px solid #ddd;margin-bottom:15px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1)}.progressbar > div{background-color:#ca0000;width:0;margin-bottom:0;height:15px}.progressbar > div.less-than-ten{background-color:#ca0000 !important}#clock-ticker{display:block;margin-bottom:15px}#clock-ticker .block{position:relative;color:#000;font-weight:bold;float:left;text-align:center;width:25%}#clock-ticker .block .flip-top{width:88px;height:39px;line-height:40px;font-size:40px;text-align:center}#clock-ticker .block .label,span.flip-top{color:#000;font-weight:bold;text-align:center;font-size:14px;text-transform:uppercase;width:88px;line-height:25px;font-family:"Open Sans",Arial,sans-serif}</style>
  89.  
  90.  
  91. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  92.  
  93. <script type="text/javascript">
  94. function randomIntFromInterval(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}
  95.  
  96. // Settings are here
  97. var total_items = 50;
  98. var d = new Date();
  99. var min_items_left = 12;
  100. var max_items_left = 20;
  101. var remaining_items = randomIntFromInterval(min_items_left, max_items_left);
  102. var min_of_remaining_items = 1;
  103. var decrease_after = 1.7;
  104. var decrease_after_first_item = 0.17;
  105.  
  106. // Davy Jones' Locker
  107. (function($){$.fn.progressbar=function(){var a="<p>Hurry! Only <span class='count'>"+remaining_items+"</span> left in stock.</p>"+"<div class='progressbar'><div style='width:100%'></div></div>";this.addClass('items-count');this.html(a+this.html());updateMeter(this);var b=this;setTimeout(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after_first_item);setInterval(function(){remaining_items--;if(remaining_items<min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$('.count').css('background-color','#CE0201');$('.count').css('color','#fff');setTimeout(function(){$('.count').css('background-color','#fff');$('.count').css('color','#CE0201')},1000*60*0.03);b.find(".count").text(remaining_items);updateMeter(b)},1000*60*decrease_after)};function updateMeter(a){var b=100*remaining_items/total_items;if(remaining_items<10){a.find('.progressbar div:first').addClass('less-than-ten')}a.find('.progressbar').addClass('active progress-striped');setTimeout(function(){myanimate(a.find('.progressbar div:first'),b);a.find('.progressbar').removeClass('active progress-striped')},1000)}}(jQuery));function myanimate(a,b){var c=0;var d=parseInt(a.closest('.progressbar').css('width'));var e=Math.floor(100*parseInt(a.css('width'))/d);if(e>b){c=e}function frame(){if(e>b){c--}else{c++}a.css('width',c+'%');if(c==b||c<=0||c>=100)clearInterval(f)}var f=setInterval(frame,40)} jQuery.noConflict()(function($){$(document).ready(function(){$("#progress_bar").progressbar();var tag="ctdn-12-12".match(/\d+/g);var hour=14;var theDaysBox=$("#numdays");var theHoursBox=$("#numhours");var theMinsBox=$("#nummins");var theSecsBox=$("#numsecs");var d=new Date();var n=d.getDay();var date=1;var gg=0;var hh=0;var ii=0;var nsec=0-d.getSeconds();if(nsec<0){nsec=60-d.getSeconds();gg=1}var nmin=0-d.getMinutes()-gg;if(nmin<0){nmin=60-d.getMinutes()-gg;hh=1}var nhrs=14-d.getHours()-hh;if(nhrs<0){nhrs=38-d.getHours()-hh;ii=1}var ndat=date-1;if(ndat<0){var mmon=d.getMonth();ndat=30+date-d.getDate()-ii}theSecsBox.html(nsec);theMinsBox.html(nmin);theHoursBox.html(nhrs);theDaysBox.html(ndat);var refreshId=setInterval(function(){var e=theSecsBox.text();var a=theMinsBox.text();var c=theHoursBox.text();var b=theDaysBox.text();if(e==0&&a==0&&c==0&&b==0){}else{if(e==0&&a==0&&c==0){theDaysBox.html(b-1);theHoursBox.html("23");theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0&&a==0){theHoursBox.html(c-1);theMinsBox.html("59");theSecsBox.html("59")}else{if(e==0){theMinsBox.html(a-1);theSecsBox.html("59")}else{theSecsBox.html(e-1)}}}}},1000);});});</script>
  108. <div class="items-count" id="progress_bar"></div><div id="clock-ticker" class="clearfix"><div class="block"><span class="flip-top" id="numdays">0</span><br><span class="label">Days</span></div><div class="block"><span class="flip-top" id="numhours">1</span><br><span class="label">Hours</span></div><div class="block"><span class="flip-top" id="nummins">23</span><br><span class="label">Minutes</span></div><div class="block"><span class="flip-top" id="numsecs">36</span><br><span class="label">Seconds</span></div>
  109. </div>
  110.            
  111. {% endif %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement