Advertisement
Guest User

Untitled

a guest
Jun 25th, 2019
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.67 KB | None | 0 0
  1. <header class="section-header mb-0 text-center">
  2. <h1>{{ page.title }}</h1>
  3. <hr class="hr--small">
  4. </header>
  5.  
  6. <div class="grid">
  7. <div class="grid__item large--four-fifths push--large--one-tenth">
  8. <div class="rte rte--nomargin rte--indented-images">
  9. {{ page.content }}
  10. </div>
  11. </div>
  12. </div>
  13.  
  14. <!-- Start of order form table -->
  15. <table>
  16.  
  17. <!-- Button to hide images to clean up form -->
  18. <button type="button" class="btn--small hide-images">Hide Images</button>
  19.  
  20. <!-- Form Headers -->
  21. <tr>
  22. <th class="image-header">Image</th>
  23. <th class="sku-header">SKU</th>
  24. <th class="product-header">Product</th>
  25. <th class="quantity-header">Quantity</th>
  26. <th class="price-header">Item Price</th>
  27. <th class="subtotal-header">Subtotal</th>
  28. </tr>
  29.  
  30. {% assign counter = 0 %}
  31.  
  32. {% for product in collections['quick-order'].products %}
  33. {% for variant in product.variants %}
  34.  
  35. {% assign outer_forloop = forloop %}
  36. {% assign current_variant = product.selected_or_first_available_variant %}
  37.  
  38. <tr class="row">
  39.  
  40. <!-- Image Column -->
  41. <td class="product-images">
  42. <img alt="{{image.alt}}" src="{{ product.featured_image | product_img_url}}">
  43. </td>
  44.  
  45. <!--SKU Column -->
  46. <td class="sku">
  47. {{ variant.sku }}
  48. </td>
  49.  
  50. <!-- Title Column -->
  51. <td class="product-title">
  52. <a class="text-link" href="{{ product.url }}" target="_blank">{{ product.title }}</a>
  53.  
  54. <!--Don't display variant title if there's only one option-->
  55. {% assign hide_default_title = false %}
  56. {% if variant.title contains 'Default' %}
  57. {% assign hide_default_title = true %}
  58. {% endif %}
  59.  
  60. {% if hide_default_title %}{% else %}<div class="variant-title">{{ variant.title }}</div>{% endif %}
  61.  
  62. </td>
  63.  
  64. <!-- Product Qty Textboxes -->
  65.  
  66. {% assign counter = counter | plus: 1 %}
  67.  
  68.  
  69. <td class="quantity" class="input">
  70.  
  71. <input type="number" class="order-quantity" data-variant-price="{{ variant.price | money_without_currency}}" data-variant="{{ variant.id }}" id="quantity-{{ counter }}" name="quantity" pattern="[0-9]*" value="0" min="0">
  72. </td>
  73.  
  74. <!-- Item Price -->
  75. <td class="price">
  76. {{ variant.price | money }}
  77. </td>
  78.  
  79. <!-- Sub Total -->
  80. <td class="subtotal">$<span>0</span></td>
  81.  
  82. </tr>
  83.  
  84. {% endfor %}
  85.  
  86. {% endfor %}
  87.  
  88. </table>
  89.  
  90. <!-- Product and Price Total -->
  91. <div class="order-form-totals">
  92. <div class="product_total">
  93. <strong>Product Total:</strong> <span class="product-total-amount">0</span>
  94. </div>
  95.  
  96. <div class="order_total">
  97. <strong>Order Total:</strong> <span class="order-total-amount">$<span>0</span></span>
  98. </div>
  99.  
  100. <div>
  101. <input type="submit" value="Add to Cart" class="btn" id="add-items" />
  102. </div>
  103. </div>
  104.  
  105.  
  106. <script>
  107.  
  108. $(document).ready(function () {
  109.  
  110. //Start with an empty array of items
  111. Shopify.queue = [];
  112.  
  113.  
  114. //Watch for all changes on quantity inputs
  115. $('.quantity input').on('input',function() {
  116.  
  117. //Set an initial flag for a new item
  118. var newItem = true;
  119.  
  120. //Declare product property variables
  121. var price = $(this).attr('data-variant-price');
  122. var quantity = parseInt($(this).val(), 10) || 0;
  123. var variant = $(this).attr('data-variant');
  124. var totalQuantity = $('.product-total-amount');
  125. var totalPrice = $('.order-total-amount span');
  126.  
  127.  
  128. //Function to update the subtotal price, total item quantity, and total price
  129. var totalQuantityCount = 0;
  130. var totalPriceAmount = 0;
  131.  
  132. function updateTotals($element, prc, qty) {
  133. //Traverse DOM to find subtotal field
  134. var $subtotal = $($element).parent().siblings('.subtotal').find('span')
  135. //Update subtotal column
  136. $subtotal.html((price * quantity).toFixed(2))
  137.  
  138. //Update total quantity, and total order price elements
  139. for (var index in Shopify.queue) {
  140. totalQuantityCount += Shopify.queue[index].quantity;
  141. totalPriceAmount += Shopify.queue[index].quantity * Shopify.queue[index].price;
  142. }
  143. totalQuantity.html(totalQuantityCount);
  144. totalPrice.html(totalPriceAmount.toFixed(2));
  145. }
  146.  
  147.  
  148. //Check the queue and add items
  149. //If queue is empty, add the item and update totals
  150. if(Shopify.queue.length <= 0) {
  151. Shopify.queue.push( {
  152. variantId: variant,
  153. quantity: quantity,
  154. price: price
  155. });
  156. updateTotals($(this), price, quantity);
  157. }
  158. //If queue contains items, check to see if the item exists already
  159. //If item exists, update quantity values, totals, then exit
  160. else if (Shopify.queue.length > 0) {
  161. for (var index in Shopify.queue) {
  162. if(parseInt(Shopify.queue[index].variantId) == variant) {
  163. Shopify.queue[index].quantity = quantity;
  164. newItem = false;
  165. updateTotals($(this), price, quantity);
  166. return;
  167. }
  168. }
  169. //If item doesn't exist in queue, add item to queue and update totals
  170. if(newItem == true) {
  171. Shopify.queue.push({
  172. variantId: variant,
  173. quantity: quantity,
  174. price: price
  175. });
  176. updateTotals($(this), price, quantity);
  177. }
  178. }
  179.  
  180. });
  181.  
  182. //Add item to cart AJAX request function
  183. Shopify.addItem = function(variant,qty,callback) {
  184. var params = {
  185. quantity: qty,
  186. id: variant
  187. };
  188. $.ajax({
  189. type: 'POST',
  190. url: '/cart/add.js',
  191. dataType: 'json',
  192. data: params,
  193. success: function(){
  194. if(typeof callback === 'function'){
  195. callback();
  196. }
  197. },
  198. error: function(request){
  199. alert(request.responseJSON.description + ' Please try again');
  200. $('#add-items').val('Add to cart');
  201. }
  202. });
  203. };
  204.  
  205. Shopify.moveAlong = function($element) {
  206.  
  207. // If we still have requests in the queue, let's process the next one.
  208. if (Shopify.queue.length) {
  209. var request = Shopify.queue.shift();
  210. Shopify.addItem(request.variantId, request.quantity, Shopify.moveAlong);
  211.  
  212. }
  213. // If the queue is empty, redirect to the cart page.
  214. else {
  215. document.location.href = '/cart';
  216. }
  217. };
  218.  
  219. //Run when clicking Add to Cart
  220. $("#add-items").click(function(e) {
  221. e.preventDefault();
  222. Shopify.moveAlong($(this));
  223. $(this).val('Adding items...');
  224. });
  225.  
  226. //Function to hide image column if user chooses
  227. $('.hide-images').click(function() {
  228. $('.image-header, .product-images').toggle();
  229. if ($('.hide-images').text() === 'Hide Images') {
  230. $('.hide-images').text('Show Images');
  231. } else $(this).text('Hide Images');
  232.  
  233. });
  234. });
  235.  
  236. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement