Hydrogen Product Page

Developers
1

I am having quite a bit of trouble getting the app to work with hydrogen - has any one got this working or examples - looking to create a react library to make this easier for future users.

2

hi @Jayden_Marquardt
hope you are doing well

Follow these steps to integrate Sesami with your Shopify Hydrogen project:

Step 1: Generate a New Hydrogen App

Start by creating a new Hydrogen app. Shopify provides a comprehensive guide for this process, which you can find here .

Step 2: Set Up Your Shop

In this step, you’ll need to configure the storefront API using the Hydrogen channel or headless channel . Shopify’s documentation offers a detailed walkthrough to guide you through the setup process.

Step 3: Add Sesami to Your Project

The final step is adding Sesami to your project:

  1. Based on your project requirements, load the following script into your project :
    <script src="https://cdn.sesami.co/storefront/latest/sesami-main.js"></script>

  2. Shopify provides a detailed guide on how to add scripts to your Hydrogen app, which you can follow for a more structured approach. You can find the documentation here.
    Because this is custom url you need to edit the CSP in entry.server ,
    add this link “https://app.sesami.co” to the CSP to allow sesami server.

  3. Use the Sesami Experience Maker to customize the integration.

  4. Finally, add the generated code into your Hydrogen project to complete the integration.

Step 4: Customize

  • Customization: You can customize the Sesami experience using options provided in the Experience Maker. This includes styling, data mapping, and functionality adjustments tailored to your store.

i hope this guide helped you , please let me know if you faced any other problems
happy programing

3

Hey this doesn’t explain what is needed the docs are quite unfinished and don’t show use cases.
Also the experience maker link doesn’t work
I need it to book it in the system after purchase of the item not just reserve it for 10 mins
Has anyone successfully setup the app in a hydrogen site?

4

hi @Jayden_Marquardt
sorry for wrong link , its fixed now.
this is the experience maker [read here].

5

Hey Mohammad,
Thanks for your response,

That is the link to the sdk not the experience maker you mentioned?
I was hoping to I could get some advice on how to make it work within hydrogen not just get links for the documentation, if the documentation had the info I needed I wouldn’t be writing to the community.

Regards,

Jayden Marquardt

6

hi @Jayden_Marquardt
sir im sorry , for my misunderstanding i fixed the guide , for your other request i will refer it to the dev team

thanks for your patient

7

Hey @Jayden_Marquardt ,
In a Hydrogen implementation which developers have integrated Sesami on several projects, they follow the 3 steps we explained in this guide to add the Sesami button into the Product page.

This lets customers to book an appointment, depending on your project requirements, an add to cart might be needed to for the chosen time for that service which you can handle in your REACT code.

Could you elaborate more on in which of the steps you have issue with so we can help you better?

8

Hey Ehsan, Im sorry but I struggle to believe they had this setup with just the three steps documented

  1. Firstly this isnt even react code: <sesami-experience
    shop-id=“761236725762”
    service-id=“981219221893”
  1. When you put it on the page it fails to do anything because its not placed inside a form (this isnt documented)
  2. When you put it in a cart form it finally works but only lets you reserve a booking time (which is only 10 mins) it doesnt do anything to confirm if the user actually books and pays for it
  3. if I enable instant booking then it will skip the payment process.

I need it to 1. let user select a time and date, 2. add it to cart (not documented) 3. on payment/checkout make the booking

i have tried using your api and sdk and both have the same dead ends as there is no way to actually mark an order as booked after it is purchased.

Once i have figured it all out I am happy to update your documentation to be more helpfull to furture developers trying to do this, but will need advice on how it has been done in the past as you mentioned.

9

Hey Jayden,
Sorry to hear that! I’m happy that we could connect and go over this together.

For the public audience here, I wanted to address item 3 in your list. So once the add to cart happens successfully with the Sesami properties: Date, Time, etc. as line item props, then the booking is confirmed once the order is placed in Shopify. This is for the pre-paid service booking scenario. You mentioned already there is our Instant Booking that would take care of the booking without checkout for post-payment or free bookings.

Again, the point is that our Hydrogen documentation is new and for sure, it needs to be better. Thank you for sharing all the good tips and even willing to collaborate in updating our dev docs on GitHub.