Javascript Modifications To An Existing Web Store

Javascript Modifications to an existing web store

Javascript Modifications to an existing web store

Objectives: #1. To add a second search box capability (1) as shown on the screen capture. I edited the attached javascript file to add this (1) search box at the top. The Problem: (1) needs to have behavior separate from the search box & [Go] button at the bottom (5). The search box at bottom works correctly the first time text is entered, user presses the [Go] button. At the top (1) needs this same behaviour, but (1) should use the top Text Input box for keywords. Making (1) search feature work correctly is the first goal & deliverable. #2. After the above is working, need to fix a bug in the (5) search box. Correct behavior is: When user selects one or more Categories from the list in (4), the search for the keyword is constrained to only searching products assigned to the categories selected. We need a new capability to ‘unselect’ items in the (4) list. I would like the selection to automatically ‘unselect’ after 10 seconds of inactivity. After unselection is done, user can search at (5) with just the keywords again (not constraining the search for keywords with-in the categories) as before. Other information: Live store URL for testing behavior: Note: this is a live store, one of my customers. I host several web stores. Please do not do anything to break the web store. We can test your modified Javascript file. I can give FTP access to upload your modified HTML/Javascript file. The URL above can be refreshed to test your changes. All searches are done with pre-programmed functions. No need to change the search code. Just need to do #1. Then #2 above in the javascript file that I send you. Once successfully tested, we are done. I will take the code you give me and integrate it into the live web store HTML / Javascript template file. The system auto-generates the HTML / Javascript I sent to you. After this project, I would like to discuss a further Wordpress related project (optional). Javascript snippet on next page…. The following code was my attempt to (a) add the second search box and [Go] button to the top. It does display, but doesn’t function as I specify in Objectives #1 on page 1 of this document.

  

Enter keywords above OR click on a category below:

More javascript (snippet) on next page… I also modified the code below by inserting the code in yellow highlight. The [Go] button at the top does not seem to execute this function I added. If it can execute, I believe the search function parameters can be altered to behave as specified. The entire HTML / javascript file available upon request. It is 12k in size. IMPORTANT: Please make your changes, marked so I can identify them in the HTML file, enabling me to integrate the changes into the source files on my server. I want to be careful not to break a live system. Thanks. image1.png

Paper For Above instruction

This paper addresses the technical challenge of modifying a live e-commerce web store's JavaScript code to enhance its search functionality, specifically adding a second search box at the top of the page while maintaining independent behavior from the existing bottom search box. The task involves understanding the current implementation, implementing a separate search process for the new top box, and fixing category unselection logic that automatically resets after a period of inactivity.

Introduction

Modern web stores benefit greatly from flexible and intuitive search interfaces to improve user experience and increase sales. In this case, the goal is to augment an existing online store with an additional search box positioned at the top of the page, separate from the existing bottom search box. This enhancement requires careful JavaScript modifications to ensure both search boxes operate independently, without interfering with each other, and conform to the specified behaviors.

Implementation Strategy

The fundamental approach involves creating a new HTML form for the top search box, along with dedicated JavaScript event handlers that mirror the original. This includes defining a new input field, a separate "Go" button, and associated functions, such as localCheckEnterNoCategories, to process user input correctly. The key is to assign unique IDs and event handlers to distinguish between the top and bottom search boxes, thus enabling their independent functioning.

Adding the Top Search Box

The code snippet provided demonstrates the insertion of a form with input and button elements for the top search box. Critical modifications include ensuring the form's name, input IDs, and event handlers are uniquely identified and linked to the JavaScript functions designed for the top box. For example, the id="searchBox" should be changed to id="searchBoxTop" in the top form to prevent conflicts. Similarly, the onKeyPress and onClick handlers must specifically invoke functions that process the top search box independently.

Separating Search Behavior

To fulfill Objective #1, the JavaScript functions controlling search must be adapted. The existing localCheckEnter function is tied to the bottom search box's button and input. A new function localCheckEnterNoCategories is introduced, also designed to be invoked by the top search box. It explicitly triggers the submitSearchFormTop() function, which should be implemented to process the top search input separately, perhaps by reusing the existing search logic but referencing the new input element. This way, pressing Enter or clicking "Go" in the top box triggers its dedicated search process without affecting the bottom box.

Category Selection Unselection Logic

Additional functionality involves automatically unselecting category options after 10 seconds of inactivity. This requires tracking the last selection timestamp, initiating a timer when categories are selected, and resetting the selection after the inactivity period. The implementation entails adding event listeners to the category selection elements, storing timestamps, and defining a function to clear selections, updating the JavaScript to support this logic. This feature improves user experience by ensuring category filters do not persist unintentionally, enabling quick resets for subsequent searches.

Testing and Integration

Given the live environment, extensive testing must be carried out in a controlled manner, ideally via FTP upload of modified scripts. The modifications should be clearly marked in comments within the code, for example, indicating where the new form and functions are inserted, and where event handlers are redefined. Care must be taken to prevent breaking existing functionalities, especially since no alterations are needed in the existing search code logic.

Conclusion

Enhancing a web store’s search capabilities with a second, independent search box requires systematic modifications to the HTML and JavaScript layers. By creating dedicated event handlers and ensuring unique identifiers, developers can facilitate parallel search functionalities. Additionally, automating category unselection enhances user experience by preventing stale filters. The outlined approach ensures minimal disruption to the live store while adding significant usability improvements, setting the stage for further enhancements or platform migrations like WordPress integration in the future.

References

  • Google Developers. (2021). Implementing Search in Web Applications. Retrieved from https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data
  • W3Schools. (2023). HTML Forms. https://www.w3schools.com/html/html_forms.asp
  • MDN Web Docs. (2023). JavaScript Event Handling. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Events
  • Stack Overflow. (2012). How to distinguish between multiple form elements with same name. https://stackoverflow.com/questions/10853548/how-to-distinguish-between-multiple-form-elements-with-same-name
  • Chen, L. (2016). Effective JavaScript Debugging and Troubleshooting. Journal of Web Development, 9(4), 123-130.
  • Frost, M. (2019). Enhancing UI with JavaScript Event Listeners. UI Magazine, 45(2), 56-62.
  • Bootstrap. (2023). Forms and Inputs. https://getbootstrap.com/docs/5.0/forms/overview/
  • Craig, P. (2018). Dynamic Search Filters with JavaScript. E-Commerce Journal, 7(3), 77-85.
  • Myers, J. (2020). Managing User Input and Interactivity in Web Applications. Web Dev Weekly, 15(10), 44-49.
  • W3Schools. (2023). HTML Select Tag. https://www.w3schools.com/tags/tag_select.asp

Related Assignments