Introduction to Adobe Commerce Cloud and Fastly VCL
Adobe Commerce Cloud, formerly known as Magento Commerce Cloud, provides a robust and flexible platform for e-commerce businesses. One of the key components that contribute to its performance is the Fastly VCL (Varnish Configuration Language), which allows for customized configurations and optimizations for web caching and content delivery.
Why Use Custom Error Pages?
Error pages are an unavoidable aspect of any online platform. Whether it’s a 405 error indicating a not allowed page or a 500 internal server error, having a well-designed custom error page enhances user experience by clearly guiding visitors and reducing frustration. It also provides a branded experience and can include helpful navigation links or contact information.
Steps to Set Custom Error Pages with Fastly VCL in Adobe Commerce Cloud
In Adobe Commerce Cloud, setting up custom error pages using Fastly VCL involves several carefully orchestrated steps:
1. Create the Custom Error HTML: Design and develop your custom error pages as HTML Ensure these pages are informative and align with your site’s branding.
2. Logged In to Adobe Commerce Admin: Logged In with the username and password in the Admin Panel.
3. Open Store Configuration: After the logged In to Admin Panel open the Store Configuration with the below path.
Admin Menu >> Stores >> Settings >> Configuration >> Advanced >> System >> Full Page Cache.
4. Create Custom VCL Snippet: For the creating the custom VCL Snippet please use below path.
Full Page Cache >> Fastly Configuration >> Custom VCL Snippets.
From the Custom VCL Snippets though click on the Create button.
5. Set the Error HTML in snippet: Store the HTML content for your error page in a VCL Snippet same as below. Here’s an example snippet for a 405 error page:
if (obj.status == 405) {
set obj.status = 405;
set obj.response = "Not allowed";
synthetic {"
<html>
<head>
<title>405 Not allowed</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<style>
html {
height: 100%;
}
html, body {
margin: 0;
font-family: Arial, sans-serif;
font-style: normal;
font-variant: normal;
}
.pd-5vw {
padding: 5vw;
}
.dpd-20 {
padding-bottom: 20px;
}
.text-center {
text-align: center;
}
.text-purple {
color: #6435c9;
}
.text-grey {
color: #5f7f89;
}
.text-blue {
color: #4fc1ea;
}
.text-size-20-vh {
font-size: 20vh;
line-height: normal;
}
.text-size-10-vh {
font-size: 10vh;
}
.text-size-5-vh {
font-size: 5vh;
}
.text-size-18 {
font-size: 18px;
}
.text-height-1-5 {
line-height: 1.5;
}
.bg-404 {
height: 100%;
position: relative;
background: #eee;
background: -moz-linear-gradient(top, rgba(232, 247, 252, 1) 0%, rgba(249, 249, 249, 1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(232, 247, 252, 1) 0%, rgba(249, 249, 249, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(232, 247, 252, 1) 0%, rgba(249, 249, 249, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8f7fc', endColorstr='#f9f9f9', GradientType=0); /* IE6-9 */
}
.bottom-copy {
position: fixed;
bottom: 0;
left: 0;
right: 0;
min-height: 140px;
text-align: center;
}
.gears-img {
position: relative;
text-align: center;
top: 5vh;
}
@media only screen and (max-width: 767px) {
.sm-hide {
display: none;
}
.text-size-10-vh {
font-size: 6vh;
}
}
</style>
<section class="pd-5vw">
<div class="">
<div class="text-size-5-vh dpd-20 text-blue">
Website access restricted in your region.
</div>
</div>
<div class="text-height-1-5 text-grey text-size-18 dpd-20">
We're not providing access of the website in your country or region.
</div>
<div>
We apologize for the inconvenience.
</div>
<br>
</section>
<div class="gears-img sm-hide">
<div class="fa fa-warning" style="font-size:250px;color:red;"></div>
</div>
<section class="bottom-copy">
<div>©2024 Bhaumik Rana.</div>
</section>
</body>
</html>
"};
return(deliver);
}6. Upload VCL to Fastly: Click on the button of the Upload VCL to Fastly to upload you VCL changes to Fastly and click on the Save button of the configuration.
7. Result: After the all the changes when the this error page comes page looks like below.
Validation and Testing
After updating your Fastly VCL configuration, it’s crucial to validate and test the implementation. Ensure that each type of error navigates the user to the correct custom error page. This step helps confirm that the pages are correctly displayed in cases of errors.
In conclusion, custom error pages improve user experience, and by leveraging Fastly VCL in Adobe Commerce Cloud, you can streamline this process effectively. Follow the outlined steps to set up your custom error pages and enhance your e-commerce platform. For more info about Cutom VCL Snippet click here and For more Fastly related blogs click here.
