Change Quick Action Bar item links dynamically

Ask the community
,
1

Hello,

I would like to run code on each product page through the Tracking and Analytics module to change the links on Quick Action Bar items. The code is currently running correctly only when I navigate to the product page and then refresh that page. This appears to be happening because the product pages are sub-items of a full-page application, so the code is not triggered unless the page is refreshed.

My solution was to refresh when the product page is navigated to. I have attempted to use wixLocation.onChange both inside and outside of the onReady function. I have tried all of these variations on both the Site Code and the Page Code for each product.

//attempt #1
wixLocation.onChange( () => newPage() );
function newPage(){
    console.log("a new page");
}

//attempt #2
 $w.onReady(function () {
    wixLocation.onChange( () => newPage() );
    function newPage(){
        console.log("a new page");
    }
});

//attempt #3
$w.onReady(function () {
    wixLocation.onChange(() => {
            newPage()
        })
});

 function newPage(){         
    console.log("a new page");     
}

I am open to other approaches to solving the problem. I just want to be able to run code through the Tracking and Analytics module when a product page is navigated to. I need to run the code outside of the Editor because the Editor does not provide the ability to perform the functions I would like to carry out.

The site:
Base URL: https://www.jimboandjules.com/
Product Pages: https://www.jimboandjules.com/product-page/*product_name*

Thank you!

2 
$w.onReady(async function () {
let id = $w("#dynamicDataset").getCurrentItem()._id;
 const itemObj = await find_current_item(id)
 })
 
 export function find_current_item(id){
 return wixData.query("productPage")
    .eq("_id", id)
    .find()
    .then((res) => {
 return (res.items[0])
    })
}

itemObj will be the refreshed data

3

Thank you for the quick response!

I am trying to update the url of a Quick Action Bar item when the Product Page is loaded. It will be different based on which product is navigated to. I am able to do this through jQuery in the Tracking and Analytics module (though only when I refresh the Product Page), but I do not see a way to do this using native Wix functionality.

This is the code I run.

<script>
$( window ).on( "load", function() {

    var title = $('h1[data-hook="product-title"]').text();

    if (title === "Bee Buzzin' Salve (Uplift)") {
        $("a[href ='https://tinyurl.com/addToCartjandj']").attr("href", "https://tinyurl.com/beebuzzinsalve");
    }

    if (title === "Bee Easy Salve (Relax)") {
        $("a[href ='https://tinyurl.com/addToCartjandj']").attr("href", "https://tinyurl.com/beeeasysalve");
    }

    if (title === "Sleep Sweet Salve (Recharge)") {
        $("a[href ='https://tinyurl.com/addToCartjandj']").attr("href", "https://tinyurl.com/sleepsweetsalve");
    }

    if (title === "Salve Sampler") {
        $("a[href ='https://tinyurl.com/addToCartjandj']").attr("href", "https://tinyurl.com/salvesampler");
    }
});
</script>

Is there a way to do this through the Wix editor?

4

I found a solution that does not require refreshing the page.

Quick recap:
I am using a quickActionBar, and currently Wix does not let you update the link of the quickActionBarItems programmatically.

As a workaround, I linked one of the items to a lightbox that is immediately closed upon opening (a substitute would be to have it link to an anchor on the page). Then I used the following code to redirect to another link:

$w("#quickActionBar1").onItemClicked( (event) => {
    var baseURL = "https://jimboandjules.foxycart.com/cart?name=";
    var price = product.price;
    var imgURL = product.mediaItems[0];
    var returnURL = "https://jimboandjules.com/shop";
    //title found above
    var addToCartLink = baseURL + title + "&price=" + price + "&image=" + 
        imgURL + "&url=" + returnURL;
            
   wixLocation.to(addToCartLink);
 
} );