Registrations In Account Area

For logged-in customers, it is possible to show their registered products in the account area or any other suitable location. This requires some knowledge of the shop's theme and the ability to make changes to the theme's HTML.

Here are the steps for adding product registrations to the account area:

1. Go to Shop Admin > Online Store > Themes.

2. Select Edit HTML/CSS from the top right corner.

1. Locate the template where the registration should be added (e.g., customers/account.liquid - This is the same account page that shows order history).

1. Place the following code into the appropriate location. Ensure it does not break the HTML structure. It is recommended to place it after a closing tag.

<div id="mpr-root"></div>
<script type="text/javascript">
window.productReg = {
        // defaultFormSlug: "product-registration",
        // registeredEntriesToShow: ['product-registration'],
        // mode: "normal",
        // openRegisteredEntities: true,
        makeClaimUrlPrefix: "/apps/product-registration",
        customer: {
                id: {{ customer.id | json }},
                email: {{ customer.email | json }},
                address: {{ customer.default_address | json }},
                tags: {{ customer.tags | json }},
         }
}
</script>
<script type="text/javascript" src="https://product-reg.varify.xyz/v2/mpr-embeded-frontend.js"></script>

1. Save the changes and verify them on the frontend.

2. Ensure that the product registration section appears correctly in the account area and that it does not interfere with other elements on the page. If any issues arise, review the HTML structure and the placement of the code snippet to ensure it is correctly integrated.

Note: The above code will display the default form, which is "Product Registration". You can change the default form by navigating to App Settings > General > Default Form.

Alternatively, you can uncomment (i.e., remove the // in the line // defaultFormSlug: 'product-registration' in the above code) and change product-registration to the desired form slug. The form slug can be found by navigating to the form in the Admin area and clicking "View on frontend." This will open a new tab with a URL similar to apps/product-registration?form=product-registration. In this example, product-registration is the form slug. If your form slug is different, replace product-registration with the appropriate slug.

The registeredEntriesToShow variable allows you to specify which forms' registered entries should be displayed. This is useful if you have multiple forms and only want to show entries for a specific form. For example, if you have 10 forms and only want to show registered entries for the "product-registration" form, you can set registeredEntriesToShow to ['product-registration'].

The makeClaimUrlPrefix variable defines the base URL for the form. By default, it is set to /apps/product-registration. If you have changed the app proxy URL in the app configuration, you will need to update this variable to reflect the new URL.

App Modes

In the above code, there is a setting for different modes that control how the app behaves. The available modes are:

• normal - Displays both the form and registered entries. Users need to be logged in and have registered entries to see this.

• form - Displays only the form.

• registered - Displays only the registered entries.

Adjust the mode in the above code for different effects. For example, when in the account area, you might want to use the registered mode to show only the registered entries without the form.