Welcome! This is my personal blog about Web technologies, software development, open source and other related topics
The ideas and opinions expressed here are solely mine and don't represent those of others, either individuals or companies.The code snippets or references to software products or analogous are to be used without any warranty of any kind. If you enjoy the content, feel free to share it and re-use it as long as you provide a link to the original post.
Create connection to external service used to trigger experience. This connections are outbound.
In this blog will see an example to create a connection to mailjet which can be used to trigger a expereience for abandon cart(covered in another blog post)- here
// Sample mail
{
"Messages": [
{
"From": {
"Email": "pilot@mailjet.com",
"Name": "Your Mailjet Pilot"
},
"To": [
{
"Email": "passenger@mailjet.com",
"Name": "Customer 1"
}
],
"Subject": "Your cart is waiting",
"TextPart": "Dear passenger, Welcome to pastoral grill",
"HTMLPart": "<h3>Dear passenger 1, welcome to <a href=\"https://www.mailjet.com/\">Mailjet!</a></h3><br />May the delivery force be with you!"
}
]
}
Tet the connection-
Note- add sender address to the contact list in mailjet or the mails will be blocked. Also the mails from gmail wont be triggered. Use this URL to add sender address-
GraphQL delivery API is used to access the published site content. Experience Edge for Experience Manager (XM) is an API-based service from Sitecore that gives you globally replicated, scalable access to your XM Cloud items, layout, and media. You can use the standard publish tools in XM Cloud , but instead of rendering content from a self-hosted Content Delivery environment, Experience Edge provides you a Sitecore-hosted GraphQL API.
To access the XM Cloud hosted published site content using Expereince Edge follow these steps-
Login to XM Cloud. Navigate to Projects ==> Environments ==>Details tab.
This should be the GraphQL Delivery token i.e. GQL token-
There are different ways to generate GQL Token. One of the way is generate from portal. Login to XM Cloud and navigate to Projects ==> Environments ==> Details tab
Click on Generate Delivery API Key (Note this key as this won’t be avilable again and needs to be re-generated again if lost)
Note this API key as this is required later whilst configuring the Vercel hosting.
Publish Site–
Publish the site to Edge before starting to configure Project in Vercel, since we are configuring GraphQL Delivery API token items in Sitecore needs to be published
Create a Project in Vercel
Login to Vercel and Create Project-
Since I have logged in using GitHub account it displays the repositories in Github the project will be based on-
Import the repository-
Configure Project
Once the project is created configure the project by selecting the Framework and repo folder FE code exists-
Choose the Nextjs Framework
Choose the sxastarter folder from the repo i.e. /src/sxastarter
Add following environment variables extracted earlier-
0 47.60 npm notice Beginning October 4, 2021, all connections to the npm registry – including for package installation – must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
There are various ways you should be able to do this. I am adding 5 times more space to the existing indent-top style.
_indent.scss
// $middle-margin is defined in _margins.scss
.indent-large-top {
margin-top: calc($middle-margin * 5);
}
Apply a custom style to rendering
Select the component or container you want to apply style and choose option “Indent Large Top” in Spacing section
Now the space between the 2 component is increased and is 100px as per the requirement.
New style applied to container-
Apply style to specific renderings
As above when the style was created it was applied to all renderings.
If you want to restrict the style to be applied to only certain renderings you can do so by setting Allowed renderings field in new created Style item.
For “Indent Large Top” only SectionContainer will be able to see the new Spacing Style.
In Experience Editor you wont see the “Indent Large Top” for other renderings e.g.- for container rendering-
While for Section Container rendering the new style is available-
This is a very common scenario where a background image needs to be set to certain components. Banner’s on any page on your website is a very common place to have a background image.
This blog assumes you have setup the Foundation Head setup or have your own Nextjs project setup implemented using the Sitecore NextJS SDK.
Note: This is not specific to XM Cloud but for any Headless implementation
Foundation Head already has an example on setting the background image using params. In this blog post will explore how this works and where in Sitecore the image can be applied. Will see how this can applied using using OOTB _Background Image item.
To apply image background using rendering parameters to the container see this blog here
Applying background image using rendering field to the components
Background image can be applied to components inheriting the existing __Background Image item to the custom component template.
Create a template for your component. Here I am creating a Banner component-
Inherit _Background Image from /sitecore/templates/Foundation/Experience Accelerator/Presentation/_Background Image
_Background Image has “Background Image” and “Stretch mode” field.
Note that there is a space between the field names, although not recommended but this comes OOTB.
Create a “Banner” JSON Rendering and provide the “Parameters Template”, “Datasource Location” and “Datasource Template” as per your requirement and add this rendering to the “Available Renderings”
Create a Nextjs component in sxastarter project
Note below how the “Background Image” field is set. This is due to the same in field name. Not recommended but this is OOTB.
Add a newly created component (Banner) in Container placeholder-
Create or select associated content
Once the component is added you should see the button to Add Background Image ( ths is added when the template inherits from _Background Image template.
Select the Background Image and Save-
You should now able to see the background image to component-
Create a Resource group in Azure. I create this in West Us region.
Choose the template from the provided link and should take straight to your Azure subscription-
Enter the valid Vm Size and the supported crypto payment.
Select the Network – Mainnet, TestNet or regtest
Select the Ubuntu version. You may select the latest
Resources in Azure
This should create following resources in Azure in the selected resource group-
Navigate to BTCPayServerPublicIP resource. This should show the dns name.
This is your BTC pay admin portal.
Register Admin user
First time when you access the Btc Pay server should ask you to register a user. This user will be a owner.
Login to BTC pay server
Login with the newly created user
You will be asked to configure the lightining network and create a wallet.
Configuring the wallet and lightning network will follow in next blog along with integration with integration with commerce system such as Order Cloud.
Stay tuned to know how to configure this which should ulitmately sync the nodes as shown in below screen.
