Forum

Thread tagged as: Showcase

New salon website for Carmelo Alessi Hairdressing

This client; Carmelo Alessi Hairdressing, has been a client (and now friend) for a while now.

I recently helped them with a quick re-brand, followed but a complete redesign and build on Perch.

Basic stuff in perch like the Blog (currently hidden) and heavy use of Blocks. Was more complicated in terms creating in the front-end templates, especially with regards to getting the Pricing table to work on small devices.

carmeloalessi.com

Richard Wiggins

Richard Wiggins 0 points

  • 5 years ago
Simon Clay

Simon Clay 127 points

Looks great Richard.

Thanks Simon!

Simon Clay

Simon Clay 127 points

I'm working on a Salon site at the mo and I find pricing tables are a challenge to make easy for the client to edit. How did you go about it?

I created a new region called 'Pricing Table' and a template which has a table head row and then a repeatable table row with text fields. The them set that region to 'Allow multiple items'.

Here's my template code:

<thead>
    <tr>
        <th><perch:content type="text" id="th-service" label="Service Title" /></th>
        <th>Carmelo</th>
        <th>Top Stylist</th>
        <th>Senior Stylist</th>
        <th>Stylist</th>
    </tr>
</thead>
<tbody>
    <perch:repeater id="prices" label="Pricing Item">
        <tr>
            <td><perch:content type="text" id="service" label="Service" /></td>
            <td><perch:content type="text" id="price-carmelo" label="Carmelo" /></td>
            <td><perch:content type="text" id="price-top" label="Top Stylist" /></td>
            <td><perch:content type="text" id="price-senior" label="Senior Stylist" /></td>
            <td><perch:content type="text" id="price-stylist" label="Stylist" /></td>
        </tr>
    </perch:repeater>
</tbody>

and here's a screenshot of it in Perch: https://cl.ly/f3aJ

To get the table working on small devices I ended up using Zurb's Foundation Responsive Tables

Here's the finished page: https://www.carmeloalessi.com/pricing

Simon Clay

Simon Clay 127 points

That's nice. I'm using a similar approach for stand alone tables and work mostly in Bootstrap, so responsiveness is handled quite well.

Nice design :-)