Installation of Litium Nosto Connector add-on

Read how to install the Litium Nosto Connector and update templates to work with it.

Install

  1. Install the Litium.AddOns.Nosto addon from Litium NuGet feed in your Litium.Accelerator and Litium.Accelerator.MVC project. 
  2. Go to packages/Litium.AddOns.Nosto.X.X.XXX copy Litium.Accelerator folder and paste it on your Litium.Accelerator project folder.
  3. Build the solution and when visiting Litium Backoffice site Channel fields, Nosto Account and Recommendations fields should have been created. Visit your Nosto Backoffice and copy the Account Id to populate Account Id field.
  4. Alter Litium.AddOns.Nosto.dll.config file with your solution variables if they differ from what already existing in the file.
  5. Last step you will need to add some code in some files, description under Develop section.

Develop

Files that got added to the Litium.Accelerator projects: (Manually on Install step 2)

ViewModels/Block/NostoBlockViewModel.cs
Builders/Block/NostoBlockViewModelBuilder.cs

Files that got added to the Litium.Accelerator.MVC projects: (Files added automaticlly with Nuget)

Client/Scripts/Middlewares/Cart.Middleware.js
Controllers/Blocks/NostoBlockController.cs
Views/Block/NostoRecommendations.cshtml
Litium.AddOns.Nosto.dll.config
NostoDocumentation.txt

 

Adding code in existing files:

In Litium.Accelerator\ViewModels\Framework\CartViewModel.cs
Add this property:

public string NostoCartHtmlTagging { get; set; }

 

In Litium.Accelerator\Builders\Framework\CartViewModelBuilder.cs
Insert this in the Build method:

public CartViewModel Build(Cart cart)
{
    // other code
 
    return new CartViewModel
    {
        // other code
        NostoCartHtmlTagging = NostoHelper.GenerateCartHtmlTagging(cart)
    };
}

 

In Litium.Accelerator.Mvc\Definitions\FieldTemplateSetupDecorator.cs
Add this line to end of [_controllerMapping] dictionary

[(typeof(Blocks.BlockArea), "Nosto")] = (typeof(NostoBlockController), nameof(NostoBlockController.Index))

 

In Litium.Accelerator.Mvc\Client\Scripts\index.js at row 24
Apply [cartMiddleware] to the end of the parameter
It would look like this example:

const store = window.__litium.store = window.__litium.store || (window.parent.__litium && window.parent.__litium.store)
    || createStore(app, preloadState, composeWithDevTools(applyMiddleware(thunk, historyMiddleware, cartMiddleware)));

 

For Nosto recomendations that have Landing pages in the Website you can use the Nosto Recommendation Block to visualize the Noso Recommendation Products otherwise you will need to add code in the page Views directly.

Add code in (cshtml) pages that do not have landing pages for Nosto recommendations:
You need these namespaces:

 @using Litium;
 @using Litium.Web.Routing;
 @using Litium.FieldFramework;

and add this code wherever you want to visulize the Nost recommendations on the page: (Example of Product-page)

 var pageType = "Product-page";
 var fields = IoC.Resolve<RouteRequestLookupInfoAccessor>().RouteRequestLookupInfo.Channel?.Fields?.GetValue<IEnumerable<MultiFieldItem>>(pageType);

 if (fields != null)
    {
        foreach (var field in fields)
        {
            var id = field.Fields?.GetValue<string>($"{pageType}-nosto-Id");
            @Html.Raw($"<div class=\"nosto_element\" id=\"{id}\"></div>")
        }
    }

Or alternativly you can add the logic in the ViewModelBuilder instead and run the foreach method on your newly created property e.g List<string> NostoRecommendationIds on the ViewModel

 

Toggle marketing permission.

A customer field which named NostoMarketingPermission will be added automatically to handle customer marketing permission in the Customers/Persons/Person properties.

Use INostoCustomerService to handle and send permission to Nosto.

Here is a code example to visulize a Marketing permission CheckBox in my-pages:

Insert these lines of code in Litium.Accelerator/ViewModels/MyPages/MyDetailsViewModel.cs

 using Litium.AddOns.Nosto.Constants;
 
 public bool MarketingPermission { get; set; }
 
 [UsedImplicitly]
 void IAutoMapperConfiguration.Configure(IMapperConfigurationExpression cfg)
 {
    cfg.CreateMap<PageModel, MyDetailsViewModel>();
    cfg.CreateMap<Person, MyDetailsViewModel>()
       .ForMember(x => x.CustomerNumber, m => m.MapFrom(person => person.Id))

       // Insert this line of code 
       .ForMember(x => x.MarketingPermission, m => m.MapFrom(person => person.Fields.GetValue<bool>(NostoConstants.CustomerField.MarketingPermissionId)))
       
       .ForMember(x => x.DeliveryAddress, m => m.MapFrom<AddressViewModelResolver>())
       .ForMember(x => x.AlternativeDeliveryAddress, m => m.MapFrom<AlternativeAddressViewModelResolver>())
       .ReverseMap()
       .ForMember(x => x.Addresses, m => m.MapFrom<AddressModelResolver>());
 }

Insert these lines of code in Litium.Accelerator/Services/MyPagesViewModelService.cs

Inject INostoCustomerService in the constructor

using Litium.AddOns.Nosto.Services;

public virtual void SaveMyDetails(IViewModel viewModel)
{
    var person = _personService.Get(_securityContextService.GetIdentityUserSystemId().GetValueOrDefault())?.MakeWritableClone();
    if (person == null) return;

    person.MapFrom(viewModel);

    using (_securityContextService.ActAsSystem())
    {
        _personService.Update(person);
    }
    
    // Insert this section of code 
    if(viewModel is MyDetailsViewModel detailsViewModel)
    {
        if (detailsViewModel.MarketingPermission)
        {
            _nostoCustomerService.GrantConsent(person);
        }
        else
        {
            _nostoCustomerService.RevokeConsent(person);
        }
    }
    CheckoutState.ClearState();
}

Insert these lines of code in Litium.Accelerator.Mvc/Views/MyPages/_MyDetailsPanel.cshtml wherever you like to have the Checkbox to be presented.

 <div class="row">
    <div class="columns small-12 medium-4">
        @Html.CheckBoxFor(x => x.MarketingPermission)
        @Html.LabelFor(x => x.MarketingPermission, @Html.WebSiteString("marketing.permission"))
    </div>
</div>

Finally, build solution and client scripts.

 

NostoHelper exposes static methods for Cart and Order rendering if you need to use another approach:

Cart Tagging

var nostoCartHtmlTagging = NostoHelper.GenerateCartHtmlTagging(cart)

 

Order Tagging

var nostoOrderHtmlTagging = NostoHelper.GenerateOrderHtmlTagging(Guid orderId, Currency currency, bool includeVat)

 

Blacklisting/Unblacklisting emails

Use helper methods in NostoHelper class to send the blacklist/unblacklist emails to nosto.

 

GDPR

Nosto integration will be hooked to Litium GDPR.