QRCode.cshtml

@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade;
@{
  // Get the QR-Code settings from the current item
  var qrSettings = MyItem;

  // The view identifier determines if the code should be visible or only on printing
  var printOnly = MyView.Identifier == "print";

  // sets qrlink to specified url  
  var qrLink = qrSettings.Bool("LinkCurrentPage")
    ? Link.To(parameters: MyPage.Parameters)
    : qrSettings.Url("Link");

  // This ID is used to identify our unique code in the HTML DOM
  var qrDomId = "qr-code-js" + UniqueKey;
}

@* Add Infos for URL and Title to generate a  QR Code *@
<div @Kit.Edit.TagToolbar(qrSettings) class='@(printOnly ? "app-qrcode2-print-only" : "")'>
  <a class="@qrDomId" href='@qrLink' target="_blank"></a>
  @if (qrSettings.Bool("DisplayLinkOrTitle")) {
    var displayText = Text.First(qrSettings.String("Title"), qrSettings.String("Link"));
    <div>@displayText</div>
  }
</div>

@* Show a special message to admins if the QR-Code is invisible otherwise *@
@if (printOnly && MyUser.IsContentAdmin) {
  <div class="alert alert-info app-qrcode2-noprint" @Kit.Edit.TagToolbar(qrSettings)>
    @App.Resources.String("PrintQrAdminHint")
  </div>
}

@* Generate the QR Code *@
@{
  // Get the settings from the current item, or fallback to App Settings
  var qrParams = qrSettings.Child("QrCodeSettings") ?? App.Settings.Child("QrCodeSettings");
  var size = qrParams.Int("Size");
  var data = new {
      domId = qrDomId,
      options = new {
        color = "#" + qrParams.String("Color").Trim('#'),
        width = size,
        height = size
      }
  };
}

@* When the page is ready, run appQr2 to init JS *@
@Kit.Page.TurnOn("window.appQr2.init()", data: data)
<script type="text/javascript" src="@App.Folder.Url/dist/scripts.min.js" @Kit.Page.AssetAttributes(position: "bottom")></script>
<link rel="stylesheet" href="@App.Folder.Url/dist/styles.min.css">