0

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>
        ) 
6
  • hello I have checked your code in PLP, I think you have used PDP code in the PLP that's why this is not clickable so tell me what you want in PLP when click on the BUY NOW button redirect to cart page or stay PLP and product just add to cart? Jan 18 at 6:03
  • Thanks for your time, exactly you are right, i have used PDP code Jan 18 at 6:04
  • So now tell what you want redirect to the cart page after add to cart or stay same page after add to cart so I will check if possible from my side. Jan 18 at 6:06
  • i want to add the item to cart and stay in same page Jan 18 at 6:06
  • Okay so you can use the default PWA item.js code this will work for you and if you have no idea what is the default code then feel free to reach out me I will give you Jan 18 at 6:11

1 Answer 1

1
+200

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.