Audiophile - Frontend Mentor Challenge

See it on Github

The Brief

This was a Frontend Mentor challenge, which was to create a multi-page e-commerce website. The website needed to have the following features:

• View the optimal layout for the app depending on their device’s screen size
• Add/Remove products from the cart
• Edit product quantities in the cart
• Fill in all fields in the checkout
• See correct checkout totals depending on the products in the cart

The Approach

For this challenge I wanted to also learn how to use and develop with Shopify, and so I decided to use that to build the site with. Initially I was going to use Tailwind and Alpine to help the development process, but decided to use just vanilla CSS and JS as this is what was used in the default Dawn theme.

Working with Shopify sections I found to be really straight forward and had quite a nice development flow. The first page I put together was the home page, or index template. My only issues I have with sections is that you can’t have a single, global source of data and you need to repeat content when using the same sections on multiple pages. Fortunately the design had the same sections in the same place on multiple pages and so I was able to just statically render these sections.

After this I worked on the product pages as I was interested in how Shopify handled things like quantity inputs and adding products to the cart. Again this was a fairly straight forward development experience, although the requirements for this project weren’t extensive.

One tricky section of the product page was this here,

This is a list of items included with the product, but the design needed the quantity to be in a different colour to the rest of the text. I wasn’t able to target that so easily with the fields available in the metafields. However I decided to separate the items with a pipe character ”|” and then used this to split the items in the template. From there I looped through the items, got the first couple of characters from the string and wrapped those in a span tag, which I could then target with CSS.

{% assign items = product.metafields.details.includes | split: '|' %}
<ul class="text-black/50">
    {% for item in items %}
        <li>
            <span class="includes__qty">
                {{ item | slice: 0, 2 }}
            </span>
            {{ item | slice: 3, item.size }}
        </li>
    {% endfor %}
</ul>

Another thing I was interested in trying out was creating a mini cart that dropped down from the main menu and had the capability of removing and updated cart items. For this I used the Shopify Ajax api, which again I thought was really nice to use, especially compared to something like WooCommerce.