25/01/2019
This week me and my mentor, Jordan, have been working mainly on improving the current website of Hybrid Services (www.hybridservices.co.uk). None of the changes introduced by us are live, because so far we have been working in the test environment of a product page.
The first thing we did was to create a table with tabs displayed next to the main image of the product.
The table comprises four tabs, where the first one changes content if there is a discount on the product (if there isn’t any, the first tab shows an intro paragraph). The second tab provides general information about the product, the third consists of expandable tabs and the forth shows a list of all applications.
All information displayed in the tabs is retrieved dynamically from the server using PHP. This means that there is no need to manually upload information about the product on each product page, as it is done automatically by the website.
The biggest challenge was the Applications tab, because that required of us retrieving from the server ids of all applications that are possible. Next thing was to check what applications match the given product. Then, having two sets of ids, one of all applications and the other of product-applications, it was necessary to check them against each other. This was done using JavaScript, where two for loops were used. One loop goes through the bigger set and the other through the smaller one. If one of the ids from the smaller set matches the id from the bigger set, a Boolean variable changes into “true”, which ends the second loop. Next, the whole process is repeated until the first loop is over.
However, the outcome of such an algorithm was a pretty long list of all applications, both those “ticked” and “crossed out”. Because that wasn’t exactly what we wanted, the next step was to reorganise the set, so that the ticked applications are on the top. To do that another for loop was used, which goes through the set and detaches each “ticked” application and then puts it at front of the set. Thanks to that we had a list of all applications, where the ticked ones were at the very top. However, further discussion with the company management and sales team led to the realisation that the crossed-out applications should not be visible at all. Thus, right now the website doesn’t display them anymore. Once all the tabs had the desired functionality, they were styled using CSS.
The main image on the left-hand side was also restyled, as before it was one big image. Now, it comprises of three separate div blocks. The range name on top has been put onto the bigger image of the printing machine. The same happens with the accolades visible below the main image. This solution allows the admin to quickly change individual elements of the content without the need to rewrite huge portions of the code.
Apart from the works described above, during this week I have also participated in several meetings concerning the development of a new CRM system for our parent company and the launch of new GoogleAds campaign.
This week me and my mentor, Jordan, have been working mainly on improving the current website of Hybrid Services (www.hybridservices.co.uk). None of the changes introduced by us are live, because so far we have been working in the test environment of a product page.
The first thing we did was to create a table with tabs displayed next to the main image of the product.
The table comprises four tabs, where the first one changes content if there is a discount on the product (if there isn’t any, the first tab shows an intro paragraph). The second tab provides general information about the product, the third consists of expandable tabs and the forth shows a list of all applications.
All information displayed in the tabs is retrieved dynamically from the server using PHP. This means that there is no need to manually upload information about the product on each product page, as it is done automatically by the website.
The biggest challenge was the Applications tab, because that required of us retrieving from the server ids of all applications that are possible. Next thing was to check what applications match the given product. Then, having two sets of ids, one of all applications and the other of product-applications, it was necessary to check them against each other. This was done using JavaScript, where two for loops were used. One loop goes through the bigger set and the other through the smaller one. If one of the ids from the smaller set matches the id from the bigger set, a Boolean variable changes into “true”, which ends the second loop. Next, the whole process is repeated until the first loop is over.
However, the outcome of such an algorithm was a pretty long list of all applications, both those “ticked” and “crossed out”. Because that wasn’t exactly what we wanted, the next step was to reorganise the set, so that the ticked applications are on the top. To do that another for loop was used, which goes through the set and detaches each “ticked” application and then puts it at front of the set. Thanks to that we had a list of all applications, where the ticked ones were at the very top. However, further discussion with the company management and sales team led to the realisation that the crossed-out applications should not be visible at all. Thus, right now the website doesn’t display them anymore. Once all the tabs had the desired functionality, they were styled using CSS.
The main image on the left-hand side was also restyled, as before it was one big image. Now, it comprises of three separate div blocks. The range name on top has been put onto the bigger image of the printing machine. The same happens with the accolades visible below the main image. This solution allows the admin to quickly change individual elements of the content without the need to rewrite huge portions of the code.
Apart from the works described above, during this week I have also participated in several meetings concerning the development of a new CRM system for our parent company and the launch of new GoogleAds campaign.
You are demonstrating an excellent skill set. Keep up the good work!
ReplyDelete