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.