razor custom properties

phil 58 posts 78 karma points

Mar 19, 2012 @ 16:04

I have 3 drop down boxes on my products page and want to add the selected items on to the orderline when the add to cart button is clicked then show the selected items in the cart but I can get it to appear in the cart. I'm not sure weather the selected items arn't being added into the orderline or I just can't get them out. Can anyone help me here

on my products page I have the following code

@using TeaCommerce.Razor
@using TeaCommerce.Data
@inherits umbraco.MacroEngines.DynamicNodeContext
@{
  
  var currentCurrency = TeaCommerce.GetCurrentCurrency();
    foreach(var item in @Library.NodeById(1057).Children) {
     
     <div id="product" class="productToUpdate" productid="@item.Id">                              
       
        <form action="/tcbase/teacommerce/SubmitForm.aspx" method="post">
         
         <input name="ReturnUrl" type="hidden" value="" />
         <input name="AddOrderLine" type="hidden" value="nodeId,quantity,productMaterial,productColour,productFinish" />
                                                       
             
         <h3>@item.Title</h3>                                                       
         <p>@item.Text</p>
                                                           
         @if (@item.productMaterialList.Count() > 0) { 
         <p>
           Materials: 
           <select id="productMaterial" name="productMaterial">
             @foreach (var material in @item.productMaterialList) { 
               <option value="@material.Id">
                 @material.Title - £@material.Price
               </option>
             }
           </select> 
         </p>
         }
         <p>
           Colour:
            <select id="productColour" name="productColour">
              @foreach (var colour in @item.productColours.Split(',')) {
                <option value="@colour">@colour</option>
             }
             </select>
         </p>
         <p>
           Finishes:
           <select id="productFinishe" name="productFinish">
             @foreach (var finish in @item.productFinishes.Split(',')) {
               <option value="@finish">@finish</option>
             }
           </select>
        </p>
                                                           
         <p>Price: @TeaCommerce.FormatPriceWithSpecificCulture(@item.productPriceGBP, @currentCurrency.CultureName)</p>
         <p>
             <input type="hidden" name="nodeId" value="@item.Id" /> 
             Quantity: <input type="text" name="quantity" id="quantity" class="quantity" value="1" />
             <input type="submit" value="Add to cart" addingtxt="Adding to cart" class="productAddToCart" />
         </p>
       </form>                                  
      </div>                                               
    }
  
}

my cart code is

@foreach (OrderLine orderline in TeaCommerce.GetOrder().OrderLines) {
        <tr id="@orderline.NodeId" class="orderLine" orderLineId="@orderline.Id" nodeId="@orderline.NodeId">
          <td>
            @orderline.Properties.Single(p => p.Alias.Equals("nodeName") && p.UmbracoLanguageId == order.UmbracoLanguageId).Value
            @orderline.Properties.Single(p => p.Alias.Equals("productMaterial") && p.UmbracoLanguageId == order.UmbracoLanguageId).Value
            @orderline.Properties.Single(p => p.Alias.Equals("productColour") && p.UmbracoLanguageId == order.UmbracoLanguageId).Value
            @orderline.Properties.Single(p => p.Alias.Equals("productFinish") && p.UmbracoLanguageId == order.UmbracoLanguageId).Value
            
            
          </td>

my javascript add to cart in teaCommerce_Advanced code is

jQuery('.productAddToCart').live('click', function () {
  var jQEle = jQuery(this);

  /*
  If the product allready have a pending add to cart running
  we do not want to make another one.
  in principle you could easily make the call again. This
  is just for demo purposes. You can make as many calls to
  the server as you like.
  */
  if (!jQEle.parent().hasClass('updating')) {
    jQEle.parent().addClass('updating');

    //Get the various elements and variables
    var product = jQEle.closest('.productToUpdate'),
        addingTxt = jQEle.attr('addingtxt'),
        quantityInput = product.find('input.quantity'),
        quantity = quantityInput[0] ? quantityInput.val() : 1,
        material = product.find('productMaterial'),
        productMaterial = material.option[material.selectedIndex].value,
        colour = product.find('productColour'),
        productColour = colour.options[colour.selectedIndex].value,
        finish = product.find('productFinish'),
        productFinish = finish.options[finish.selectedIndex].value,
        variant = product.find('select.productVariants'),
        productid = variant[0] ? variant.val() : product.attr('productid'),
        localSubmitTimer = new Date().getTime();
    jQEle.attr('standardValue', jQEle.val()).val(addingTxt).attr('standardValue');
    
    /*
    Add orderline is called using the Tea Commerce javascript API
    We subscribe to the return events to be able to update the
    css class of the button.
    */
    
    TeaCommerce.addOrderLine(productid, quantity, properties, productMaterial, productColour, productFinish,
    {
      async: true,
      successfn: function (data) {
        //A timeout is set to show the user that the product has been added
        removeAddButtonUpdate(jQEle, localSubmitTimer);
      },
      errorfn: function (data) {
        //Something went wrong. We should handle it here
        removeAddButtonUpdate(jQEle, localSubmitTimer);
      }
    });
  }
  return false;
});

Flag this post as spam?

razor custom properties