Copied to clipboard

Flag this post as spam?

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


  • Thomsen 85 posts 283 karma points
    Jun 24, 2016 @ 19:58
    Thomsen
    0

    Display variant name on the order

    Hi

    Is there a way to display the variant name in the cart or order, next to the original product name?

    Let's say, I am displaying my cart by looping through the orderlines, as the variant prices displays individually, I would also display each variant name next to the order product name.

    foreach (OrderLine o in cart.OrderLines)
    {
            <p>@o.Name - //display variant name here</p>  
    }
    

    Best regards.

  • Dennis Aaen 4448 posts 17912 karma points admin hq c-trib
    Jun 26, 2016 @ 10:56
    Dennis Aaen
    0

    Hi Thomsen.

    If you see the demo shop of Tea commerce https://demo.teacommerce.net and choose to purchase the Summer Yacht then you can select color and size.

    When you have added the product to the mini cart, and goes to check then the product name and variant are displayed like this

    enter image description here

    Is it something tike this that you want? If so the code below are the code that are using the generate these order lines.

     @foreach ( OrderLine orderLine in order.OrderLines ) {
              IPublishedContent productContent = Umbraco.TypedContent( orderLine.ProductIdentifier );
              <div class="row orderline">
                <div class="col col-lg-6 col-md-5 col-sm-4">
                  <span class="hidden-sm hidden-md hidden-lg">Product: </span>@orderLine.Name
                </div>
                <div class="col col-sm-2">
                  <span class="xs-right">
                    @if ( orderLine.UnitPrice.Discount.Value > 0M ) {
                      <text>(</text>
                      <s>@orderLine.UnitPrice.WithoutDiscounts</s>
                      <text>)</text>
                    }
    

    Hope this helps,

    /Dennis

  • Thomsen 85 posts 283 karma points
    Jun 27, 2016 @ 18:16
    Thomsen
    0

    Hi Dennis, thank you for your answer.

    I have altered the product details page a bit, so only one dropdown is showing all of my variants instead of combining. That's because I want to list each variant price to the right of the product variant.

    It works fine with the different prices when I add to basket, but the order line name is still the original product name:

    Here is my code:

     <div class="well product-details">
                            <h1 class="page-header">@productName</h1>
                            <h4 class="price-label">@productPrice</h4>
    
    
                            @Html.Raw(productResume)
    
                            <div class="form-horizontal">
    
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Vælg variant</label>
                                    <div class="col-sm-9">
                                        <select id="variant" class="form-control">
                                            <option value="">Vælg variant</option>
                                            @foreach (VariantPublishedContent variant in variants)
                                            {
                                                <option value="@variant.ProductIdentifier">@variant.Name - @TC.GetPrice(1, Model.Content.Id + "_" + variant.VariantId)</option>
    
                                            }
    
                                        </select>
                                    </div>
                                </div>
    
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Antal</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" name="quantity" value="1" type="text" />
                                    </div>
                                </div>
                            </div>
    
    
                            @if (productPage.GetPropertyValue<bool>("outOfStock"))
                            {
                                <button class="btn btn-warning btn-lg disabled"><i class="fa fa-ban" aria-hidden="true"></i> Midlertidigt udsolgt</button>
                            }
                            else
                            {
    
                                <input name="AddOrUpdateOrderLine" value="productIdentifier, quantity" type="hidden" />
                                <input name="productIdentifier" id="pid" value="" type="hidden" />
                                <input name="storeId" value="@storeId" type="hidden" />
                                <input class="btn btn-success btn-lg" value="Læg i kurv" type="submit" />
                            }
                        </div>
    
  • Anders Burla Johansen 2560 posts 8256 karma points
    Jun 29, 2016 @ 10:11
    Anders Burla Johansen
    0

    Hi Thomsen

    Its a bit hard to get specific what you want :)

    Could you try and make a simple example and what it does today and what you need it to do?

    The demo store uses javascript to update the "productIdentifier" html hidden field. When the variant is added to the cart as an order line - Tea Commerce knows how to fetch the variant name parts and add it after the product name. That is why it get "Summer Yacht - Black - Medium" in the demo store.

    Kind regards

    Anders

  • Thomsen 85 posts 283 karma points
    Jun 29, 2016 @ 22:34
    Thomsen
    0

    Hi Anders

    Instead of combining the variants like in the demo, I have only one dropdown which lists all the variant combinations like this:

    <select id="variant" class="form-control">
               <option value="">Vælg variant</option>
                  @foreach (VariantPublishedContent variant in variants)
                       {
                     <option value="@variant.ProductIdentifier">@variant.Name -    @TC.GetPrice(1, Model.Content.Id + "_" + variant.VariantId)</option>
                 }    
    </select>
    

    When the user selects a variant, I update the value of the hidden field:

    <input name="productIdentifier" id="pid" value="" type="hidden" />
    

    With the product identifier of the chosen variant with jQuery:

       $(function () {
            $('#variant').change(function () {        
                var x = $(this).val(); 
                $('#pid').val(x);
            });
        });
    

    That works fine, and the product variant is added to the basket with the correct variant price. But in the basket and in the orderline, the name of the variant is not displayed. It displays only the name of the main product.

    So basically what I want is to somehow fetch the variant name in the basket and on each order line and display it next to the main product name, as in the demo store.

    Best regards.

  • Anders Burla Johansen 2560 posts 8256 karma points
    Jun 30, 2016 @ 09:45
    Anders Burla Johansen
    100

    Do you have a property on your product and variant doc types with the alias "productName"? If yes - try NOT to enter a value in the umbraco back office for the variant. Tea Commerce should then pick it up from the node names of the variant and the product.

    See line 137 - 156 where it tries to find a value for the variant first - it not - then use the node name of the product and ask the variant service for the name of the variant.

    https://github.com/TeaCommerce/Tea-Commerce-for-Umbraco/blob/master/Source/TeaCommerce.Umbraco.Configuration/InformationExtractors/PublishedContentProductInformationExtractor.cs

    Kind regards

    Anders

  • Thomsen 85 posts 283 karma points
    Jul 09, 2016 @ 20:29
    Thomsen
    0

    Hi Anders,

    Zank you. - And "yes" to both of your questions. Removing the value for the variant in the backend on the product made the cart/order fetch the variant name from the variant specification node.

    Best regards!

Please Sign in or register to post replies

Write your reply to:

Draft