update product price according to variant price

MBE 244 posts 845 karma points

Feb 06, 2019 @ 10:01

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

Copy Link

Matt Brailsford 2958 posts 15629 karma points MVP 7x c-trib

Feb 06, 2019 @ 10:18

Hi Mike,

Do you mean just visually on the page?

Matt

Copy Link

MBE 244 posts 845 karma points

Feb 06, 2019 @ 10:28

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

Copy Link

Matt Brailsford 2958 posts 15629 karma points MVP 7x c-trib

Feb 06, 2019 @ 10:33

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.

Copy Link

MBE 244 posts 845 karma points

Feb 06, 2019 @ 10:37

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!

Copy Link

Matt Brailsford 2958 posts 15629 karma points MVP 7x c-trib

Feb 06, 2019 @ 10:51

Awesome. Glad I could help.

Copy Link

MBE 244 posts 845 karma points

Feb 06, 2019 @ 11:46

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

Copy Link

Matt Brailsford 2958 posts 15629 karma points MVP 7x c-trib

Feb 06, 2019 @ 12:05

Thanks for sharing this for completeness. #h5yr 🤘

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Update product price according to variant price