Comment on page
Referring to the current Collectible's information
This documentation is unfinished
Advanced features such as getting parameters from the URL bar, or referencing the current user are important to building dynamic functionality for Collectibles. To complete this functionality and give users the ability to dynamically generate links from Collectibles in a list to a page of a single collectible, we have created the ability for an HTML block to dynamic reference itself with the const
$THIS...const is useful when it is necessary to refer to the current item, for example when creating dynamic links that should be unique for each collectible item.
Suppose you wanted to build a webpage that showed a dynamic list of Collectibles based on the contract address of a particular NFT contract. This is fairly easy to do, list the Collectibles. Now let's say you wrap each Token's image in an
anchortag, turning the image itself into a link that when clicked upon takes the user to a new webpage that shows a Single Collectible. Creating a Single Collectible is also fairly easy, but the question is- how would you pass the data about WHICH collectible you want to display on the Single Collectible page?
This is where we use
Let us take a closer look at line 9-12. What we are doing here is creating a link to a new page but passing URL Query Params for the DappHero engine to catch in the
singleNFT.htmlpage. You could manually pass the details
assetTokenId=1234but then you would be stuck always rendering this one token. Instead, because we are inside the
asset containerfrom line 6-9 which gets rendered for each Collectible returned, we can access THIS specific token. If we use $THIS_TokenID in the
hreflink, it will get replaced with the token currently displayed, for example '1234'. If we do the same for the
assetContractAddresswe can now link to the
singleNFT.htmlpage passing all the information required for that page to render dynamically the specific collectible token we are interested in.
$THIS...const is useful for more than just creating dynamic links- it can also be used to create dynamic forms. This means you can combine the Collectible feature with other features like smart contracts- allowing users to interact with smart contracts using the about the current token they are looking for. A great example for this would be to create a Collectible store front connected to a smart contract to let people buy or sell Collectibles directly from your website!
Have a look at this simple example.
TokenID: <input type="text" value="$THIS_TokenID"><br><br>
Owner Address: <input type="text" value="$THIS_OwnerAddress"><br><br>
<input type="submit" value="Submit">