Templates
Template Setup Guides

Couponly - Deals and Coupons Template

Template page link: https://zeroqode.com/template/couponly---deals-and-coupons-template-1566211296784x159485741707458000

Introduction

Couponly - Deals and Coupons template is a creative and responsive no-code web-app template suitable for coupons, deals and retail industry. Features credit card and paypal payments, cashbacks, giftcards (Giftbit API) and more

Features:

  • Stripe and PayPal payments

  • Pretty and SEO friendly URLs and

  • Giftcard purchase powered by Giftbits

  • Optional cashback reward system

  • Admin dashboard for managing users, offers, brands, giftcards and more

Payments: See the documentation on how to set Stripe Payments in Bubble App.

Data Structure

User

This data contains information about the users like name, photo, phone number etc. It has a cart, list of orders & purchased giftcards, list of saved offers as well as a wallet for storing rewards (cashback earnings).

Brand

Brand data contains the name, logo, description website, gift card of the specific brand. It also contains offers, giftcards and giftcard sales related info. Also it tells the specific categories the brand falls under.

Category

Category data contains information about the list of brands that are under each category, it contains the specific name of the category.

Alpha_num

This is used to categorize brands by the first letter or number in their name. It contains a list of brands with the said alphanumeric as their first character.

Gift Card

This data contains the information on each gift cards supplied by the specific brand, it contains the price of the gift card, an optional cashback amount and also has a field that determines whether the giftcard should be visible for purchase or not.

Offer

Offer data contains information about the various offers of a particular brand, it contains the discount on that offer, the offer type (promo or sale), the offer code or sale link, expiry date of the offer, offer usage and some descriptive info.

Order

Order data contains information on all orders purchased by customers, it contains the basic details of the specific customer and also includes the order_items, date of payment, channel of payment, payment reference, status of the order and additional info.

Order_item

The order item stores a giftcard and the quantity being purchased by the customer. The user's cart contains a list of order items before they are stored in an order.

Purchased_giftcards

These are singular giftcard units that have been purchased (via Giftbit API or other). They contain a unique redemption link for said giftcard amount and some additional info.

Pages

The main pages of this template are the landing page, gift cards, categories, brands and the user account page.

Landing Page

This is the homepage of this web template. It is fully responsive and has a slide out mobile menu. It also contains floating thumbnails of some brands. The buttons on the hero section contains an admin and guest login button; which takes you to the dashboard page and login page respectively.

Next on the index page is the abridged offer section that shows you some of the brands top offers.

The next section contains a brief display on the gift card deals offered by brands

Next is the popular category section that shows you an array of the various categories the brands are a part of, each category is clickable so that you can view them specifically.

The next section contains a view of some brands affiliated with the template, then move on to the section where we have an input to subscribe to our newsletter.

The last section on the home page is the footer section that has quick-links, social media profile of the company and a brief information about couponly.

Gift Cards

This page contains a view of all brands with gift cards and a view for a selected brand with the list of giftcards the brand has. The view that shows is dependent on the URL. If it contains a brand then the detailed view shows otherwise the view for all brands with giftcards is shown. This is handled by the Router plugin.

Element

State

Note

Page giftcards

view

Takes a text value of either home or store and shows the relevant group in the process.

Page giftcards

brand

Takes a brand gotten from the second path of the Router element.

Group Categories filter

show_all

Takes yes or no. When it is yes the group with a vertical scroll type list of categories becomes visible.

Group Brands filter

show_all

Takes yes or no. When it is yes the group with a vertical scroll type list of brands becomes visible.

Group Gift Cards list

list_count

Takes a number which when incremented, increases number of giftcard brands shown in the related repeating group

Group Gift Cards list

brands_filter

Takes a list of brands and helps filter the list of giftcard brands shown

Group Gift Cards list

categories_filter

Takes a list of categories and helps filter the list of giftcard brands shown

Coupons

This page contains a view of all brand offers and a view for a selected category which shows only offers in that category and a side panel for switching to other categories. The view that shows is dependent on the URL. If it contains a category then the detailed view shows otherwise the view for all offers is shown. This is handled by the Router plugin.

Element

State

Note

Page giftcards

view

Takes a text value of either home or categories and shows the relevant group in the process.

Page giftcards

category

Takes a category gotten from the path of the Router element.

Group All Coupons

list_count

Takes a number which when incremented, increases number of offers shown in the related repeating group

Group Coupon List

list_count

Takes a number which when incremented, increases number of offers shown in the related repeating group

Group Cat Brands

show_all

Takes yes or no. When it is yes the group with a vertical scroll type list of brands becomes visible.

Group Cat Brands Mobile

show_all

Takes yes or no. When it is yes the group with a vertical scroll type list of brands becomes visible.

Brands

This contains a view for all brands grouped by alphanumeric and a view for a selected brand which contains some descriptive info and the brand's offers. The view that shows is dependent on the URL. If it contains a brand then the detailed view shows otherwise the view for all brands is shown. This is handled by the Router plugin.

Element

State

Note

Page brands

view

Takes a text value of either home or brand and shows the relevant group in the process.

Page brands

category

Takes a brand gotten from the path of the Router element.

Group Offer List

list_count

Takes a number which when incremented, increases number of offers shown in the related repeating group

Cart

This contains your shopping items that you've added to your shopping cart and a payment summary with a checkout button that opens the checkout popup.

Account

The account page is for registered and logged in users to see their rewards, purchased giftcards, saved offers and to manage their profile & settings.

Element

State

Note

Page account

view

Takes a text value of either rewards, savedoffers, giftcards or profile and shows the relevant group in the process.

Receive

This page is where gift card recipients who are not registered users can access their giftcards.

Element

State

Note

Page receive

order

Takes an order gotten from the path of the Router element.

This page displays search results for a keyword search from the search boxes in the template. It displays results for brands and categories handled by the Search and Autocorrect plugin.

Admin

The dashboard can be used to make changes to the template such as editing brands, adding new brands, editing gift cards, adding and deleting gift cards, editing team, adding and deleting team, adding site details such as logo and description, adding and deleting categories and updating user profile.

Element

State

Note

Page

view

Takes a text value of either home, users, offers, giftcards, brands, orders or categories and shows the relevant group in the process.

The admin page is currently open to all visitors logged in or not but with read-only access (they can't perform any actions). To have full access the user must have their current user's is_admin field set to yes. There is also a disabled workflow that redirects users back to previous page if they don't have admin access. You should enabled this workflow when you get this template. Step by step below:

  • Signup as a user

  • Find your user in the Bubble database and set is_admin field to yes

  • Go to the /admin page workflow tab and enable the 2nd workflow

  • Go to the /admin page design tab, click Group Page element, untick "This element is visible on page load"

  • Freely visit the admin page with full access as long as you are logged in while users without is_admin set to yes would have no access.

Specific References

Payments

This template supports two payment options, Stripe and PayPal.

To setup your stripe account, go to https://stripe.com, create an account. You will be allowed to access your dashboard once you have successfully verified your email address and activated your account.

Click on Developers and then, API keys. Copy your API keys. Ensure to use a live API key when your template goes live.

To setup Paypal, check the Paypal plugin for instructions.

Giftbit API

This template uses the Giftbit API for giftcard purchases. If you want to setup this API you would need one API key for development/test version and another for live version.

For Test API key

For Live API key

Before going live you need to replace the API root of all API calls changing from api-testbed.giftbit.com to api.giftbit.com. You should read their API docs and also contact them as they have suggested. https://www.giftbit.com/giftbitapi/#/introduction/getting-started

The giftbit testbed app only has about 3 giftcard brands for testing purposes. You will see them when you try to create a new giftcard in the admin. When you go live you will see all brands in the brand selection popup when you try to create a giftcard in the admin. All brands are listed here https://www.giftbit.com/rewards/

To create giftcards for a new brands you need to follow these simple steps:

  • Go to your admin dashboard

  • Go to giftcards tab

  • Click on add giftcard

  • Select a giftbit brand from the list

  • Search for the corresponding brand in your bubble database on the next popup

  • Confirm to add the giftbit code to your database

  • Create giftcards of various prices in the next popup

Certain pages in this template make use of the Zeroqode Router for Navigation plugin. These pages are brands, coupons, giftcards and accounts.

The way it works is similar for most pages, on page load the URL is inspected and the value of the path is used to determine what values to given the custom states responsible for changing views and in the case where the url contains a slug (a unique readable string used to identify an object in the database), the slug is used to fetch the data to be displayed to a certain group.

Newsletter Subscription

Subscription to newsletters are enabled via mailchimp. go to mailchimp.com, create an account and get the the api key and add to the plugin. Each subscriber is added to the mail list on mail chimp and newsletters can be sent in bulk to the subscribers.

Reusable Elements

This template has 12 reusable elements listed below:

  • Brand_dropdown: This is a dropdown of links to top brands used in the two reusable headers

  • Categories_dropdown: This is a dropdown of links to top categories used in the two reusable headers

  • User_dropdown_menu: This is a dropdown with two modes. It contains a login form for logged out users and links to key account pages for logged in users.

  • Footer: Footer with key links and disclaimer

  • Giftcard_box: This is a container for the giftcard brand preview shown on the giftcards page

  • Header_main: This is one of the two available headers. This header does not contain a search box and is used on pages with a separate searchbox in their hero section.

  • Header_search: This is the second of the two available headers. This header contains a search box and is used on pages without separate searchbox in their hero section.

  • Long_offer_box: This is a rectangular container for coupons/offers and is used in the brands page to show offers for the particular brand in view.

  • Long_offer_box_logo: This is similar to the container above but contains the logo of the brand that has the offer and is used in the accounts page.

  • Offer_box: This is a square container for coupons/offers and is used in the home and coupons page to show offers for the particular brand in view.

  • Searchbox: This is used for search and is found in the hero section of some pages like home and coupons page. It links to the /search page.

  • Newsletter: This is a fullwidth container with a newsletter subscription call-to-action and form.

Demo to preview the template