Skip to main content

Analyze

From the input of data:

<?xml version="1.0"?>
<data lang="en-GB" created="2023-12-06T10:01:49.040788+01:00">

    <!-- Node of main product -->
    <item type="product" id="9876543_1" label="Throw Pillow">
        <item key="templateId" content="4"/>

        <item key="text1" content="Throw Pillow" />
        <item key="text2" content="PE-123-456" />
        <item key="text3" content="Bold style meets cozy comfort with our Modern Throw Pillow. Featuring a contemporary, eye-catching pattern, this pillow adds a touch of sophistication to any space." />
        <item key="image1" content="url/to/image" />
        <item key="image2" content="url/to/image" />
    </item>

    <item type="product" id="9876543_2" label="Throw Pillow">
        <item key="templateId" content="5"/>

        <item key="text1" content="Throw Pillow" />
        <item key="text2" content="PE-123-456" />
        <item key="text3" content="Bold style meets cozy comfort with our Modern Throw Pillow. Featuring a contemporary, eye-catching pattern, this pillow adds a touch of sophistication to any space." />
        <item key="image1" content="url/to/image" />
    </item>

    <item type="product" id="9876543_3" label="Throw Pillow">
        <item key="templateId" content="6"/>

        <item key="text1" content="Restfullness Reimagined" />
        <item key="text2" content="With precision design and premium materials, Pillow Emporium pillows deliver the comfort you deserve for truly restorative rest." />
        <item key="text3" content="Sleep Comfort Technology" />
        <item key="image1" content="url/to/image" />
    </item>

    <item type="product" id="9876543_4" label="Throw Pillow">
        <item key="templateId" content="7"/>

        <item key="text1" content="RESTFUL RESULTS" />
        <item key="text2" content="PE-123-456" />
        <item key="text3" content="Designed for ultimate comfort and support, Pillow Emporium pillows help you wake up refreshed, recharged, and ready to take on the day."/>
        <item key="image1" content="url/to/image" />
    </item>

    <item type="product" id="9876543_5" label="Throw Pillow">
        <item key="templateId" content="8"/>

        <item key="text1" content="YOUR BEST NIGHT'S SLEEP STARTS HERE" />
        <item key="text2" content="Experience the perfect balance of comfort and support with Pillow Emporium pillows-crafted for deeper rest, better mornings, and a life well-rested."/>
        <item key="image1" content="url/to/image" />
    </item>

    <item type="product" id="9876543_6" label="Throw Pillow">
        <item key="templateId" content="9"/>

        <item key="text1" content="Bold style meets cozy comfort with our Modern Throw Pillow. Featuring a contemporary, eye-catching pattern, this pillow adds a touch of sophistication to any space. Crafted from premium, soft-touch fabric with a plush insert, it's perfect for lounging in style. Whether you're refreshing your living room or adding personality to your bedroom, this chic accent piece brings effortless charm and contemporary elegance to your décor." />
    </item>


</data>

We can see that each page in the document has corresponding data. We can extract it by using the "key" attribute then retrieve value from "content" attribute.

The Pillow has 6 pages in total. Each page has different styles, layout and content.

But there're some things in common that we can make them into reusuable components:

  • Main title: they all have same size, font in all pages. The color we can use CSS to change it for each page
  • Product code: same size, font, color in all pages
  • Product description: use same font but has different styles (text align, font-weight). We can still create a reusable component for it and adjust the styles by using CSS for each cases
  • Pillow image: same layout, different size, and different image so we can create a component with input property (width, height, imageURL) to adapt each cases.

In page 3, we have text is placed in a special trapezium sharp. So we need create a component called product/info-trapezium.hbs

In case image from input is not available, we should have a image fallback. So we will create a helper by using built-in helpers called image/replacement.hbs.

We also need a helper to help extract data from input easily. So we will create a helper called item/content.hbs

We will then compose these atomic elements into page-level components, mapping each to the specific design requirements of the six unique views in the document.

Then we will have a main entry file that contains all page-level component so that the handlebars engine can start from to to compile.