Copied to clipboard

Flag this post as spam?

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


  • MB 273 posts 936 karma points
    Feb 06, 2019 @ 10:01
    MB
    0

    Update product price according to variant price

    Umbraco: 7.11.1 Tea Commerce: 3.2.4

    Hi guys,

    I successfully managed to display variants on my site thanks to your help.

    Though, I can't seem to find a solution to updating the product price according to the selected variant.

    Using the documentation I can loop through each variant price, but I'm not interested in showing all prices but rather change the one product price that is visible.

    IPublishedContent productPage = Model.Content;
    long storeId = long.Parse(Umbraco.TypedContent(1064).GetPropertyValue<string>("store", true));
    
    //Main product data
    var productName = productPage.GetPropertyValue<string>("productName");
    
    IPublishedContent productImage = productPage.GetPropertyValue<IPublishedContent>("image"); ;
    
    List<VariantPublishedContent> variants = TC.GetVariants(storeId, productPage).ToList();
    List<VariantGroup> attributeGroups = TC.GetVariantGroups(productPage, variants).ToList();
    string variantJson = TC.GetVariantJson(storeId, productPage, true);
    
    
                    <form method="post" action="/base/TC/FormPost.aspx" class="ajaxForm" data-product-id="@productPage.Id">
                        <input name="AddOrUpdateOrderLine" value="productIdentifier, quantity" type="hidden" />
                        <input name="storeId" value="@storeId" type="hidden" />
    
                        <div class="product_price_area">
                            <div class="form-horizontal">
                                @{
                                    var price = CurrentPage.GetPropertyValue("price");
                                }
                                @String.Format("{0:n}", price) DKK
    
                                @if (attributeGroups.Any())
                                {
                                    foreach (VariantGroup variantGroup in attributeGroups)
                                    {
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">@variantGroup.Name</label>
                                            <div class="col-sm-9">
                                                <select class="form-control" data-attribute-group="@variantGroup.Id">
                                                    <option value="">Select @variantGroup.Name</option>
                                                    @foreach (VariantType variantType in variantGroup.Attributes)
                                                    {
                                                        <option value="@variantType.Id">@variantType.Name</option>
                                                    }
                                                </select>
                                            </div>
                                        </div>
                                    }
                                    <input name="productIdentifier" value="" type="hidden" />
                                }
                                else
                                {
                                    <input name="productIdentifier" value="@productPage.Id" type="hidden" />
                                }
    
                                <div id="add_product">
                                    <div class="form-group">
                                        <label>Antal</label>
                                        <input class="form-control" name="quantity" value="1" type="text" />
                                    </div>
                                    <input class="btn btn-primary btn-block disabled" value="Tilføj til kurv" type="submit" />
                                </div>
                            </div>
                        </div>
                    </form>
    

    // Mike

  • Matt Brailsford 4123 posts 22194 karma points MVP 9x c-trib
    Feb 06, 2019 @ 10:18
    Matt Brailsford
    1

    Hi Mike,

    Do you mean just visually on the page?

    Matt

  • MB 273 posts 936 karma points
    Feb 06, 2019 @ 10:28
    MB
    0

    Matt, you're at it again, thanks for helping me out.

    It's both visually and when adding the item to the basket.

    • I have a shirt
    • In blue for $1
    • In red for $2
    • If I select the blue/red the price doesn't change visually
    • If I add a blue to basket and afterwards a red, the basket registers both items as 2 blue shirts at $2 in total, rather than $3.

    I hope that makes sense. Perhaps it isn't possible?

    // Mike

  • Matt Brailsford 4123 posts 22194 karma points MVP 9x c-trib
    Feb 06, 2019 @ 10:33
    Matt Brailsford
    100

    Hi Mike,

    I'm wondering if that later issue is because your <input name="productIdentifier" value="" type="hidden" /> is blank when looping the variants. I think in this instance you need to give each variant an SKU and that should make them show up as individual items (IIRC).

    From a visual perspective, I think you'd want to use some javascript to watch the select list for a change event then update the value on the page.

  • MB 273 posts 936 karma points
    Feb 06, 2019 @ 10:37
    MB
    0

    You're a wizard Matt, the SKU has to be defined for it to work.

    I'll do the visually representation of the prices with Javascript.

    Thanks once again, Matt!

  • Matt Brailsford 4123 posts 22194 karma points MVP 9x c-trib
    Feb 06, 2019 @ 10:51
    Matt Brailsford
    0

    Awesome. Glad I could help.

  • MB 273 posts 936 karma points
    Feb 06, 2019 @ 11:46
    MB
    1

    For those who might be in a similar situation, I made a quick fix for the visual price change. It's not pretty but it's a temporary fix:

    First: Display all variant prices and add a index number to each price element (using data attribute)

    var variantIndex = 0;
    <div id="variantPrices">
        @foreach (VariantPublishedContent variant in variants)
        {
            variantIndex++;
            <div class="variantPrice" data-priceindex="@variantIndex">
                @(TC.GetPrice(1, Model.Content.Id + "_" + variant.VariantIdentifier))
            </div>
        }
    </div>
    

    Next: Remove them all using CSS:

     .variantPrice {
            display: none;
            &.show {
                display: block;
            }
        }
    

    Last: Use Javascript to hide/show each price depending on the selected option index:

    $('.form-control').change(function () {
        var idx = this.selectedIndex;
        $('.variantPrice').each(function () {
            $(this).removeClass('show');
            $(this).attr('data-priceindex') == idx ? $(this).addClass('show') : null;
        });
    });
    

    // Mike

  • Matt Brailsford 4123 posts 22194 karma points MVP 9x c-trib
    Feb 06, 2019 @ 12:05
    Matt Brailsford
    0

    Thanks for sharing this for completeness. #h5yr 🤘

Please Sign in or register to post replies

Write your reply to:

Draft