Once you click the install button in our DB Notify app page in the app store, you will be redirected to get the permission prior to installation. If you agree to give the permission, you can click on the install button.
When you are done installing, you will be redirected to the main page. If you are maintaining There we have provided a quick guide to set up the app for ready to use in a quick manner. Once you follow these steps, you can have the app featured without any hesitation.
We have provided default settings for the notification button, subscriber form and the confirmation message. However, you can edit in the settings page as you prefer.
You need to set up your email integration to receive back in stock notifications. Our service is compatible with Klaviyo email service. In the settings page, you may provide the Klaviyo secret API key to integrate with Klaviyo. We have provided a small guide to configure the email settings from the Klaviyo’s settings using Flows at the end of this tutorial.
Then you have to activate the DB Notify main app widget in the theme editor.
Finally you have to enable the app product tracker widget in the product page. You will be directed to the theme editor by clicking on the button.
Installing the app functionalities in the hydrogen stores is somewhat different from the installation process of online stores.
First you have to install our app UI component package through NPM.
npm i db-notify-hydrogenIn the package you will get 2 components which are <NotifyButton /> and <NotifyBanner />.
Place the <NotifyButton /> component inside the <ProductForm /> component in the products.$handle.tsx file as shown in the below example.
function ProductForm({
product,
selectedVariant,
variants,
}: {
product: ProductFragment;
selectedVariant: ProductFragment['selectedVariant'];
variants: Array<ProductVariantFragment>;
}) {
return (
<div className="product-form">
<VariantSelector
handle={product.handle}
options={product.options}
variants={variants}
>
{({option}) => <ProductOptions key={option.name} option={option} />}
</VariantSelector>
<br />
{selectedVariant?.availableForSale ? (
<AddToCartButton
disabled={!selectedVariant || !selectedVariant.availableForSale}
onClick={() => {
window.location.href = window.location.href + '#cart-aside';
}}
lines={
selectedVariant
? [
{
merchandiseId: selectedVariant.id,
quantity: 1,
},
]
: []
}
>
Add to cart
</AddToCartButton>
): (
<NotifyButton
selectedVariantId={selectedVariant?.id}
customer,
notifyButtonName="Notify Me",
notifySubmitButtonName="Notify Me When Available"
/>
)}
</div>
);
}
You have to provide the customer details as per the following format.
const customer = {
customerId: string, // Do not provide the GraphQL id format
firstName: string,
lastName: string,
email: string
}You can provide any name for notifyButtonName and notifySubmitButtonName to display the names for the respective buttons.
Now you have to place the <NotifyBanner /> component inside the <Product /> in the products.$handle.tsx file as shown in the below example. As well as you have to provide the data for responseBannerStyles as shown in the example. Here the bannerId is coming from the action function as the response after submitting the notify data. Tge process will be explain in the coming steps.
export default function Product() {
const {product, variants} = useLoaderData<typeof loader>();
const actionData = useActionData<typeof action>();
const {selectedVariant} = product;
const bannerId = actionData?.bannerId;
const responseBannerStyles = {
confirmationMessage: "Notification enabled successfully",
successMessageTextColor: "#ffffff",
successMessageBackgroundColor: "#0cd4a6",
alreadySubscribedMessage: "You have already subscribed to this item.",
errorMessage: "Something went wrong. Please try again later.",
customerNotSignedInMessage: "You have to sign in first to subscribe",
errorMessageTextColor: "#ffffff",
errorMessageBackgroundColor: "#ff3f3f"
}
return (
<>
<div className="product">
<ProductImage image={selectedVariant?.image} />
<ProductMain
selectedVariant={selectedVariant}
product={product}
variants={variants}
/>
<NotifyBanner
responseBannerStyles={responseBannerStyles}
bannerId={bannerId}
/>
</div>
</>
);
}Now you have to implement the logic to submit the data to our app server. After click on the submit button, the data will be submitted as a POST request and we can handle this data in the action function in the products.$handle.tsx file as usual in the Hydrogen framework. The logic is as per the below example.
export async function action({request}: ActionFunctionArgs) {
const formData = await request.formData();
let bannerId = "";
if (formData.has("notify-me-form")) {
const service = "restock_notification";
const customerId = String(formData.get("notify-me-customer-id"));
if (!customerId) {
bannerId = '#notify-me-customer-not-signed-in';
}
else {
const productVariantId = String(formData.get('notify-me-selected-variant-id'));
if (productVariantId) {
try {
const response = await fetch('https://db-notify-app-8b0a7f7318e3.herokuapp.com/api/v1/data', {
method: 'POST',
body: JSON.stringify({
customrId: customerId,
productVariantId: productVariantId,
service: service
})
});
switch(response.status) {
case 201:
bannerId = '#notify-me-success';
break;
case 400:
bannerId = '#notify-me-already-exists';
console.error("You have already subscribed to this product")
break;
case 500:
case 404:
bannerId = '#notify-me-something-wrong';
console.error("Internal error occurred")
break;
default:
bannerId = '#notify-me-something-wrong';
console.error("Error: ", response)
}
}
catch(error) {
bannerId = '#notify-me-something-wrong';
console.error("Error: ", error)
}
}
else {
bannerId = '#notify-me-something-wrong';
console.error("Product variant id not found")
}
}
}
return json({bannerId});
}Finally you have to attach the CSS file relevant to the app to get the CSS support. Here is a sample CSS file you have to provide.
#notify-me-click-button {
padding: 10px 30px;
background-color: #ffffff;
color: #000000;
cursor: pointer;
}
#notify-me-click-button:hover {
background-color: #000000;
color: #ffffff;
}
#notify-me-form-container {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
#notify-me-form {
width: 300px;
display: flex;
flex-direction: column;
gap: 5px;
border-radius: 20px;
padding: 20px;
background-color: white;
border: 1px solid black;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#notify-me-form-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 5px;
}
#notify-me-form-cancel {
border: none;
cursor: pointer;
background-color: white;
}
.notify-me-form-group {
display: flex;
flex-direction: column;
}
#notify-me-submit-button {
color: #ffffff;
background-color: #000000;
border-color: #000000;
width: 100%;
padding: 10px 15px;
}
#notify-me-submit-button:hover {
background-color: #ffffff;
color: #000000;
}
.notify-me-toast-banner {
width: 400px;
height: 50px;
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
z-index: 9999999
}You can edit the CSS as you prefer. You have place this file inside the styles folder of the hydrogen project and link to the project in the root.tsx file. Assume the CSS file name is dbnotify.css.
import dbnotifyStyles from './styles/dbnotify.css?url'
export function links() {
return [
{rel: 'stylesheet', href: resetStyles},
{rel: 'stylesheet', href: appStyles},
{rel: 'stylesheet', href: dbnotifyStyles},
{
rel: 'preconnect',
href: 'https://cdn.shopify.com',
},
{
rel: 'preconnect',
href: 'https://shop.app',
},
{rel: 'icon', type: 'image/svg+xml', href: favicon},
];
}
You may have to allow our base app URL under content security policy – https://db-notify-app-8b0a7f7318e3.herokuapp.com
Our app offers two payment plans to suit your needs:
First you have to provide the Klaviyo secret API key under the general settings to integrate with our app.
After that, you have to set up flows for corresponding email types from Klaviyo’s side.
We have provided you 2 triggers regarding our app functionalities.
Once you integrate your Klaviyo account with our app, they will be listed under the Metrics.
Under Flows, you have to create a new flow. You may continue with Build your own. Then you may create a flow with your own name.
Then you have to select a trigger. You can select it under your metrics > API, select the required trigger relevant to the DB Notify app as mentioned above.
Then under action you may select Email and connect it with the flow. Then you may set up the email configurations as you want.
Then the flow is ready and your email integration is completed.
This website uses cookies.