How to require the customer to accept the terms of the contest

Before reading this article, we suggest that you read the following:

Improve loading time, usability, and design of the contests storefront plugin

BlingRush app widget enables the shoppers to buy a ticket for a contest in the exact same way they buy any other product at the store.

The registration flow is as follow:

1. Customer Browse the contests section at the store
2. The customer navigates to one of the contest pages (which are actually Shopify product pages)
3. In case the customer is not logged in, he/she will need to first login using their store account to buy a ticket to the contest
4. The customer acknowledges that he/she accepts the terms of the contest (optional)
5. The customer clicks on the participation button and is redirected to the Shopify checkout page.

When a contest page is loaded, the widget identifies that it is a contest page and not a regular product page. The widget then renders the relevant panels and depending on the store’s settings, either hide the normal checkout/add-to-cart and show a new participation button instead or keeps the existing checkout buttons and uses them for contest registration.

Since the contest has a set of rules that is not part of the store’s terms of use, the store may be interested in requiring the customer to acknowledge that he read and accepted the rules before performing the purchase. By default, this option is disabled. However, the store can enable the widget to render a verification checkbox next to the participation button and prevent the customer from buying a ticket until the checkbox is checked.

In order to customize the position and appearance of the terms checkbox, follow the below steps:

1. In BlingRush app portal navigation. Goto Customizations > Product page
2. Check/Uncheck the Require the customer to accept the contest terms before buying a ticket field to show/hide the verification checkbox at the contest page.
3. Set the Position the approve terms panel inside the following HTML element field with a selector of an element that the terms checkbox will be rendered in.
4. Set the Approve terms panel style field with a custom CSS class
5. Click on the Save button

Due to Shopify Script Tag limitations, the checkbox’s rendering on the page might take a few seconds to occur. To show the checkbox immediately when the page loads, the store can modify the Theme template file and add a checkbox that will only appear on contest pages.

Customizing the terms checkbox by modifying the store’s theme templates

1. Login to Shopify admin
2. goto Online Store > Themes
3. Under the Current Theme section, click on the Customize button
4. In the theme menu, click Theme actions > Edit Code
5. Create a new snippet and name it blingrush-agree-to-contest-terms

{% if product and product.metafields.blingrush and product.metafields.blingrush.iscontest and product.variants.first.available %}

<script type="text/javascript">
   var blingrushParticipationBtns;
   document.addEventListener('DOMContentLoaded', (event) => {    
     blingrushParticipationBtns = document.body.querySelectorAll('button[data-blingrush-participation-btn],a[data-blingrush-participation-btn]');
    
     blingrushChangeParticipationBtnState(true);
     
     var chkBox = document.body.querySelector('input[data-blingrush-agree-chk]');
     
     if (chkBox)
     {
       chkBox.addEventListener('change',function (e){blingrushChangeParticipationBtnState(!this.checked); });
     }
   });
  
   function blingrushChangeParticipationBtnState(disable)
  {
    blingrushParticipationBtns.forEach(b=>{b.disabled = disable});
  }
</script>

{% if customer %}
<div>
  <label>
    <span><input type="checkbox" id="blingrushtermschk" style="min-height:0;margin-right:10px;" data-blingrush-agree-chk data-blingrush-chk-selfverified/> </span>
    <span>I have read and agree to the rules of the contest</span>
  </label>
</div>
{% endif %}
{% endif %}

6. Copy and paste the following code into the snippet file
7. Modify the HTML inside the snippet as you see fit
8. Comment: if you remove the data-blingrush-chk-selfverified from the input element, the widget will run its own verification process, meaning the disable/enable javascript functions in the snippet will no longer be required. However, we recommend keeping the attribute in the element and performing your own verification process.
9. Click on the Save button.
10. Open the product template (usually named product-template.liquid ).
11. Paste the following line of code into the place you want the checkbox to appear

{% include 'blingrush-agree-to-contest-terms' %}

12. Click on the Save button.