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)