AFW Pattern Lab

Preference Center 

<div class="container">
    <nav class="breadcrumb" aria-label="Breadcrumb">
        <ol class="breadcrumb__list">
            <li class="breadcrumb__item">
                <a href="#" class="breadcrumb__link">Home</a>
            </li>
            <li class="breadcrumb__item">
                <a href="#" class="breadcrumb__link">Account</a>
            </li>
            <li class="breadcrumb__item">
                <a href="#" class="breadcrumb__link" aria-current="page">Preference Center</a>
            </li>
        </ol>
    </nav>

    <div class="heading-container">
        <h1 class="heading-container__heading text-center h1-style mb-0 c-primary-blue text-uppercase">AFW Preference Center</h1>
        <p class="heading-container__subheading text-center p-lg">Take Charge of Your Experience</p>
    </div>
</div>

<div class="container pb-64">
    <div class="row">
        <div class="col-12 col-lg-4">
            <div class="bg-sky br-8 p-20">

                <div class="mb-16">

                    <input type="text" class="form__input" id="firstName" name="firstName" placeholder="First name..." />

                </div>

                <div class="mb-16">

                    <input type="text" class="form__input" id="lastName" name="lastName" placeholder="Last name..." />

                </div>

                <div class="mb-16">

                    <input type="text" class="form__input" id="email" name="email" placeholder="your-email@email.com" />

                </div>

                <div class="mb-16">

                    <input type="text" class="form__input" id="phoneNumber" name="phoneNumber" placeholder="(000) 000-0000" />

                </div>

                <div class="mb-16">

                    <input type="text" class="form__input" id="birthday" name="birthday" />

                </div>

                <div class="mb-16">

                    <select class="form__select" id="state" name="state">

                        <option value="AZ">Arizona</option>

                        <option value="CO">Colorado</option>

                        <option value="TX">Texas</option>

                    </select>

                </div>

            </div>
            <div class="row my-16">
                <div class="col-12 col-lg-6 mb-8">

                    <button class="a-btn a-btn--success a-btn--block">
                        <i class="icon far fa-save mr-6" aria-hidden="true"></i>
                        <span>Save&nbsp;Changes</span>
                    </button>

                </div>
                <div class="col-12 col-lg-6 mb-8">

                    <button class="a-btn a-btn--secondary a-btn--block preference-center-modal__toggle">
                        <i class="icon far fa-bell-slash mr-6" aria-hidden="true"></i>
                        <span>Unsubscribe</span>
                    </button>

                </div>
            </div>
        </div>
        <div class="col-12 col-lg-8">
            <div class="bg-yellow-light br-8 p-20 mb-24 d-flex align-items-start">

                <div class="form__switch">
                    <input class="form__switch__check" id="ex" type="checkbox">
                    <label class="form__switch__label" for="ex">
                        <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                        <div class="label"></div>
                    </label>
                </div>

                <div class="pl-10 pr-64">
                    <h3 class="h2-style mb-0 mt-n6">Get Exclusive Offers Direct to Your Phone!</h3>
                    <h4 class="h5-style mb-0">Yes! I want to see occasional texts from AFW. By checking this box I agree to receive texts about promotions, deals, and discounts I WON&rsquo;T SEE ANYWHERE ELSE!</h4>
                </div>
            </div>
            <div class="row align-items-stretch">
                <div class="col-12 col-md-6">
                    <div class="bg-gray-lighter br-8 p-20 h-100">
                        <h3 class="mb-16">Promotional Newsletters</h3>

                        <div class="form__switch">
                            <input class="form__switch__check" id="all" type="checkbox">
                            <label class="form__switch__label" for="all">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">I want to see it all!<br><small>Subscribe and see all newsletters from ads to inspiration to reminders to alerts. This option means you'll likely see ALL the deal...and you're gonna want to see these.</small></div>
                            </label>
                        </div>

                        <div class="divider">

                            <span class="divider__text">OR</span>

                        </div>
                        <h4 class="mb-16">Customize Your Experience</h4>

                        <div class="form__switch mb-20">
                            <input class="form__switch__check" id="re" type="checkbox">
                            <label class="form__switch__label" for="re">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Reminders<br><small>Cart Reminders, Wishlist Reminders, Product Reminders</small></div>
                            </label>
                        </div>

                        <div class="form__switch mb-20">
                            <input class="form__switch__check" id="wa" type="checkbox">
                            <label class="form__switch__label" for="wa">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Weekly Ads<br><small>Get the ads sent right to your desk top or phone on a weekly basis. This gives you access to knowing all of the best deals that week</small></div>
                            </label>
                        </div>

                        <div class="form__switch mb-20">
                            <input class="form__switch__check" id="da" type="checkbox">
                            <label class="form__switch__label" for="da">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Deal Alerts & Inspiration<br><small>See deals that the weekly ads don&rsquo;t show. Be the first to know first about savings on furniture and home decor or, get inspired with design tips and ideas from AFW&rsquo;s 1st class designers</small></div>
                            </label>
                        </div>

                        <div class="form__switch">
                            <input class="form__switch__check" id="ps" type="checkbox">
                            <label class="form__switch__label" for="ps">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Pricing and Stock Alerts<br><small>Stay in the know about price decreases and inventory updates! If your favorite furniture has finally come down in price, or if it&rsquo;s almost out of stock, we will send you an email</small></div>
                            </label>
                        </div>

                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="bg-gray-lighter br-8 p-20 h-100">
                        <h4 class="h3-style mb-16">Furniture Interests</h4>

                        <div class="form__switch mb-30 form__switch--centered">
                            <input class="form__switch__check" id="lr" type="checkbox">
                            <label class="form__switch__label" for="lr">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Living Room</div>
                            </label>
                        </div>

                        <div class="form__switch mb-30 form__switch--centered">
                            <input class="form__switch__check" id="br" type="checkbox">
                            <label class="form__switch__label" for="br">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Bedroom Furniture</div>
                            </label>
                        </div>

                        <div class="form__switch mb-30 form__switch--centered">
                            <input class="form__switch__check" id="dr" type="checkbox">
                            <label class="form__switch__label" for="dr">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Dining Room Furniture</div>
                            </label>
                        </div>

                        <div class="form__switch mb-30 form__switch--centered">
                            <input class="form__switch__check" id="of" type="checkbox">
                            <label class="form__switch__label" for="of">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Office Furniture</div>
                            </label>
                        </div>

                        <div class="form__switch mb-30 form__switch--centered">
                            <input class="form__switch__check" id="od" type="checkbox">
                            <label class="form__switch__label" for="od">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Outdoor & Patio Furniture</div>
                            </label>
                        </div>

                        <div class="form__switch mb-30 form__switch--centered">
                            <input class="form__switch__check" id="ss" type="checkbox">
                            <label class="form__switch__label" for="ss">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Storage & Shelves</div>
                            </label>
                        </div>

                        <div class="form__switch mb-20">
                            <input class="form__switch__check" id="sc" type="checkbox">
                            <label class="form__switch__label" for="sc">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Sleep Center<br><small>Mattresses, Bedding, Pillows, Box Springs</small></div>
                            </label>
                        </div>

                        <div class="form__switch mb-20">
                            <input class="form__switch__check" id="hd" type="checkbox">
                            <label class="form__switch__label" for="hd">
                                <div class="toggle" data-text-on="On" data-text-off="Off"></div>
                                <div class="label">Home Decor<br><small>Lighting, Mirrors, Rugs, Wall Decor, Home Accents</small></div>
                            </label>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="preference-center-modal">
    <div class="preference-center-modal__inner">
        <h1>We&rsquo;re Sad To See You Go!</h1>
        <h2>To unsubscribe please enter your current email address below and click confirm.</h2>
        <div class="px-20 my-10">

            <input type="text" class="form__input" />

        </div>
        <div class="d-flex mt-12 gap-12 justify-content-center">
            <button class="a-btn a-btn--primary">
                <i class="icon mr-8 fas fa-check" aria-hidden="true"></i>
                <span>Confirm</span>
            </button>
            <button class="a-btn a-btn--secondary">
                <i class="icon mr-8 fas fa-ban" aria-hidden="true"></i>
                <span>Cancel</span>
            </button>
        </div>
    </div>
</div>
 
<div class="container">
    {% render '@breadcrumb', breadcrumb, true %}
    {% render '@heading-container', header, true %}
</div>

<div class="container pb-64">
    <div class="row">
        <div class="col-12 col-lg-4">
            <div class="bg-sky br-8 p-20">
                {% for input in inputs %}
                <div class="mb-16">
                    {% render '@form', input %}
                </div>
                {% endfor %}
            </div>
            <div class="row my-16">
                <div class="col-12 col-lg-6 mb-8">
                    {% if saveButton %}
                    <button class="a-btn a-btn--success a-btn--block">
                        {% render '@icon', saveButton.icon, true %}
                        <span>{{saveButton.text|safe}}</span>
                    </button>    
                    {% endif %}
                </div>
                <div class="col-12 col-lg-6 mb-8">
                    {% if unsubButton %}  
                    <button class="a-btn a-btn--secondary a-btn--block preference-center-modal__toggle">
                        {% render '@icon', unsubButton.icon, true %}
                        <span>{{unsubButton.text|safe}}</span>
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-8">
            <div class="bg-yellow-light br-8 p-20 mb-24 d-flex align-items-start">
                {% render '@form', exclusive, true %}
                <div class="pl-10 pr-64">
                    <h3 class="h2-style mb-0 mt-n6">Get Exclusive Offers Direct to Your Phone!</h3>
                    <h4 class="h5-style mb-0">Yes! I want to see occasional texts from AFW. By checking this box I agree to receive texts about promotions, deals, and discounts I WON&rsquo;T SEE ANYWHERE ELSE!</h4>
                </div>
            </div>
            <div class="row align-items-stretch">
                <div class="col-12 col-md-6">
                    <div class="bg-gray-lighter br-8 p-20 h-100">
                        <h3 class="mb-16">Promotional Newsletters</h3>
                        {% for item in promoAll -%}
                        {% render '@form', item, true %}
                        {%- endfor %}
                        {% render '@divider', divider, true %}
                        <h4 class="mb-16">Customize Your Experience</h4>
                        {% for item in promoCustom -%}
                        {% render '@form', item, true %}
                        {%- endfor %}
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="bg-gray-lighter br-8 p-20 h-100">
                        <h4 class="h3-style mb-16">Furniture Interests</h4>
                        {% for item in furniture -%}
                        {% render '@form', item, true %}
                        {%- endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="preference-center-modal">
    <div class="preference-center-modal__inner">
        <h1>We&rsquo;re Sad To See You Go!</h1>
        <h2>To unsubscribe please enter your current email address below and click confirm.</h2>
        <div class="px-20 my-10">
        {% render '@form', { "type": "email" }  %}
        </div>
        <div class="d-flex mt-12 gap-12 justify-content-center">
            <button class="a-btn a-btn--primary">
                <i class="icon mr-8 fas fa-check" aria-hidden="true"></i>
                <span>Confirm</span>
            </button>
            <button class="a-btn a-btn--secondary">
                <i class="icon mr-8 fas fa-ban" aria-hidden="true"></i>
                <span>Cancel</span>
            </button>
        </div>
    </div>
</div>
 
{
  "breadcrumb": {
    "links": [
      {
        "href": "#",
        "text": "Home"
      },
      {
        "href": "#",
        "text": "Account"
      },
      {
        "href": "#",
        "text": "Preference Center"
      }
    ]
  },
  "header": {
    "heading": {
      "tag": "h1",
      "text": "AFW Preference Center",
      "class": "h1-style mb-0 c-primary-blue text-uppercase"
    },
    "subheading": {
      "tag": "p",
      "text": "Take Charge of Your Experience",
      "class": "p-lg"
    }
  },
  "inputs": [
    {
      "id": "firstName",
      "name": "firstName",
      "type": "text",
      "label": "First Name",
      "placeholder": "First name..."
    },
    {
      "id": "lastName",
      "name": "lastName",
      "type": "text",
      "label": "Last Name",
      "placeholder": "Last name..."
    },
    {
      "id": "email",
      "name": "email",
      "type": "email",
      "label": "E-mail",
      "placeholder": "your-email@email.com"
    },
    {
      "id": "phoneNumber",
      "name": "phoneNumber",
      "type": "tel",
      "label": "Phone Number",
      "placeholder": "(000) 000-0000"
    },
    {
      "id": "birthday",
      "name": "birthday",
      "type": "date",
      "label": "Birthday",
      "placeholder": null
    },
    {
      "id": "state",
      "type": "select",
      "name": "state",
      "label": "State",
      "placeholder": "Colorado...",
      "options": [
        {
          "value": "AZ",
          "label": "Arizona"
        },
        {
          "value": "CO",
          "label": "Colorado"
        },
        {
          "value": "TX",
          "label": "Texas"
        }
      ]
    }
  ],
  "exclusive": {
    "id": "ex",
    "type": "switch",
    "label": null,
    "textOn": "On",
    "textOff": "Off"
  },
  "divider": {
    "text": "OR"
  },
  "promoAll": [
    {
      "id": "all",
      "type": "switch",
      "label": "I want to see it all!<br><small>Subscribe and see all newsletters from ads to inspiration to reminders to alerts. This option means you'll likely see ALL the deal...and you're gonna want to see these.</small>",
      "textOn": "On",
      "textOff": "Off"
    }
  ],
  "promoCustom": [
    {
      "id": "re",
      "type": "switch",
      "class": "mb-20",
      "label": "Reminders<br><small>Cart Reminders, Wishlist Reminders, Product Reminders</small>",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "wa",
      "type": "switch",
      "class": "mb-20",
      "label": "Weekly Ads<br><small>Get the ads sent right to your desk top or phone on a weekly basis. This gives you access to knowing all of the best deals that week</small>",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "da",
      "type": "switch",
      "class": "mb-20",
      "label": "Deal Alerts & Inspiration<br><small>See deals that the weekly ads don&rsquo;t show. Be the first to know first about savings on furniture and home decor or, get inspired with design tips and ideas from AFW&rsquo;s 1st class designers</small>",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "ps",
      "type": "switch",
      "label": "Pricing and Stock Alerts<br><small>Stay in the know about price decreases and inventory updates! If your favorite furniture has finally come down in price, or if it&rsquo;s almost out of stock, we will send you an email</small>",
      "textOn": "On",
      "textOff": "Off"
    }
  ],
  "furniture": [
    {
      "id": "lr",
      "type": "switch",
      "class": "mb-30 form__switch--centered",
      "label": "Living Room",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "br",
      "type": "switch",
      "class": "mb-30 form__switch--centered",
      "label": "Bedroom Furniture",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "dr",
      "type": "switch",
      "class": "mb-30 form__switch--centered",
      "label": "Dining Room Furniture",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "of",
      "type": "switch",
      "class": "mb-30 form__switch--centered",
      "label": "Office Furniture",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "od",
      "type": "switch",
      "class": "mb-30 form__switch--centered",
      "label": "Outdoor & Patio Furniture",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "ss",
      "type": "switch",
      "class": "mb-30 form__switch--centered",
      "label": "Storage & Shelves",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "sc",
      "type": "switch",
      "class": "mb-20",
      "label": "Sleep Center<br><small>Mattresses, Bedding, Pillows, Box Springs</small>",
      "textOn": "On",
      "textOff": "Off"
    },
    {
      "id": "hd",
      "type": "switch",
      "class": "mb-20",
      "label": "Home Decor<br><small>Lighting, Mirrors, Rugs, Wall Decor, Home Accents</small>",
      "textOn": "On",
      "textOff": "Off"
    }
  ],
  "saveButton": {
    "text": "Save&nbsp;Changes",
    "icon": {
      "icon": "fa-save",
      "class": "mr-6",
      "family": "far"
    }
  },
  "unsubButton": {
    "text": "Unsubscribe",
    "icon": {
      "icon": "fa-bell-slash",
      "class": "mr-6",
      "family": "far"
    }
  }
}
  • Content: 
    $(function () {

    const urlParams = new URLSearchParams(window.location.search)

    $('.preference-center-modal').kendoWindow({
        size: 'small',
        title: {
            text: 'Unsubscribe'
        },
        modal: {
            preventScroll: true
        },
        position: {
            top: '50%',
            left: '50%'
        },
        visible: urlParams.get('unsubscribe') ?? false,
        resizable: false,
    })

    $('.preference-center-modal__toggle').on('click touch', () => {
        $('.preference-center-modal').data('kendoWindow').open()
    })
})
  • URL: /components/raw/preference-center/preference-center.js
  • Filesystem Path: source/patterns/templates/account/preference-center/preference-center.js
  • Size: 586 Bytes
  • Content: 
    .preference-center {
    $this: &;

    &-modal {
        &__inner {
            padding: rem(20px);

            h1,
            h2 {
                text-align: center;
                margin: 0;
                padding: 0;
            }

            h2 {
                font-size: rem(17px);
            }
        }
    }
}

.k-widget {
    width: 100%;
    max-width: rem(300px);
    transform: translate(-50%, -50%);

    @include media-md-up {
        width: 100%;
        max-width: rem(600px);
    }
}
  • URL: /components/raw/preference-center/preference-center.scss
  • Filesystem Path: source/patterns/templates/account/preference-center/preference-center.scss
  • Size: 510 Bytes