Wix Studio: Mastering Custom Follow Systems and Hiding Default Elements

Understanding Custom Follow Systems in Wix Studio

The Wix Studio platform offers extensive customization options, allowing developers to create unique user experiences. One common requirement is implementing a custom follow system, often to integrate more complex logic or tailor the experience to specific needs. A recent forum discussion highlighted the challenges of removing the default Wix Follow button while building a custom solution, particularly within group pages. This article analyzes the problem and provides potential solutions and insights for store owners and developers.

The Challenge: Hiding the Default Wix Follow Button

The core issue, as raised in the original forum topic, revolves around the difficulty of removing or hiding the default Wix Follow button, especially within Wix Studio group pages. The user specifically mentioned:

Removing visibility to Wix Follow button from group pages Working in Wix Studio Editor, Dev Mode, CMS, etc. Site link https://circleapp.travel/groups

The user attempted to disable the Wix Follow button in all known areas and built custom pages where removal wasn't possible. However, they couldn't identify the element ID to hide it using custom code.

Solutions and Workarounds

While a direct element ID might not be readily available, several workarounds can be employed to achieve the desired outcome:

1. CSS Injection via Custom Code: Although the element ID is unknown, you can try targeting the button based on its class names or attributes using CSS. Inspect the element in the browser's developer tools to identify any unique CSS selectors. Then, use Wix's custom code feature to inject CSS that hides the button. For example:

   Important: The class name .wix-follow-button is an example. You'll need to inspect the actual element to find the correct class.

2. JavaScript Manipulation (Dev Mode): In Dev Mode, you can use JavaScript to target and remove the button from the DOM. This approach is more dynamic but requires careful implementation to avoid conflicts with Wix's internal scripts. You can use document.querySelector to find the button based on its attributes or text content. For example:

   
     wixReady(function () {
       const followButton = document.querySelector('button[aria-label="Follow"]');
       if (followButton) {
         followButton.style.display = 'none';
       }
     });
     

   Replace button[aria-label="Follow"] with the appropriate selector for your specific button.

3. Leveraging Wix's APIs (if available): Check if Wix provides any APIs or settings to control the visibility of the Follow button on group pages. Review the Wix Studio documentation and API references for relevant options. This is the most robust and recommended approach if available.
4. Content Management System (CMS) Integration: If the group pages are dynamically generated from a CMS collection, consider adding a boolean field to control the visibility of the default follow button. Then, use code to conditionally render the button based on the CMS field value.

Implementing a Custom Follow System

The user's goal is to build a custom follow system integrated with an algorithmic logic to suggest travelers with similar interests. This requires a multi-faceted approach:

1. Data Model: Design a data model to store user relationships (followers and followees) and travel interests. This could involve creating custom collections in the Wix CMS.
2. Backend Logic: Implement backend logic (using Wix Functions or external APIs) to handle follow/unfollow requests and update the data model.
3. Algorithmic Recommendations: Develop an algorithm to analyze user interests and suggest relevant travelers. This could involve techniques like collaborative filtering or content-based filtering.
4. Frontend Integration: Create custom UI elements (e.g., buttons, lists) to display follow/unfollow options and recommended travelers. Use Wix Data APIs to interact with the data model and backend logic.

Key Takeaways for Wix Studio Developers

• Understand Wix's limitations: Be aware of the limitations of the Wix platform and explore available workarounds.
• Leverage Dev Mode: Utilize Dev Mode for advanced customization and control over the DOM.
• Explore Wix APIs: Investigate Wix APIs for managing user interactions and data.
• Prioritize data modeling: Design a robust data model to support your custom functionality.
• Test thoroughly: Thoroughly test your custom solutions to ensure they function correctly and don't conflict with Wix's core features.

By combining these techniques, developers can effectively hide the default Wix Follow button and implement sophisticated custom follow systems that meet their specific requirements.