Pular para o conteúdo principal
Base de Conhecimento da FocusVision

Customizing the Shopping Cart

1:  Overview

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.

Learn more: Shopping Cart Concepts​

2:  Converting to a Shopping Cart Element

The Shopping Cart question requires:

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

3:  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:

4:  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:

Click on an attribute to navigate there

 

  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:pre_currency="$" displays a dollar sign before the product's monetary amount.
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:post_currency="¢" displays a cent sign after a product's monetary amount.
  • shoppingcart: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 Builder: 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.
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:quantity_caption="Quantity" displays "Quantity" as a title for the sum of products in a shopping cart. This is the default.
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:price_caption="Price" displays "Price" as a title for the price of products in a shopping cart. This is the default.
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:subtotal_caption="Subtotal" displays "Subtotal" as a title for the Subtotal in the shopping cart. This is the default.
  • shoppingcart: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 Builder: 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.
  • shoppingcart: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 Builder: 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. 
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:view_cart_button_singular="item" specifies the text for the shopping cart  to "item." This is the default.
  • shoppingcart: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 Builder: 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.
  • shoppingcart: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 Builder: yes
    • shoppingcart:view_details_button="Show Details" changes the text of the "View Details" button to "Show Details." 
  • shoppingcart: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 Builder: 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."
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:remove_button="Remove from Cart" adds the text "Remove from Cart" to the right of the "Remove" icon.
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:continue_shopping_button="Shop for more Items" replaces the text for the "Continue Shopping" button.
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:checkout_button="Proceed to Checkout" replaces the text for the "Checkout" button.
  • shoppingcart:show_product_name
    • Show Product Name. Allows you to Show or Hide product default name in the shelf view.
    • Type: enum
    • Available in Builder: none
    • Example: shoppingcart:show_product_name="no" set to "no" doesn't display the product name in the shelf view.
  • shoppingcart:product_name
    • Product Name. Allows you to display the name of the product in the shelf view.
    • Type: res
    • Available in Builder: yes
    • Example: shoppingcart:product_name="Ball Cat Toy" displays "Ball Cat Toy" as a product name.
  • shoppingcart:product_price
    • Product Price. Allows you to set a price for your product or service. Enter any Numeric price value.
    • Type: res
    • Available in Builder: yes
    • Example: shoppingcart:product_price="0.99" displays the product price "0.99".
  • shoppingcart:product_image
    • Product Image. Allows you to display any image file uploaded or found in the Image Manager.
    • Type: string
    • Available in Builder: adv
    • Example: shoppingcart:product_image="2.png" displays image "2.png" found in the Image Manager.
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:thumb_size="25%" sets the size of the original image displayed in the question to 25%. This is the default size.
  • shoppingcart: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 Builder: 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.
  • shoppingcart: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 Builder: yes
    • Example: shoppingcart:icon_size="15%" sets the size of the product image displayed in the checkout summary to "15%".
  • shoppingcart:library_path
    • Library Path
    • Allows you to modify the Path to Dynamic Question Library.
    • Type: string. Default: /survey/lib/steam/shoppingcart/v3/.
    • Available in Builder: 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.
  • shoppingcart:survey_path
    • Survey Path
    • Allows you to modify the Path to Active Survey.
    • Type: string. Default: [rel .]
    • Available in Builder: none
    • Example: shoppingcart:survey_path="[rel.]" changes the path to your Active Survey to "[rel.]" .This is the default.