.. include:: _include.rst .. highlight:: html+jinja .. _product_picker: ##################### Product Picker ##################### .. include:: _include_local_toc.rst The |productpicker| lets you easily embed single items, collections or smart collections in your pages without having to write the :ref:`shortcodes`. Just click the |asa2| editor button in the editor toolbar and the |productpicker| window will open up. .. image:: _static/editor_button.png :height: 156px :width: 195px :scale: 100% :alt: ASA 2 editor button .. _product_picker_screencast: ************ Screencast ************ .. raw:: html

***************** Amazon API Search ***************** Use the first tab "Amazon API" to perform a live search on the |apilong|. Select the store you want to use for the search in the "Store" dropdown menu on the right. Enter a product name and hit the "Search" button. After the search request has been submitted, you will see a list of ten results. .. image:: _static/product_picker_store_search.jpg :width: 822px :height: 539px :scale: 100% :alt: ASA2 productpicker Amazon search Shortcode Settings ------------------ If you have found the right product, click on the title or "Select" button and you'll be forwarded to the **"Shortcode" settings tab**: .. image:: _static/product_picker_store_search_settings.jpg :width: 833px :height: 973px :scale: 100% :alt: productpicker store search settings Here you can select from different display modes: * Template * Single value * Single image Depending on the display mode, additional options for the display appear below that affect the shortcode. Finally click the button **"Insert shortcode"** and the automatically generated :ref:`shortcodes_asa2` shortcode will be inserted in the page. ************** Product Search ************** If you want to select a product which is already stored in the :ref:`repo`, you can start with tab **"Your Products"**. Here you can set some search filters to narrow down the results, like the shop of the product if you use the :ref:`shops` feature. .. image:: _static/product_picker_repo_search.jpg :width: 817px :height: 341px :scale: 100% :alt: productpicker repo search As with the Amazon API search, click on a product's title or "Select" button to proceed to the **"Shortcode" settings tab**: Customize the shortcode setttings, click the button **"Insert shortcode"** and the automatically generated :ref:`shortcodes_asa2` shortcode will be inserted in the page. ************ Collection ************ The |productpicker| also makes it easy to embed a :ref:`collections`. Click the tab "Collections" and select the collection you want to embed from the dropdown menu. Then click the button **"Proceed"**. .. image:: _static/product_picker_collection.jpg :height: 306px :width: 616px :scale: 100% :alt: productpicker collection You will be forwarded to the **"Shortcode" settings tab**: .. image:: _static/product_picker_collection_settings.jpg :height: 566px :width: 610px :scale: 100% :alt: productpicker collection settings Here you can select which **template** to use, insert a **custom Associate ID** and decide wheter to use **AJAX mode** and **caching**. Additionally you may adjust the collection's **sorting** and **limitation**. Click the option "Use name" if you want to you the collection name as shortcode value instead of the collection ID. .. note:: It is recommended to use the collection ID instead of the name, because the shortcode will not brake if you change the collection name afterwards. Finally click the button **"Insert shortcode"** and the automatically generated :ref:`shortcodes_asa2_collection` shortcode will be inserted in the page. ****************** Smart Collection ****************** The |productpicker| also helps you with entering :ref:`shortcodes_asa2_smart_collection` shortcodes. Click the |productpicker| tab **"Smart Coll."** and enter the options to use with the shortcode and/or a search string. Learn more about the smart collection options here: :ref:`shortcodes_asa2_smart_collection`. Then click the button **"Proceed"**. .. image:: _static/product_picker_smart_collection.jpg :height: 425px :width: 609px :scale: 100% :alt: productpicker smart collection You will be forwarded to the **"Shortcode" settings tab**: .. image:: _static/product_picker_smart_collection_settings.jpg :height: 536px :width: 615px :scale: 100% :alt: productpicker smart collection settings Here you can select which **template** to use, insert a **custom Associate ID** and decide wheter to use **AJAX mode** and **caching**. Additionally you may adjust the smart collection's **sorting** and **limitation**. Finally click the button **"Insert shortcode"** and the automatically generated :ref:`shortcodes_asa2_smart_collection` shortcode will be inserted in the page. ****************** Single Image ****************** With ASA2 you can integrate single images from all available product pictures into your pages. Simply select the option "Image only" in the tab "Shortcode" in the product picker after selecting a product. .. image:: _static/asa2_single_image_picker.jpg :height: 754px :width: 715px :scale: 100% :alt: productpicker single image Screencast ---------- Watch this video to see the feature in action. .. raw:: html

In addition, you can select one of the available image sizes that best fits your content. Width and height can even be adjusted individually with the short code options :ref:`shortcodes_asa2_img_width` and :ref:`shortcodes_asa2_img_height`. Together with the align option, the images can be optimally integrated into the page’s body text. The presentation of the image is taken over by special image templates, two of which are delivered as new managed templates: * Image_Layout_1 (`demo page `_) and * Image_Layout_Polaroid (`demo page `_) Of course you can also create your own templates for the single image feature. Optionally, the product title as well as a shop or buy button can be displayed. A mouse-over effect shows price and rating stars (if available) above the image. This effect can be turned on or off, as well as a random, slight rotation of the Polaroid layout. This new single image feature makes it possible to easily integrate a product image with Amazon link into a text, which often seems more accessible to the reader than overloading it with many product details. Check the details page about the shortcode related with the single image feature :ref:`shortcodes_asa2_img`.