Store finder - iframe

Store finder - iframe

What
This guide shows how to insert the store finder from a webshop into a website using an iframe so that visitors can access the webshop directly and make purchases. An iframe (inline frame) is an HTML element that can be used to embed external websites or content into an existing website.

Where
Own website.


The webshop can be integrated into an existing website if required so that users can use it and go to the webshop to make a purchase.

Here is an example of how the store finder could be styled on the website:





The iframe has two tabs:

Delivery

For delivery, the user must enter an address. There are two possible scenarios:

1. If the address matches the delivery area, the user will be navigated to the item list page with the selected delivery address in the webshop.




2. If the address does not match the delivery area, the user will be redirected to the store list page to select the nearest store for pickup.




Pickup

For pickup, the user must select a pickup time. Once selected, the user will be redirected to the item page on which the pickup option is preselected.





In addition, if activated in the administration area, there are the "Login" and "Register" buttons:

1. If the user is not logged in, clicking on these buttons will redirect them to the webshop, where a login/registration dialog will be displayed.

Registration dialog with "Register now and enjoy!":




Login dialog with "Login":





2. If the user is already logged in, they will be redirected to the profile page.





Integration of the webshop via iframe

We provide the required iframe code for the integration:


<iframe id="storefinder" width="100%" height="505px" src="https://{webshopDomain}/standalone_storefinder" style="border: none;"
    allow="geolocation; popups; popups-to-escape-sandbox; window-management"
    sandbox="allow-same-origin allow-scripts allow-popups allow-modals allow-forms allow-top-navigation allow-top-navigation-by-user-activation"></iframe>


where:
  1. geolocation (geolocalization): enables the iframe to request the user’s location.
  2. popups (popup windows): allows popups not to be blocked by browsers.
  3. popups-to-escape-sandbox (popups outside the sandbox): enables pop-ups to function outside the sandbox, for example, by opening a new window with a different site.
  4. window-management (window management): helps iframe content interact more actively with the browser's windows, including opening, resizing, or closing them.
  5. allow-same-origin (allow same origin): allows the content inside the iframe to access resources from the same origin (domain, protocol, and port) as the parent page.
  6. allow-scripts (allow scripts): allows JavaScript to run inside the iframe.
  7. allow-modals (allow modal windows): allows pop-ups to be opened inside the iframe.
  8. allow-forms (allow forms): allows form submissions to work inside the iframe.
  9. allow-top-navigation (allow navigation to the top level): allows navigation to the parent window/tab. The content inside iframe can change the parent page.
  10. allow-top-navigation-by-user-activation (allow navigation to the top level with user action): the same as "allow-top-navigation", but only if triggered by user’s action.


By default, the iframe has a height of 505px to fit both mobile and desktop screens. However, if you prefer a narrower section for desktop devices, we can provide a custom <style> that should be added to the <head> section of the website.

Ideally, the iframe height can be customized for a better user interface.
​

<style>
    @media screen and (min-width: 904px) {
      #storefinder {
        height: 340px;
      }
    }
  </style>









    • Related Articles

    • Store inventory

      What The store inventory can be used to add and manage items that are borrowed to the employee, e.g. for a longer time period, such as clothing, or for a short time period, such as debit card readers, transport boxes or scanners. Where Admin: Store > ...

    • Deactivate tip/donation for incoming order channels at store level

      What Tip/donation can be deactivated e.g. for the webshop/app per store in the checkout. Where Admin: Store > Global store settings > Other settings > Webshop / app > Allow tips > Yes. Admin: Store > Stores > Edit > Settings > Taxes and deposits > ...

    • Clean up customer data

      There is a possibility to clean the customer database of the system. ​ Tab: In general  The first way to do this is to partially or completely clear the customer data master. This can be found in the Admin --> in the category Customer --> at the ...

    • Loyalty-Clearing

      What Clearing loyalty points allows you to view the points that have been cleared. It is a balance settlement. Where Admin: Incentives > Loyalty-Clearing. The clearing loyalty points can be found under: Admin: Incentives > Loyalty-Clearing. This ...

    • How do I find my UDID from an iOS device (Mac/Win)?

      Here you can find instructions on how to find out the UDID of an iOS device. Windows The UDID cannot be found out directly on the iPhone. You need a computer with iTunes. Connect your iOS device via USB cable to your computer and start iTunes. Click ...