The campaign has 3 landing pages, one for each collection type. And one NFT redemption checker page with one checker for the RAYC collection, and one for the ZAYC collection
Each redemption page should have the following structure for code blocks
Images and text (customized by Tobi)
Dropdown selector and Redeem with NFT button (provided below)
Because of this I recommend using Visual Studios Code to edit these files. You can merge the code blocks into one html file and paste to Shopify as you’ve done earlier.
Note that this code does not display the variant ID selected
<!---PERC START --- Two Dropdowns and Claim NFT--> <!---WEB2 PART START--> <!-- First dropdown label --> <label
for="variant1">Select a Hoody Size:</label> <!-- First dropdown values --><select id="variant1">
<option value="Hoody XS">XS</option>
<option value="Hoody S">S</option>
<option value="Hoody M">M</option>
<option value="Hoody L">L</option>
<option value="Hoody XL">XL</option>
<option value="Hoody XXL">XXL</option>
<option value="Hoody XXXL">XXXL</option>
</select>
<p>
<!-- new line -->
</p>
<!-- Second dropdown label--> <label for="variant2">Select a T-Shirt Size:</label>
<!-- Second dropdown label--><select id="variant2">
<option value="T-shirt XS">XS</option>
<option value="T-shirt S">S</option>
<option value="T-shirt M">M</option>
<option value="T-shirt L">L</option>
<option value="T-shirt XL">XL</option>
<option value="T-shirt XXL">XXL</option>
<option value="T-shirt XXXL">XXXL</option>
</select>
<p>
<!-- new line -->
</p>
<!-- Display the result of the lookup: Remove once working as expected -->
<!-- <p>Variant ID: <span id="result"></span></p> -->
<!--Cart FORM : required to create the draft order -->
<form method="post" action="/cart/add" id="product-form-installment" class="installment caption-large"
enctype="multipart/form-data" accept-charset="UTF-8"><input type="hidden" name="form_type" value="product"> <input
type="hidden" name="utf8" value="✓"> <input type="hidden" value=""></form>
<!--END Multivariant NFT REDEEM Button --> <!---WEB2 PART END-->
<!---WEB3 PART START-->
<!--- Add the <nft-buy-button> START --->
<nft-buy-button id="nftBuyButton1" product="8395170414941">
<div>
<span class="label">Redeem with NFT</span>
</div>
</nft-buy-button>
<!--- Add the </nft-buy-button> END --->
<!---WEB3 PART END-->
<script>
// The data array to perform the lookup on
const data =
[
{ "id": 46637077201245, "option1": "Hoody XS", "option2": "T-shirt XS", },
{ "id": 46637125861725, "option1": "Hoody XS", "option2": "T-shirt S", },
{ "id": 46637125894493, "option1": "Hoody XS", "option2": "T-shirt M", },
{ "id": 46637125927261, "option1": "Hoody XS", "option2": "T-shirt L", },
{ "id": 46637125960029, "option1": "Hoody XS", "option2": "T-shirt XL", },
{ "id": 46637125992797, "option1": "Hoody XS", "option2": "T-shirt XXL", },
{ "id": 46637126025565, "option1": "Hoody XS", "option2": "T-shirt XXL", },
{ "id": 46637077234013, "option1": "Hoody S", "option2": "T-shirt XS", },
{ "id": 46637126058333, "option1": "Hoody S", "option2": "T-shirt S", },
{ "id": 46637126091101, "option1": "Hoody S", "option2": "T-shirt M", },
{ "id": 46637126123869, "option1": "Hoody S", "option2": "T-shirt L", },
{ "id": 46637126156637, "option1": "Hoody S", "option2": "T-shirt XL", },
{ "id": 46637126189405, "option1": "Hoody S", "option2": "T-shirt XXL", },
{ "id": 46637126222173, "option1": "Hoody S", "option2": "T-shirt XXXL", },
{ "id": 46637077266781, "option1": "Hoody M", "option2": "T-shirt XS", },
{ "id": 46637126254941, "option1": "Hoody M", "option2": "T-shirt S", },
{ "id": 46637126287709, "option1": "Hoody M", "option2": "T-shirt M", },
{ "id": 46637126353245, "option1": "Hoody M", "option2": "T-shirt L", },
{ "id": 46637126386013, "option1": "Hoody M", "option2": "T-shirt XL", },
{ "id": 46637126418781, "option1": "Hoody M", "option2": "T-shirt XXL", },
{ "id": 46637126451549, "option1": "Hoody M", "option2": "T-shirt XXXL", },
{ "id": 46637077299549, "option1": "Hoody L", "option2": "T-shirt XS", },
{ "id": 46637126484317, "option1": "Hoody L", "option2": "T-shirt S", },
{ "id": 46637126517085, "option1": "Hoody L", "option2": "T-shirt M", },
{ "id": 46637126549853, "option1": "Hoody L", "option2": "T-shirt L", },
{ "id": 46637126582621, "option1": "Hoody L", "option2": "T-shirt XL", },
{ "id": 46637126615389, "option1": "Hoody L", "option2": "T-shirt XXL", },
{ "id": 46637126648157, "option1": "Hoody L", "option2": "T-shirt XXXL", },
{ "id": 46637077332317, "option1": "Hoody XL", "option2": "T-shirt XS", },
{ "id": 46637126680925, "option1": "Hoody XL", "option2": "T-shirt S", },
{ "id": 46637126713693, "option1": "Hoody XL", "option2": "T-shirt M", },
{ "id": 46637126779229, "option1": "Hoody XL", "option2": "T-shirt L", },
{ "id": 46637126811997, "option1": "Hoody XL", "option2": "T-shirt XL", },
{ "id": 46637126844765, "option1": "Hoody XL", "option2": "T-shirt XXL", },
{ "id": 46637126877533, "option1": "Hoody XL", "option2": "T-shirt XXXL", },
{ "id": 46637077365085, "option1": "Hoody XXL", "option2": "T-shirt XS", },
{ "id": 46637126910301, "option1": "Hoody XXL", "option2": "T-shirt S", },
{ "id": 46637126943069, "option1": "Hoody XXL", "option2": "T-shirt M", },
{ "id": 46637126975837, "option1": "Hoody XXL", "option2": "T-shirt L", },
{ "id": 46637127008605, "option1": "Hoody XXL", "option2": "T-shirt XL", },
{ "id": 46637127041373, "option1": "Hoody XXL", "option2": "T-shirt XXL", },
{ "id": 46637127074141, "option1": "Hoody XXL", "option2": "T-shirt XXXL", },
{ "id": 46637077397853, "option1": "Hoody XXXL", "option2": "T-shirt XS", },
{ "id": 46637127106909, "option1": "Hoody XXXL", "option2": "T-shirt S", },
{ "id": 46637127139677, "option1": "Hoody XXXL", "option2": "T-shirt M", },
{ "id": 46637127172445, "option1": "Hoody XXXL", "option2": "T-shirt L", },
{ "id": 46637127205213, "option1": "Hoody XXXL", "option2": "T-shirt XL", },
{ "id": 46637127237981, "option1": "Hoody XXXL", "option2": "T-shirt XXL", },
{ "id": 46637127270749, "option1": "Hoody XXXL", "option2": "T-shirt XXXL", }]
</script> <!---WEB3 PART END-->
<script>
// Get references to the dropdowns and result element
// variant for value from dropdown 1
const variant1Select = document.querySelector("#variant1");
if (!variant1Select) {
console.info("we couldn't find the result element variant1Select .")
}
// variant for value from dropdown 2
const variant2Select = document.querySelector("#variant2");
if (!variant2Select) {
console.info("we couldn't find the result element variant2Select .")
}
// For testing purposes, remove or comment out afterwards
const resultElement = document.querySelector("#result");
if (!resultElement) {
console.info("we couldn't find the result element on load.")
}
// Function to perform the lookup and update the result
function updateResult() {
// Get the selected values from the dropdowns
const variant1 = variant1Select.value;
const variant2 = variant2Select.value;
//Prints values to console
console.info("variant1Select", variant1Select)
console.info("variant2Select", variant2Select)
// Find the matching item in the data array
const item = data.find(
(item) => item.option1 === variant1 && item.option2 === variant2
);
//Prints values to console
console.info("itemFound", item)
// Update the result element with the value of the matching item
// Error message "Not found" on page if selected option does not exist
if (!resultElement) {
console.info("we couldn't find the result element")
} else {
resultElement.textContent = item ? item.id : "Not found";
}
// WEB3 PART START
if (!item) {
console.error("Item variant not found")
return
}
if (!item.id) {
console.error("Item variant id not found")
return
}
const nftBuyButton = document.getElementById("nftBuyButton1");
// injecting
nftBuyButton.setAttribute("variant", item.id);
// WEB3 PART END
}
// Update the result when either of the dropdowns changes
variant1Select.addEventListener("change", updateResult);
variant2Select.addEventListener("change", updateResult);
// Update the result initially
updateResult();
</script>
<!---WEB2 PART END-->
<!---PERC END --- Two Dropdowns and Claim NFT-->