{"id":25633,"date":"2023-10-04T09:58:51","date_gmt":"2023-10-04T07:58:51","guid":{"rendered":"https:\/\/endereco.de\/?post_type=docs&p=25633"},"modified":"2024-01-26T19:07:37","modified_gmt":"2024-01-26T17:07:37","password":"","slug":"third-party-plugin-integration-toolkit","status":"publish","type":"docs","link":"https:\/\/www.endereco.de\/en\/dokumentation\/third-party-plugin-integration-toolkit\/","title":{"rendered":"Shopware 6 - Third Party Plugin Integration Toolkit"},"content":{"rendered":"

This feature is available from Shopware 6 Modules<\/a> Release Version 1.4.0<\/a><\/p>\n\n\n\n

Rationale<\/h2>\n\n\n\n

Our plugin automatically integrates itself onto the default pages that contain relevant data. However, there may be instances where a form developed by a third party doesn't utilize the default templates. As a result, the plugin wouldn't recognize their existence. To address this issue and facilitate the use of the plugin's features on these pages, we've introduced the concept of a service marker.<\/p>\n\n\n\n

A service marker is a specific, invisible HTML element that can be inserted on any page. It carries the necessary information to initiate Endereco services correctly and to bind them to the corresponding input fields.<\/p>\n\n\n\n

In addition to the service marker, we also provide a Shopware 6 service component that offers a ready-to-use implementation of \"doAccounting\". This component is crucial for session-based accounting of Endereco API usage.<\/p>\n\n\n\n

There's also a setting that allows you to specify which controllers the JS-SDK (JavaScript Bundle) should load. This feature enables third-party plugin developers to whitelist their implementation, secure the JS-SDK, and then use the service markers to connect Endereco services with the input fields.<\/p>\n\n\n\n

Lastly, the developers can use the \"doAccounting\" function from the Shopware 6 service to finalize the implementation. This step ensures compatibility with the Endereco API accounting system, tying everything together seamlessly. This comprehensive approach empowers developers to integrate our plugin smoothly, regardless of their chosen form templates.<\/p>\n\n\n\n

How it works<\/h2>\n\n\n\n

The toolkit comprises three tools:<\/p>\n\n\n\n

    \n
  1. Data Marker<\/li>\n\n\n\n
  2. EnderecoService (Shopware 6 Service)<\/li>\n\n\n\n
  3. JS-SDK Bundle (and the config script in the header area of the page)<\/li>\n<\/ol>\n\n\n\n

    To use the Data Marker, you need to have the capability to modify the template files of your extension. The JS-SDK Bundle is made available through the endereco.min.js file. This file is loaded on every page, provided that the page controller is whitelisted. However, it will be loaded on every page if the whitelist is deactivated in the plugin settings. By using these tools, it's possible to connect a form to one of the plugin services and see tangible results.<\/p>\n\n\n\n

    It's crucial to implement proper session closing. To assist with this, the plugin offers a service object that can be integrated via dependency injection. This service object processes $_POST data, identifies closable session IDs, and sends the so-called \u201edoAccounting\u201c to the Endereco API. The \u201cdoAccounting\u201d process is a mechanism of the session-based billing system, which is standard for Shopware 6 plugins.<\/p>\n\n\n\n

    Whitelisting the controller<\/h3>\n\n\n\n

    The first step is to ensure that the JS-SDK bundle loads on the relevant page. To achieve this, we've developed a specific setting that lets you define the pages on which the JS-SDK should load, aside from the default ones.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The result of this setting, if done correctly, is that \"endereco.min.js\" is loaded on the relevant page, and a bunch of configuration and utility JavaScript is added to the header of the page.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"\/<\/figure>\n\n\n\n

    Adding a data marker<\/h3>\n\n\n\n

    After the endereco.min.js<\/code> is loaded and executed, it first loads the configuration and then initiates a scanner. This scanner scans the page for so-called Data Markers. These should be placed within the relevant form and contain information about which service should be connected to which input fields, and possibly some additional configuration information.<\/p>\n\n\n\n

    The next step involves connecting services from the JS-SDK with the corresponding input fields in the form. For this, you should utilize the Data Marker. Here's an example:Finally, once the data has been verified and is ready to be persisted, a \u201edoAccounting\u201c request should be sent to the Endereco API. This action notifies the API that certain groups of requests, specifically the sessions, are now considered closed and, as a result, billable.<\/p>\n\n\n\n

    For instance, we connect the default Shopware address on the registration page to the service using this data marker:<\/p>\n\n\n\n

    <input\n    type=\"hidden\"\n    name=\"endereco_data_marker\" value=\"ams\"\n    data-container-selector=\"form\"\n    data-container-type=\"form\"\n    data-form-handle-ajax-submit=\"true\"\n    data-used-prefix=\"{{ prefix }}\"\n    data-has-object=\"no\"\n    data-name=\"\"\n    data-type=\"\"\n    data-country-code-selector=\"[name='{{ prefix }}[countryId]']\"\n    data-subdivision-code-selector=\"[name='{{ prefix }}[countryStateId]']\"\n    data-postal-code-selector=\"[name='{{ prefix }}[zipcode]']\"\n    data-locality-selector=\"[name='{{ prefix }}[city]']\"\n    data-street-full-selector=\"[name='{{ prefix }}[street]']\"\n    data-ams-status-selector=\"[name='{{ prefix }}[amsStatus]']\"\n    data-ams-timestamp-selector=\"[name='{{ prefix }}[amsTimestamp]']\"\n    data-ams-predictions-selector=\"[name='{{ prefix }}[amsPredictions]']\"\n    data-street-selector=\"[name='{{ prefix }}[enderecoStreet]']\"\n    data-house-number-selector=\"[name='{{ prefix }}[enderecoHousenumber]']\"\n    data-address-type=\"{{ addressType }}\"\n><\/code><\/pre>\n\n\n\n
    Closing sessions on submit<\/h3>\n\n\n\n
    By default, the Shopware 6 plugin implements session-based billing. This means that Endereco is not counting every individual request, but rather groups of requests, or in other words, a session. A session pertains to a logical unity of data. For instance, there should be a session for the billing address, another session for the shipping address (since it's a separate address, even if the content is the same), a session for the email address, another session for the phone number, and so forth. A session can encompass requests from different services. For instance, when entering an address, autocomplete requests usually come first, followed by an address check request.<\/p>\n\n\n\n
    Once the user sends the data to the server, the session should be closed. To assist with this, Endereco provides a service object, EnderecoService<\/code>that can be integrated using Dependency Injection.<\/p>\n\n\n\n
    \/\/service.xml\n...\n\n...<\/code><\/pre>\n\n\n\n
    The namespace might contain \"Shopware6Client\" or \"Shopware6ClientStore\", depending where the plugin comes from.<\/p>\n\n\n\n
    This service offers several methods that can be useful.<\/p>\n\n\n\n
    Let's say the user has submitted the form to the plugin, and the submission is directed to a specific controller.<\/p>\n\n\n\n
    The logic below should be executed prior to any server-side validation that might be in place:<\/p>\n\n\n\n
    Find accountable session IDs:<\/strong><\/p>\n\n\n\n
    \/\/ Assuming we have a POST request\n$accountableSessionIds = $this->enderecoService->findAccountableSessionIds($_POST);<\/code><\/pre>\n\n\n\n
    Send doAccounting for each session.<\/strong> Both context<\/code> and salesChannelId<\/code> need to be provided:<\/p>\n\n\n\n
    \/\/ Assuming we have a POST request<\/em> $this->enderecoService->sendDoAccountings($accountableSessionIds, $context, $salesChannelId);<\/code><\/p>\n\n\n\n
    That's it.<\/p>\n\n\n\n
    Help with the integration<\/h2>\n\n\n\n
    Endereco is eager to assist with the integration. If you encounter any issues or have questions, please feel free to contact us at support@endereco.de<\/a>.<\/p>\n\n\n\n
    Additionally, if you have suggestions on how to simplify or enhance the plugin's integration functionality, we welcome your input and may implement these features in a timely manner.<\/p>","protected":false},"excerpt":{"rendered":"
    This feature is available from Shopware 6 Module Release Version 1.4.0 Rationale Our plugin automatically integrates itself onto the default pages that contain relevant data. However, there may be instances where a form developed by a third party doesn’t utilize the default templates. As a result, the plugin wouldn’t recognize their existence. To address this […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"doc_category":[120],"doc_tag":[],"class_list":["post-25633","docs","type-docs","status-publish","hentry","doc_category-problem-und-loesung"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t