Hi Molly,

Are you using Razor, XLST or usercontrols? It should be fairly easy with Razor to do this. Can you show me your current code? Then I will try to guide you in right direction.

Regards Martin

Hi Martin, 

I'm using Razor, i have the razor demo store setup so i could work off that and adapt it. I'm more familiar with XSLT but want to expand into Razor as it does seem alot more straight forward. I'm attempting to place my code into the basket. I have tried to use the guide on http://www.publicvoid.dk/DynamicOrderPropertiesAddingCustomInformationToBasketsOrdersAndOrderLines.aspx but i think i'm thinking to much into it and getting confused on where i call these action. 

@usingUCommerce

@usingUCommerce.Api

@usingUCommerce.Extensions

@usingUCommerce.Runtime

@{

    varrequest=HttpContext.Current.Request;

    varbasket=TransactionLibrary.GetBasket(true).PurchaseOrder;

    varcurrency=SiteContext.Current.CatalogContext.CurrentCatalog.PriceGroup.Currency;

 

    if(request.HttpMethod=="POST"&&request.Form.AllKeys.Any(x=>x=="update-and-continue"))

    {

@* For this helper functions refer to /App_Code/uCommerce/Functions/Basket.cshtml *@

        uCommerce.Functions.Basket.UpdateCartLines("update-and-continue","quantity-input-",basket);

        HttpContext.Current.Response.Redirect("/cart/address.aspx");

    }

    if(request.HttpMethod=="POST")

    {

        HttpContext.Current.Response.Redirect(request.RawUrl);

    }

 

    varsubTotal=newMoney(0,currency);

    vartax=newMoney(0,currency);

    vardiscount=newMoney(0,currency);

    varorderTotal=newMoney(0,currency);

 

    if(basket.SubTotal.HasValue)

    {

        subTotal=newMoney(basket.SubTotal.Value,currency);

    }

    if(basket.VAT.HasValue)

    {

        tax=newMoney(basket.VAT.Value,currency);

    }

    if(basket.DiscountTotal.HasValue)

    {

        discount=newMoney(basket.DiscountTotal.Value*-1,currency);

    }

    if(basket.OrderTotal.HasValue)

    {

        orderTotal=newMoney(basket.OrderTotal.Value,currency);

    }

}

<divclass="row-fluid">

    @if(!basket.OrderLines.Any())

    {

        <divclass="alert alert-info">

            <p>Your cart is empty. Please <a href="/">return to our store and add some items</a>.</p>

        </div>

    }

    else

    {

        <form method="post">

        <tableclass="table table-striped"id="cart">

            <thead>

                <tr>

                    <th class="span7">Description</th>

                    <th class="span1 money">Price</th>

                    <th class="span1 money">VAT</th>

                    <th class="span2">Quantity</th>

                    <th class="span1 money">Total</th>

                    <th></th>

                </tr>

            </thead>

            <tbody>

                @foreach(varlineIteminbasket.OrderLines)

                {

                    varproduct=@CatalogLibrary.GetProduct(lineItem.Sku);

                    varitemPrice=newMoney(lineItem.Price,currency);

                    varitemTax=newMoney(lineItem.VAT,currency);

                    varlineTotal=newMoney(lineItem.Total.Value,currency);

 

                    <tr class="order-line">

                        <td><ahref="@CatalogLibrary.GetNiceUrlForProduct(product)">@product.DisplayName()  |  @product.DynamicProperty().CourseDate  |  @product.DynamicProperty().CourseVenue</a></td>

                        <td class="money">

                            @if(lineItem.UnitDiscount.HasValue&&lineItem.UnitDiscount>0)

                            {

                                varnowPrice=newMoney((lineItem.Price-lineItem.UnitDiscount.Value),currency);

 

                                <span style="text-decoration: line-through">

                                    @itemPrice

                                </span>

                                @nowPrice

 

                            }

                            else

                            {

                                @itemPrice

                            }

                        </td>

                        <td class="money">

                            @itemTax

                        </td>

                        <td>

                            <inputtype="text"name="quantity-input-@lineItem.OrderLineId"data-orderlineid="@lineItem.OrderLineId"value="@lineItem.Quantity"class="qty"/>

                        </td>

                       

                        <td class="money line-total">

                            @lineTotal

                        </td>

                        

                        <td>

                            <buttontype="submit"class="line-remove"name="basket-remove-item"value="@lineItem.OrderLineId">×</button></td>

                      

 

    </tr>

 

                }

            @foreach(varlineIteminbasket.OrderLines)

            {

                <tr>

                <td><label for="attendeeFirstName">Attendee First Name</label></td>

                <td><inputtype="text"name="attendeeFirstName"placeholder="First Name"/></td></tr>

                <tr>

                <td><label for="attendeeLastName">Attendee Last Name</label></td>

                <td><inputtype="text"name="attendeeLastName"placeholder="Last Name"/></td></tr>

                <tr>

                <td><label for="attendeeDOB">Attendee DOB</label></td>

                <td><inputtype="text"name="attendeeDOB"placeholder="30/12/1997"/></td></tr>

                <tr>

                <td><label for="attendeeMedical">Attendee Medical Info</label></td>

                <td><inputtype="text"name="attendeeMedical"placeholder="if applicable"/></td></tr>

            }

            

                <tr>

                    <td rowspan="4">

                        <div class="span6">

                            <div class="input-append">

                                <input type="text" name="voucher-code" />

                                <buttonname="add-voucher"class="btn"type="submit"><iclass="icon-plus icon-white"></i>Add Voucher</button>

                            </div>

                            <p><span class="label label-info">Tip!</span> <small>Sign up to our mailing list and get 10% off your first order! <a href="#">Click here to get 10% off now</a>!</small></p>

                        </div>

                    </td>

                    <td colspan="2" rowspan="4">

                        <buttonname="update-basket"id="update-basket"class="btn update-basket"type="submit"><iclass="icon-refresh icon-white"></i>Update</button>

                    </td>

                    <td>Sub total:</td>

                    <tdclass="money order-subtotal">

                        @subTotal

                    </td>

                    <td>&nbsp;</td>

                </tr>

                <tr>

                    <td>VAT:</td>

                    <td class="money order-tax">

                        @tax

                    </td>

                    <td>&nbsp;</td>

                </tr>

                <tr>

                    <td>Discounts:</td>

                    <tdclass="money order-discounts">

                        @discount

                    </td>

                    <td>&nbsp;</td>

                </tr>

                <tr>

                    <td>Order total:</td>

                    <tdclass="money order-total">

                        @orderTotal

                    </td>

                    <td>&nbsp;</td>

                </tr>

            </tbody>

        </table>

        <divclass="pull-right">

            <buttonname="update-and-continue"class="btn btn-large btn-success"type="submit">Continue to Checkout <iclass="icon-arrow-right icon-white"></i></button>

        </div>

        </form>

    }

</div>

 

 

I've placed the part i'm trying to do a foreach in bold. I appreciate your help with this. 

Thank you

Molly 

Hi Molly,

It's not a "easy" task because the basketpage is using ajax. But I can try to guide you on the correct path.

The foreach you have created is actually only running on the amount of orderlines so if you change your quantity to 2 nothing will happen. What you should do instead is looping over the quantity of the line items.

So what you can do

1. Move your own foreach inside the other foreach above it so your attendee information is following the lineitem.
2. Change your own foreach into a for-loop and loop over the lineItem.Quantity.

Great, Thank you Martin i will try that now. Once i have that working is it fairly easy to feed that information submitted into the preview page and the order details that the backend user and customer will be able to see?

 

Thank you for your help :)

Sorry i'm struggling terribly I've place my foreach towards the bottom before the main foreach closes and changed it to this

               @for( var lineItem.Quantity in basket.OrderLines){
                   <tr> 
                <td><label for="attendeeFirstName">Attendee First Name</label></td>
                <td><input type="text" name="attendeeFirstName" placeholder="First Name" /></td>
                </tr>
                <tr>
                <td><label for="attendeeLastName">Attendee Last Name</label></td>
                <td><input type="text" name="attendeeLastName" placeholder="Last Name" /></td>
                </tr>
                <tr>
                <td><label for="attendeeDOB">Attendee DOB</label></td>
                <td><input type="text" name="attendeeDOB" placeholder="30/12/1997" /></td>
                </tr>
                <tr>
                <td><label for="attendeeMedical">Attendee Medical Info</label></td>
                <td><input type="text" name="attendeeMedical" placeholder="if applicable" /></td>
                </tr>
                }

This errors the code and won't load. Now i'm not sure whether this line : 
 
               @for( var lineItem.Quantity in basket.OrderLines){

is doing anything correct at all. I've tried to add and (if) statement within that but not really sure how to reference anything properly. 

This is the snippet with it in, i understand what is happening in the code but i can't understand how to place mine and reference properly. 

 @foreach (var lineItem in basket.OrderLines){


                    var product = @CatalogLibrary.GetProduct(lineItem.Sku);
                    var itemPrice = new Money(lineItem.Price, currency);
                    var itemTax = new Money(lineItem.VAT, currency);
                    var lineTotal = new Money(lineItem.Total.Value, currency);

                    <tr class="order-line">
                        <td><a href="@CatalogLibrary.GetNiceUrlForProduct(product)">@product.DisplayName()  |  @product.DynamicProperty().CourseDate  |  @product.DynamicProperty().CourseVenue</a></td>
                        <td class="money">
                            @if (lineItem.UnitDiscount.HasValue && lineItem.UnitDiscount > 0)
                            {
                                var nowPrice = new Money((lineItem.Price - lineItem.UnitDiscount.Value), currency);

                                <span style="text-decoration: line-through">
                                    @itemPrice
                                </span>
                                @nowPrice

                            }
                            else
                            {
                                @itemPrice
                            }
                        </td>
                        <td class="money">
                            @itemTax
                        </td>
                        <td>
                            <input type="text" name="quantity-input-@lineItem.OrderLineId" data-orderlineid="@lineItem.OrderLineId" value="@lineItem.Quantity" class="qty" />
                        </td>

                        <td class="money line-total">
                            @lineTotal
                        </td>

                        <td>
                            <button type="submit" class="line-remove" name="basket-remove-item" value="@lineItem.OrderLineId">×</button></td>


               @for(lineItem.Quantity){
                   <tr> 
                <td><label for="attendeeFirstName">Attendee First Name</label></td>
                <td><input type="text" name="attendeeFirstName" placeholder="First Name" /></td>
                </tr>
                <tr>
                <td><label for="attendeeLastName">Attendee Last Name</label></td>
                <td><input type="text" name="attendeeLastName" placeholder="Last Name" /></td>
                </tr>
                <tr>
                <td><label for="attendeeDOB">Attendee DOB</label></td>
                <td><input type="text" name="attendeeDOB" placeholder="30/12/1997" /></td>
                </tr>
                <tr>
                <td><label for="attendeeMedical">Attendee Medical Info</label></td>
                <td><input type="text" name="attendeeMedical" placeholder="if applicable" /></td>
                </tr>
                }

    </tr>          
                }
                <tr>
                    <td rowspan="4">
                        <div class="span6">
                            <div class="input-append">
                                <input type="text" name="voucher-code" />
                                <button name="add-voucher" class="btn" type="submit"><i class="icon-plus icon-white"></i>Add Voucher</button>
                            </div>
                            <p><span class="label label-info">Tip!</span> <small>Sign up to our mailing list and get 10% off your first order! <a href="#">Click here to get 10% off now</a>!</small></p>
                        </div>
                    </td>
                    <td colspan="2" rowspan="4">
                        <button name="update-basket" id="update-basket" class="btn update-basket" type="submit"><i class="icon-refresh icon-white"></i>Update</button>
                    </td>
                    <td>Sub total:</td>
                    <td class="money order-subtotal">
                        @subTotal
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>VAT:</td>
                    <td class="money order-tax">
                        @tax
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Discounts:</td>
                    <td class="money order-discounts">
                        @discount
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Order total:</td>
                    <td class="money order-total">
                        @orderTotal
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
        <div class="pull-right">
            <button name="update-and-continue" class="btn btn-large btn-success" type="submit">Continue to Checkout <i class="icon-arrow-right icon-white"></i></button>
        </div>
        </form>

I've searched online to try and get for loop examples as i really want to do this myself! 

Sorry i'm struggling terribly I've place my foreach towards the bottom before the main foreach closes and changed it to this

               @for( var lineItem.Quantity in basket.OrderLines){
                   <tr> 
                <td><label for="attendeeFirstName">Attendee First Name</label></td>
                <td><input type="text" name="attendeeFirstName" placeholder="First Name" /></td>
                </tr>
                <tr>
                <td><label for="attendeeLastName">Attendee Last Name</label></td>
                <td><input type="text" name="attendeeLastName" placeholder="Last Name" /></td>
                </tr>
                <tr>
                <td><label for="attendeeDOB">Attendee DOB</label></td>
                <td><input type="text" name="attendeeDOB" placeholder="30/12/1997" /></td>
                </tr>
                <tr>
                <td><label for="attendeeMedical">Attendee Medical Info</label></td>
                <td><input type="text" name="attendeeMedical" placeholder="if applicable" /></td>
                </tr>
                }

This errors the code and won't load. Now i'm not sure whether this line :

 
               @for( var lineItem.Quantity in basket.OrderLines){

is doing anything correct at all. I've tried to add and (if) statement within that but not really sure how to reference anything properly.

This is the snippet with it in, i understand what is happening in the code but i can't understand how to place mine and reference properly.

 @foreach (var lineItem in basket.OrderLines){


                    var product = @CatalogLibrary.GetProduct(lineItem.Sku);
                    var itemPrice = new Money(lineItem.Price, currency);
                    var itemTax = new Money(lineItem.VAT, currency);
                    var lineTotal = new Money(lineItem.Total.Value, currency);

                    <tr class="order-line">
                        <td><a href="@CatalogLibrary.GetNiceUrlForProduct(product)">@product.DisplayName()  |  @product.DynamicProperty().CourseDate  |  @product.DynamicProperty().CourseVenue</a></td>
                        <td class="money">
                            @if (lineItem.UnitDiscount.HasValue && lineItem.UnitDiscount > 0)
                            {
                                var nowPrice = new Money((lineItem.Price - lineItem.UnitDiscount.Value), currency);

                                <span style="text-decoration: line-through">
                                    @itemPrice
                                </span>
                                @nowPrice

                            }
                            else
                            {
                                @itemPrice
                            }
                        </td>
                        <td class="money">
                            @itemTax
                        </td>
                        <td>
                            <input type="text" name="quantity-input-@lineItem.OrderLineId" data-orderlineid="@lineItem.OrderLineId" value="@lineItem.Quantity" class="qty" />
                        </td>

                        <td class="money line-total">
                            @lineTotal
                        </td>

                        <td>
                            <button type="submit" class="line-remove" name="basket-remove-item" value="@lineItem.OrderLineId">×</button></td>


               @for(lineItem.Quantity){
                   <tr> 
                <td><label for="attendeeFirstName">Attendee First Name</label></td>
                <td><input type="text" name="attendeeFirstName" placeholder="First Name" /></td>
                </tr>
                <tr>
                <td><label for="attendeeLastName">Attendee Last Name</label></td>
                <td><input type="text" name="attendeeLastName" placeholder="Last Name" /></td>
                </tr>
                <tr>
                <td><label for="attendeeDOB">Attendee DOB</label></td>
                <td><input type="text" name="attendeeDOB" placeholder="30/12/1997" /></td>
                </tr>
                <tr>
                <td><label for="attendeeMedical">Attendee Medical Info</label></td>
                <td><input type="text" name="attendeeMedical" placeholder="if applicable" /></td>
                </tr>
                }

    </tr>          
                }
                <tr>
                    <td rowspan="4">
                        <div class="span6">
                            <div class="input-append">
                                <input type="text" name="voucher-code" />
                                <button name="add-voucher" class="btn" type="submit"><i class="icon-plus icon-white"></i>Add Voucher</button>
                            </div>
                            <p><span class="label label-info">Tip!</span> <small>Sign up to our mailing list and get 10% off your first order! <a href="#">Click here to get 10% off now</a>!</small></p>
                        </div>
                    </td>
                    <td colspan="2" rowspan="4">
                        <button name="update-basket" id="update-basket" class="btn update-basket" type="submit"><i class="icon-refresh icon-white"></i>Update</button>
                    </td>
                    <td>Sub total:</td>
                    <td class="money order-subtotal">
                        @subTotal
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>VAT:</td>
                    <td class="money order-tax">
                        @tax
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Discounts:</td>
                    <td class="money order-discounts">
                        @discount
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Order total:</td>
                    <td class="money order-total">
                        @orderTotal
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
        <div class="pull-right">
            <button name="update-and-continue" class="btn btn-large btn-success" type="submit">Continue to Checkout <i class="icon-arrow-right icon-white"></i></button>
        </div>
        </form>

I've searched online to try and get for loop examples as i really want to do this myself!

Sorry i tried to edit to make it more understandable it doubled.

Doublets happens ;)

It is because your for-loop is not made correctly. In a for-loop you have 3 parts. Initialize a counter, a condition, increase/decrease counter. It should look like this:

 

for(var i = 0; i < lineItem.Quantity;i++)

        {

                        <tr>

                            <td><label for="attendeeFirstName">Attendee First Name</label></td>

                            <td><input type="text"name="attendeeFirstName"placeholder="First Name"/></td>

                        </tr>

                        <tr>

                            <td><label for="attendeeLastName">Attendee Last Name</label></td>

                            <td><input type="text"name="attendeeLastName"placeholder="Last Name"/></td>

                        </tr>

                        <tr>

                            <td><label for="attendeeDOB">Attendee DOB</label></td>

                            <td><input type="text"name="attendeeDOB"placeholder="30/12/1997"/></td>

                        </tr>

 

                        <tr>

                            <td><label for="attendeeMedical">Attendee Medical Info</label></td>

                            <td><input type="text"name="attendeeMedical"placeholder="if applicable"/></td>

                        </tr>

                    }

 

Thank you :) i understand i had similar but rather than using "var i" i tried to use the lineItem.Quantity instead atleast i know i'm not so far off!

When i change the quantity and update it doesn't remove the additional attendee input fields from the previous quantity unless you refresh the whole page? I'm not sure whether thats an issue with the update of lineitems itself.

So would it be fairly easy for me to have the information that is inputted for the attendee to display on the preview page of the order process and also the order itself so that the backend and frontend can see that as part of the order.

 

Thank you again for your help it is very much appreciated! :)

No problem.

The "issue" you are talking about is a result of Razor store being based on AJAX. You have to decide whether you want to go on with AJAX based or just doing postbacks.

Either way it will require some work because you have to do stuff which is not coming out of box.

Ok, so if i chose  not to use AJAX to do the postback could it still be implemented into the AJAX based cart or would i have to start over with say the XSLT based store?

I realised that each product being placed in the cart has a specific candidate age attached to it so using quantity input would no longer need to be used as the customer wouldn't be able to put various quantities of the same candidate..so i was unsure how to take away the quantity input in the cart so i just took it out of the process which i'm hoping is ok, it seems to work fine. 

So back to the postback for the attendee info.. would i need to create variables for each input on this form. I'm not strong with AJAX so i'm pretty lost and on a deadline. I've gotten much more familiar with XSLT since i started using umbraco but have recently started playing with razor and so getting quite lost.

All your advice is very much appreciated! Thank you for taking the time! 

Hi Molly,

Sorry for late answer. Have been very busy :-).

There should be no problem in continuing using Razor store with Razor. You just have to do some work. Instead of collecting and updating basket via. AJAX you need to do it every time a user presses update or change the quantity. It's not a small task either but I know Søren has made a simple checkout flow somewhere where he actually show how to collect information for orderlines.

Try to look at this it might help you on archiving what you're looking for.

Best Regards Martin

is working on a reply...