By default, our TryLink logic suppresses the Add-to-Cart button and replaces it with the TryNow button. However, your PDP may have other purchase options, such as Subscribe & Save. Our default logic does not suppress other purchase options, but this article will provide guidance on how to do so.
Please note that this will require technical knowledge and is meant for developers. Also, this is generalized code, so note some bracketed language for your custom selectors. Accomplishing this requires a combination of JavaScript and conditional logic, as relying solely on CSS might not offer a comprehensive enough solution.
Preliminary Steps
Step 1: Detecting a Specific Cookie
To determine whether to hide purchase options, you first need to check for the presence and value of a specific cookie, for example, TryNow. The following function retrieves the value of a cookie by name:
function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for(let i=0;i < ca.length;i++) {
let c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
Step 2: Identifying Try Before You Buy Products
Next, ascertain if the current product page corresponds to a TBYB product. This can be done by checking for a specific element unique to TBYB products, such as a trynow-cta-button:
function isTryNowProduct() {
return document.querySelector('trynow-cta-button') != null
}
Implementation
Upon loading the page, execute the following steps to conditionally remove or hide the purchase options:
window.onload = function() {
let cookieValue = getCookie("_tn_gate");
if(cookieValue === "gated_link" && isTryNowProduct()) {
// Option 1: Hide the Subscription Section
document.querySelector("[SUBSCRIPTIONS_CONTAINER_SELECTOR]").style.display = "none";
// Option 2: Remove the Subscription Section
// document.querySelector("[SUBSCRIPTIONS_CONTAINER_SELECTOR").remove();
}
}
Options for Modifying the Page
Hiding the Purchase Option: This approach sets the CSS display property of the subscription section to none, effectively hiding it from view without removing it from the document structure. This is reversible, should conditions change.
Removing the Purchase Option: Alternatively, using the remove() method completely deletes the subscription section from the page. This action is not reversible through simple client-side scripts if conditions later change.
Notes
The choice between hiding and removing elements should be based on the user experience strategy and whether you might need to reintroduce the element without a page reload.
It's crucial to ensure that these scripts do not inadvertently affect products outside the TBYB program. The isTryNowProduct() function serves as a safeguard by checking for a specific marker before proceeding with modifications.
By following these instructions, you can effectively control the display of purchase options on your Product Details Page based on the TBYB eligibility and user's cookie state.
Enhanced Functionality: Toggle-Based Subscription Visibility
Prerequisites
Ensure you have the getCookie and isTryNowProduct functions already implemented. These functions are essential for initial checks.
Step 1: Determine Toggle State
To react appropriately to the TryNow toggle, introduce a function that checks if the toggle is in the "on" position:
function isTryNowToggleOn() {
return document.querySelector('.tn-gate-toggle-input').checked
}
Step 2: Attach Event Listener to the Toggle
Next, set up an event listener on the toggle switch. This ensures that the display of subscription options updates in real-time as the toggle is switched:
document.querySelector('.tn-gate-toggle-input').addEventListener('change', function(event){
if(event.target.checked){
subscriptionsElement.style.display = "none";
}else{
subscriptionsElement.style.display = "block";
}
})
Step 3: Implementing Conditional Display Logic on Page Load
Combine all the conditions within the window.onload function to manage the initial state based on the cookie value, product type, and toggle state:
window.onload = function() {
let cookieValue = getCookie("_tn_gate");
let subscriptionsElement = document.querySelector("[SUBSCRIPTIONS_CONTAINER_SELECTOR")
if(cookieValue === "gated_link" && isTryNowProduct() && isTryNowToggleOn()) {
subscriptionsElement.style.display = "none";
}
document.querySelector('.tn-gate-toggle-input').addEventListener('change', function(event){
if(event.target.checked){
subscriptionsElement.style.display = "none";
}else{
subscriptionsElement.style.display = "block";
}
})
}
Important Considerations
Dynamic Visibility: Unlike removal, hiding elements allows for easy toggling between visible and invisible states without needing to manipulate the DOM to reintroduce elements.
Subscription Element Reference: Ensure that the subscriptionsElement is correctly targeted. If your page structure changes or the class name varies, you will need to update the selector accordingly.
Event Listener Efficiency: The event listener is attached directly within the window.onload function for simplicity. In a more complex application, consider managing event listeners more dynamically to improve performance and maintainability.
This approach ensures that the subscription options on the Product Details Page can dynamically respond to both the initial page state and user interactions, providing a flexible and user-friendly shopping experience.