Научитесь устанавливать цены на веб-сайте с помощью Svelte и TailwindCSS и изучите историю моделей ценообразования SaaS в заключительной части этого руководства по целевой странице.
Краткая история программного обеспечения как услуги (SaaS)
История отображения планов и цен на веб-сайтах восходит к появлению программного обеспечения как услуги (SaaS) в конце 1990-х годов. До этого программное обеспечение, как правило, продавалось как разовая покупка, требующая, чтобы клиенты оплачивали всю стоимость программного обеспечения авансом. Это часто рассматривалось как дорогое предложение для предприятий, поскольку стоимость программного обеспечения часто была непомерно высокой, а стоимость обновления программного обеспечения до его последней версии часто была дополнительными расходами.
SaaS изменил это, позволив клиентам платить гораздо меньшую первоначальную стоимость, а затем периодически вносить плату за подписку. Это позволило клиентам получить доступ к последней версии программного обеспечения без предварительной оплаты всей стоимости программного обеспечения. Это открыло рынок для многих предприятий, которые не могли позволить себе традиционную модель разовой покупки.
С тех пор многие веб-сайты приняли модель подписки, предлагая планы, которые клиенты могут выбирать в зависимости от своих потребностей. Это позволяет клиентам иметь доступ к последней версии программного обеспечения, платя при этом только за те функции, которые им нужны. Это также позволяет предприятиям лучше контролировать свои расходы и увеличивать или уменьшать масштабы в зависимости от своих потребностей.
История ценообразования SaaS началась в начале 2000-х годов, когда поставщики SaaS начали предлагать своим клиентам различные тарифные планы. Эти планы обычно включали базовую плату за подписку на программное обеспечение, а также дополнительную плату за более продвинутые функции. Это позволило клиентам платить только за те функции, которые им нужны, а не за все программное обеспечение заранее.
С тех пор цены на SaaS изменились, и многие поставщики предлагают планы, адаптированные к различным потребностям клиентов. Эти планы могут варьироваться от базового пакета до более дорогих планов, которые включают больше функций и поддержки. Это позволяет клиентам легко увеличивать или уменьшать масштаб в зависимости от своих потребностей, при этом получая последнюю версию программного обеспечения.
Создание страницы цен с помощью TailwindCSS и Svelte
В этом уроке мы создадим страницу с ценами с помощью TailwindCSS и Svelte. Мы будем использовать приведенный выше код для создания страницы динамического ценообразования с несколькими вариантами оплаты.
Шаг 1: Подготовьте HTML
Первым шагом является создание HTML для нашей страницы. Мы начнем с создания div с некоторыми базовыми стилями. Добавьте в HTML-файл следующий код:
<div class="py-32 bg-blue-500">
<div class="container px-4 md:px-24 lg:px-24 mx-auto">
<div class="text-center pb-16">
<h2 class="text-4xl font-bold text-white">A simple plan for everyone.</h2>
</div>
</div>
</div>
Это создаст div с синим фоном и белым заголовком.
Шаг 2. Добавьте способы оплаты
Далее мы добавим варианты оплаты на нашу страницу. Мы будем использовать div с классом flex TailwindCSS для создания ряда вариантов оплаты. Добавьте в HTML-файл следующий код:
<div class="flex justify-center">
<div class="bg-black p-2 px-2 pb-0 rounded-t-lg flex ">
{#each modes as mode}
{#if current_mode == mode.id}
<div class="p-2 px-3 stretch-0 bg-white font-bold rounded-t-sm cursor-pointer">
{mode.name}
</div>
{:else}
<div class="text-white p-2 stretch-0 font-bold cursor-pointer" on:click={makeHandleClickMode(mode.id)}>
{mode.name}
</div>
{/if}
{/each}
</div>
</div>
Это создаст ряд вариантов оплаты с черным фоном. Цикл #each будет проходить через массив modes, определенный в скрипте Svelte, и создавать новый вариант оплаты для каждого элемента в массиве.
Шаг 3: Добавьте планы
Далее мы добавим планы на нашу страницу. Мы будем использовать div с классом TailwindCSS grid для создания сетки планов. Добавьте в HTML-файл следующий код:
<div>
<div class="grid lg:grid-cols-3 p-2 bg-white rounded-2xl gap-2">
{#each plans as plan, index}
<div class="bg-gray-100 p-8 rounded-xl flex flex-col gap-8">
<div>
<h3 class="text-3xl font-bold">{plan.name}</h3>
<p>{plan.subtitle}</p>
</div>
<div>
<h3 class="text-5xl">${prices[index]}</h3>
<small class="text-xs font-bold text-gray-600">per month</small>
{#if ([current_mode,getMode()][1]) == "yearly"}
<p class="text-xs font-bold text-gray-600">${getYearlyValue(prices[index])} billed yearly</p>
{/if}
</div>
<div class="grow">
<ul class="grid grid-cols gap-3 text-gray-600">
{#each plan.features as feat}
<li>• {feat}</li>
{/each}
</ul>
</div>
<a href={plan.link} class={"text-center p-4 font-bold " + plan.buttonColor + " " + plan.textColor}>SELECT PLAN</a>
</div>
{/each}
</div>
</div>
Это создаст сетку планов с белым фоном, и каждый план будет иметь свой уникальный стиль. Цикл #each будет проходить через массив plans, определенный в скрипте Svelte, и создавать новый план для каждого элемента в массиве.
Шаг 4: Добавьте скрипт Svelte
Наконец, мы добавим скрипт Svelte на нашу страницу. Скрипт Svelte будет обрабатывать логику нашей страницы. Добавьте следующий код в свой скрипт Svelte:
$: current_mode = 0;
const modes = [
{id:0,name:"Monthly",key:"monthly"},
{id:1,name:"Yearly",key:"yearly"}
]
function makeHandleClickMode(number) {
return function (){
current_mode = number;
prices = plans.map(plan => getPrice(plan));
}
}
function getMode() {
return modes[current_mode].key
}
function getPrice(plan){
return plan.price[getMode()];
}
function getYearlyValue(price){
return price * 12;
}
const plans = [
{
name: "Basic",
subtitle: "A plan for the everyday user",
price : {
monthly: "46",
yearly: "31",
},
features:[
"200 orders per month",
"up to 2 users",
"3% billing fee",
],
buttonColor: "bg-green-600 hover:bg-green-500 ",
textColor: "text-white",
link: "/plans?plan=basic"
},
... //add your own here...
]
$: prices = plans.map(plan => getPrice(plan));
Это создаст логику для нашей страницы. Он будет обрабатывать переключение между месячными и годовыми ценами, а также будет рассчитывать годовые цены.
Следующие шаги
На этом наша короткая серия целевых страниц заканчивается. Мы скоро вернемся с другим руководством по работе с другими страницами, где у нас будет больше деталей и истории.
До скорой встречи!
