02 Prepare Data - ecellar/remote-widgets GitHub Wiki
Setting up a Designer Widgets site requires a coordinated effort between you, your client and the eCellar support team.
Your client will have access to the eCellar ACP (Admin Control Panel), where they can manage various datapoints and images that will be used in the Designer Widgets site. Some clients may opt to give you limited access to some part of their ACP.
The following areas of setup are explained below:
- Web Store Settings
- Products
- Site Map
- Campaigns
- Club
- Reservations
- Allocation
You will also need to provide some URLs to the eCellar support team both during your development cycle and before you go live with your site. Please see the 03 Site Settings page for more information.
The following is a list of the available settings with descriptions about their use:
New Customer Type: used for consumers that are not currently logged in and for any accounts created without joining the club.
New Customer Source: used for any accounts created without joining the club.
New Customer Allocation Tier: used for all newly created accounts.
Allow Promo Codes: allows consumer to enter coupon code during checkout.
Allow Gift Card Payments: allows consumer to pay with gift card for web and allocation orders during checkout. Also allows consumer to check balance in My Account.
Allow Delayed Ship Option: allows consumer to pick future ship date during checkout.
Allow International Shipping: allows international (not US/Canada) orders to be placed without tax/shipping calculated.
Allow Will Call Date: allows consumer to specify a pickup date during checkout.
Enable Product Auto Suggest: enables product suggestion in the added-to-cart side kick.
Enable Card Updater: enables a workflow in My Account for the consumer to update the card for any declined orders.
See the 99 Updates#express-checkout-sidekick-and-more page for information about the sidekick.
Products are setup using the Product Editor in the ACP. The Product Editor has a tab-based design. Each tab contains a variety of settings that are used throughout the eCellar system.
The information below focuses on specific settings used by Designer Widgets.
On the General tab, there is a checkbox setting titled:
Display on Web? [ X ]
When checked, the product becomes eligible to display in your site as long as all other required data points are in place (see below).
These settings on the Web Info tab come into play in the Designer Widgets:
URL Slug: used in Designer Widget URLS, required.
CSS Class: may be used for product-specific styling, optional.
Feature Text: displayed in product detail and product list views, optional.
Short Description: displayed in product lists, recommended.
Long Description: displayed in the product detail view, recommended.
Technical Notes: displayed in the product detail view, optional.
Secondary Notes: displayed in the product detail view, optional.
Reviews: displayed in the product detail view, optional.
Three different image sizes are made available in the Designer Widgets. They are:
Header Image: typically a large image, displayed in the product detail view.
Image 1: typically a small image, displayed in product lists.
Thumbnail Image: typically smaller than Image 1, displayed in cart views and the cart sidekick (for the product that was just added and for suggested products).
You must decide what size each image should be, based on the needs of your site.
IMPORTANT: If your client already has a live “legacy” site hosted by us, you should not modify images that are being used by that site. Instead, you should create a few “dummy” products for use during development.
Note: the Site Map Review page in the ACP has an indicator for each image, showing which are present for each product.
Three quantity settings are used to populate the dropdown list that accompanies each “Add to Cart” button in the Designer Widgets site:
Min Quantity: the lowest quantity (greater than 0) that a site visitor may select.
Max Quantity: the highest quantity that a site visitor may select.
Quantity Increment: the numerical difference between each option.
Example A:
Min Quantity = 1, Max Quantity = 6, Quantity Increment@ = 1
Results in these options: 1, 2, 3, 4, 5, 6
Example B:
Min Quantity = 2, Max Quantity = 12, Quantity Increment = 2
Results in these options: 2, 4, 6, 8, 10, 12
1. The Designer Widgets automatically include a first option of “0”.
2. If a product is in the cart, it’s max is reduced by the quantity in the cart.
3. We do not recommend using an unnecessarily large Max Quantity.
These settings allow a client to specify, on a per customer type basis, which customers can see a product, which can buy it, and which will see a message instead of the option to buy.
Each customer type has it’s own set of “Can Buy” options for the product. Each option has a related message in the Designer Widgets. The options and their default messages are:
Available: (see below for explanation)
Restricted – Wine Club: “This item is for club members”
Restricted – Allocated: “This item is allocated”
Sold Out: “This item is sold out”
Discontinued: “This item has been discontinued”
Back-ordered: “This item is back-ordered”
Pre-ordered: “This item is pre-ordered”
Call: “Currently unavailable: please call”
If “Available” is selected, the Designer Widgets will show the product’s “Add to Cart” button and accompanying quantity dropdown. If any other option is selected, the corresponding message is shown instead.
The messages can be customized using 11 Custom Messages. Consumers who are not logged in will be assumed to be the “New Customer Type” assigned in the Administrative Control Panel Web Store Settings. This is the customer type assigned when a consumer creates an account without joining the a club.
1. If you are using a customer account during development, you should make sure that the product availability for your account’s customer type is set as desired.
2. When a site visitor is not logged in, the Designer Widgets will use the product availability for the customer type specified in your client’s Company > General Info > Web Store Settings > New Customer Type setting in the ACP.
The Site Map Editor provides a way to establish a hierarchy of products for display in your site. Products must be in the Site Map to appear in your site.
At minimum, a Site Map must have at least one top-level category, but it may have more. Categories can contain Products OR other categories (aka “sub categories”).
For example:
- Current Releases
- Product 1
- Product 2
- Product 3
- Red Wines
- Cabernet Sauvignon
- Product 1 (a product may be placed in more than one category)
- Product 4
- Product 5
- Pinot Noir
- Product 6
- Product 7
- Cabernet Sauvignon
Each category must have a slug, used by the SPA for view loading and navigation.
For example:
a. If the “Current Releases” (category) slug is “current-releases”…
b. and your SPA’s pathRoot is ‘/store/’…
c. and you want to view the products in the Current Releases category…
d. using the products view…
e. you should see them at:
https://<www.yoursite.com>/store/?view=products&slug=current-releasesIf you try this and are not seeing your expected products, double-check the required settings for each of the products that you are not seeing.
Note: if you are using initLocationPath: true and URL Rewrites on your site, the URL would be something like:
https://<www.yoursite.com>/store/products/current-releases/You may be interested in:
01 Getting Started
06 Setting Up Your Store
If your client is using the eCellar Campaign module, they may have hardcoded URLs in their campaign templates and/or campaign email bodies that will no longer work after their Designer Widgets site is launched.
Some things to check for:
1. If the client’s site was running at a subdomain, like:
https://shop.<clientdomain>.comThe templates/bodies should be checked for hardcoded links that will need to be changed to the domain being used for the Designer Widgets site.
2. If the templates/bodies contain hardcoded urls for images or other assets hosted by eCellar, they may need to be updated. The Designer Widget system makes all eCellar-hosted assets available via a virtual directory in our asset hosting system. The virtual directory name typically matches the domain name for the client.
For example, if your client’s domain is www.clientdomain.com, then the virtual directory for their assets will be located at:
https://client-assets.ecellar1.com/clientdomain/In general, we recommend that most assets be hosted via the client’s hosting system, and linked to accordingly.
If your client is using the eCellar Wine Clubs module, the Club Tier editor can be used to setup club tiers for use by Designer Widgets.
These settings are used:
Public Tier Name: shown to site visitors.
Display Order: position for the tier when viewed in lists.
Description: shown to site visitors, HTML is allowed.
Public Signups: when checked the tier is available in the joinclub workflow.
My Account Signups: when checked the tier is available in My Account.
Custom Tier: when checked additional settings are available.
In addition to the above settings, there are two optional settings that can be used to specify the customer type and customer source new customers will be given when they sign up using the joinclub workflow:
New Customer Type: dropdown list of customer types
New Customer Source: dropdown lsit of customer sources
If either of the above are set, the Designer Widgets will use them instead of the same-named settings from the client’s Company > General Info > Web Store Settings.
1. You may want to take advantage of the fact that the club tier Description accepts HTML. You can use it to create detailed descriptions, include images hosted by your client, etc.
2. The joinclub workflow provides an option to bypass the first two steps of the workflow (overview and tier list), jumping straight to step 3: the first form in the workflow. For more information, see the Deep Links section in the 01 Getting Started page.
If your client is using the eCellar Reservations module, they can use the Booking Agent editor to setup reservation types for use by the Designer Widgets.
Each Booking Agent is comprised of high-level data that is seen by site visitors and lower-level data that is used by timeslot search functionality.
Fields that are visible to site visitors are:
Public Name: the name of the reservation type.
Location: the physical address for the visit.
Slug: used in SPA URLs.
Description: full description, HTML is allowed.
Min Party Size: minimum number of guests required for a reservation.
Max Party Size: maximum number of guests allowed for a reservation.
Duration: length of the reservation, in minutes.
These SPA views are used for reservations:
reservationlist: list of available reservation types
reservationsearch: form to search for available reservation types
reservationtimes: reservation detail view with availability search
The reservationtimes view requires a slug, which allows you to link directly to a specific reservation type.
For example:
https://<www.yoursite.com>/store/?view=reservationtimes&slug=bar-tastingIf you are using initLocationPath: true and URL Rewrites on your site, the URL would be something like:
https://<www.yoursite.com>/store/reservationtimes/bar-tasting/1. The ACP has features for sending “magic” and “deep” links to customers via the eCellar Campaigns module. If your client will be sending reservation-related links, you should make sure that your reservationtimes view looks the way you want it to.
2. You will probably need to work with your client on the Description for each reservation type: the ACP UI allows HTML and is a freeform textarea.
If your client is using the eCellar Allocation module, they can use the ACP to setup Allocation Tiers and Allocation Events for use by the Designer Widgets.
An Allocation Tier is mainly just a name, like:
Tier 1
Tier 2
Tier 3
etc…
Allocation Tiers are assigned to customers. For example:
Bob Smith > Tier 1
Sally Jones > Tier 2
Note: Allocation Tier names are not displayed in the Designer Widgets.
An Allocation Event is comprised of two fundamental things:
1. Event-specific information like event name, start/end date, allowed ship dates, description, etc.
2. Tier-specific product allocations. For example, Tier 1 may be able to purchase up to 2 each of 3 specific Cabernet Sauvignons and Tier 2 may be able to purchase up to 6 each of the same Cabernet’s, plus 2 additional wines.
In combination, allocation tiers and events work together to determine:
1. Whether or not an allocation is currently available to a customer.
2. Which allocated products the customer may purchase (or request).
When an allocation is available to a customer, their My Account dashboard will include a link to view their allocation. The link will load the SPA’s allocation view.
The allocation view includes functionality that is controlled by these optional items in the Allocation Event’s settings:
Description: full description, HTML is allowed.
Minimum Order Quantity: if set, customer is required to order at least this amount.
Buying Preset: determines whether allocated max quantities are auto-selected when the view loads and whether a button to select max quantities is shown.
In addition, each available product is listed, along with corresponding controls for selecting quantity to buy and, optionally, quantity to request. Messages are displayed to show customers how many of each product they may buy or request and, if applicable, have already bought/requested in prior orders.
The allocation view displays the same product image that is typically used in product list views: the Image 1 image (see Product setup above).
IMPORTANT: Your client should ensure that every product they include in an Allocation Event has an Image 1 uploaded.
You may also be interested in: