hi @jackson_tan
no problem at all
can i offer you a simple code snippet ! (this is what i used before)
import {useEffect} from ‘react’;
import {useCart} from ‘@shopifyshopify/hydrogen-react’;
export type UseSesamiProps = {
shopId: string;
productId: string;
variantId?: string;
merchandiseId?: string;
quantity?: number;
locale?: string;
buttonCustomizedSettings?: string;
autoAddToCart?: boolean;
skipCart?: boolean;
};
const SCRIPT_SRC = ‘https://cdn.sesami.co/storefront/latest/sesami-main.js’;
export const useSesami = (props: UseSesamiProps, containerId: string) => {
const {linesAdd} = useCart();
useEffect(() => {
// Inject the script if it hasn't been loaded yet
if (!document.querySelector(\`script\[src="${SCRIPT_SRC}"\]\`)) {
const script = document.createElement('script');
script.src = SCRIPT_SRC;
script.async = true;
document.body.appendChild(script);
}
// Render <sesami-experience> after script is ready
const render = () => {
const container = document.getElementById(containerId);
if (!container) return;
container.innerHTML = '';
const element = document.createElement('sesami-experience');
element.setAttribute('shop-id', props.shopId);
element.setAttribute('product-id', props.productId);
if (props.variantId) element.setAttribute('variant-id', props.variantId);
if (props.quantity)
element.setAttribute('quantity', props.quantity.toString());
if (props.locale) element.setAttribute('locale', props.locale);
if (props.buttonCustomizedSettings)
element.setAttribute(
'button-customized-settings',
props.buttonCustomizedSettings,
);
if (props.autoAddToCart) element.setAttribute('auto-add-to-cart', '');
if (props.skipCart) element.setAttribute('skip-cart', '');
container.appendChild(element);
};
const interval = setInterval(() => {
if (customElements.get('sesami-experience')) {
clearInterval(interval);
render();
}
}, 100);
// Event handlers
const handleCartAdd = async () => {
await linesAdd(\[
{
merchandiseId: props.merchandiseId,
quantity: props.quantity ?? 1,
},
\]);
console.log('Product added to cart');
};
const handleCartSkip = () => {
console.log('skip cart');
};
const handleModalOpened = (e: CustomEvent) => {
const tagId = e.detail.tagId;
const hiddenFieldsWrapper = document.getElementById(
\`sesami-hidden-fields-${tagId}\`,
);
if (!hiddenFieldsWrapper) return;
const sesamiDateInput =
hiddenFieldsWrapper.querySelector<HTMLInputElement>(
"\[name='properties\[Date\]'\]",
);
if (!sesamiDateInput) return;
const handleDateChange = (e: Event) => {
const target = e.target as HTMLInputElement;
console.log('date changed', target.value);
};
sesamiDateInput.addEventListener('change', handleDateChange);
};
// event listeners
window.addEventListener('sesami:cart:add', handleCartAdd);
window.addEventListener('sesami:cart:skip', handleCartSkip);
window.addEventListener(
'sesami:modal:opened',
handleModalOpened as EventListener,
);
return () => {
clearInterval(interval);
window.removeEventListener('sesami:cart:add', handleCartAdd);
window.removeEventListener('sesami:cart:skip', handleCartSkip);
window.removeEventListener(
'sesami:modal:opened',
handleModalOpened as EventListener,
);
};
}, [props, containerId]);
};
i then wrapped the productForm.jsx main div with
and used the useSesami in the AddToCartButton.jsx
useSesami(
{
shopId: '',
productId: '',
variantId: '',
merchandiseId: '',
quantity: 1,
locale: 'en',
buttonCustomizedSettings:
'%7B%22width%22%3A%22300px%22%2C%22height%22%3A%2250px%22%2C%22color%22%3A%22%23FFF%22%2C%22color_background%22%3A%22%2314146d%22%2C%22font_size%22%3A18%2C%22border_width%22%3A1%2C%22border_radius%22%3A12%2C%22border_color%22%3A%22%230f0f30%22%2C%22alignment%22%3A%22flex-start%22%7D',
autoAddToCart: true,
skipCart: true,
},
'sesami-container',
);
—————————————————————————————————————————————
<CartForm route="/cart" inputs={{lines}} action={CartForm.ACTIONS.LinesAdd}>
…
<div id="sesami-container" />
…
</CartForm>
note : the merchandiseId is for addToCart event , you can remove he event section of useSesami if you wanted and please consider that this snippet is only for testing and you must write your own hook for your own project.
