Change “buy now” button text and change functionality of button based on a specific field value

Requirement is to change the text of button “buy now” and while clicking that button it should redirect to external link

On the PLP/PDP page, we need to add button based on the condition.

• If an item with no event or ballot link then we need to display “Buy Now “ button
• If an item reord if the event link is availble we need to display “Book Now” button and this will lead to the external link which is provided in the custom field event.
• If an item reord if the Ballot link is availble we need to display “Enter Ballot” button and this will lead to the external link which is provided in the custom field ballot.

Solution:
Create 2 item fields of type text and let the id of fields are ‘custitem_jj_ballot_external_link’ and ‘custitem_jj_event_external_link’

Facets.ItemCell.View.js


  if (this.model.get('custitem_jj_ballot_external_link') ||this.model.get('custitem_jj_event_external_link')) {
                        showbuynow = false;
                        // console.log("don't show buy")
                    } else {
                        showbuynow = true;
                        // console.log("show buy")
                    }

 context = {
custitem_jj_event_external_link_exist: (this.model.get('custitem_jj_event_external_link')) ? true : false
                        , custitem_jj_ballot_external_link_exist: (this.model.get('custitem_jj_ballot_external_link')) ? true : false
                        , ballot_external_link: this.model.get('custitem_jj_ballot_external_link')
                        , event_external_link: this.model.get('custitem_jj_event_external_link')
                        , showbuynow: showbuynow
                    };
   return context;
            }

facets_item_cell_grid.tpl


<div class="facets-item-cell-list-more-info-full" >
                {{#if custitem_jj_event_external_link_exist}}
                <a class="facets-item-cell-list-name external_link_event_ballot" href='{{event_external_link}}' target="_blank">
                    <button type="submit" data-action="sticky" href='{{event_external_link}}' class="facets-item-cell-grid-more-info-button" {{#unless
                        isCurrentItemPurchasable}}disabled="true" {{/unless}}>
                        <!-- <a href='{{event_external_link}}' class="external_link_event_ballot" > -->
                            {{translate 'Book Now'}}
                        <!-- </a> -->
                    </button>
                </a>
                {{/if}}
                {{#if custitem_jj_ballot_external_link_exist}}
                <a class="facets-item-cell-list-name external_link_event_ballot" href='{{ballot_external_link}}' target="_blank">
                    <button type="submit" data-action="sticky" href='{{ballot_external_link}}' class="facets-item-cell-grid-more-info-button" {{#unless
                        isCurrentItemPurchasable}}disabled="true" {{/unless}}>
                        <!-- <a href='{{ballot_external_link}}' class="external_link_event_ballot" > -->
                            {{translate 'Enter Ballot'}}
                        <!-- </a> -->
                    </button>
                </a>
                {{/if}}
                {{#if showbuynow}}
                <a class="facets-item-cell-list-name" href='{{url}}'>
                    <button type="submit" href="{{url}}" data-action="sticky"
                        class="facets-item-cell-grid-more-info-button" {{#unless
                        isCurrentItemPurchasable}}disabled="true" {{/unless}}>
                        {{#if isCurrentItemPurchasable}}{{!1.0.9}}
                        {{translate 'Buy Now'}}
                        {{else}}
                        {{translate 'Sold Out'}}
                        {{/if}}
                    </button>
                </a>
                {{/if}}
            </div>