If you'd like to hide the promo code field in checkout and only show it after the user clicks on the designated link (e.g. "click here"), you would need to make the following adjustments to the Promotion Components template.
Add the below code right after the /widget/checkout/component/partials/promo-code-component.html section:
HTML
<button type="button" class="collapsible">Have a code? Click here</button>
<div class="content">
<div ng-if="isPromoCodeAvailable() " animate-locked-promo-code>
<div class="promo-code-component"
ng-class="{'promo-code-unlocked': isSelectedTermLocked()}"
ng-if="!isPromoCodeValid()">
<div class="promo-code-eclipse">
<div class="promo-code-lock"></div>
</div>
<div class="promo-code-description">
<p class="promo-code-description-enter">
<t>Enter promo code to purchase</t>
<br/>
{{selectedTerm.resource.name | tc:'resource.name'}}
</p>
And to the bottom of the template, you'll need to add this code:
HTML
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
You can also use the Checkout style template to customize the styling of this section further.
For example, you can add the CSS as shown below:
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #FFFFFF;
color: #444;
cursor: pointer;
padding: 15px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #FFFFFF;
}