Skip to main content

Decipher Support

All the topics, resources needed for Decipher.

FocusVision Knowledge Base

Customizing the Shopping Cart

Overview

The Shopping Cart is a fully interactive Dynamic Question powered by the XML Styles system. It replicates an online shopping experience where customers are able to view and purchase products. Shopping Cart is available for all desktop, tablet and smartphone devices.

1: Converting to a Shopping Cart Element

The Shopping Cart question requires:

  • a survey with compat 129+
  • the attribute grouping set to rows

2: Underlying Question Architecture

The dynamic style sits on top of a <text> question. See below for an example of the base XML code required.

Base XML:

<text label="q3" optional="0" size="25">
  <title>
      Imagine you are shopping for new toys for your cat and have $50 to spend. What would you buy?
  </title>
  <comment>Add products to your cart.</comment>
</text>

The code above produces the following result:

The code below reflects the XML used when the shopping cart element is added via the survey builder with the following changes made to the underlying <text> question:

  • uses="shoppingcart.3" is added to the question tag
  • grouping="rows" attribute is specified

<text 
  label="q1"
  grouping="rows"
  shoppingcart:thumb_size="45%"
  size="25"
  uses="shoppingcart.3">
  <title>Imagine you are shopping for new toys for your cat and have $50 to spend. What would you buy?</title>
  <comment>Add products to your cart.</comment>
  <row label="r1" shoppingcart:product_name="Jingle Ball Cat Toy" shoppingcart:product_price="0.99"><img class="survey_image survey-image-original" src="/survey/selfserve/1195/151003/3.png" title="3.png" /></row>
  <row label="r2" shoppingcart:product_name="Big Size Lovely Cat Toys Sisal Fish" shoppingcart:product_price="27.50"><img class="survey_image survey-image-original" src="/survey/selfserve/1195/151003/4.png" title="4.png" /></row>
  <row label="r3" shoppingcart:product_name="Ruff n Tumble Toy Mouse for Cats" shoppingcart:product_price="3.99"><img class="survey_image survey-image-original" src="/survey/selfserve/1195/151003/1.png" title="1.png" /></row>
  <row label="r4" shoppingcart:product_name="Basket Case Natural Cat Toy" shoppingcart:product_price="3.95"><img class="survey_image survey-image-original" src="/survey/selfserve/1195/151003/2.png" title="2.png" /></row>
</text>


Example:

3: Customization

Listed below are all of the attributes available for this element. Override them to create a custom look and feel for your shopping cart element:

Attribute Description Details
pre_currency Currency Before. Shown in the question, detailed view and checkout summary. Allows you to enter the currency symbol displayed before a product's monetary amount. If Currency Before and Currency After are left blank, the "$" symbol is used by default.

Type: string

Available in the Survey Editor: yes

Example: shoppingcart:pre_currency="$" displays a dollar sign before the product's monetary amount.

post_currency Currency After. Shown in the question, detailed view and checkout summary. Allows you to enter the currency symbol after a product's monetary amount.

Type: string

Available in the Survey Editor: yes

Example: shoppingcart:post_currency="¢" displays a cent sign after a product's monetary amount.

item_caption Item Caption. Shown in the shopping cart checkout summary. Allows you to enter a title for the products in a shopping cart. This name is displayed in the first column of the shopping cart checkout summary. If left blank, this column defaults to "Item."

Type: res. 

Default: Item

Available in the Survey Editor: yes

Example: shoppingcart:item_caption="Item" displays "Item" as a product title in the first column of the shopping cart checkout summary. This is the default.

quantity_caption Quantity Caption. Shown in the shopping cart checkout summary. Allows you to enter a title for the sum of products in a shopping cart. This name is displayed in the second column of the shopping cart checkout summary. If left blank, this column defaults to "Quantity."

Type: res. 

Default: Quantity

Available in the Survey Editor: yes

Example: shoppingcart:quantity_caption="Quantity" displays "Quantity" as a title for the sum of products in a shopping cart. This is the default.

price_caption Price Caption. Show in the shopping cart checkout summary. Allows you to enter a title for the price of products in a shopping cart. This name is displayed in the third column of the shopping cart checkout summary. If left blank, this column defaults to "Price."

Type: res. 

Default: Price

Available in the Survey Editor: yes

Example: shoppingcart:price_caption="Price" displays "Price" as a title for the price of products in a shopping cart. This is the default.

subtotal_caption Subtotal Caption. Shown in the shopping cart checkout summary. Allows you to enter a title for the Subtotal in the shopping cart. This name is displayed in the summary row of the shopping cart checkout summary. If left blank, this row defaults to "Subtotal."

Type: res. 

Default: Subtotal

Available in the Survey Editor: yes

Example: shoppingcart:subtotal_caption="Subtotal" displays "Subtotal" as a title for the Subtotal in the shopping cart. This is the default.

empty_cart_caption Empty Cart Caption. Shown in the shopping cart checkout summary. Allows you to specify the text on the shopping cart checkout summary when the cart is empty. If left blank, the message defaults to "You have no items in your shopping cart."

Type: res. 

Default: You have no items in your shopping cart.

Available in the Survey Editor: yes

Example: shoppingcart:empty_cart_caption="You have no items in your shopping cart." specifies the text on the shopping cart checkout summary when the cart is empty. This is the default.

checkout_tooltip_caption Checkout Tooltip Caption. Shown in the shopping cart checkout summary. Allows you to set the tooltip text, shown when the respondent hovers-over the checkout button. If left blank, the message defaults to "Click Checkout" to continue to the next question.

Type: res. 

Default: Click "Checkout" to continue to the next question.

Available in the Survey Editor: yes

Example: shoppingcart:checkout_tooltip_caption="Click "Checkout" to continue to the next question." sets the tooltip text, shown when the respondent hovers-over the checkout button to "Click "Checkout" to continue to the next question." This is the default. 

 

view_cart_button_singular View Cart Button (Singular). Shown in the question when there is a single item in the cart. Allows you to specify the text for the button that allows the respondent to view their cart and then checkout. If left blank, the message defaults to "[Number of] item."

Type: res. 

Default: item

Available in the Survey Editor: yes

Example: shoppingcart:view_cart_button_singular="item" specifies the text for the shopping cart  to "item." This is the default.

view_cart_button_plural View Cart Button (Plural). Shown in the question when there are multiple items in the cart, and when the cart is empty. Allows you to specify the text for the button that allows the respondent to view their cart and then checkout. If left blank, the message defaults to "[Number of] items."

Type: res. 

Default: items

Available in the Survey Editor: yes

Example: shoppingcart:view_cart_button_plural="items" specifies the text for the shopping cart button to "items" when there are multiple items. This is the default.

view_details_button View Details Button. Shown in the question when the respondent hovers-over a product. Allows you to change the text of the "View Details" button displayed when you click or hover-ever an item on the question. If left blank, the message defaults to "View Details."

Type: res. 

Default: View Details

Available in the Survey Editor: yes

shoppingcart:view_details_button="Show Details" changes the text of the "View Details" button to "Show Details."

add_to_cart_button Add to Cart Button. Shown in the question when the respondent hovers-over a product and in the detailed view. Allows you to change the text of the "Add to Cart" button displayed when you click or hover-over an item. If left blank, the message defaults to "Add to Cart."

Type: res. 

Default: Add to Cart

Available in the Survey Editor: yes

Example: shoppingcart:add_to_cart_button="Buy now" changes the text of the "Add to Cart" button displayed when you click or hover-over an item to "Buy now."

remove_button Remove Button. Shown in the shopping cart checkout summary. Allows you to add text to the right of the "Remove" icon. By default only the remove icon is displayed.

Type: res

Available in the Survey Editor: yes

Example: shoppingcart:remove_button="Remove from Cart" adds the text "Remove from Cart" to the right of the "Remove" icon.

continue_shopping_button Continue Shopping Button. Shown in the shopping cart checkout summary. Allows you to replace the text for the "Continue Sopping" button.

Type: res. 

Default: Continue Shopping

Available in the Survey Editor: yes

Example: shoppingcart:continue_shopping_button="Shop for more Items" replaces the text for the "Continue Shopping" button.

checkout_button Checkout Button. Shown in the shopping cart checkout summary. Allows you to replace the text for the "Checkout" button.

Type: res. 

Default: Checkout

Available in the Survey Editor: yes

Example: shoppingcart:checkout_button="Proceed to Checkout" replaces the text for the "Checkout" button.

show_product_name Show Product Name. Allows you to Show or Hide product default name in the shelf view.

Type: enum

Available in the Survey Editor: none

Example: shoppingcart:show_product_name="no" set to "no" doesn't display the product name in the shelf view.

product_name Product Name. Allows you to display the name of the product in the shelf view.

Type: res

Available in the Survey Editor: yes

Example: shoppingcart:product_name="Ball Cat Toy" displays "Ball Cat Toy" as a product name.

product_price Product Price. Allows you to set a price for your product or service. Enter any Numeric price value.

Type: res

Available in the Survey Editor: yes

Example: shoppingcart:product_price="0.99" displays the product price "0.99".

product_image Product Image. Allows you to display any image file uploaded or found in the Image Manager.

Type: string

Available in the Survey Editor: adv

Example: shoppingcart:product_image="2.png" displays image "2.png" found in the Image Manager.

thumb_size Item Size in Question. Determinies the size of the product image displayed in the question. The size is measured in pixels. Valid formats include: 25x35 , 25w, 35h, 45%.

Type: string

Available in the Survey Editor: yes

Example: shoppingcart:thumb_size="25%" sets the size of the original image displayed in the question to 25%. This is the default size.

full_size Item Size in Detailed View. Determines the size of the product image displayed in the detailed view. This should be the largest, full-sized version of the product image. The size is measured in pixels. Valid formats include: 250x350, 250w, 350h, and 90%.

Type: string

Available in the Survey Editor: yes

Example: shoppingcart:full_size="100%" sets the size of the original image displayed in the product detail view to "100%". This is the default size.

icon_size Item Size in Checkout SummaryDetermines the size of the product image displayed in the checkout summary. Valid formats include (measured in pixels): 15x20, 15w, 20h, and 25%. Default size is 15% of the original image.

Type: string

Available in the Survey Editor: yes

Example: shoppingcart:icon_size="15%" sets the size of the product image displayed in the checkout summary to "15%".

library_path Allows you to modify the Path to Dynamic Question Library.

Type: string. 

Default: /survey/lib/steam/shoppingcart/v3/.

Available in the Survey Editor: none

Example: shoppingcart:library_path="/survey/lib/steam/shoppingcart/v3/." changes the path to your Dynamic Question Library to "/survey/lib/steam/shoppingcart/v3/.". This is the default.

survey_path Allows you to modify the Path to Active Survey.

Type: string. 

Default: [rel .]

Available in the Survey Editor: none

Example: shoppingcart:survey_path="[rel.]" changes the path to your Active Survey to "[rel.]" .This is the default.

  • Was this article helpful?