Skip to content

Commit

Permalink
ESY-6582 Updated tab component to accept a list of tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@m-lilja
m-lilja committed Feb 25, 2025
1 parent 7d46d72 commit a50ac4e
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 112 deletions.
83 changes: 45 additions & 38 deletions _includes/tabs.html
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,52 @@
<div class="tabs" id="tabs-showcase-example">
{%- comment -%}
**Parameters
tab_list(required): An array with items having the attributes title(required), content (required)
{%- endcomment -%}

{% assign tabs = include.tab_list %}

<div class="m-5 ">
{{tabs}}
</div>
<div id="tabs-container" class="tabs">
<ul>
<li class="full-checkout">
<a href="#full-checkout" id="full-checkout">Full Checkout</a>
</li>
<li class="payments-only">
<a href="#payments-only" id="payments-only">Payments Only</a>
{% for tab in tabs %}
<li class="tab-title {% if forloop.first %}active{% endif %}">
<a id="tab-title-{{ forloop.index }}">{{ tab.title }}</a>
</li>
{% endfor %}
</ul>
</div>

<section>
<div id="tab1">
<div class="tab-intro">
{{ include.tab1_intro | markdownify}}
</div>
<div class="tab1-content">
{{ include.tab1_content | markdownify}}
</div>
</div>
<div id="tab2" class="d-none">
<div class="tab-intro">
{{ include.tab2_intro | markdownify}}
</div>
<div>
{{ include.tab2_content | markdownify}}
</div>
</div>
</section>
{% for tab in tabs %}
<p id="tab-content-{{ forloop.index }}" class="tab-content {% unless forloop.first %}d-none{% endunless %}">
{{ tab.content }}
</p>
{% endfor %}

<script>
$( "#full-checkout" ).click(function() {
$( "#tab2" ).addClass( "d-none" )
$( "#tab1" ).removeClass( "d-none" )
$( ".full-checkout" ).addClass( "active" )
$( ".payments-only" ).removeClass( "active" )
$("#tabs-container ul li a").click(function () {
let tabs = $(".tab-title");
for (let index = 0; index < tabs.length; index++) {
const tab = tabs[index];
tab.classList.remove("active");
}

$(this).parent().addClass("active");
var tabContentId = $(this).attr("id").replace("tab-title-", "tab-content-");

let tabContents = $(".tab-content");
for (let index = 0; index < tabContents.length; index++) {
const tabContent = tabContents[index];

});
$( "#payments-only" ).click(function() {
$( "#tab2" ).removeClass( "d-none" )
$( "#tab1" ).addClass( "d-none" )
$( ".full-checkout" ).removeClass( "active" )
$( ".payments-only" ).addClass( "active" )
});
</script>
switch (tabContent.id) {
case tabContentId:
tabContent.classList.remove("d-none");
break;
default:
if (!tabContent.classList.contains("d-none"))
tabContent.classList.add("d-none");
break;
}
}
});
</script>
85 changes: 11 additions & 74 deletions checkout/v3/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,16 @@ table_content_payments:
merchantSide: true
- label: PSP
swedbankPay: true

tab_list:
- title: Checkout v2
content: Checkout v2 was the generally available version of Checkout between 2018
and 2021. Choose this if you have an **existing Checkout v2
integration**.
- title: Checkout v3
content: Coming soon…
- title: Checkout v3.1
content: Even more new and fantastic
---

## Choose The Right Implementation For Your Business
Expand Down Expand Up @@ -86,77 +96,4 @@ or two if that makes more sense for your business.
- **PSP:** The service of providing payment methods in the checkout or payment
menu.

## What Are You Looking For?

{% capture tab1_intro %}

## Full Checkout

By using the Full Checkout, we help you collect and safely store consumer data.
We can also prefill consumer info in the checkout if they have agreed to let us
store their info. All of our implementations support both single payment options
and the full payment offering.
{% endcapture %}

{% capture tab1_content %}

{% include card-table.html
cta_text='Read more'
title='Standard'
text='We collect and verify the identity of your consumer. We also collect the billing and shipping address and we store the consumer information. With our PSP you are always able to choose one ore more payment methods.'
table_content=page.table_content
header=page.header
to='/checkout'
%}

{% include card-table.html
title='Authenticated'
text="The consumer data you have collected, is shared with us for verification and
storage. If you have a login, your consumer won't need to fill out their
information twice. With our PSP you are always able to choose one or more
payment methods."
table_content=page.table_content_authenticated
header=page.header
to='/checkout'
%}

{% include card-table.html
title='Merchant Authenticated Consumer'
text="In order to implement this solution, you need to be able to both collect and
verify your consumer's data using SCA. We store the consumer information, and
with our PSP you are always able to choose one or more payment methods."
table_content=page.table_content_mac
header=page.header
to='/checkout'
%}
{% endcapture %}

{% capture tab2_intro %}

## Payments Only

If you are looking for our payments package, you will have the flexibility to
build your own checkout flow. You collect the consumer data and own the entire
checkout process. The **Payments Only** implementation supports both single
payment options and the full payment offering.
{% endcapture %}

{% capture tab2_content %}

{% include card-table.html
title='Payments'
text="In order to implement this solution, you need to be able to both collect and
verify your consumer's data using SCA. You also store the consumer information.
With our PSP you are always able to choose one or more payment methods."
table_content=page.table_content_payments
header=page.header
to='/checkout'
%}
{% endcapture %}

{% include tabs.html
tab1_intro=tab1_intro
tab1_content=tab1_content
tab2_intro=tab2_intro
tab2_content=tab2_content
%}
{% include tabs.html tab_list=page.tab_list %}

0 comments on commit a50ac4e

Please sign in to comment.