Example 7: Replacing a block

In some advanced scenarios, you may need to replace an existing Rapido block completely. To do so, you can use a method called ReplaceBlock() – this method locates an existing block with the same ID as a custom block and replaces it.

Let's say you have a product which is launching in the near future, but is not available for purchase yet. You would like your customers to view the product and the product details, but purchasing should not be available for e.g. 2 weeks. The whole buy section can then be replaced with a countdown timer instead, so they know when the product is available for purchase.

Try it out:

  • Open the Rapido/eCom/Product/Blocks/Custom__Blocks.cshtml template
  • Add @using Dynamicweb.Rapido.Blocks.Extensibility to get a list of imported resources (if you did example 3, this step has already been completed)
  • Define a new custom Block:
C%23
Block PriceAndActions = new Block { Id = "Buy", SortId = 50, Template = PriceAndActionsSection() }; customProductBlocks.ReplaceBlock(PriceAndActions);

The ReplaceBlock() method locates the existing Block with the exact same ID as our new custom Block (“Buy”), and replaces it with the new one. The SortId is set to 50, which is the spot just below the color variant options.

The template property specifies that this Block uses a helper called RenderCustomBuySection() – so let’s make sure this helper method exists. In this case we simply copy the existing Buy-section helper code, which is added below. 

The frontend screenshot demonstrates the section we are replacing. 

C%23
@helper PriceAndActionsSection() { <div class="u-bold">The product will be available for purchase in:</div> <!-- Display the countdown timer in an element --> <p id="demo"></p> }

  

Figure 1.3 The replacement block - Product page

After making your helper function, all you need to add is the JavaScript code. This should be added right after the paragraph with the demo id. Add the following code, and check frontend to see if you are satisfied with your new replaced block. 

(Optional) - Adjust the countDownDate variable, so it fits your countdown and product launch.

Voila, now you are able to display products on your solution that aren't launched for purchase yet, by replacing an existing block, with a new one. See, replacing a block can be very handy in some cases :) 

Below a frontend example of the replacement block is shown.

JS
<script> // Set the date we're counting down to var countDownDate = new Date("Jul 17, 2019 15:37:25").getTime(); // Update the count down every 1 second var x = setInterval(function () { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = days + " days | " + hours + " hour | " + minutes + " minutes | " + seconds + " seconds "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> }

  

Figure 2.2 Replacement Block - Countdown timer