Hi

Have you checked your bwoser debug console to see for any errors of loading the scripts?

Seems like the script isnt loaded and that is why the post isnt ajax.

Kind regards
Anders

Hi 

I need a littel help here, im just about learning this.

I have tryed to remove the prettyphoto, same result.

As far as i can see there is not any errors.

Is it this what you ask for? :-)

Hi,

Try adding the following after all your other scripts:

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.min.js"></script>

    <script type="text/javascript" src="/scripts/tea-commerce.min.js"></script>

    <script type="text/javascript" src="/scripts/ecommerce.js"></script>

    <script type="text/javascript">

        _storeId = @Umbraco.Field("store", recursive: true);

    </script>

Regards,

Moshe

Hi

Now, i almost got it working.

Here is the script in the header, it only works if i place the teacommerce before contour.

<!-- Teacommerce -->

    <script type="text/javascript">
        var _nodeId = <umbraco:Item field="pageID" runat="server" />,
            _storeId = <umbraco:Item field="store" recursive="true" runat="server" />;
    </script> 


    <script type="text/javascript" src="/scripts/tea-commerce.min.js"></script>
    <script type="text/javascript" src="/scripts/ecommerce.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.min.js"></script> 

 <!-- Contour -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js" type="text/javascript"></script>     <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

Here is the form

<form class="ajaxForm" method="post" action="/base/TC/FormPost.aspx">
<input name="AddOrUpdateOrderLine" value="productIdentifier, quantity" type="hidden" />
    <input name="storeId" value="1" type="hidden" />
    <input name="productIdentifier" value="@_singelNodeId" type="hidden" />
    <input name="quantity" value="1" type="hidden"/>
    <input value="@Dictionary["Add to cart"]" class="btn buy btn-danger" type="submit" />
</form>   

But now it do not update the mini shopping cart. 

If i remove the "ajaxForm" it reloads the page as expected, but with the "ajaxForm" i cant get to update the mini cart.

Here is the miniCart, it has been mirated form the tea commerce starter kit.

@using TeaCommerce.Umbraco.Web
@using TeaCommerce.Api.Models
@using umbraco.MacroEngines
@inherits umbraco.MacroEngines.DynamicNodeContext

@{
  //Store id
  long storeId = long.Parse( Model._Store );

  DynamicNode currentPage = Model;

    Order order = TC.GetCurrentOrder( storeId );

    decimal itemQuantity= 0;
    string totalPrice = "";
    decimal totalQuantity = 0;
    Price shippingMethodPrice = null;

    ShippingMethod shippingMethod = TC.GetCurrentShippingMethod( storeId );

  if ( order != null ) {

    totalPrice = order.SubtotalPrice.ToString();
    totalQuantity = order.OrderLines.Sum( o => o.Quantity );
    shippingMethodPrice = TC.GetPriceForShippingMethod( storeId, 2 );
  }
}
    <div class="span3">
            <div class="cart-container" id="cartContainer">
                <div class="cart">
                        <p class="items">Indkøbskurv <span class="dark-clr">(@totalQuantity.ToString( "0.####" ))</span></p>
                        <p class="dark-clr hidden-tablet">@totalPrice</p>
                        <a href="checkout-step-1.html" class="btn btn-danger">
                            <!-- <span class="icon icons-cart"></span> -->
                            <i class="icon-shopping-cart"></i>
                        </a>
                    </div>
                    <div class="open-panel">

                        @foreach(var orderItem in order.OrderLines){
            //Product
                DynamicNode product = Model.NodeById( orderItem.ProductIdentifier.ToString() );
            <div class="item-in-cart clearfix">
                            <div class="image">
                @{
                //Get the node
                dynamic node = Library.NodeById(orderItem.ProductIdentifier.ToString());
                // Get the image                    
                var image1 = @node.image.mediaItem[0].Image.umbracoFile;
                <img alt="@node.header" src="@image1" width="124" height="124" />
            }
                </div>
                            <div class="desc">
                                <strong><a href="@product.Url">@orderItem.Name</a></strong>
                                <span class="light-clr qty">
                                    Antal: @orderItem.Quantity.ToString( "0.####" )
                                    &nbsp;
            <form  method="post">
            <a href="" onclick="TC.removeOrderLine({storeId:1, orderLineId: @orderItem.Id});">Slet</a>
            </form>
            </span>
                            </div>
                            <div class="price">
                                <strong>
                @orderItem.UnitPrice
                </strong>
                            </div>
                        </div> 
            } 
                        <div class="summary">
                            <div class="line">
                                <div class="row-fluid">
                                    <div class="span6">Fragt:</div>
                                    <div class="span6 align-right">@shippingMethodPrice</div>
                                </div>
                            </div>
                            <div class="line">
                                <div class="row-fluid">
                                    <div class="span6">Ialt:</div>
                                    <div id="miniCartTotalPrice" class="span6 align-right size-16">@order.TotalPrice</div>
                                </div>
                            </div>
                        </div>
                        <div class="proceed">
                            <a href="checkout-step-1.html" class="btn btn-danger pull-right bold higher">CHECKOUT <i class="icon-shopping-cart"></i></a>
                            <small>Shipping costs are calculated based on location. <a href="#">More information</a></small>
                        </div>
                    </div>
                </div>

            </div>

Any ideas what i am missing out. 

Thanks..

René

Hi again 

I forgot, the buy butten are beeing disabled, when adding to cart, and there are added to items to the cart. 

René

Hi 

If this can help anyone :-)

I did not figure out how this was intende to work. 

The ecommerce.js from the teacommerce demo contains the jQuery to display the minicart. 

I can not use the api directly, i must use jQuery to get the values from the current order. 

see http://documentation.teacommerce.net/javascript-api/

The example "Simple update mini cart example" helped me.

René

is working on a reply...