Javascript Skills

Around 2016, I started learning about building Single Page Applications with Javascript. My project at the time was using Backbone JS ; which is similar to React and Angular.

This is a screenshot from one of the SPAs I built . Here’s a look at how it works:

• As the page loads, a JSON string is pulled from a Product Attribute which contains the associated Product IDs and associated Product Options; for example, Size and Color
• A product listing is pulled and displayed in the Search Products tab

The Search Products tab has a few elements and event listeners

• Filters are displayed based on Product Attributes configured in the database
• Each filter is treated as a Number or a String, or Date
  • A Number could be filtered by
    • Less Than X, Greater Than X, or Equal To X
  • A String could be filtered by
    • Starts With Y, Equal To Y, Contains Y
  • A Date was handled same as a Number (mostly)
• When the form is initially loaded, a state object is constructed to contain the current filters
• When the Search Button (magnifying glass) is clicked, the state object is updated, and a GET request is sent to the server to retrieve an updated list of Products using the current Filter State
• The Products are returned to Javascript as a Collection object
• The Collection library sees that the contents of the product listing has changed, and the listing pane is re-rendered.
• Checkboxes are checked and un-checked
  • As checkboxes are checked in the Search Products tab, they show up in the Selected Products tab, and the Product ID is added to the state object
  • As checkboxes are un-checked, the Product ID is removed from the state object
• When the Save button is clicked
  • all of the form inputs and their values are condensed into a single javascript object
  • the JSON state object is serialized into a JSON string and appended to the form submission
  • the form is submitted
  • the Product is saved on the backend and a success message is displayed

React, Next, Angular, JSX

I’ve been learning the modern frameworks in my free time. I’m currently building some proof-of-concept code, which I will be sharing on my GitHub in early June 2024. My goal is to be proficient in React and Magento PWA.

Here is what I’m currently working on:

• Show Most Popular products on the Magento Cart page (not the checkout page, since we want a conversion). This will involve:
  • creating a GraphQL endpoint for returning the Backend data into the Frontend Javascript
  • creating a React Component for pulling the Backend data and displaying the products on the Frontend
  • I will push the code to Github, and register a php composer package in packagist, then update this page with more information and links

I was able to get the Venia theme working on my localhost; which uses Magento PWA. I’m currently going through some code exercises with this.