Implementing Cloudinary Product Gallery in Next.js - javascript

I am trying to use the Cloudinary Product Gallery in my eCommerce - Next.js project, but am having a difficult time putting it together.
Here is Cloudinary Product Gallery: https://cloudinary.com/documentation/product_gallery
The error I am getting: Cannot read property 'galleryWidget' of undefined . Let me know what I am doing wrong.
file - _document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<script
src="https://product-gallery.cloudinary.com/all.js"
type="text/javascript"
></script>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
file - SingleProduct.jsx
import React, { useRef } from 'react';
const SingleProduct = ({ product }) => {
const { slug } = product;
const cloudnaryGalleryRef = useRef(null);
if (!cloudnaryGalleryRef.current) {
cloudnaryGalleryRef.current = window.cloudinary
.galleryWidget({
container: '#my-gallery',
cloudName: 'cloudName',
carouselStyle: 'thumbnails',
thumbnailProps: {
width: 75,
height: 75,
spacing: 4,
navigationColor: 'green',
},
mediaAssets: [{ tag: slug }],
})
.render();
}
return <div id="my-gallery"></div>;
};
export default SingleProduct;

Assuming there's no problem with your script, you need to check if window available before executing the function..
e.g.
if (typeof window !== 'undefined') {
..... window.cloudinary.galleryWidget(.....)
}
You will notice this will occur very frequently in nextjs apps, and you need to include these necessary checks since next.js in most cases are server side generated, and until pages are loaded in browser, window is not defined.

Here is an working solution
import React, { useRef } from 'react';
const SingleProduct = ({ product }) => {
const { slug } = product;
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const scriptTag = document.createElement('script');
scriptTag.src = 'https://product-gallery.cloudinary.com/all.js';
scriptTag.addEventListener('load', () => setLoaded(true));
document.body.appendChild(scriptTag);
}, []);
const cloudnaryGalleryRef = useRef(null);
useEffect(() => {
if (!loaded) return;
const myGallery = window.cloudinary.galleryWidget({
container: '#my-gallery',
cloudName: 'dhvi46rif',
carouselStyle: 'thumbnails', // default value: included for clarity
thumbnailProps: {
width: 75,
height: 75,
spacing: 4,
navigationColor: 'green',
},
mediaAssets: [{ tag: slug }],
});
if (!cloudnaryGalleryRef.current && typeof window !== 'undefined') {
cloudnaryGalleryRef.current = myGallery.render();
}
return () => {
cloudnaryGalleryRef.current = myGallery.destroy(); // Important To avoid memory leaks and performance issues, make sure to use the destroy method before removing the Product Gallery widget container element from your DOM.
};
}, [loaded, slug]);
return <div id="my-gallery" />;
};
export default SingleProduct;

Related

Vuejs plays sound periodically

This code plays a sound when I refresh the browser, but I expect it to play the sound every 15 seconds. How can I fix this problem?
When the sound is played every time I refresh, it means that fetching data from the database is working and it will play the updated sound correctly. However, the problem is that it should update periodically, not just when the user clicks refresh
Parent
<template>
<div>
<CommunicateVoice v-if="filenames.value && filenames.value[0]" :files="filenames.value[0]"/>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import axios from "axios";
import CommunicateVoice from './CommunicateVoice.vue';
const lands = ref([]);
const filenames = ref([]);
onMounted(async () => {
const fetchData = async () => {
const res = await axios.get("https://koh-abx.com:50100/onboardlands");
lands.value = res.data;
filenames.value = computed(() => {
return lands.value.map(item => {
const digits = item.numbershow.toString().split('');
return digits.map(digit => `https://koh-abx.com/sound/${digit}.mp3`);
});
});
};
fetchData();
setInterval(fetchData, 15000);
});
</script>
Child
<template>
<div>
<audio ref="audioEl" />
</div>
</template>
<script>
import { onMounted, ref } from 'vue';
export default {
props: {
files: {
type: Array,
required: true,
},
},
setup(props) {
const audioEl = ref(null);
const currentFileIndex = ref(0);
onMounted(() => {
audioEl.value = new Audio();
audioEl.value.addEventListener("ended", playNextFile);
document.body.appendChild(audioEl.value);
audioEl.value.src = props.files[currentFileIndex.value];
audioEl.value.play();
});
function playNextFile() {
currentFileIndex.value += 1;
if (currentFileIndex.value === props.files.length) {
document.body.removeChild(audioEl.value);
return;
}
audioEl.value.src = props.files[currentFileIndex.value];
audioEl.value.play();
}
return {
audioEl,
playNextFile,
};
},
};
</script>
Try appending something like a timestamp to your endpoint, this should avoid the cache since the URL would be unique, allowing the browser to fetch updated sounds every 15s without refreshing.
https://koh-abx.com/sound/${digit}.mp3?t=${+new Date()}

Google Consent Mode Implementation using Gatsby

I am following this tutorial about implementing google consent mode to add cookies to my website !
By using Gatsby.js I am not sure how to add these codes :
<!-- The initial config of Consent Mode -->
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('consent', 'default', {
ad_storage: 'denied',
analytics_storage: 'denied',
wait_for_update: 1500,
});
gtag('set', 'ads_data_redaction', true);
</script>
​
<!-- Cookie Information Pop-up Script is required for the SDK -->
<script id="CookieConsent" src="https://policy.app.cookieinformation.com/uc.js" data-culture="EN" type="text/javascript"></script>
​
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
​
gtag('config', 'TRACKING-ID');
</script>
​
</head>
<body>
Do you have any idea how to implement this code in Gatsby , is there any library or something that will help to implement these scripts !
Thanks
This component is used as the initial screen that applies when the page loads.
import React, { useState, useEffect } from 'react';
import { useLocation } from '#reach/router';
import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies';
import Cookies from 'js-cookie';
import CookieSettings from './Settings';
const CookieBanner = () => {
const [showBanner, setShowBanner] = useState(false);
const [showSettings, setShowSettings] = useState(false);
const location = useLocation();
// showSettings -> use this state property to open a configuration
// window which may open up more information on the cookie(s) being applied
useEffect(() => {
setShowBanner(Cookies.get('gatsby-gdpr-responded') !== 'true');
}, [])
useEffect(() => {
initTracking();
}, [Cookies.get('gatsby-gdpr-responded')])
const initTracking = () => {
initializeAndTrack(location)
}
const handleAccept = () => {
Cookies.set('gatsby-gdpr-google-analytics', true, { expires: 365 })
handleCloseAll();
}
const handleDecline = () => {
Cookies.remove('gatsby-gdpr-google-analytics');
handleCloseAll();
}
const handleCloseAll = () => {
setShowSettings(false);
setShowBanner(false);
Cookies.set('gatsby-gdpr-responded', true, { expires: 365 });
}
return (
// add your component logic here
// Take not of the different functions that are available above, like handleAccept / handleDecline / handleCloseAll
// handleCloseAll -> if a user declines / closes the banner
// handleAccept -> a button to accept by default
// handleDecline -> a button to decline the cookies
)
}
export default CookieBanner
The next component is more of a Configuration screen, which provides more information on the cookies being applied, if you take note on the import of Toggle, we use a toggle to allow users to specifically toggle on or off their cookies at any point, you of course if you have many GDPR compliances, may want to either create separate functions that handle the removal of cookies or a reusable function that is passed the name of the cookie to be removed / applied.
import React, { useState } from 'react';
import Cookies from 'js-cookie';
import Button from '#components/Button';
import Toggle from '#components/Inputs/Toggle';
const CookieSettings = ({
handleAccept,
handleDecline,
initTracking,
handleCloseAll
}) => {
const [trackAnalytics, setTrackAnalytics] = useState(Cookies.get('gatsby-gdpr-google-analytics') === 'true')
const handleToggle = () => {
Cookies.set('gatsby-gdpr-responded', true, { expires: 365 });
setTrackAnalytics((prevState) => {
if (prevState) {
Cookies.remove('gatsby-gdpr-google-analytics');
} else {
Cookies.set('gatsby-gdpr-google-analytics', true, { expires: 365 })
}
return !prevState
})
initTracking();
}
return (
// your JSX code here
)
}
export default CookieSettings;
EDIT
// A some what reusable function that you can pass a cookie name too and switch over the name provided and set the required cookie.
const handleToggle = (cookieName) => {
Cookies.set('gatsby-gdpr-responded', true, { expires: 365 });
switch (cookieName) {
case 'gatsby-gdpr-google-analytics':
return setTrackAnalytics((prevState) => {
if (prevState) {
Cookies.remove(cookieName);
} else {
Cookies.set(cookieName, true, {
expires: 365
});
}
return !prevState
})
case 'gatsby-gdpr-google-tagmanager':
return setTagAnalytics((prevState) => {
if (prevState) {
Cookies.remove(cookieName);
} else {
Cookies.set(cookieName, true, {
expires: 365
});
}
return !prevState
})
case 'gatsby-gdpr-facebook-pixel':
return setFacebookAnalytics((prevState) => {
if (prevState) {
Cookies.remove(cookieName);
} else {
Cookies.set(cookieName, true, {
expires: 365
});
}
return !prevState
})
default:
break;
}
initTracking()
}
// A JSX toggle within your cookie setting
<Toggle active={trackAnalytics} toggleActive={() => handleToggle('gatsby-gdpr-google-analytics')} />
// The toggle component itself
import React from 'react';
import cx from 'classnames'
import PropTypes from 'prop-types'
import './styles.scss';
export default function Toggle({
active = false,
toggleActive,
}) {
return (
<div onClick={typeof toggleActive === 'function' && toggleActive} className={cx('toggle relative cursor-pointer', { active })} />
)
}
Toggle.propTypes = {
active: PropTypes.bool,
toggleActive: PropTypes.func.isRequired
}
Toggle.defaultProps = {
active: false,
}
Use this plugin from the Gatsby Plugin Hub
gatsby-plugin-gdpr-cookies
It will provide you what you are looking for and also you can list in the options for the plugin which cookies you are looking to track + a cookieName you wish to provide which you can then work with from a component level when creating a cookie toolbar such as:
{
resolve: `gatsby-plugin-gdpr-cookies`,
options: {
googleAnalytics: {
trackingId: process.env.UA_TAG, // your UA tag goes here
cookieName: `gatsby-gdpr-google-analytics`,
anonymize: true,
allowAdFeatures: false
},
environments: [`production`, `development`]
},
},
It elimites the usage of having to inject a script into the head of the website with React-Helmet as the plugin will handle the script injection for you.

React load script on specfic div

I need to load a script on specific component in my React app.
Below is my script and i need this to load on bottom-most div in my component
<div id="rexxxx"></div>
<script>
new carouselInlineWidget("xx", {
/*Your REVIEWS.io account ID:*/
store: "xxxxxxxxxxxx",
sku: "",
lang: "en",
carousel_type: "xxxxx",
styles_carousel: "CarouselWidget--xxxxxx",
/*Widget settings:*/
options: {
general: {
/*What reviews should the widget display? Available options: company, product, third_party. You can choose one type or multiple separated by comma.*/
enable_auto_scroll: 10000,
},
header: {
},
reviews: {
},
popups: {},
},
styles: {
},
});
</script>
I have my React component
import React from 'react'
import edenredLogo from '../../images/edenred-logo.webp'
import { useHistory } from 'react-router-dom'
import { useSelector } from 'react-redux'
import './landing.less'
const Landing = () => {
const history = useHistory()
return (
<>
<div className="script-here"/>
</>
)
}
export default Landing
You can use the custom hook:
import { useEffect } from 'react';
const useScript = (url, position, async = true) => {
useEffect(() => {
const placement = document.querySelector(position);
const script = document.createElement('script');
script.src = url;
script.async = typeof async === 'undefined' ? true : async;
placement.appendChild(script);
return () => {
placement.removeChild(script);
};
}, [url]);
};
export default useScript;
Usage:
useScript(url, ".script-here");
Or just use dangerouslySetInnerHTML
<div className="script-here" dangerouslySetInnerHTML={{__html: your_script}} />

vue3 - can't render facebook comments

I am trying to add a Facebook comments plugin (check it here) to my vue app, the problem is that div is created in DOM but it sometimes shows, sometimes not(width: 0, height 0)
Note: I am calling XFBML.parse function, my host is added to fb app
This is my current code:
<template>
<div
ref="commentContainer"
class="fb-comments"
:data-href="onUrl()"
:data-width="cwidth"
:data-numposts="numposts"
></div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, watch } from "vue";
import router from "../../router";
export default defineComponent({
props: {
cwidth: {
type: String,
default: "100%",
},
numposts: {
type: String,
default: "2",
},
},
setup({ cwidth, numposts }) {
const commentContainer = ref(null);
const init = () => {
if (
window.FB &&
!commentContainer.value.hasAttribute("fb-xfbml-state")
) {
setTimeout(() => {
window.FB.XFBML.parse(commentContainer.value.parentElement);
}, 2000);
}
};
onMounted(() => {
setTimeout(() => {
init();
}, 1500);
});
const onUrl = () => {
return document.location.origin + document.location.pathname;
};
watch(
() => router.currentRoute.value,
() => {
init();
}
);
return { cwidth, numposts, commentContainer, onUrl };
},
});
</script>
Instead of doing setTimeout try using nextTick and not passing any params to the parse function.
E.g. in the mounted function
this.$nextTick(() => {
window.FB.XFBML.parse()
})
Are you waiting 1.5s before running init() for a reason?
The above works using Vue2, for Vue3 example see below:
import { createApp, nextTick } from 'vue'
const app = createApp({
setup() {
const init = async () => {
await nextTick()
window.FB.XFBML.parse()
}
}
})
https://v3.vuejs.org/api/global-api.html#nexttick
Also, make sure you have added the SDK script and provided fb-root div to your index.html. It would not work on mine unless I added these just before the closing </body> tag.
I also had to add the the nextTick code to the route watcher to force the window to parse FB again when a new page is navigated to. I'm unsure of the Vue 3 version but I'm sure you can figure it out from this example:
watch: {
$route (to, from) {
if (to.fullPath !== from.fullPath) {
this.$nextTick(() => {
window.FB.XFBML.parse()
})
}
}
}

Adyencheckout is not a constructor - NextJS

I'm trying to implement the Adyen dropin payment UI using NextJS but I'm having trouble initializing the Adyen dropin component.
I'm need to dynamically import Adyen web or I get the error window is not defined however, after reading through the NextJS docs, dynamic import creates a component which I can't figure out how to use as a constructor.
I tried the code below but receive the error TypeError: AdyenCheckout is not a constructor
I'm new to NextJS and am at a total loss as to how I should import and initialize Adyen.
Can anyone point me in the right direction?
import Head from 'next/head';
import { useRef, useEffect, useState } from 'react';
import {callServer, handleSubmission} from '../util/serverHelpers';
//dynamic import below. Imports as a component
//import dynamic from 'next/dynamic';
//const AdyenCheckout = dynamic(() => import('#adyen/adyen-web'), {ssr: false});
import '#adyen/adyen-web/dist/adyen.css';
export default function Dropin(){
const dropinContainer = useRef(null);
const [paymentMethods, setPaymentMethods] = useState();
//const [dropinHolder, setDropinHolder] = useState();
//Get payment methods after page render
useEffect( async () => {
const response = await callServer(`${process.env.BASE_URL}/api/getPaymentMethods`);
setPaymentMethods(prev => prev = response);
},[]);
//Adyen config object to be passed to AdyenCheckout
const configuration = {
paymentMethodsResponse: paymentMethods,
clientKey: process.env.CLIENT_KEY,
locale: "en_AU",
environment: "test",
paymentMethodsConfiguration: {
card: {
showPayButton: true,
hasHolderName: true,
holderNameRequired: true,
name: "Credit or debit card",
amount: {
value: 2000,
currency: "AUD"
}
}
},
onSubmit: (state, component) => {
if (state.isValid) {
handleSubmission(state, component, "/api/initiatePayment");
}
},
onAdditionalDetails: (state, component) => {
handleSubmission(state, component, "/api/submitAdditionalDetails");
},
};
//const checkout = new AdyenCheckout(configuration);
const AdyenCheckout = import('#adyen/adyen-web').default;
const adyenCheckout = new AdyenCheckout(configuration);
const dropin = adyenCheckout.create('dropin').mount(dropinContainer.current);
return (
<div>
<Head>
<title>Dropin</title>
</Head>
<div ref={dropin}></div>
</div>
)
}
I was able to resolve the issue by importing the module using the default value inside an async function nested in the useEffect function.
import Head from 'next/head';
import { useRef, useEffect, useState } from 'react';
import {callServer, handleSubmission} from '../util/serverHelpers';
import '#adyen/adyen-web/dist/adyen.css';
export default function Dropin(){
const dropinContainer = useRef();
const [paymentMethods, setPaymentMethods] = useState({});
useEffect(() => {
const init = async () => {
const response = await callServer(`${process.env.BASE_URL}/api/getPaymentMethods`)
.then(setPaymentMethods(response));
console.log(paymentMethods);
const configuration = {
paymentMethodsResponse: paymentMethods,
clientKey: process.env.CLIENT_KEY,
locale: "en_AU",
environment: "test",
paymentMethodsConfiguration: {
card: {
showPayButton: true,
hasHolderName: true,
holderNameRequired: true,
name: "Credit or debit card",
amount: {
value: 2000,
currency: "AUD"
}
}
},
onSubmit: (state, component) => {
if (state.isValid) {
handleSubmission(state, component, "/api/initiatePayment");
}
},
onAdditionalDetails: (state, component) => {
handleSubmission(state, component, "/api/submitAdditionalDetails");
},
};
console.log(configuration.paymentMethodsResponse);
const AdyenCheckout = (await import('#adyen/adyen-web')).default;
const checkout = new AdyenCheckout(configuration);
checkout.create('dropin').mount(dropinContainer.current);
}
init();
},[]);
return (
<div>
<Head>
<title>Dropin</title>
</Head>
<div ref={dropinContainer}></div>
</div>
)
}

Categories