Why isn't my onclick function working in Shopify CLI remix with Prisma and MongoDB?

Shopify Apps
1

I am working in Shopify CLI remix, prisma(database:-mongodb) and want to store product layout and thumbnail options value in db, but my onclick function is not working when I am clicking on product theme design on frontend,

<img src={bottomeThumbnail} onClick={() => handleThumbnailPosition(“bottome_thumb”)} />

Bottom side thumbnail

This is where I call the function

export default function product_design() {
const [selectedOptions, setSelectedOptions] = useState({
thumbnailPosition: “”,
thumbnailDesign: “”,
allowSlider: “”,
});

const handleThumbnailPosition = (position) => {
console.log(“Button Clicked”);
setSelectedOptions({ …selectedOptions, thumbnailPosition: position });
};

const handleThumbnailDesign = (design) => {
setSelectedOptions({ …selectedOptions, thumbnailDesign: design });
};

const handleSlider = (slider) => {
setSelectedOptions({ …selectedOptions, allowSlider: slider });
};
This is list for eventhandling functions.

2

Try following code: change details according with you details

import React, { useState } from ‘react’;

export default function ProductDesign() {
const [selectedOptions, setSelectedOptions] = useState({
thumbnailPosition: “”,
thumbnailDesign: “”,
allowSlider: “”,
});

const handleThumbnailPosition = (position) => {
console.log(“Thumbnail Position Clicked”);
setSelectedOptions({ …selectedOptions, thumbnailPosition: position });
};

const handleThumbnailDesign = (design) => {
console.log(“Thumbnail Design Clicked”);
setSelectedOptions({ …selectedOptions, thumbnailDesign: design });
};

const handleSlider = (slider) => {
console.log(“Slider Clicked”);
setSelectedOptions({ …selectedOptions, allowSlider: slider });
};

return (

Bottom Thumbnail handleThumbnailPosition("bottom_thumb")} />

Bottom side thumbnail

{/* Add more thumbnail options here */}
); }
3

Hi Philpboyle,

I did exactly same code but its not working for me. I see error in browser console “Blocked script execution in ‘’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.” It seems like script execution is not working due to which click events is not working.

Do you have any insights how to resolve this?