There are certain products that require customization directly on the Product Display Page (PDP) and cannot be added to the cart directly from a Rebuy widget. In these situations you have a few options to choose from.
You can remove those products for the widget.
Adjust the data source to not return those products in that widget.
You can customize the widget buttons to send user to the PDP instead of adding the product to the cart.
Remove customizable products from Rebuy Widgets
You can exclude those products from being returned by the widget using the data source exclusion filters, for each widget.
Change widget buttons from Add to Cart to PDP Redirect
By using the code show below, the widget buttons will now redirect users to the product pages rather than adding the item to the cart from the widget.
All the code provided below should be pasted into the Advanced > Ready section of the widget. Afterward, remember to click on the "Save" button to preserve the changes.
<-- Click here to see code options available.
<-- Click here to see code options available.
Option 1: All widget buttons will redirect to the PDP in the same browser
/* Make widget ATC buttons redirect to product page */
setTimeout(() => {
const items = widget.data.products;
const widgetButtons = document.querySelectorAll(`#rebuy-widget-${widget.id} .rebuy-button`);
widgetButtons.forEach((btn, index) => {
const newBtn = btn.cloneNode(true)
newBtn.addEventListener("click", () => {
window.location.href = items[index].link
})
btn.replaceWith(newBtn)
})
}, 500)
Option 2: All widget buttons will open a new browser tab for that PDP
/* Make widget ATC buttons open a new tab to the product page */
setTimeout(() => {
const items = widget.data.products;
const widgetButtons = document.querySelectorAll(`#rebuy-widget-${widget.id} .rebuy-button`);
widgetButtons.forEach((btn, index) => {
const newBtn = btn.cloneNode(true)
newBtn.addEventListener("click", () => {
window.open(items[index].link, "_blank");
})
btn.replaceWith(newBtn)
})
}, 500)
Option 3: Some widget buttons redirect to the PDP in the same browser tab
This approach allows you to mix customizable products and standard products in the same widget. Customizable products that are tagged will redirect to the PDP. Standard products will add to cart directly from the widget.
For this to work, in Shopify Admin you'll need to tag your customizable products "widget-redirect". Please confirm your tag spelling!
/* Widget ATC buttons redirect to the PDP based on product tag "widget-redirect" */
setTimeout(() => {
const items = widget.data.products;
items.forEach((item, index) => {
/* CHANGE THE TAG HERE IF NECESSARY */
if (item.tags.includes('widget-redirect')) {
const btn = document.querySelectorAll(`#rebuy-widget-${widget.id} .rebuy-button`)[index];
const newBtn = btn.cloneNode(true)
/* CHANGE THE BUTTON TEXT HERE IF NECESSARY */
newBtn.innerText = "Details";
newBtn.addEventListener("click", () => {
window.location.href = item.link;
})
btn.replaceWith(newBtn)
}
})
}, 400)
The widget add to cart button for customizable products will say "Details" instead of "Add". You can change that on this line. Keep the text within the quotation marks.
/* CHANGE THE BUTTON TEXT HERE IF NECESSARY */
newBtn.innerText = "Details";
Update widget button text
If you used code option 1 or option 2 please follow these steps to change the widget button text as needed. Not necessary for code option 3.
To complete the process, you need to adjust the language of the widget's button. Follow these steps:
Open the widget settings.
Look for the "Language" tab or section in the widget settings.
Find the option that allows you to change the text for the "Add to Cart" button.
Edit the text to say whatever you prefer, for example, "View Details" or "Customize Now."
Save the changes in the widget settings.
By doing this, the button language will be updated, and it will now display the new text you've set, aligning with the functionality change to redirect users to the product page instead of adding the item directly to the cart.
