Custom Calendar Rendering (Non-Product Page SDK Integration)

Developers
1

I’m working on integrating a custom calendar on a non-product page in our Shopify store using the Storefront SDK. I’ve reviewed the Quick Start and Rendering a Calendar guides, but wanted to clarify:

  • Are there any starter templates or example implementations for building a custom calendar?

The calendar will live inside a <div id="sesami-calendar">, and I’d like to fully customize its layout and styling.

Appreciate any code samples or guidance you can provide!

2

hi @anthonytc

I’m really glad to hear that and happy I could help!

We’re currently working on adding sample projects to the documentation.

When it comes to adding the SDK to Shopify, there are countless ways to implement it. Our recommendation is to create a Shopify section. You can use vanilla JavaScript or build the experience with any modern JavaScript framework, as long as you compile it into a single JS file. Then, all you need is a Liquid file (the section) to load and render that JS file as a section.

For example :

// javascript file
async function main(shopData) {
  async function init() {
    return new Promise((resolve) => {
      if (window.SesamiSDK) {
        callSDKs().then(resolve);
      } else {
        const checkSesamiSDKInterval = setInterval(() => {
          if (window.SesamiSDK) {
            clearInterval(checkSesamiSDKInterval);
            callSDKs().then(resolve);
          }
        }, 100);
      }
    });
  }

  async function callSDKs() {
    const sesami = new SesamiSDK(shopData);
    await sesami.init();

    // Example HTML after init
    return `
      <div>
        <h2>Sesami Initialized</h2>
      </div>
    `;
  }

---------------------------------------------------------------------------

// Liquid file
// import the javascript file from assets folder
<script async src="https://cdn.sesami.co/sdk.js"></script>

<div id="sesami-app-{{ section.id }}"></div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const Shop = {
      shopId: "{{ shop.id }}", // Shopify's shop ID
      productId: "{{ section.settings.product.id }}",
      variantId: "{{ section.settings.product.selected_or_first_available_variant.id }}",
      quantity: 1,
      autoLoad: true
    };
    main(Shop).then((html) => {
      document.getElementById("sesami-app-{{ section.id }}").innerHTML = html;
    });
  });
</script>
{% schema %}
{
  "name": "Sesami SDK Section",
  "settings": [
    {
      "type": "product",
      "id": "product",
      "label": "Select a product"
    }
  ],
  "presets": [
    {
      "name": "Sesami SDK Integration"
    }
  ]
}
{% endschema %}

  const html = await init();
  return html;
}

Using vanilla JavaScript is a great way to understand how the system works, but it’s not always the most practical approach. We recommend using a lightweight JavaScript framework instead. The implementation process remains the same—you simply need to initialize the SDK. Once initialized, the SDK provides all the data and information you need to build your experience and style it however you like. And if you ever feel overwhelmed, the documentation clearly explains how to use the data effectively.

3

Great! So if I drag and drop the javascript file into an assets/sdk.js and then the liquid file into a sections/calendar.liquid, would I then be able to render the calendar on any page by adding a section?

4

yes , by adding any liquid file to the shopify section folder , shopify grant this ability to you to access the section in the customize page.

5

image
image2200×534 109 KB

It’s giving me this when I try to render the section on the page, is there something I’m importing incorrectly?

7

hi @anthonytc

sorry there was a typo in the code

async function main(shopData) {
  async function init() {
    return new Promise((resolve) => {
      if (window.SesamiSDK) {
        callSDKs().then(resolve);
      } else {
        const checkSesamiSDKInterval = setInterval(() => {
          if (window.SesamiSDK) {
            clearInterval(checkSesamiSDKInterval);
            callSDKs().then(resolve);
          }
        }, 100);
      }
    });
  }

  async function callSDKs() {
    const sesami = new SesamiSDK(shopData);
    await sesami.init();

    return `
      <div>
        <h2>Sesami Initialized</h2>
      </div>
    `;
  }
    const html = await init();
    return html;
}

<script async src="https://cdn.sesami.co/sdk.js"></script>
<script src="{{ 'sesami-sdk-Section.js' | asset_url }}"></script>

<div id="sesami-app-{{ section.id }}"></div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const Shop = {
      shopId: "{{ shop.id }}", // Shopify's shop ID
      productId: "{{ section.settings.product.id }}",
      variantId: "{{ section.settings.product.selected_or_first_available_variant.id }}",
      quantity: 1,
      autoLoad: true
    };
    main(Shop).then((html) => {
        console.log(html)
      document.getElementById("sesami-app-{{ section.id }}").innerHTML = html;
    });
  });
</script>
{% schema %}
{
  "name": "Sesami SDK Section",
  "settings": [
    {
      "type": "product",
      "id": "product",
      "label": "Select a product"
    }
  ],
  "presets": [
    {
      "name": "Sesami SDK Section"
    }
  ]
}
{% endschema %}
8

Great! Okay I have the Sesami Initialized showing up, is there any way to just get an example Calendar UI component that I could drop in, because I’m really struggling with creating it

9

hi @anthonytc

I’m really glad you’ve made it this far!
To render the calendar, simply use the data provided by sesami after initialization (inside const sesami).
For more details, you can refer to the documentation here.