Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <header class="section-header mb-0 text-center">
- <h1>{{ page.title }}</h1>
- <hr class="hr--small">
- </header>
- <div class="grid">
- <div class="grid__item large--four-fifths push--large--one-tenth">
- <div class="rte rte--nomargin rte--indented-images">
- {{ page.content }}
- </div>
- </div>
- </div>
- <!-- Start of order form table -->
- <table>
- <!-- Button to hide images to clean up form -->
- <button type="button" class="btn--small hide-images">Hide Images</button>
- <!-- Form Headers -->
- <tr>
- <th class="image-header">Image</th>
- <th class="sku-header">SKU</th>
- <th class="product-header">Product</th>
- <th class="quantity-header">Quantity</th>
- <th class="price-header">Item Price</th>
- <th class="subtotal-header">Subtotal</th>
- </tr>
- {% assign counter = 0 %}
- {% for product in collections['quick-order'].products %}
- {% for variant in product.variants %}
- {% assign outer_forloop = forloop %}
- {% assign current_variant = product.selected_or_first_available_variant %}
- <tr class="row">
- <!-- Image Column -->
- <td class="product-images">
- <img alt="{{image.alt}}" src="{{ product.featured_image | product_img_url}}">
- </td>
- <!--SKU Column -->
- <td class="sku">
- {{ variant.sku }}
- </td>
- <!-- Title Column -->
- <td class="product-title">
- <a class="text-link" href="{{ product.url }}" target="_blank">{{ product.title }}</a>
- <!--Don't display variant title if there's only one option-->
- {% assign hide_default_title = false %}
- {% if variant.title contains 'Default' %}
- {% assign hide_default_title = true %}
- {% endif %}
- {% if hide_default_title %}{% else %}<div class="variant-title">{{ variant.title }}</div>{% endif %}
- </td>
- <!-- Product Qty Textboxes -->
- {% assign counter = counter | plus: 1 %}
- <td class="quantity" class="input">
- <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">
- </td>
- <!-- Item Price -->
- <td class="price">
- {{ variant.price | money }}
- </td>
- <!-- Sub Total -->
- <td class="subtotal">$<span>0</span></td>
- </tr>
- {% endfor %}
- {% endfor %}
- </table>
- <!-- Product and Price Total -->
- <div class="order-form-totals">
- <div class="product_total">
- <strong>Product Total:</strong> <span class="product-total-amount">0</span>
- </div>
- <div class="order_total">
- <strong>Order Total:</strong> <span class="order-total-amount">$<span>0</span></span>
- </div>
- <div>
- <input type="submit" value="Add to Cart" class="btn" id="add-items" />
- </div>
- </div>
- <script>
- $(document).ready(function () {
- //Start with an empty array of items
- Shopify.queue = [];
- //Watch for all changes on quantity inputs
- $('.quantity input').on('input',function() {
- //Set an initial flag for a new item
- var newItem = true;
- //Declare product property variables
- var price = $(this).attr('data-variant-price');
- var quantity = parseInt($(this).val(), 10) || 0;
- var variant = $(this).attr('data-variant');
- var totalQuantity = $('.product-total-amount');
- var totalPrice = $('.order-total-amount span');
- //Function to update the subtotal price, total item quantity, and total price
- var totalQuantityCount = 0;
- var totalPriceAmount = 0;
- function updateTotals($element, prc, qty) {
- //Traverse DOM to find subtotal field
- var $subtotal = $($element).parent().siblings('.subtotal').find('span')
- //Update subtotal column
- $subtotal.html((price * quantity).toFixed(2))
- //Update total quantity, and total order price elements
- for (var index in Shopify.queue) {
- totalQuantityCount += Shopify.queue[index].quantity;
- totalPriceAmount += Shopify.queue[index].quantity * Shopify.queue[index].price;
- }
- totalQuantity.html(totalQuantityCount);
- totalPrice.html(totalPriceAmount.toFixed(2));
- }
- //Check the queue and add items
- //If queue is empty, add the item and update totals
- if(Shopify.queue.length <= 0) {
- Shopify.queue.push( {
- variantId: variant,
- quantity: quantity,
- price: price
- });
- updateTotals($(this), price, quantity);
- }
- //If queue contains items, check to see if the item exists already
- //If item exists, update quantity values, totals, then exit
- else if (Shopify.queue.length > 0) {
- for (var index in Shopify.queue) {
- if(parseInt(Shopify.queue[index].variantId) == variant) {
- Shopify.queue[index].quantity = quantity;
- newItem = false;
- updateTotals($(this), price, quantity);
- return;
- }
- }
- //If item doesn't exist in queue, add item to queue and update totals
- if(newItem == true) {
- Shopify.queue.push({
- variantId: variant,
- quantity: quantity,
- price: price
- });
- updateTotals($(this), price, quantity);
- }
- }
- });
- //Add item to cart AJAX request function
- Shopify.addItem = function(variant,qty,callback) {
- var params = {
- quantity: qty,
- id: variant
- };
- $.ajax({
- type: 'POST',
- url: '/cart/add.js',
- dataType: 'json',
- data: params,
- success: function(){
- if(typeof callback === 'function'){
- callback();
- }
- },
- error: function(request){
- alert(request.responseJSON.description + ' Please try again');
- $('#add-items').val('Add to cart');
- }
- });
- };
- Shopify.moveAlong = function($element) {
- // If we still have requests in the queue, let's process the next one.
- if (Shopify.queue.length) {
- var request = Shopify.queue.shift();
- Shopify.addItem(request.variantId, request.quantity, Shopify.moveAlong);
- }
- // If the queue is empty, redirect to the cart page.
- else {
- document.location.href = '/cart';
- }
- };
- //Run when clicking Add to Cart
- $("#add-items").click(function(e) {
- e.preventDefault();
- Shopify.moveAlong($(this));
- $(this).val('Adding items...');
- });
- //Function to hide image column if user chooses
- $('.hide-images').click(function() {
- $('.image-header, .product-images').toggle();
- if ($('.hide-images').text() === 'Hide Images') {
- $('.hide-images').text('Show Images');
- } else $(this).text('Hide Images');
- });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement