1. Open the Magento Admin -> Stores -> All stores and create a new store view for the store
Name: The language of the store view (For example "Hebrew")
Code: The name of the store + "Kiosk" + the language (For example "BeerShevaKioskHebrew")
Status: Enabled
2. Open the Store -> Configuration -> Porto 3.2.5 -> Porto panel settings, Select the storeview you created for the kiosk, and Change the following settings:
Maximum Page Width: Full Width
Load Original Bootstrap: Yes
Load Original animate.css: Yes
Disable Lazyload for Product Images: Yes
Static Block ID: kiosk-header
Newsletter Block Title: empty*
Newsletter Block Text: empty*
Show Footer Top: No
Show Footer Middle: No
Show Footer Middle 2nd Row: No
Show Footer Bottom: Yes
Copyright Text : empty*
Static Block Id(before copyright text):kiosk-footer
Show Alternative Product Image: No
Show Rating Stars: No
Show Action Links: No
Custom Block Id for Sidebar: empty*
Static Block Id for Sidebar Custom Block: empty*
Previous Link Text: empty*
Next Link Text: empty*
Show Prev/Next Product Links: No
Custom Social Icons: empty*
Newsletter Popup - Enabled: Disable
Newsletter - Logo Image: Without
Show Google Map: No
Custom Style 1:
body {
background-image:url(../../../media/wysiwyg/Babylon/Kiosk/main_kioks_bg.png);
align-items: center;
width:100%;
height:100%;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ }
.page-header
{
background-color: transparent !important;
}
.logo, .panel.wrapper,
.page-header .nav-sections,
.header.panel > .header.links,
.page-header .block-search,
.nav-toggle,
.page-header .minicart-wrapper,
.page-wrapper > .breadcrumbs {
display: none !important;
}
.custom-block {
position: static !important;
height:auto !important;
width:100% !important;
}
.modal-inner-wrap
{
background-color: transparent !important;
}
.fotorama__stage,
.product-image-container
{
background-color: transparent;
}
.fotorama__stage__shaft,
.product-item-photo
{
border: none;
}
.product-item-details
{
display: none;
}
.price
{
color: white !important;
}
.modal-inner-wrap,
.fotorama__stage__shaft
{
background-color: transparent;
}
.product-item
{
width: 300px !Important;
}
.product-info-main,
.product.media
{
padding-top: 300px;
}
.kiosk-button.action-button.existing-card
{
background-image: url(../../../media/wysiwyg/Babylon/Kiosk/Heb/existing_card.png) !important;
background-size: cover;
width: 160px !important;
height: 120px !important;
background-color: transparent;
border: none;
font-size: 0;
}
.kiosk-button.action-button.new-card
{
background-image: url(../../../media/wysiwyg/Babylon/Kiosk/Heb/new_card.png) !important;
background-size: cover;
width: 160px !important;
height: 120px !important;
background-color: transparent;
border: none;
font-size: 0;
}
.fieldset
{
width: 800px !important
}
.modal-popup.modal-kiosk-card-check._show
{
padding-top:800px;
}
.balance-wrapper
{
background-color: rgba(17, 20, 34, 0.9);
box-shadow: 0 0 36px rgb(255 0 231 / 75%);
}
.page-title,
.product-info-main
{
color:white !important;
}
#pelecard-loader
{
background-repeat: no-repeat;
background-image: url(https://app.arcadespro.com/Static/Kiosk/swipe-credit-card.gif);
background-size: 60%;
background-position: center;
}
.modal-kiosk-card-check .image-placeholder
{
background-image: none !important;
}
kiosk-card-check-popup-content
{
width:400px !important;
height: 1000px !important;
background-color: rgba(17, 20, 34, 0.9) !important;
box-shadow: 0 0 36px rgb(255 0 231 / 75%) !important;
}
.modal-kiosk-card-check .modal-inner-wrap
{
width:400px !important;
height: 1000px !important;
background-color: rgba(17, 20, 34, 0.9) !important;
background-image: url(https://app.arcadespro.com/Static/Kiosk/NFC_Card_Animation.gif) !important;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 36px rgb(255 0 231 / 75%) !important;
}
.modal-kiosk-card-check .modal-content
{
background-color: transparent;
}
.catalog-product-view .loading-mask
{
width: 600px;
height: 600px;
background-repeat: no-repeat;
background-image: url(https://app.arcadespro.com/Static/Kiosk/please_wait_payment.gif);
background-size: 600px 600px;
background-position: center;
background-color: rgba(17, 20, 34, 0.9) !important;
box-shadow: 0 0 36px rgb(255 0 231 / 75%) !important;
}
.loading-mask
{
display:none;
}
.cms-index-index #home-button-header
{
display:none;
}
.pelecard-payment-index #back-button-header
{
display:none;
}
.pelecard-payment-index #home-button-header
{
display:none;
}
.card-pickup
{
height: 800px;
width: 100%;
align:center;
background-repeat: no-repeat;
background-image: url(https://app.arcadespro.com/Static/Campaigns/Banners/card-pickup.gif);
background-size: 354px 600px;
background-position: center;
}
.balance-wrapper
{
background-color: rgba(17, 20, 34, 0.9);
box-shadow: 0 0 36px rgb(255 0 231 / 75%);
}
#error-panel
{
background-color: rgba(17, 20, 34, 0.9) !important;
box-shadow: 0 0 36px rgb(255 0 231 / 75%) !important;
padding:20px;
}
#error-panel .error-message
{
color: white;
font-size: 300%;
}
Empty* = The field should be empty without any text
3. Open Store -> Configuration -> General -> Web, Change the scope to the storeview of the kiosk, and Change the "CMS Home Page" to Babylon Kiosk Home page
4. Open the Content -> Configuration, Change the Theme of the kiosk storeview to " ArcadesPro Babylon Park"
5. Open the Arcades:Pro -> Kiosk Management
6. Click on Add New Kiosk and set the following settings:
Client ID: 24
Location Admin Description: The kiosk location in the branch
Kiosk Number: The shop number of the pelecard pinpad (According the file - https://docs.google.com/spreadsheets/d/1-Qb23Uq7x3QbTfBbxGxVmiPY4Dl4fw49r5XpEZVCA1Y/edit#gid=0)
Store View: The storeview that you created
Dispenser Port: 3
Timer: 60
7. Open System -> Cache Management and Flush the Magento Cache
8. Open Magento Admin -> Store -> Configuration -> Sale -> Payment methods , Change the scope and set the following settings in pelecard payment method
Enabled: Yes
Terminal Number:
API User
API Password
Automatic Payment Selection: Yes
Postcode: The Postcode of the store (For taxes)