show_view

gistfile1.js

SpreeStore.module('Products.Show',function(Show, SpreeStore, Backbone,Marionette,$,_){
  Show.Product = Backbone.Marionette.ItemView.extend({
    tagName: 'div',
    className: 'product',
    template: "#product-template",

    events: {
      "click button": "addToCart",
      "click #product-quantity-list li.quantity-drop": "selectQuantity",
      "click #frequency-quantity-list li.quantity-drop": "selectFrequency",
      "click #product-quantity-amount": "toggleDrop",
      "click .background": "closeModal",
      "click .exe":"closeModal",
      "click .ingredients-nutrition": "openModal",
      "click #toggle-subscriptions": "toggleSubscriptions",
      "click #frequency-quantity-amount": "toggleFrequency"
    },
    
    toggleSubscriptions: function(e){
      var element = $(e.target);
      var isChecked = element.prop('checked');
      if(isChecked){
        // if checked, show the drop down
        $('#frequency-quantity-amount').show();
      } 
      else{
        //else hide the drop down
        $('#frequency-quantity-amount').hide();
        $('#frequency-quantity-list').hide();
      }
    },
    toggleFrequency:function(){
      $('#frequency-quantity-list').toggle();
    },

    selectFrequency:function(e){
      var element = $(e.target);
      
      $('#frequency-quantity-amount span').html(element.html());
      $('#frequency-quantity-list li').removeClass('selected');
      element.addClass('selected');

      $('#frequency-quantity-list').hide();
    },
    
    closeModal:function(){
      $('#modal').hide();
    },

    openModal: function(e){
      var element = $(e.target);
      var whichModal = element.attr('data-modal-type');
      
      if(whichModal === 'ingredients'){
        $('.ingredients-content').show();
        $('.nutrition-content').hide();
      }else{
        $('.ingredients-content').hide();
        $('.nutrition-content').show();
      }
      $('#modal').show();
    },

    onShow: function() {
      $('.pagination').hide();
      SpreeStore.noSidebar();
      window.scrollTo(0, 0);
    },

    toggleDrop:function(){
      $('#product-quantity-list').toggle();
    },

    selectQuantity: function(e){
      var element = $(e.target);
      var price = $('#main-price');
      var unitQuantity = parseInt($($('#product-quantity-list li').first()).attr('data-quantity-map'));
      var selectQuantity = parseInt(element.attr('data-quantity-map'));

      // set the value in the input
      $('#product-quantity').val(selectQuantity);
      var priceVal = price.attr('data-price-base').split('$')[1];
      priceVal = parseFloat(priceVal);
      var unitPrice = priceVal / unitQuantity;
      priceVal = selectQuantity * unitPrice;
      price.html('$'+(priceVal).toFixed(2));

      // set the value in the dropbox
      $('#product-quantity-amount span').html(element.html());
      $('#product-quantity-list li').removeClass('selected');
      element.addClass('selected');
      this.toggleDrop();
    },

    addToCart: function (e) {
      if($('button').hasClass('blue-button')){
        var quantity = $(this.el).find("input").val();
        var variant_id = this.model.variants.first().id;
        SpreeStore.Cart.Controller.addToCart(variant_id, quantity);
        SpreeStore.navigate("cart");        
      }
    },


    templateHelpers: {
      displayImage: SpreeStore.helpers.displayImage,
      changeSpacing: function(name){
        var nameChanged = name.split(' ').join('%20');
        return nameChanged;
      },
      productType: function(){
        var pName = this.name.toLowerCase();
        if(pName.indexOf("quartet") === -1){
          return 'yellow';          
        }else{
          return 'blue';
        } 
      },

      getHeaderColor: function(){
        return this.productType();
      },

      thumbnails: function() {
        return _.flatten(_.map(this.variants, function(variant) {
          return _.map(variant.images, function(image) {
            return image.mini_url;
          })
        }));
      }
    }
  });
})