magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Shopping Suite


All you need to start selling!
The most lightweight solution to have a mini yet versatile and powerful e-shop in your web.
Transform your website into a sales point in just a few steps and within minutes.
No MySQL or PHP required.


HTML 4.01 Transitional
W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version 1.4.1.2

:: animation module :: (suite version)

- Improved behavior with cart and add-to-cart modules handled by external access (via 'addtocart()' functions).
- Minor code optimizations.

:: glass module :: (suite version)

- Optional fade-out effect of the element when the magnifying glass is activated.
- Custom color and intensity for the fade-out effect.
- Fixed an RWD instability on resize.

* New in version 1.4.1.1

- New extension (accessories): [rz] Shopping (date-picker); this extension allows to introduce formatted dates in the
  free input defined in product options.

* New in version 1.4.1

- New extension (accessories): [rz] Shopping (filter); this extension allows to search/filter products from the cart module.

:: check-out module ::

- Optionally, the buyer must confirm that agrees to the 'terms and conditions' before proceeding with the payment.
- Optional highly customizable button that links to the 'terms and conditions' information page.
- Added custom label, button and error message for the 'agree' feature.
- Persistent confirmation status across pages.

:: clean-up module ::

- Updated core to support the new features.

* New in version 1.4

:: all modules ::

- Can be placed within layout grids for floating schemes.

:: cart module ::

- Removed fast/onready startup modes (not needed anymore, visuals are done [almost] "instantly").
- Improved normal/expanded 'column', 'line' and 'table' alignment modes for options/charges.
- Unavailable products cannot be added externally - custom message added (please read the "Top featured items" section).
- Improved options/charges alignment modes.
- Improved dividers and cell-spacing.
- Improved images preloading, less resources used.
- Workaround for a pixel gap in the coupon button on Firefox.

:: check-out module ::

- Faster composition/rendering.
- Optimized space used by information elements.

:: monitor module ::

- Improved and extended alignments for the images and the numbers.
- Improved images preloading, less resources used.
- Multi-instance (for advanced designs).

:: add to cart module ::

- Added margin and alignment support (useful for floating schemes).

:: on-delivery payment ::

- An error message is displayed and the session is halted in case of session path is not writable.
- The javascript-based core has been moved to an external library file for faster loading times across pages.
- Sample project updated.

:: glass module :: (suite version)

- Fixed a Firefox 52+ "onmouseover" unstable behavior.
- Fixed an unstable behavior using images within table-cells with borders.

:: footer module :: (suite version)

- The javascript-based core has been moved to an external library file for faster loading times across pages.

* New in version 1.3.3

:: check-out module ::

- Coupon mode: can be 'one-time' or 'reusable' (different coupons can have their own mode -- this feature applies
  to PayPal based payments).

:: monitor module ::

- Improved customization for the text on each status (background/color/margin/radius/etc).

:: footer module :: (suite version)

- Added support for multiple external objects scan to improve the footer relocation.
- Minor code tweaks.

* New in version 1.3.2

:: cart module ::
:: add to cart module ::

- Optionally, each item can have a mini-image to be shown in the checkout module.

:: check-out module ::

- Added a maximum allowed amount per order.
- Coupons can optionally override the minimum and/or maximum amount of the order to be accepted.
- Action messages have been expanded for the new features.
- Customizable mini-images for the items ordered.

* New in version 1.3.1

- Improved cart, add to cart and animation modules to handle item-specific images used for the animation effect.

:: check-out module ::

- Added optional tax handling.
- Fixed sporadic minor alignment issues.
- Coupons and handling costs can temporarily be disabled (to avoid delete and re-enter them later,
  mainly for test/promotional purposes).

* New in version 1.3

:: all modules ::

- Improved HTML4.01/HTML5 W3C code conformation.

:: check-out module ::

- Optional button for the coupon entry to apply the discount.
- Improved crossbrowser/backwards alignment and formatting.

:: cart module ::

- Improved product options/variations handling; optional/required entries now applies to the standard/free input, multiple
  selection and simple selection.
- Items with no price are not allowed (the same as in PayPal).
- New default/generic message when ordering items resulting in 'no price' due to missing data or invalid variations.
- Support for smooth background colors transitions.
- Optional rounded corners to products images.
- Improved visible/hidden multi-instances handling (useful for 'tabbed/categorized' instances).
- Fixed some missing checkboxes when 'on ready' startup mode is selected.
- Optional magnifying glass support for products images (instead of the standard tooltips/hovering, when selected).

:: add to cart module ::

- Items with no price are not allowed (the same as in PayPal).

- New extension (accessories): [rz] Shopping (glass); the library for a magnifying glass effect in the products images
  (can also be used for standard/standalone image objects, usually when using images with the add-to-cart module).

* New in version 1.2.1

:: check-out module ::

- Configurable discount coupons.
- Global shipping and handling can also be zero as an option.

:: cart module ::
:: add to cart module ::

- An item can be added with a function call from any object that accepts events (usually "onclick").
  Useful in case you have top featured items to sell that are shown in a special gallery or the like.
  (Please read the "Top featured items" section.)

* New in version 1.2.0.1

:: cart module ::
:: add to cart module ::

- Multipurpose validation "hook" when clicking on the add-to-cart icon (please read the "Validation hook" section).
- Improved duplicated/reordered items handling.
- Improved manually entered item options handling.

* New in version 1.2

:: cart module ::

- Quantity range handling per item (for reorderable products).

:: add to cart module ::

- Quantity range handling per item (for reorderable products).
- Extended system messages.

:: check-out module ::

- Quantity range handling per ordered item (applies to reorderable products).
- Extended system messages.

:: footer module :: (suite version)

- Experimental mode introduced for a better interaction with [rz] Advertisement.

* New in version 1.1.0.3

:: check-out module ::

- Besides the per-item shipping and handling charges, now also supports customizable global shipping and handling
  charges with configurable discounts.
- Supports onupdate event; it is triggered every time an item is added, removed, changed or the cart is emptied.
- The instance can retrieve the total values of the items ordered, shipping and handling, discounts and grand total; the
  format is MyInstance.total_item, MyInstance.total_shipping, MyInstance.total_discount and MyInstance.total_order
  (replace MyInstance with the actual checkout instance ID).

:: cart module ::

- Specific items can be excluded from the global shipping and handling charges.

:: add to cart module ::

- The specified item in this module can be excluded from the global shipping and handling charges.

* New in version 1.1.0.2

- New extension (accessories): [rz] Shopping (to-cart animation); allows to setup animations for the add-to-cart actions
  with breakpoints support (see the "Adding animation" section of this document).
- Improved backward and cross-browser compatibility in footer module.
- Improved results messages when a product is ordered.
- Fixed an empty result message when a same product of a same group is re-ordered and filtered messages option is enabled.
- Fixed variable prices update when a same product of a same group is re-ordered.

* New in version 1.1.0.1

:: check-out module ::

- Optionally, required items can be defined so as to proceed with the payment.
- Required items can be standalone products or must be part of other ordered products.
- Up to three "and" series and each one supports unlimited "or" products.

:: footer module ::

- Multi-instance.
- Handles different objects (with their specific positions).
- Multiple breakpoints support for advanced objects relocation on advanced schemes.
- Minor fixes.

:: cart module ::

- Minor fix on startup using breakpoints and "on ready" modes.

* New in version 1.1

- Variable prices for products in [rz] Shopping and [rz] Shopping (to-cart) modules.
- Optional timeout in action messages to automatically close the alert box; this feature requires [rz] Alert 1.2 or later.
- Improved [rz] Shopping (to-cart) module; you do not need to remove an instance from the page, you can temporarily hide it
  just changing its satus: 'display' or 'hide'. This is useful when you do not want to retype all the item specification again later.
- Improved [rz] Shopping (to-cart-lib) startup.
- New extension (accessories): [rz] Shopping (footer); allows to put a footer (or any other content below the shop)
  with advanced alignments features (see the "Adding a footer" section of this document).

* New in version 1.0.3.3

- Fixed an introduced silent focus bug in [rz] Shopping (b-monitor) module with no events.
- Added optional image-size definition to allow a better implementation in Retina-based devices.
- Improved payments panel alignment.

* New in version 1.0.3.2

- Grouped products feature allows to include only one product per group excluding any other ordered product of
  the same group.
- Improved startup for long carts ("fast" and "on ready" modes, useful for non-cached pages with a considerable
  amount of products).

* New in version 1.0.3.1

- Improved actions/buttons for iOS-based touch devices.
- Fixed the focus handling in [rz] Shopping (b-monitor) module.
- Fixed a sporadic interference between [rz] Shopping (checkout) and [rz] Shopping (b-monitor) modules.
- The empty cart button is not shown when the ordered products list is empty.
- Improved HTML generation in [rz] Shopping extension.
- Improved image handling in actions icons and other minor code tweaks.

* New in version 1.0.3

- Added support for "Pay-on-delivery" mode to the check-out process.
- Customizable payment panel in the check-out extension (it is shown when more than one payment is accepted).
- Removed not needed files in the clean-up module.
- New extension (essentials): [rz] Shopping (pod) to be used with the check-out custom form.
- Full working sample wb project with custom check-out form included.

* New in version 1.0.2

- Added RWD support.
- New extension (essentials): [rz] Shopping (cleanup); see details below, "After the checkout" section.
- Improved code, 10% to 15% smaller for faster page loads and less bandwidth.
- Solved an unstable bug in the Shopping Cart module in FireFox.
- Fixed a minor unstable issue releasing the "remove from cart" icon.

:: Checkout module ::

- Now global discounts can be a rate or a flat amount: for flat amounts, just enter the number; for percentage discounts, add
  a trailing % to the number. Attention! If you are upgrading from a previous version, you must add now a trailing percentage
  symbol to the discount rate so as it can behave the same.

* NEW in version 1.0.1


:: Shopping cart module ::

New:

- Multiple selection in products options.
- Multiple selection in variable charges/prices options.
- Optionally, product option selection required.
- Maximum options selected in a product; automatic options-lock when the selected options reach the maximum allowed
  per product.
- Maximum charges/prices options selected in a product; automatic options-lock when the selected charges/prices reach
  the maximum allowed per product.


Fixed:

- Sporadic unstable behavior in optional charges list #3.

Improved:

- Products options/charges margins.
- Products options/charges scheme (table/line - normal/expanded).


:: Checkout module ::

Improved:

- Checkout options/charges details.

:: add to cart module ::

New:

- Product options can point to an input box, a combobox, multiple checkboxes or radio buttons (grouped by
  name - use value property for the description).
- Product charges can point to a combobox, multiple checkboxes or radio buttons (grouped by name - use
  value property, comma separated, for the description and the amount).
- Product options can be optional or required and limited by a maximum selected options (checkboxes can be
  combined with radio buttons within the same group).
- Product charges can be optional or limited by a maximum selected options (checkboxes can be combined with
  radio buttons within the same group)


  (Please read: "Individual items")

:: All modules ::

Improved:

- Browser cookies test/delete.


How to use?

* For a list of products:

1. Drag and drop the [rz] Shopping extension.
2. Open its properties and fill in the basic data such as the product name and price.
3. Add your own icon images that represent shopping actions; in that case, the 'add to cart'.
4. Optionally, you can add an image for some products or all.
5. If you want, setup the appearance; fonts, colors, sizes, dividers, among many other
    customization options.
6. You can also change the default messages and tooltips for your desired ones.

You can repeat this process in all the pages you want or you can have all the carts you need even in just one page; you can beautify your categories management (in separated carts) with the help of [rz] Layers II extensions set.

* For the checkout:

1. Drag and drop the [rz] Shopping (checkout) extension.
2. Open its properties and fill in the basic data such as the currency and your PayPal merchant
    information.
3. Setup your previously designed success and cancel pages.
4. Add your own icon images that represent the shopping actions; in that case, the 'remove from cart',
   'go to payment processor' and the 'empty cart'.
5. If you want, setup the appearance, fonts, colors, sizes, dividers, among many other customization
    options.
6. You can also change the default messages and tooltips for your desired ones.

That's all, you are ready to start selling!

* Adding a monitor:

Perhaps in your scheme, you do not have the products lists and the checkout modules together in the same page. So, let the user know what is going on...

1. Drag and drop the [rz] Shopping (b-monitor) extension.
2. Open its properties and fill in the basic data such as the text and icon positions.
3. Add your own images that represent the shopping actions; in that case, the 'empty cart', 'normal' and
   'full cart' with their messages.
4. If you want, setup the appearance, fonts, colors, size, positions of the elements.
5. You can add an optional link or an event when the user clicks on the basket monitor area.

Congratulations. Now you have a complete working sales point in your website!

You should have the basket monitor in a masterpage and repeat only this masterpage in all the pages you need; that way, if you make some changes, they will be reflected in all of the other pages.

The same applies for the checkout process; you can have the [rz] Shopping (checkout) extension in just one page and repeat only this masterpage in all the pages you need. Some schemes have all the products and the checkout process in one page.

* Product options:

Products can have variations such as color, size, etc.
If this is the case, you can have up to three combinations.
Enter the name, such as 'color'; and then, enter the values, such as 'red', 'green', 'blue', etc.
Each value must be in a new line, if no values are entered, a free input box will be available; now you can specify if this information is required or not.

* Variable prices, variable shipping and handling costs:

Similar to the product options, but in this case, you can setup a different charge for each option.
Enter the name, such as 'size'; and then, enter the description and the value, both elements in a new line and comma separated, i.e. 'large, 5.00', 'extra-large, 7.00', etc.

* Variable shipping costs:

Can setup up to three default shipping and handling costs in the [rz] Shopping properties dialog, 'Products: setup' category; then, in the products list, in each product definition, can point to one of the default settings. However, some products can have their own shipping costs; if this is the case, in the product setup, 'Shipping: source' parameter, set 'product specific', and in 'Shipping: cost', setup the values as you do in variable prices.
Additionally, you can set this cost to unlimited units, to each ordered unit, or a recurrent cost every specific quantity ordered.

* Other product settings:

Each product can be ordered in a specific quantity or in only one-time per order.
Can be temporarily unavailable just entering the reason, such as 'out of stock', 'sold out', 'suspended', 'unavailable' or any other custom message.
Prices can even be variable, such as not-fixed contributions, donations, etc. Just enter the minimum value and optionally the maximum value.
Rebates can be applied, just enter the amount; if you need a percentage instead of a flat amount, just add a trailing '%' to that value.
These rebates can be based on a minimum ordered; in that case, just enter that minimum value so as to apply for the discount.
You do not need to remove an item from the list, you can temporarily hide it just changing its satus: 'display' or 'hide'. This is useful when you do not want to retype all the item specification again later.

* Global discounts:

Instead of only item-based discounts, you can also setup global discounts.
Open the checkout module, and setup the discounts parameters, similar as you do for each item.
The same applies to the shipping and handling costs, they can be partially or totally discounted based on your own criteria.

* The item carts are multi-instance:

You can divide and spread many carts as you want. In individual pages or even in the same page.
All will be automatically updated according to the user actions and your scheme configuration.
Most of them are already predefined; of course, you can change their behavior as you need.

* Individual items:

You can have featured products with their own show method; can setup your own slide shows, or any other images set as per your scheme. If this is the case, you have the [rz] Shopping (to-cart) module.
Design the product show, and drag and drop this extension, then setup its values as you do in the items list. Then, if you need to customize it even more, just link this module with external data collectors, such as input boxes, select boxes, etc.
You can allow multiple options selection for options and/or additional charges; for options, add as many checkboxes as you need; those checkboxes must be grouped by name (for each product) and in the extension, must point to this name instead of the id; the value property of the checkbox is the description of each selected option.
For multiple additional charges selection, is the same as in options; the only change is that the value property must be comma separated for both the description and the amount, i.e: "wood framed, 19.50" (without the quotes).
This module is also multi-instance; this means that you can have -in the same page- many carts and many featured products (and even the checkout process and the basket monitor!).
One last thing about this module, you will need to add an instance of the [rz] Shopping (to-cart-lib); this is the library module that contains global settings so as each 'add-to-cart' instance can work.

* After the checkout:

Some browsers do not behave the same after accessing external sites on regards to non-permanent cookies.
This means that they are not always cleared when returning to your "payment-return" page after completing the transaction in the PayPal site.
If you want to be sure that the cart and the basket-monitor are cleared after the checkout process, just drag and drop the [rz] Shopping (cleanup) extension to the return page.

* A simple advice:

You only need to play for a while with the many available options.
Each module has its options with a description and all of them are self-explanatory; again, just play a bit with them.
According to the ePrivace compliance directives in some countries, you must tell the visitor that your site is based on cookies; if this is your case, we recommend the use of the [rz] Cookie Based Object ("CBO"); CBO allows you to show and hide messages in a persistent mode between pages and browser session.
Do not worry about the visitor's browser settings; the extensions handle the cookies status and will alert the user to allow cookies.

* On-delivery payment:

1. Design a form as you usually do (like a "contact" form) to be used to collect the buyer's information.
2. Usually, the last element you add to the form is an instance of the [rz] Shopping (pod), depending on
    where you want the products summary to appear.
3. It is advisable to send a mail with a copy of the order to the buyer:
3.a. Open the form properties dialog box.
3.b. In "General" tab, click on the "Advanced..." button.
3.c. In "Auto Responder" tab, setup how the data will be sent to the buyer.
4. Select "Use built-in PHP form processor script" and all the involved data relative to your company to be
    included in the check-out form.
5. Publish.

Important notes:

It is assumed that you know how to build a form in your projects.
Please always refer to the wb help files about how to build and setup your forms.

You may need additional security verifications, if that is the case, a suggested process can be as follows:

- In the wb toolbox, login category, you have admin, signup, login and logout objects (please read the wb
  documentation about how to use them).
- Put in your project a signup object; you as admin do all the security verifications (phone calls,
  address confirmation, etc), and when the process has successfully been completed, you activate
  the user account.
- Instead of link directly to the check-out page, protect your page and give the user the option to signup
  or login (this can be centralized in a different area).
- Once the transaction has been completed, in the "ok" page make a logout option available.

Please note that this extension is a gateway between the buyer and you; this means that you are the responsible to build (with absolute freedom and according to your scheme) and maintain your buyers database and how they signup, login and logout to/from your point of sales site.
You put within the "check-out form" a [rz] Shopping (pod) instance to pass the selected products.

If you want the check-out form to automatically be filled with the buyers data, just copy the wb profile object (the one you did to allow the users to change their personal data) and past it anywhere in the check-out page (do not forget to hide it!); in that case, the standard and custom fields should be named the same in both forms, the check-out you already did and in the profile object, i.e: '
address 1' is the same as 'Address_1' or 'address_1'.

How to display the products ordered in the check-out process?

- Drag and drop a text object.
- Open the properties dialog.
- In General tab, Compatibility frame, select "Do not encode HTML characters".
- Click on the [OK] button to accept and close.
- Edit the object contents and enter the following:
<?php echo nl2br($transaction) ?>
  (if you need HTML4 markup, enter:
<?php echo nl2br($transaction, false) ?> instead).

* Adding a footer (suite version):

You may want to put an elegant footer with smart alignments, or even any other content that must be below the "growing" shop section (the most dynamic area is the checkout module).

Use the [rz] Shopping (footer) module:

1. Design a layer or the object you want as you usually do (optionally, it can be placed in a masterobjects).
2. Drag and drop the footer module and setup the target ID, it can be a layer or any other object; however,
    if it will be used in many pages, it is recommended to place it in a masterobjects; in that case, enter
    the masterobjects ID (instead of the layer ID).
3. Setup the alignments parameters that best fit your scheme (used for the default browser size).
4. Optionally, setup the breakpoint schemes as per your scheme (multiple breakpoints supported - css
    media query support required).
5. Publish.

* Adding animation (suite version):

You may want to add animation when a product is ordered to visually help and follow the actions of products ordering. A "flying" image and a basket-monitor or cart shake will catch the buyers' attention.

Use the [rz] Shopping (add to cart animation) module:

1. Design your shopping page as you usually do.
2. Drag and drop an instance of the add-to-cat animation module.
3. Optionally, setup the effects you want and other customization parameters.
4. Be sure that the "filtered messages" option is enabled in the cart and add-to-car library modules.
5. Publish.

* Validation hook (adding an extra multipurpose validation to items):

This is a user/custom script inserted after the standard validation of an item and before ordering it, when the add-to-cart icon is being clicked.

1.  In your page, add an HTML object.
2a. Between the <head></head> tags, add the following function:

    <script type="text/javascript">
    function rzShopping_validationHook(item)
    {
      
...your validation rule goes here...
      
...set the "ok" var to false to cancel the add-to-cart process...
       if (!ok)
       {
          alert('
an optional message goes here');
          return false;
       }
    }
    </script>


2b. The available fields you can use to validate, are the following:

   
item.SKU.value: the item id.
   
item.GROUP.value: the name of the group that the item belongs to (this value is not required).
   
item.NAME.value: the name of the item.
   
item.OPTIONS_1.value (also OPTIONS_2 and OPTIONS_3): the three possible values for
    the item options.
   
item.CHARGES_1.value: similar to item.OPTIONS_1.value and refers to the charges that
    may apply to the item.
   
item.PRICE.value: the price of the item.
   
item.OPTIONS_1_REQUIRED.value (also OPTIONS_2_REQUIRED and OPTIONS_3_REQUIRED):
    the name of the value for the item options.

  - Sample of a generic validation:

    function rzShopping_validationHook(item)
    {
       if (item.OPTIONS_1.value.toLowerCase()=='abc' ||
           item.OPTIONS_1.value=='999')
       {
          alert('You entered an invalid option value for the item '+
                 item.NAME.value);
          return false;
       }
    }


  - Sample of an item-specific validation:

    function rzShopping_validationHook(item)
    {
       if (item.SKU.value=='item1')
       {
          if (item.OPTIONS_1.value.toLowerCase()=='zzz')
          {
             alert('You entered an invalid option value for the item '+
                    item.NAME.value);
             return false;
          }
       }
       else if (item.SKU.value=='item2')
       {
          if (item.OPTIONS_1.value()=='123' || item.OPTIONS_1.value()=='000')
          {
             alert('Please select a different value for the item '+
                    item.NAME.value);
             return false;
          }
       }
    }


3.  Publish.

* Top featured products:

You can have top featured items to sell that are shown in a special gallery, image/text links or the like.
So these items can be ordered (added to the checkout module) with a function call from any object that accepts events (usually "onclick").

For the cart module:
MyShoppingCart.addtocart(MyItem_SKU);
Replace "MyShoppingCart" with the actual instance name.
Replace "MyItem_SKU" with the actual item SKU (uppercased, no spaces).

For the add to cart module:
MyItem.addtocart();
Replace "MyItem" with the actual instance name.

*
Adding a magnifying glass (suite version):

You can add a modern magnifying glass effect to the items in your cart module or to the standalone images used in conjunction with the add-to-cart module. Currently, one instance is accepted, and it controls automatically all the products images in all the cart instances in the page. For specific images, just enter the image objects names.

1. Design your cart instances and/or images (specifying which product image accepts the effect).
2. Drag and drop the glass module.
3. Optionally, setup the colors and behavior.
4. Optionally, enter the standalone images names.
5. Publish.

For assistance in specific coding, charges may apply.
General and bespoke templates will be available upon request.


One last thing:
Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with