Quick order / knowkout add variable to quick order

 Project Holzpitcher

@* Ticket 93818: [Holz Pichler] 3.3. Item variants – “range value” attributes. *@

control.quickorder.js

//Ticket 93818: [Holz Pichler] 3.3. Item variants – “range value” attributes.

        self.isVarient = ko.observable(false); //Product contain varients or not        

function QuickOrderViewModel() {        

        var self = this;
 
           .....
 
        //Ticket 93818: [Holz Pichler] 3.3. Item variants – “range value” attributes.
        self.isVarient = ko.observable(); //Product contain varients or not
 
        .....

var _buildComponentGroups = function (data) {
           var componentsCollection = data.VariantComponents,
               variantsCollection = data.Variants;
 
           if (componentsCollection.length) {
 
               //Ticket 93818: [Holz Pichler] 3.3. Item variants – “range value” attributes.
               if (componentsCollection.length > 0) {
                   self.isVarient(true)                   
               }
               else {
                   self.isVarient(false)                     
               }
 
               // Product with variants
               self.componentGroups = $.map(componentsCollection, function (val, i) {

on view 

get false value 

data-bind="visible: (isVarient() == false)">

get True Value : 

data-bind="visible:isVarient

@* Ticket 93818: [Holz Pichler] 3.3. Item variants – “range value” attributes. *@
<div class="" data-bind="visible:isVarient">
    <a data-bind="attr: { href: product().url }" data-product-url class="btn"> @Sana.SimpleText("QuiclOrder_SelectVariants", "Select Variants") </a>
</div> 
 
@* Ticket 93818: [Holz Pichler] 3.3. Item variants – “range value” attributes. *@
<div class="qo-quantity-box" data-bind="visible: (isVarient() == false)">
    <!-- ko if: !product().isProductConfigurable -->
    @if (Shop.UserAbilities.Has(AbilityTo.ViewUnitOfMeasure))
    {
        if (Shop.Settings.AllowUnitOfMeasureSelection)

Ravensburg 

control.Quickorder.js

// Ticket 113689: [Ravensburger - Phase 2] 3.1. Display stock availability in the shopping cart. 
        self.availabilityHtmlTags = ko.observable();       

function QuickOrderViewModel() {
       var self = this;
 
       ...
 
       self.product = ko.observable();
       self.components = ko.observable();
       self.quantity = ko.observable();
       self.selectedUom = ko.observable();
       self.defaultUomTitle = ko.observable();
       self.quantityStep = ko.observable(1);
       self.minimumQuantity = ko.observable();
       self.maximumQuantity = ko.observable();
        
       // Ticket 113689: [Ravensburger - Phase 2] 3.1. Display stock availability in the shopping cart. 
       self.availabilityHtmlTags = ko.observable();       

var _buildComponentGroups = function (data) {
            var componentsCollection = data.VariantComponents,
                variantsCollection = data.Variants;
 
            //Ticket 113689: [Ravensburger - Phase 2] 3.1. Display stock availability in the shopping cart
            self.availabilityHtmlTags = data.AvailabilityHtmlTags;
             
            if (componentsCollection.length) {

_quickorder.js

<form data-bind="form: 'quickOrderForm', submit: quickOrderSubmitForm, visible: product()" class="choose-product" style="display: none;">
        <div data-bind="attr: { 'data-tracking-data': JSON.stringify(product().trackingData) }" class="qo-product-title-box">
            <a data-bind="text: product().title, attr: { href: product().url }" data-product-url class="hyp-qo-title font-darkest" tabindex="-1" target="_blank"></a>
        </div>
 
        <div class="label">
            <label>@Sana.SimpleText("Availability")</label>            
 
            <div>
                @* //Ticket 113689: [Ravensburger - Phase 2] 3.1. Display stock availability in the shopping cart *@
                <div data-bind="html:availabilityHtmlTags"></div>
            </div>
 
 
        </div>

using Sana.Commerce.Catalog;
using Sana.Commerce.Customization.Catalog;
using Sana.Commerce.Shop;
using Sana.Commerce.Stock;
using Sana.Commerce.Web;
using Sana.Commerce.Web.Frontend;
using Sana.Commerce.Web.Frontend.Models.Product;
using Sana.Commerce.Web.Frontend.Models.QuickOrder;
using Sana.Commerce.Web.Mvc.Extensions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
 
namespace Sana.Commerce.Customization.ExtendedModels
{
    public class ExtendedProductInfoModel : ProductInfoModel
    {
        public StockModel Stock { get; set; }
 
        public bool IsInStock { get; set; }
 
        public string AvailabilityHref { get; set; }
 
        public int MaxStock { get; set; }
 
        public string AvailabilityHtmlTags { get; set; }
 
 
        public override void Initialize(IProduct product, IWebsiteSettings settings, string detailsUrl, bool isProductConfigurable = false)
        {
            base.Initialize(product, settings, detailsUrl, isProductConfigurable);
            Stock = ((ExtendedProductManager)CommerceFramework.Products).CreateProductStockModel(product);
 
 
            var isInStock = Stock.Inventory > Stock.StockRange.OutOfStock;
            IsInStock = isInStock;
 
            var href = "http://schema.org/" + (isInStock ? "InStock" : "OutOfStock");
           // AvailabilityHref = href;
 
 
            var Model = Stock;
 
 
           var maxStock = Model.StockRange.MaxStockNumber.HasValue ? Model.StockRange.MaxStockNumber.Value : -1;
            MaxStock = maxStock;
 
            //HtmlString htmlString = new HtmlString("");
            StringBuilder buildHtml = new StringBuilder();
 
 
            var ranges = new[]
            {
                new { Min = Int32.MinValue, Max = Model.StockRange.OutOfStock },
                new { Min = Model.StockRange.OutOfStock, Max = Model.StockRange.LowStock },
                new { Min = Model.StockRange.LowStock, Max = Int32.MaxValue },
            };
            foreach (var range in ranges)
            {
                var show = Model.Inventory > range.Min && Model.Inventory <= range.Max;
 
                // var htmlString = new HtmlString();
 
                var stockText_MaxStockNumber = CommerceFrameworkBase.SanaTexts.GetSanaText("StockText_MaxStockNumber").FormatWith(maxStock.ToString());
 
                var isHideClass = (!show) ? "hide" : "";
 
                var strHead = "<span class='stock-row "+ isHideClass  + "'" + 
                 " data-min=" + range.Min.ToInvariantString() + " " +
                 " data-max=" + range.Max.ToInvariantString() + " " +
                 " data-max-stock=" + maxStock + " " +
                 " data-custom-stock-message=" + "'"+  stockText_MaxStockNumber + "'" + " "+
                 ">"; 
                
 
                var strBody = StockAmountExtention(Model.StockRange, show ? Model.Inventory : range.Max);
 
                //Sana.StockAmount(Model.StockRange, show ? Model.Inventory : range.Max)
                //ProductExtensions
                var strFooter = "</span>";
 
                var combinedString = strHead + strBody + strFooter;
                buildHtml.Append(combinedString);
                 
            }
            string sHtml = buildHtml.ToString();
 
             sHtml = sHtml.Replace("\"","'"); // REmove double qu
 
            //var htmlString = new HtmlString(sHtml);
            //AvailabilityHtmlTags = htmlString;
            AvailabilityHtmlTags = sHtml;
            AvailabilityHref = "<p>Trrrrrrr</p>";
 
        }
 
        private string StockAmountExtention(IStockRange stockRange, decimal inventory, string textKeySuffix = null)
        {            
            var val = "";
 
            var textKey = "StockText_";
            if (inventory <= stockRange.OutOfStock)
                textKey += "OutOfStock";
            else if (inventory > stockRange.LowStock)
                textKey += "InStock";
            else
                textKey += "LowStock";
 
            if (ShopContext.GetCurrent().IsB2cCustomer)
                textKey += "_B2C";
            else
                textKey += "_B2B";
 
            if (textKeySuffix != null && !textKeySuffix.StartsWith("_"))
                textKeySuffix = '_' + textKeySuffix;
 
            var inventoryElement = new TagBuilder("span");
            inventoryElement.AddCssClass("stock-amount");
 
            if (stockRange.MaxStockNumber.HasValue && stockRange.MaxStockNumber.Value < inventory)
            {
                var maxStockNumberText = CommerceFrameworkBase.SanaTexts.GetSanaText("StockText_MaxStockNumber").FormatWith(stockRange.MaxStockNumber.Value.ToString());
                inventoryElement.SetInnerText(HttpUtility.HtmlDecode(maxStockNumberText.ToString()));
            }
            else
            {
                inventoryElement.SetInnerText(inventory.ToString());
            }
 
            var txtKeyString = CommerceFrameworkBase.SanaTexts.GetSanaText(textKey + textKeySuffix); //.iReplace("[STOCKAMOUNT]", inventoryElement.AsHtml());
            var htmlKeyString = new HtmlString(txtKeyString);
            var stockText = htmlKeyString.iReplace("[STOCKAMOUNT]", inventoryElement.AsHtml());
 
            val =  StockAmountHelper(stockRange , inventory, stockText);
 
 
            //var stockText = viewHelper.RichText(textKey + textKeySuffix).iReplace("[STOCKAMOUNT]", inventoryElement.AsHtml());
            //return CompiledHelpers.Themed(ProductHelpers.StockAmount, stockRange, inventory, stockText);
 
            //--------
            return val;
        }              
 
 
 
        public string StockAmountHelper(Sana.Commerce.Stock.IStockRange stockRange, decimal inventory, IHtmlString stockText)
        {
            // StockAmount(Sana.Commerce.Stock.IStockRange stockRange, decimal inventory, IHtmlString stockText)
 
            var cssStockState = "low-stock";
            if (inventory <= stockRange.OutOfStock)
            {
                cssStockState = "out-stock";
            }
            else if (inventory > stockRange.LowStock)
            {
                cssStockState = "in-stock";
            }
            var value = "<span class='lbl-stock " + cssStockState + "'> " + stockText + " </span>";
            return value;
 
        }
    }
 
 
 
 
}