1
\$\begingroup\$

I have never dealt much with jQuery or JavaScript. The following code is something I wrote and while it is functional, I am pretty sure it is a complete mess and it could use some improvements for making it less redundant (meaning I am probably doing unnecessary work). I would also like to make it more efficient.

$(function () {

var order = {};
var $shippingFirstName = $('#firstName');
var $shippingLastName = $('#lastName');
var $shippingAddress1 = $('#address1');
var $shippingAddress2 = $('#address2');
var $shippingCity = $('#city');
var $shippingState = $('#state');
var $shippingZipCode = $('#zipcode');
var $shippingCountry = $('#country');
var $email = $('#email');
var $shippingPhone = $('#phone');

var $billingAddress1 = $('#billingAddress1');
var $billingAddress2 = $('#billingAddress2');
var $billingCity = $('#billingCity');
var $billingstate = $('#billingState');
var $billingZipCode = $('#billingZipcode');
var $billingCountry = $('#billingCountry');
var $billingPhone = $('#billingPhone');

var $creditCardNumber = $('#creditCardNumber');
var $creditCardExpirationYear = $('#expirationYear');
var $creditCardCvNumber = $('#cvvNumber');
var $creditCardFirstName = $('#billingFirstName');
var $creidtCardLastName = $('#billingLastName');
var $creditCardExpirationMonth = $('#expirationMonth');

var $billingAddressCheckbox = $('#billingAddressCheckbox');

var $eoWarningMessage = $('#eoMessage');

var $deliverySection = $("#delivery");
var $reviewSection = $("#review");
var $orderThanksSection = $('#orderThanks');

$eoWarningMessage.hide();

function setOrderCreditCardInformation() {
    order.AccountNumber = $creditCardNumber.val();
    order.ExpirationYear = $creditCardExpirationYear.val();

    order.CvNumber = $creditCardCvNumber.val();
    order.BillingFirstName = $creditCardFirstName.val();
    order.BillingLastName = $creidtCardLastName.val();
    order.ExpirationMonth = $creditCardExpirationMonth.val();
};

$("#placeOrder").click(function () {

    setOrderCreditCardInformation();

    var isBillingAddressTheSameAsShippingAddress = $billingAddressCheckbox.is(':checked');

    if (validateCreditCardInfo(order) == false) {
        return false;
    }

    checkout(isBillingAddressTheSameAsShippingAddress);

    return false;
});

function checkout(isBillingAddressTheSameAsShippingAddress) {
    $.ajax({
        url: '/Checkout',
        async: true,
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({ order: order, isBillingAddressTheSameAsShippingAddress: isBillingAddressTheSameAsShippingAddress }),
        success: function (data) {

            if (data.Success == true) {
                $reviewSection.fadeOut();
                $orderThanksSection.fadeIn();


                $("#wizardReview").removeClass("active");
                $("#wizardOrderPlaced").addClass("active");
            }
            else
                toastr.error(data.ErrorMessage, { timeOut: 3000, showMethod: "fadeIn", hideMethod: "fadeOut", positionClass: "toast-top-center" });
        }
    });
};


function validateEmail(email) {


    var re = /\S+@\S+\.\S+/;

    var result = re.test(email);

    return result;
};

function validateShippingAddress() {
    var valid = true;

    $('form.shipping-address-form :input').each(function () {
        var input = $(this);

        if (input.val() == '' || input.val() == null) {
            valid = false;
            input.closest('.wrapper').addClass('error');
            input.addClass('error');
        }
        else
        {

            input.closest('.wrapper').removeClass('error');
        }
    });


    return valid;
};

function validateBillingAddress() {
    if (order.BillingAddress1 == '')
        return false;
    if (order.BillingCity == '')
        return false;
    if (order.BillingState == '')
        return false;
    if (order.BillingZip == '')
        return false;
    if (order.BillingCountry == '')
        return false;
}

function validateCreditCardInfo() {

    if (order.AccountNumber == '')
        return false;
    if (order.BillingFirstName == '')
        return false;
    if (order.BillingLastName == '')
        return false;
    if (order.ExpirationMonth == '')
        return false;
    if (order.ExpirationYear == '')
        return false;
    if (order.CvNumber == '')
        return false;


    return true;
};

function validateAddresses() {

    if (validateShippingAddress() == false)
        return false;

    if (!$billingAddressCheckbox.is(":checked")) {

        if (validateBillingAddress() == false)
            return false;
    }


};

function setOrderShippingAddress() {
    order.ShippingFirstName = $shippingFirstName.val();
    order.ShippingLastName = $shippingLastName.val();
    order.ShippingAddress1 = $shippingAddress1.val();
    order.ShippingAddress2 = $shippingAddress2.val();
    order.ShippingCity = $shippingCity.val();
    order.ShippingState = $shippingState.val();
    order.ShippingZip = $shippingZipCode.val();
    order.ShippingCountry = $shippingCountry.val();
    order.Email = $email.val();
    order.ShippingPhone = $shippingPhone.val();

};

function setOrderBillingAddress() {
    order.BillingAddress1 = $billingAddress1.val();
    order.BillingAddress2 = $billingAddress2.val();
    order.BillingCity = $billingCity.val();
    order.Billingstate = $billingstate.val();
    order.BillingZip = $billingZipCode.val();
    order.BillingCountry = $billingCountry.val();
    order.BillingPhone = $billingPhone.val();
};

function getShoppingCartId() {
    var shoppingCartId = null;

    var cookie = Cookies.get('cart'); 

    if (cookie != undefined) {

        shoppingCartId = cookie.substring(cookie.indexOf("=") + 1, cookie.indexOf("&"));

    }

    return shoppingCartId;
};

function checkForEoItems() {

    var shoppingCartId = getShoppingCartId();

    $.ajax({
        url: '/CheckForEOItems',
        async: true,
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({ shoppingCartId: shoppingCartId }),
        success: function (data) {

            if (data == true) {
                $eoWarningMessage.show();
                return false;
            } else {
                $eoWarningMessage.hide();
                setOrderShippingAddress();
                if (!$billingAddressCheckbox.is(":checked")) {
                    setOrderBillingAddress();
                }

                if (validateAddresses() == false)
                    return false;

                setOrderSummaryShippingAddress();

                $deliverySection.fadeOut();
                $reviewSection.fadeIn();

                $("#wizardDelivery").removeClass("active");
                $("#wizardReview").addClass("active");

            }
        }
    });

};

function setOrderSummaryShippingAddress() {
    $(".shippingAddress").text($shippingAddress1.val());
    $(".shippingCity").text($shippingCity.val());
    $(".shippingState").text($("#state option:selected").text());
    $(".shippingCountry").text($("#country option:selected").text());
    $(".shippingZipcode").text($shippingZipCode.val());
};



$("#editShippingAddress").on("click", function (e) {

    $(".wizard").removeClass("active");
    $('#wizardDelivery').addClass("active");


    $reviewSection.fadeOut();
    $deliverySection.fadeIn();

});

$(document).on('click', '.editCart', function () {

    $('.checkout-step-1').fadeOut();
    $('#review').hide();
    $('#delivery').show();
    $('.cart').fadeIn();
});


if ($('select').length) {

    $.each($('select'), function (i, val) {
        var $el = $(val);

        if (!$el.val()) {
            $el.addClass("not-chosen");
        }

        $el.on("change", function () {
            if (!$el.val())
                $el.addClass("not-chosen");
            else
                $el.removeClass("not-chosen");
        });
    });
}

$('.same-address').click(function () {
    if ($(this).is(":checked")) {
        $('.billing-area').addClass("checked");
    } else {
        $('.billing-area').removeClass("checked");
    }
});

$(document).on("click", ".removeItem", function () {
    var self = this;
    var item = JSON.stringify(
{
  'Sku': $(this).prev('.sku').val()
});

    swal(
        {
            title: "Are you sure?",
            text: "Are you sure you want to remove " + $(this).parent().find('#itemName').text() + " (" + $(this).prev('.sku').val() + ") from your cart?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#D4332C",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: true
        }, function () {




            $(self).closest(".item").remove();

            removeFromCart(item);


        });

});

function removeFromCart(item){ 
    $.ajax({
        url: '/RemoveFromCart',
        async: true,
        type: "POST",
        data: item,
        dataType: "json",
        contentType: "application/json",
        success: function () {

            var cookie = Cookies.get('cart'); 

            if (cookie != undefined) {
                var shoppingCartQuantity = cookie.substring(cookie.lastIndexOf("=") + 1);

                $("div.item-counter").html(shoppingCartQuantity);

                if (shoppingCartQuantity == 0) {
                    $("div.item-counter").css('visibility', 'hidden');
                    window.location = window.location.href;

                }
            }



            $("div.cartSummary").load(location.href + " div.cartSummary>*", "");
            $("div.deliverySummary").load(location.href + " div.deliverySummary>*", "");
            $("div.reviewSummary").load(location.href + " div.reviewSummary>*", "");
            $("div.orderThanksSummary").load(location.href + " div.orderThanksSummary>*", "");


        }
    });
};




$(document).on("click", ".updateQ", function (e) {


    var item = JSON.stringify(
    {
        'Sku': $(this).parent().parent().parent().find("input.sku").val(),
        'Quantity': $(this).prev(".updateQuantity").val()
    });

    updateCart(item);



});

function updateCart(item) {
    $.ajax({
        url: '/UpdateQuantity',
        async: true,
        type: "POST",
        data: item,
        dataType: "json",
        contentType: "application/json",
        success: function () {

            var cookie = Cookies.get('cart'); 

            if (cookie != undefined) {

                var shoppingCartQuantity = cookie.substring(cookie.lastIndexOf("=") + 1);
                $("div.item-counter").html(shoppingCartQuantity);
            }



            $("div.items-list").load(location.href + " div.items-list>*", "");
            $("div.cartSummary").load(location.href + " div.cartSummary>*", "");
            $("div.deliverySummary").load(location.href + " div.deliverySummary>*", "");
            $("div.reviewSummary").load(location.href + " div.reviewSummary>*", "");
            $("div.orderThanksSummary").load(location.href + " div.orderThanksSummary>*", "");

            $(document).on('click', '#proceedToCheckout', function () {
                ProceedToCheckOutStep1();
            });


        }
    });
};
$(document).on('click', '#proceedToCheckout', function () {
    ProceedToCheckOutStep1();
});



function ProceedToCheckOutStep1() {

    $('#cartItems').hide();
    $('.checkout-step-1').fadeIn();
};


$(document).on("click", ".review-pay", function (e) {


    reviewAndPay();

});


function reviewAndPay() {



    if ($('#state').val() == 'CA') {


        checkForEoItems();
    }
    else {

        $eoWarningMessage.hide();
        setOrderShippingAddress();
        if (!$billingAddressCheckbox.is(":checked")) {
            setOrderBillingAddress();
        }

        if (validateAddresses() == false)
            return false;

        setOrderSummaryShippingAddress();

        $deliverySection.fadeOut();
        $reviewSection.fadeIn();

        $("#wizardDelivery").removeClass("active");
        $("#wizardReview").addClass("active");
    }

};

}());

Here is the HTML to go along with the javascript and jQuery. It is not pretty.

@model Models.ShoppingCartItemSearchModel


<link href="~/css/sweetalert.css" rel="stylesheet" />
<link href="~/content/toastr.min.css" rel="stylesheet" />


@{
    decimal subTotal = 0;
    int itemCount = 0;
    foreach (var item in Model.ShoppingCartItems)
    {
        subTotal += item.PriceRetailTotal;
        itemCount += item.Quantity;
    }
}
<div class="cart" id="cartItems">
    <div class="separator"></div>
    <section class="cart-content">
        <div class="module group">
            <h2>YOUR CART</h2>
            <p>The items marked with an * do not ship to California</p>
            <div class="items-list left">
                @foreach (var item in Model.ShoppingCartItems)
                {
                    <div class="item">
                        <div class="item-thumbnail">
                            <a href="@item.ProductUrl"><img src="@item.ProductImage"></a>
                        </div>
                        <div class="item-details">
                            <a href="@item.ProductUrl"><h3 id="itemName">@item.Name<span>&nbsp;@(item.EO == "N" ? "*" : "")</span></h3></a>
                            <span class="sku"><label>SKU&nbsp;</label>@item.Sku</span>
                            <span>QTY:</span>
                            <div class="quantity-select group">

                                <input type="number" min="1" value="@item.Quantity" class="updateQuantity">
                                <button class="aaa updateQ">Update</button>
                            </div>

                        </div>
                        <span class="price"> @((item.PriceRetailTotal).ToString("c"))</span>
                        <input class="sku" type="hidden" value="@item.Sku" />
                        <a class="remove removeItem"><img src="~/images/remove-item-icon.svg"></a>

                    </div>
                }


                <p class="cal-restriction-message">Items marked with <span>&#42;</span> do not ship to California</p>

            </div>


            <div class="summary-content right">
                <div class="order-summary cartSummary">
                    <h3>ORDER SUMMARY</h3>
                    <table>
                        <tr class="subtotal">
                            <th>Subtotal</th>
                            <td>@subTotal.ToString("c")</td>
                        </tr>

                        <tr class="total">
                            <th>TOTAL <span class="item-quantity">(@itemCount items)</span></th>
                            <td>@subTotal.ToString("c")</td>
                        </tr>

                    </table>
                    <a href="#" id="proceedToCheckout" class="button checkout">PROCEED TO CHECKOUT</a>
                </div>

            </div>
        </div>
    </section>
</div>




<div class="checkout checkout-step-1" style="display:none;">

    <div class="separator"></div>

    <div class="wizard-bar">

        <div class="module group">

            <a href="#" class="wizard active" id="wizardDelivery">2. DELIVERY DETAILS<div></div></a>

            <a href="#" class="wizard unlocked" id="wizardReview">3. REVIEW &amp; PAY<div></div></a>

            <a href="#" class="wizard unlocked" id="wizardOrderPlaced">4. ORDER PLACED<div></div></a>

        </div>

    </div>

    <div id="eoMessage" class="cal-restriccion-message group">


        <p>Your cart contains items that do not ship to California.</p>

        <a class="editCart" href="#">Click to edit you cart</a>


    </div>

    <section class="checkout-content" id="delivery">

        <div class="module group">

            <div class="shipping-information">
                <h3>SHIPPING INFORMATION</h3>
                <p>Please enter the shipping information in the form below. Your shipping address is where you would like to have your order sent.</p>

                <div class="error-message">Please, fill in the marked field(s) to continue</div>


                <form class="shipping-address-form">

                    <div class="group">

                        <div class="wrapper"><input type="text" class="first-name" id="firstName" placeholder="FIRST NAME"></div>

                        <div class="wrapper">
                            <input type="text" class="last-name" id="lastName" placeholder="LAST NAME">
                        </div>

                    </div>

                    <div class="group">

                        <div class="wrapper">
                            <input type="text" class="address-line" id="address1" placeholder="ADDRESS LINE 1">
                        </div>
                    </div>
                    <div class="group">
                        <div class="wrapper">
                            <input type="text" class="address-line" id="address2" placeholder="ADDRESS LINE 2 (optional)">
                        </div>
                    </div>

                    <div class="group">

                        <div class="wrapper">
                            <select name="country" id="country">
                                <option value="" selected class="country">COUNTRY</option>
                                <option value="US" class="US">United States</option>
                                <option value="CA" class="CA">Canada</option>
                                <option value="MX" class="MX">Mexico</option>

                            </select>
                        </div>


                        <div class="wrapper">
                            <select class="state" id="state">

                                <option selected="true" disabled="disabled" class="selectors country">STATE</option>
                                <option disabled="disabled">U.S. States</option>
                                <option value="AL" class="selectors US">Alabama</option>
                                <option value="AK" class="selectors US">Alaska</option>
                                <option value="AZ" class="selectors US">Arizona</option>

                                <option disabled="disabled">Canadian Provinces</option>
                                <option value="AB" class="selectors CA">Alberta</option>



                                <option disabled="disabled">Mexican States</option>
                                <option value="AG" class="selectors MX">Aguascalientes</option>

                            </select>
                        </div>
                    </div>

                    <div class="group">

                        <div class="wrapper">
                            <input type="text" class="city" id="city" placeholder="CITY">
                        </div>
                        <div class="wrapper">
                            <input type="text" class="zip-code" id="zipcode" placeholder="ZIP CODE">

                        </div>
                    </div>
                    <div class="group">
                        <div class="wrapper">
                            <input type="text" class="phone-number" id="phone" placeholder="PHONE NUMBER">
                        </div>
                        <div class="wrapper">
                            <input type="text" class="email" id="email" placeholder="EMAIL">

                        </div>
                    </div>
                </form>

                <div class="billing-address-options">

                    <label><input id="billingAddressCheckbox" type="checkbox" class="same-address" checked>My Billing Information is the same as my Shipping Information</label>

                </div>

                <div class="billing-area checked">

                    <h3>BILLING INFORMATION</h3>

                    <p>Please enter your billing address.</p>

                    <form class="billing-address-form">


                        <div class="group">

                            <input type="text" class="address-line" id="billingAddress1" placeholder="ADDRESS LINE 1">


                            <input type="text" class="address-line" id="billingAddress2" placeholder="ADDRESS LINE 2 (optional)">

                        </div>

                        <div class="group">

                            <select class="country" id="billingCountry">

                                <option selected="true" disabled="disabled">COUNTRY</option>

                                <option value="US">United States</option>

                                <option value="CA">Canada</option>

                                <option value="AF">Afghanistan</option>
                                <option value="AX">Åland Islands</option>
                                <option value="AL">Albania</option>
                                <option value="DZ">Algeria</option>
                                <option value="AS">American Samoa</option>
                                <option value="AD">Andorra</option>
                                <option value="AO">Angola</option>


                            </select>

                            <input type="text" class="state" id="billingState" placeholder="State/Province/Region">


                        </div>

                        <div class="group">

                            <input type="text" class="city" id="billingCity" placeholder="CITY">

                            <input type="text" class="zip-code" id="billingZipcode" placeholder="ZIP/Postal Code">

                        </div>

                        <div class="group">

                            <input type="text" class="city" id="billingPhone" placeholder="PHONE NUMBER">

                        </div>

                    </form>

                </div>

                <div class="shipping-rates-options">

                    <h3>SHIPPING OPTIONS</h3>

                    <p>Your SCT and Bullydog products will be shipped separately. Below are your separate shipping options.</p>

                    <form class="shipping-options-form sct-options">

                        <h4>For your SCT products</h4>

                        <input type="radio" id="op1" name="a">

                        <label for="op1">3 - 5 days via FedEx: <span>FREE</span></label>


                    </form>

                    <form class="shipping-options-form bd-options">

                        <h4>For your Bullydog products</h4>

                        <input type="radio" id="op1" name="b">

                    </form>

                </div>

                <a href="#" class="button review-pay">REVIEW AND PAY</a>

            </div>

            <div class="summary-content">

                <div class="order-summary deliverySummary">

                    <h3>ORDER SUMMARY</h3>

                    <a href="#" class="edit editCart">


                    </a>

                    <table>

                        @foreach (var item in Model.ShoppingCartItems)
                        {
                            <tr class="item-price">

                                <th>@item.Name</th>

                                <td>@item.PriceRetail.ToString("c")</td>

                            </tr>


                            <tr class="item-total">

                                <th>TOTAL</th>

                                <td>@item.PriceRetailTotal.ToString("c")</td>

                            </tr>


                        }


                        <tr class="subtotal">

                            <th>Subtotal <span class="item-quantity">(@itemCount items)</span></th>

                            <td>@subTotal.ToString("c")</td>

                        </tr>





                        <tr class="shipping-not-defined" style="display: none;">

                            <th>Select your country to see shipping rates.</th>
                            <td></td>

                        </tr>


                        <tr class="total">

                            <th>TOTAL</th>

                            <td>@subTotal.ToString("c")</td>

                        </tr>

                    </table>

                </div>

                <a href="#" class="button review-pay">REVIEW AND PAY</a>

            </div>

        </div>

    </section>

    <div class="checkout checkout-step-2" id="review" style="display: none;">

        <section class="checkout-content">

            <div class="module group">

                <div class="payment-method-form">

                    <h3>PAYMENT METHOD</h3>

                    <div class="payment-method credit-debit-card">

                        <div class="choose-method">



                            <div class="payment-methods">

                                <img src="/images/visa-logo.svg">

                                <img src="/images/mastercard-logo.svg">

                                <img src="/images/amex-logo.svg">

                                <img src="/images/discovery-logo.svg">

                            </div>

                        </div>

                        <div class="error-message">Bummer, we couldn’t process your credit card information.<br>Please, make you sure you’ve completed all the fields correctly.</div>
                        <form class="credit-debit-card-form">

                            <div class="group">

                                <label>FIRST NAME</label>

                                <input type="text" id="billingFirstName" class="card-name">
                            </div>

                            <div class="group">
                                <label>LAST NAME</label>

                                <input type="text" id="billingLastName" class="card-name">


                            </div>

                            <div class="group">

                                <label>CARD NUMBER</label>

                                <input type="text" id="creditCardNumber" class="card-number error">

                            </div>

                            <div class="group">

                                <label>CARD EXPIRATION</label>

                                <select class="expiration-month" id="expirationMonth">

                                    <option selected="true" disabled="disabled">Month</option>

                                    <option value="1">January</option>

                                    <option value="2">February</option>

                                    <option value="3">March</option>

                                    <option value="4">April</option>

                                    <option value="5">May</option>

                                    <option value="6">June</option>

                                    <option value="7">July</option>

                                    <option value="8">August</option>

                                    <option value="9">September</option>

                                    <option value="10">October</option>

                                    <option value="11">November</option>

                                    <option value="12">December</option>

                                </select>

                                <select class="expiration-year" id="expirationYear">

                                    <option selected="true" disabled="disabled">Year</option>

                                    <option value="2015">2015</option>

                                    <option value="2016">2016</option>

                                    <option value="2017">2017</option>




                                </select>

                            </div>

                            <div class="group">

                                <label>SECURITY CODE</label>

                                <input type="text" id="cvvNumber" class="security-code">

                            </div>

                        </form>

                    </div>

                    <a href="#" id="placeOrder" class="button checkout">PLACE ORDER</a>

                </div>

                <div class="summary-content">

                    <div class="order-summary reviewSummary">

                        <h3>ORDER SUMMARY</h3>

                        <a href="#" class="edit editCart">

                        </a>

                        <table>

                            @foreach (var item in Model.ShoppingCartItems)
                            {
                                <tr class="item-price">

                                    <th>@item.Name</th>

                                    <td>@item.PriceRetail.ToString("c")</td>

                                </tr>

                                <tr class="item-total">

                                    <th>TOTAL</th>

                                    <td>@item.PriceRetailTotal.ToString("c")</td>

                                </tr>


                            }


                            <tr class="subtotal">

                                <th>Subtotal <span class="item-quantity">(@itemCount items)</span></th>

                                <td>@subTotal.ToString("c")</td>

                            </tr>

                            <tr class="shipping-not-defined" style="display: none;">

                                <th>Select your country to see shipping rates.</th>
                                <td></td>

                            </tr>


                            <tr class="total">

                                <th>TOTAL</th>

                                <td>@subTotal.ToString("c")</td>

                            </tr>

                        </table>

                    </div>

                    <div class="shipping-address">

                        <h3>SHIPPING ADDRESS</h3>
                        <a id="editShippingAddress" href="#" class="edit">



                        </a>

                        <div class="info-field address">

                            <span class="title">Address</span>

                            <span class="content shippingAddress"></span>

                        </div>

                        <div class="info-field city">

                            <span class="title shippingCity">City</span>

                            <span class="content shippingCity"></span>

                        </div>

                        <div class="info-field state">

                            <span class="title">State</span>

                            <span class="content shippingState"></span>

                        </div>

                        <div class="info-field country">

                            <span class="title">Country</span>

                            <span class="content shippingCountry"></span>

                        </div>

                        <div class="info-field zip-code">

                            <span class="title">Zip Code</span>

                            <span class="content shippingZipcode"></span>

                        </div>

                    </div>

                    <div class="additional-information">

                        <h3>NEED HELP?</h3>

                        <div class="help-links">

                            <a href="/support.html">Shipping</a>

                            <a href="/support.html">Returns &amp; Exchanges</a>

                            <a href="/contact.html">Contact Us</a>

                        </div>

                    </div>

                </div>

            </div>
        </section>

    </div>

    <div class="checkout checkout-thank-you" style="display:none;" id="orderThanks">



        <section class="checkout-content">

            <div class="module group">

                <div class="purchase-summary">

                    <h3>THANK YOU FOR YOUR PURCHASE</h3>

                    <div class="message">

                        <p> You should recieve an email with your invoice shortly.</p>

                    </div>

                </div>

                <div class="summary-content">

                    <div class="order-summary orderThanksSummary">

                        <h3>ORDER SUMMARY</h3>

                        <table>

                            @foreach (var item in Model.ShoppingCartItems)
                            {
                                <tr class="item-price">

                                    <th>@item.Name</th>

                                    <td>@item.PriceRetail.ToString("c")</td>

                                </tr>


                                <tr class="item-quantity">

                                    <th>Quantity</th>

                                    <td>@item.Quantity</td>

                                </tr>



                                <tr class="item-total">

                                    <th>TOTAL</th>

                                    <td>@item.PriceRetailTotal</td>

                                </tr>


                            }


                            <tr class="subtotal">

                                <th>Subtotal <span class="item-quantity">(@itemCount items)</span></th>

                                <td>@subTotal</td>

                            </tr>



                            <tr class="shipping">

                                <th>Shipping</th>

                                <td>Free</td>

                            </tr>

                            <tr class="shipping-not-defined" style="display: none;">

                                <th>Select your country to see shipping rates.</th>
                                <td></td>

                            </tr>


                            <tr class="total">

                                <th>TOTAL</th>

                                <td>@subTotal</td>

                            </tr>

                        </table>

                    </div>

                    <div class="shipping-address">

                        <h3>SHIPPING ADDRESS</h3>

                        <div class="info-field address">

                            <span class="title">Address</span>

                            <span class="content shippingAddress"></span>

                        </div>

                        <div class="info-field city">

                            <span class="title shippingCity">City</span>

                            <span class="content shippingCity"></span>

                        </div>

                        <div class="info-field state">

                            <span class="title">State</span>

                            <span class="content shippingState"></span>

                        </div>

                        <div class="info-field country">

                            <span class="title">Country</span>

                            <span class="content shippingCountry"></span>

                        </div>

                        <div class="info-field zip-code">

                            <span class="title">Zip Code</span>

                            <span class="content shippingZipcode"></span>

                        </div>

                    </div>

                    <div class="additional-information">

                        <h3>NEED HELP?</h3>

                        <div class="help-links">

                            <a href="/support.html">Shipping</a>

                            <a href="/support.html">Returns &amp; Exchanges</a>

                            <a href="/contact.html">Contact Us</a>

                        </div>

                    </div>

                </div>

            </div>

        </section>

    </div>

</div>
<script src="~/scripts/sweetalert.min.js"></script>
<script src="~/scripts/toastr.js"></script>
<script src="~/scripts/checkout.js"></script>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.