Plugin Documentation: „Regional Prices for Customers by Postal Code“
Please note the following:
The plugin checks if at least
1. A rule has been created and either
2. In the advanced prices of the product, or
3. In the shipping settings, or
4. In the payment settings.
If this is the case, the link to open the modal box and regional prices will be displayed on the product page.
Please note that this feature must either be enabled individually for each product or can be set globally in the plugin configuration.
Description of the extension "Regional Prices for Customers by Postal Code (Rule Builder Extension)"
Our new Rule Builder extension allows for a meaningful adjustment of the postal code query to optimize the user experience. With this feature, the prices of products can optionally only be displayed after the delivery area has been entered in the form of a postal code. This postal code rule already works without customer login to facilitate the ordering process for all users.
1. Activate Plugin / Sales Channel
Activate your sales channel in the plugin. If you want to use the plugin in another sales channel, you can select your created sales channels with the HTML Storefront via the "Sales Channel" menu in the plugin card.
2. Link to open the Modal Box in the Header
For example, integrate the postal code query via link and icon above the shop header on the left, center, or right. You can set the background of the postal code query to span the full screen width of the shop or the container width of the shop. The link can be set independently to the container width. Limit the background color to the link size and determine if the link should have a typical underline. With the spacing settings, you can define custom spacing above, below, and on the sides, both right and left.
Display Link Above the Header
With this setting, the link for the postal code query is placed above the Shopware header.
Full Width Background
Set the background of the link above the header to full width.
Limit Link to Container Width
Limit the link to the container width of the shop. The standard in Shopware is 1400px.
Limit Background Color to Link Size
The set background color will be limited to the size of the link, similar to a button. This draws more attention/focus to the link.
Show Link Underline
Add a typical underline under the link to make it more prominent for the customer.
Top Margin
Example: 15
Use a numeric value without the PX unit to set the top margin.
Padding Left and Right
Example: 20
Use a numeric value without the PX unit to set the padding for the left and right sides.
Padding Top and Bottom
Example: 10
Use a numeric value without the PX unit to set the padding for the top and bottom.
3. Text Blocks
Using the Shopware text blocks in the plugin configuration or directly via the text blocks, you can customize the text content of the modal box and the links to open the modal box according to your needs. This way, you can decide what should appear in your postal code query. The text blocks also allow translations for the language sales channels.
Open ModalBox via Link
Example: Click to open the modal box for entering the postal code
This text content will only be displayed when the customer hovers over the link.
Open Modal Text without Postal Code
Example: Select your delivery area
This text content will be displayed in the link as long as the customer has not entered a postal code.
Open Modal Text with Postal Code
Example: Your delivery area:
This text content will be displayed in the link when the customer has entered their postal code.
Close ModalBox "X"
Example: Close Modal Box
The Modal Box will be closed by clicking on the "X". Determine what should be placed there to close the Modal Box instead of the "X".
Title
Example: Choose Your Location
Select your own content for the title in the Modal Box here.
Inner Text
Example: With your Postal Code, we determine the nearest logistics center and offer you the best possible price in your region.
Placeholder Input Field
Example: Please enter postal code
Customize the placeholder text for the postal code input field here.
Button Text
Example: Confirm
Customize the text content of the submit button in the modal box here.
Display Regional Prices
Example: Display Regional Prices
This text content will be displayed under the following conditions:
- Set Rule Builder postal code rule for advanced prices on the product
- Active selection on the product (additional field)
Or simply log in
Example: Or simply log in
Adjust the text content above the login button in the modal box here.
Notice when the customer is logged in with a different postal code
Example: Notice
Title of the modal box when the customer logs in and has a different postal code saved in their delivery address compared to the postal code query.
Text when the customer is logged in with a different postal code
Example: We have compared your postal code with your delivery address and will now adjust it
Text content in the modal box that can be individually customized by you.
Address Text when the customer is logged in with a different postal code
Example: Or go to the address management
Text content in the modal box that can be individually customized by you.
4. Colors
Give the postal code modal box your own color selection, tailored to match your shop's color scheme.
Modal Box Background Color
Example: #ffe6bf
Choose your preferred color to customize the background of the modal box.
Modal Box Close
Example: #888888
Choose your preferred color to customize the close icon of the modal box.
Modal Box Close, on Hover
Example: #d73838
Choose your preferred color to customize the close icon of the modal box for the hover state.
Link Background Color
Example: #fddcab
Choose your desired color to adjust the background color of the link.
Link Text Color
Example: #333333
Choose your desired color to adjust the text color of the link.
Link Text Color on Hover
Example: #0a2aa6
Choose your preferred color to adjust the text color of the link when hovering over it.
Modal Box Title Color
Example: #333333
Choose your preferred color to adjust the title color of the Modal Box.
Modal Box Text Color
Example: #333333
Choose your preferred color to adjust the text color inside the Modal Box.
Modal Box Flag Background Color
Example: #eeeeee
Choose your desired color for the background of the flag icon.
Modal Box Input Field Background Color
Example: #ffffff
Choose your desired color to adjust the background color of the input field.
Modal Box Input Field Border Color
Example: #eeeeee
Choose your desired color to adjust the border color of the input field in the modal box.
Modal Box Button Background Color
Example: #0202ff
Choose your desired color to adjust the background color of the button in the modal box.
Modal Box Button Text Color
Example: #ffffff
Choose your desired color to adjust the text color of the button in the modal box.
Modal Box Button Background Color on Hover
Example: #ff0202
Choose your desired color to adjust the background color of the button in the modal box when hovered.
Modal Box Button Text Color on Hover
Example: #ffffff
Choose your desired color to adjust the text color of the button in the modal box when hovered.
Modal Box Icon Color on Hover
Example: #333333
Choose your desired color to adjust the icon color of the modal box when hovered.
5. Sizes
Make a custom selection for desired size specifications such as icon size, font size, and modal box width.
Modalbox Maximum Width
Example: 500
Determine the value for how wide the modal box can be displayed at maximum.
We recommend keeping the value at 500.
Modalbox Close Font Size
Example: 24
Select the font size for the close icon.
Link Font Size
Example: 18
Select the font size for the link.
Modal Box Title Font Size
Example: 28
Select the font size for the title in the modal box.
Modal Box Text Font Size, in px
Example: 14
Select the font size for the text content in the modal box.
Modal Box Position Icon Size, in px
Example: 14
Select the icon size for the position icon, which appears to the right of the link text "Select your delivery area" when the customer has not entered a postal code yet.
6. Positions
Determine the position for the postal code query link, the heading in both modal boxes, and the address in the hint modal box.
Position of the Link
(Options: left/center/right)
Position of the Heading
(Options: left/center/right)
Position of the Address When the Postal Code Has Been Changed After Logging In
7. Reset Modalbox
The customer can reset their postal code entry using the Reset Icon in the Modal Box.
Enable Reset Icon in Modalbox
Options: Show or Hide
8. Animation
Set a duration for the link's appearance above the header or in the experience world.
Fade-in Time for the Header Link, in ms
Example: 1500
Here, determine when the link for the postal code query via the modal box should appear in the frontend. The value is always given in milliseconds.
1500 milliseconds = 1.5 seconds
Fade-in Time for the Shopping World Link, in ms
Example: 1500
Here, determine when the link for the postal code query via the modal box should appear in the shopping worlds in the frontend. The value is always given in milliseconds.
1500 milliseconds = 1.5 seconds
9. Icons
Set a top margin above the position icon, which is displayed to the right of the link text "Choose your delivery area" before the customer has entered a postal code.
10. Predefined Positions for Postal Code Query
Set a top margin above the position icon, which is displayed to the right of the link text "Choose your delivery area" before the customer has entered a postal code.
11. Add Rule to Each Product
If desired, you can activate the display of regional prices for all products here. However, you can also enable it for only certain products by leaving the switch off and activating this function for each individual item.
12. Postal Code Input Settings
In most countries, there are different postal code formats. To ensure the plugin can implement this correctly, please enter the required settings in the configuration of your sales channel.