Adding a custom button to product pages

Ask the community
,
1

Hey there!

I want to add a button to product page that redirects to different URL for each product. I have the impression that it might be possible via Velo, however even ChatGPT wasn’t able to help.

Can anyone help with this?

Thank you!

2

Chat-GPT will provide you only basic code-snippets / code-parts and in most cases with various ERRORS and leck of programming knowledge. It won’t give you any answers if it comes to more specific use-cases.

First to say → Product-page is a special page.
Second—> read this one…

3

Thanks, I am digging into this now! :slight_smile:

4

Hi @russian-dima it seems more likely right now but I still have a confusion, would you be able to help me?

In the collection I have, I have a URL for each Product SKU, and I want to place a button on every product page with this URL according to that SKU, so I understand I need to use this piece to get the data:

//------- USER-INTERFACE -----------------
const database = “collection_name” ;
const includeField = “url” ;
const refField = “SKU” ;
//------- USER-INTERFACE -----------------

Then yes, I got lost :slight_smile: maybe I should first ask if it’s possible with Wix Stores?

Thank you for your help!

5
  1. Place that code on your Product-Page first.
  2. Run that code in preview-Mode inside your Wix-Editor.
  3. Take a look onto RESULTS inside of CONSOLE.

Do you get some RESULTS?

  1. Now integrate your URL-DB-Field into this example.

Or is it already included in this example?

console.log("Product-Page-URL: ", productPageURL);

PRODUCT-PAGE-CODE:

import wixData from 'wix-data';

$w.onReady(async function() {start_Process();
    $w('#productPage1').onMouseIn(()=>{start_Process();});
});

function start_Process() {
    $w('#productPage1').getProduct()
    .then(async(product) => {
        let productName = product.name; 
        console.log("Product-Name: ", productName);
        let productDescription = product.description; 
        console.log("Prod-Descript: ", productDescription);
        let currency = product.currency; 
        console.log("Currency: ", currency);
        let discountedPrice = product.discountedPrice; 
        console.log("Discounted-Price: ", discountedPrice);
        let inStockAvailability = product.inStock; 
        console.log("In Stock av: ", inStockAvailability);
        let inventoryItemId = product.inventoryItemId; 
        console.log("Inventory-ItemID: ", inventoryItemId);
        let productImage = product.mainMedia; 
        console.log("Product-Image: ", productImage);
        let productMediaItems = product.mediaItems; 
        console.log("ProdMediaItems: ", productMediaItems);
        let productPrice = product.price; 
        console.log("Product-Price: ", productPrice);
        let productPageURL = product.productPageUrl; 
        console.log("Product-Page-URL: ", productPageURL);
    }).catch((error)=>{console.error(error);});   
}

Till here everything works?
Till here everything is clear?

Show an excerpt of your databse including the mentioned URL-Field.

6

Is it Fixed ?
If yes then let me know, how to do this.

7

What’s the exact issue?

Normaly you should open your own post and describe your issue in detail.

1 Like