FAQs for Custom Blocks

How do I test my block?

Testing should take place in 2 phases depending on your block's progress:

If your block is still under construction, test using the console within the block editor plus the block preview. The preview shown there represents the same block that will be sent to the app. Using Variable Preview Values will allows you to test variables, and the console will allow you to see if App Actions are successfully being called.
If you're block is ready for production testing, then start by placing it on the Product Page Builder, and conditionally tag it to just a single product. From here, you can navigate to this product in the product app, and test it in production before expanding access in other areas of the app.

Can I use iFrames in my block?

You can use iFrames in your block as long as it's from a secure source (make sure to always verify the source if you've received the iFrame from an unknown vendor). You should avoid using iFrames to accept any form of payment, and should additionally avoid iFraming an experience that contains its own navigation bar or footer, said differently, iFrames should render as components and not entire websites.

How do I set the SDK version for a Custom Block?

When creating a Custom Block, by default it will be set to the latest base version of the SDK that powers it. If you wish to roll it back to a prior version, or move it forward to a beta version, then you can go to 'Block Settings' in the text editor, and scroll down to the version selector.

Why are `<a>` tags not working in my block?

All <a> tags are required to utilize https:// at the beginning of the URL schema. URL's missing https:// will not work as expected when a user selects the link in the block.

Valid example:

<a href="htps://google.com">test</a>

Invalid example:

<a href="google.com">test</a>

Why isn't my script loading in my Custom Block?

Before attempting to import a script, you should first see if the the relevant resource is available in the 'Import Library' dropdown in Block Settings.
If the script isn't available in the 'Import Library' dropdown, you can import it manually in your block instead. If there is a need to include a script inside your HTML, please make sure of the following:

If the script requires certain HTML elements to be present in the DOM before executing, it is required that you use the "defer" attribute on the script tag. This will load the script after the entire HTML DOM has been rendered.

<script charset="utf-8" src="https://widgetv3.bandsintown.com/main.min.js" defer></script>

If the scripts needs to be loaded synchronously in order in the HTML, you can skip the "defer" attribute on the script tag. Keep in mind, this will impact load times as the script will prevent any further elements from loading until it has finished loading itself.

<script charset="utf-8" src="https://widgetv3.bandsintown.com/main.min.js"></script>

Can I use external APIs in my Custom Block?

Yes! You can make requests to external APIs in your block, just make sure to review any relevant CORS policies that make affect your ability to make requests from an unknown endpoint.

How do I refresh variables if their values change after the block loads?

If a variables value changes AFTER, you block initially loads, then it is at risk of displaying outdated data to a customer. This can happen for example, if a user adds product to the cart, and the cart variables now display a prior cart amount. Use can use the registerEventHandler function to keep your variable values dynamic & up to date.

How do I override default browser styles, such as elements turning blue?

Time to time you may find that your block styles will appear differently in the app, and will reflect default styles for a Safari/Chrome browser. There isn't a silver bullet to resolve this, but there are a few tactics to try:

Apply !important to the end of the relevant CSS property
Apply the property appearance: none !important; to a class
Apply your CSS in a <style> tag directly in your HTML

How do I avoid CORS policy issues from external API endpoints?

If an API you are using has a CORS policy that requires the requesting domain to be white listed, then you may need to proxy the API, prior to calling it in your custom block.

What domain should I expect custom block network requests to come from?

All custom blocks are hosted using the following URL structure:

https://custom-blocks.tapcart.com/{{your-app-id}}/

How do I implement Handlebars.js/Mustache.js/etc in my HTML?

If you're looking to use Handlebars.js's built-in helpers, you should first start by exploring the helper functions that Tapcart already provides for Custom Blocks. If you need to leverage Handlebars.js functionality that Tapcart doesn't seem to support already, such as custom helper functions, then you'll need to resort to implementing Handlebars.js yourself.

Using scripts in your HTML should be avoided during your implementation as they will be automatically removed during block rendering. Instead, you can leverage the Javascript below to implement Handlebars.js.

const vars = {customData: "hello world"}
const handlebarsSourceHTML = `<div>{{customData}}</div>`
const customTemplate = Handlebars.compile(handlebarsSourceHTML);
const parentDiv = document.querySelector("#customHandlebarsParentDiv");
parentDiv.innerHTML = customTemplate(vars);

I deleted the default variable preview values, how do I add them back without making a new block?

If you delete the default variable preview values, but ultimately want to revert, you can copy & paste this JSON payload. Alternatively, you can create a new Custom Block, and copy the started JSON provided in the Variable Preview Values.