Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. A product in the cart is out of stock. A 'Show Alternates' prompt appears under the product detail.
  2. On clicking 'Show Alternates', a modal window opens.
  3. Alternate products are presented in grid format.
    Image Modified
  4. User selects an alternative option via the 'Substitute' button.
  5. The out of stock product is removed and the alternate is added to cart in its place. 
    Image Modified
Info

This functionality is available in CSS versions 3.79 and later.

...

  1. Login to the CMS.
  2. Navigate to Layouts --> Templates
  3. Click the 'Cart' template.
  4. Scroll to 'Zone Main'to Content → Standard Pages.
  5. Select the Cart template.
  6. Scroll to the template's Main content zone and click 'Add Widget'
  7. Select Search for 'Alternates Popup' and click 'Add Widget'.
  8. Click 'Edit' and configure options:
    • Description - A description for the
    Administrator
    • eCommerce team's reference. Appears on this widget layout page only.
    • Layer - Select a layer to display this conditionally (e.g. for B2C roles only), or leave as 'All Pages' by default. For more information on layers, see our CV Connect article
      Image Modified
    • Always Display 'Show Alternates' Button? - Tick this if you'd like the prompt to show for ALL products in the cart which have alternates set up against them, whether in stock or not. Otherwise, the prompt will only show for Out Of Stock products. 
    • Popup Window Header Text - The title which displays on the modal window for alternate products.
      Image Modified
  9. Click 'Save'
  10. Navigate to Layouts --> Templatesback to ContentStandard Pages.
  11. Click the 'Order Lines Info' template.
  12. Click 'Add Widget'.
  13. Select the 'Alternates Order Line' widget and click 'Add'.
    Image Modified
  14. Click 'Edit' and configure options:
    • Description - A description for the
    Administrator
    • eCommerce team's reference. Appears on this widget layout page only.
    • Layer - Set this to match the Layer setting for the 'Alternates Popup' widget configured previously.
    • Show Alternates Button Text - The text which appears on the button prompt in the cart.
      Image Modified
  15. Click 'Save'.

The 'Show Alternates' button will now appear in the cart based on the options set above. The button sits just under the product information and is styled in line with the site theme. 
 

...

To customise the appearance of product data on the Alternates Popup:  

  1. Navigate to Layouts --> to Content → Standard Templates.
  2. Select the 'Alternates Popup' template.
  3. Here, the product list widgets are laid out in the order they appear (eg. product image at the top, then product title (description), product code, etc). 
    Image Modified
  4. Select the required widget and click 'Edit' to configure options, or 'Delete' to remove it. Depending on the site version, the option to disable (rather than remove) a widget may also be present.
  5. New widgets can also be added to this template if product data you wish to show is missing. 
  6. Drag and drop widgets to reorder them if required.
  7. Changes will be visible on refresh of the web page. 

...

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
showSpacefalse
reversetrue
typepage
cqllabel = "kb-how-to-article" and type = "page" and space = "KB"
labelskb-how-to-article