Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • René 327 posts 852 karma points
    Jan 13, 2014 @ 12:10
    René
    0

    Tea commerce - ajaxForm

    Hi 

    Umbraco v6.1.6 (Assembly version: 1.0.5021.24867)

    Package name
    Tea Commerce
    Package version
    2.2.2

    Im trying to get it to work with the ajaxForm

    I have theese script in my header

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/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>

    This is an example of 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 it reloads the whole site.

    It does not matter if i have the ajaxForm on or not.

    I have checked that i have ajax installed.

    Am i missing somthing basic? 

    Any suggestions?

    René

     

  • Anders Burla Johansen 2560 posts 8256 karma points
    Jan 13, 2014 @ 12:57
    Anders Burla Johansen
    0

    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

  • René 327 posts 852 karma points
    Jan 13, 2014 @ 23:36
    René
    0

    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? :-)

  • MK 426 posts 902 karma points
    Jan 14, 2014 @ 07:26
    MK
    0

    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

  • René 327 posts 852 karma points
    Jan 15, 2014 @ 00:05
    René
    0

    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é

  • René 327 posts 852 karma points
    Jan 15, 2014 @ 00:17
    René
    0

    Hi again 

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

    René

  • René 327 posts 852 karma points
    Jan 16, 2014 @ 12:54
    René
    0

    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é

Please Sign in or register to post replies

Write your reply to:

Draft