Buy Now button not clickable in PLP Page

Question

We are using PWA Venia Theme.

I tried Below code for BUY NOW button , but it is not clickable in PLP Page I am using : id="productFullDetail.addItemToCart1" for Adding items to cart. am i using wrong code ?

src/components/Gallery - item.js

Full code for Item.js : https://pastebin.com/x3ri4BE8

const addButton =
        customOptions && customOptions.length > 0 ? (
            <a
                
                id="productFullDetail.addItemToCart1"
                target={'_blank'}
                class="w-full text-xs tracking-[2.4px] h-[38px] text-[0.7rem]"
            >
                <button
                    
                    class="tryVirtualButton-root-aqT bg-[#F8F3EC] border-2 border-[#EFEAE2] p-2 w-full rounded-sm h-[38px] product_button"
                    type="button"
                >
                    <span class="button-content-TD8 gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center">
                        <span class="text-[#181A1D] tracking-widest font-semibold">
                            {isStoreUser ? 'SELECT' : 'BUY NOW'}
                        </span>
                    </span>
                </button>
            </a>
        ) 

Answer 1

Please replace your const addButton code with this code.

this is your code

const addButton =
    customOptions && customOptions.length > 0 ? (
        <a
            
            id="productFullDetail.addItemToCart1"
            target={'_blank'}
            class="w-full text-xs tracking-[2.4px] h-[38px] text-[0.7rem]"
        >
            <button
                
                class="tryVirtualButton-root-aqT bg-[#F8F3EC] border-2 border-[#EFEAE2] p-2 w-full rounded-sm h-[38px] product_button"
                type="button"
            >
                <span class="button-content-TD8 gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center">
                    <span class="text-[#181A1D] tracking-widest font-semibold">
                        {isStoreUser ? 'SELECT' : 'BUY NOW'}
                    </span>
                </span>
            </button>
        </a>
    ) : isSupportedProductType ? (
        <div class="w-full text-xs tracking-[2.4px] h-[38px] text-[0.7rem]">
            <VideoCallButton
                item={item}
                urlSuffix={productUrlSuffix}
                isStoreUser={isStoreUser}
            />
        </div>
    ) : (
        <div className={classes.unavailableContainer}>
            <Info />
            <p>
                <FormattedMessage
                    id={'galleryItem.unavailableProduct'}
                    defaultMessage={
                        isStoreUser
                            ? 'Currently unavailable to select'
                            : 'Currently unavailable for purchase.'
                    }
                />
            </p>
        </div>
    );

with this code

import AddToCartButton from '@magento/venia-ui/lib/components/Gallery/addToCartButton';

const addButton = isSupportedProductType ? (
    <AddToCartButton item={item} urlSuffix={productUrlSuffix} />
) : (
    <div className={classes.unavailableContainer}>
        <Info />
        <p>
            <FormattedMessage
                id={'galleryItem.unavailableProduct'}
                defaultMessage={'Currently unavailable for purchase.'}
            />
        </p>
    </div>
);

then check and check some small errors if happen after replacing the code and accept the solution if it is working.

Thanks.