PCuikit

PCuikit - A unique package allows you to load phoca cart content into your website layouts and create site-wide templates with the following views using the YOOtheme Pro page builder and dynamic content.

• Category view
• Product Details view
• Checkout Layout
• User Account view

If you are here you probably are and have been using YOOthemes Builder and the quite new Dynamic Content features available. With PCuikit we have implemented full support for this. This open incredible new doors for web designers and agencies to freely create templates for Phoca cart.

How to install:

PCuikit supports YOOtheme PRO page builder / UIkit 3 templates

• Download the latest “pcuikit_package_0.x.x” from “PCuikit” product page.

• You can just install the plugin using the "Joomla Extension Manager", click “System -> Extensions ” and then upload the zip file to install the extension.

• From the main joomla dashboard click “System -> Manage -> Extensions”. Use the Search or Filter feature to find the installed pcuikit plugin and then make sure the installed plugin is enabled.

Custom Product :

• Open "YOOtheme" website builder inside the Joomla admin and edit the page you want to add the elements with simple custom product using dynamic content.
• Select the preferred builder elements from Yootheme PRO Website Builder elements list with the row settings as Halves.

• Add the elements to the section here we used "Image","Heading","Text","HTML" elements.

• Click "Advanced" menu in the image element and then select the option "Custom Product" from "DYNAMIC CONTENT" and select the product you want to show from "Select Product".

• Once a PC content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Select the content field to map it to the element's field. For example, you can map the image field to product image , image alt field to the selected product image alt and link field to the selected product link.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

• Repeat the same "Advanced" menu settings described above for Heading element.

• Select the content field to map it to the element's field. For example, you can map the content field of the product name.

• Repeat the same "Advanced" menu settings described above for Text element.

• Select the content field to map it to the element's field. For example, you can map the content field of the product description .

• Repeat the same "Advanced" menu settings described above for HTML element.

• Select the content field to map it to the element's field. For example, you can map the content field of product add-to-cart.

Custom Categories :

• Now open "YOOtheme" website builder inside the Joomla admin and edit the page you want to add the elements with dynamic content.

• Then you can easily select the preferred builder elements from Yootheme PRO Website Builder elements list.

• Click on the selected element here we used "GRID" element .

• Then click "ADD ITEM" to add the new item to the element.

• Click "Advanced" menu in the new item and then select the option from "DYNAMIC CONTENT".

• Select a predefined content source to make its fields available for mapping. Here for example "Custom Products" and simultaneously select the related options below for the selected content source.
  • "PARENT CATEGORY" - Listed the available categories in the store, if you want to list all categories select "Root" option or to list all sub-categories of parent category select the specific parent category.

• Once a content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Select the content field to map it to the element's field. For example, you can map the title and image to the name and image fields of the selected product category .

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

Custom Products :

• Now open "YOOtheme" website builder inside the Joomla admin and edit the page you want to add the elements with dynamic content.

• Then you can easily select the preferred builder elements from Yootheme PRO Website Builder elements list.

• Click on the selected element here we used "PC GRID" element .

• Then click "ADD ITEM" to add the new item to the element.

• Click "Advanced" menu in the new item and then select the option from "DYNAMIC CONTENT".

• Select a predefined content source to make its fields available for mapping. Here for example "Custom Products" and simultaneously select the related options below for the selected content source.
  • "FILTER BY CATEGORIES" - Listed the available categories in the store.
  • "FILTER BY TAGS" - Filter products by tags.
  • "FILTER BY MANUFACTURERS" - Filter products by Manufacturer.
  • "FILTER BY FEATURED PRODUCTS" - Filter by featured products.

• Once a content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.

• Select the content field to map it to the element's field. For example, you can map the title and image to the name and image fields of the selected product category .

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

Phoca Cart Category View

To use the phoca cart category view create the page in Main Menu and select the Categories View (Category list layout - default view) as Menu Item Type.

• Open "YOOtheme" website builder inside the Joomla admin and go to the page newly created and the in-built layout template was applied to the page with builder elements using dynamic content.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of Phoco Categories template layout.

• Predefined template from PCuikit package
• Here you found the predefined phoca categories template layout using yootheme elements with dynamic content sources.

• Click on the grid element and click "PC Categories" item then go to "Advanced" menu in the element.
• Select the option "PC Categories" from "DYNAMIC CONTENT" dropdown list.

• Once a dynamic content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
• Select the content field to map it to the element's field. For example, you can map the title field to category title.

• Repeat the same and check the settings for other elements used in template.

Phoca Cart Products List

• Open "YOOtheme" website builder inside the Joomla admin and go to the categories List page and then select any of the category, products list template was applied to the page with builder elements using dynamic content.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of Phoca Products List.

• Predefined template from PCuikit package
• Here you found the predefined phoca category products list using yootheme elements with dynamic content sources.

• Click on the PC Grid element and click "PC Category Products" item then go to "Advanced" menu in the element.
• Select the option "PC Category Products" from "DYNAMIC CONTENT" dropdown list.

• Once a dynamic content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
• Select the content field to map it to the element's field. For example, you can map the title field to product name.

• Repeat the same and check the settings for other elements used in template.

Product Details View

To begin using the product details view you have to create the page in Main Menu and select the Product View (Product layout) as Menu Item Type.

• Open "YOOtheme" website builder inside the Joomla admin and go to the page newly created and the in-built layout template was applied to the page with builder elements using dynamic content.

• Click on the Yootheme PRO Website "Builder" and then click "Open Templates".

• From the listed templates, click "Builder" of the product details template layout.

• Here you found the predefined product details template layout using yootheme elements with dynamic content sources.

• Click on the image element and click "Advanced" menu in the element, then the option "PC Product details" was selected from "DYNAMIC CONTENT".

• Once a dynamic content source is selected, its fields are available for mapping.
• To map a content field to an element's field, open the Content tab of an element. Each element field shows a Dynamic button on the right which opens a dropdown with a list of all available content fields.
• Select the content field to map it to the element's field. For example, you can map the image field to the selected product image.

• In Heading element, select the content field to map it to the element's field. For example, you can map the content field to the selected product price (html) and click the edit icon of the field to change the options of which price to be displayed as per your requirements.

• If you want to hide any of the price value with empty or zero value, you can use "Hide price if empty" option.

• In HTML element, select the content field to map it to the element's field. For example, you can map the content field to "Add to cart" click the edit icon of the field to set the custom style options.

• Repeat the same and check the settings for other elements used in template.

Custom Elements

PCuikit comes with additional custom elements for YOOtheme Pro Builder. These new elements makes it easy to use Add to cart' buttons, products and categories directly in your YOOtheme Pro layout. This lets to easily create awesome custom product pages with Add to cart buttons etc.

• PCuikit YOOtheme Pro Builder Custom Elements are now installed along with the PCuikit package installation smartly and added to the builder for instant usage without any additional installations.

PC Category Custom Element :

• Open your site "YOOtheme" website builder inside the Joomla admin and edit the page section in which you want to add the "PC Category" custom element.
• Then you can easily add listed PCuikit custom builder element PC Category from the list of PCuikit custom elements.

• You can add the PC Category and customise the settings for the element under "Content" tab in which how it will be displayed in your website.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

PC Product Custom Element :

• Open your site "YOOtheme" website builder inside the Joomla admin and edit the page section in which you want to add the "PC Product" custom element.
• Then you can easily add listed PCuikit custom builder element PC Product from the list of PCuikit custom elements.

• You can add the PC Product and customise the settings for the element under "Content" tab in which how the selected product will be displayed in your website.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.

PC Product Grid Custom Element :

• Open your site "YOOtheme" website builder inside the Joomla admin and edit the page section in which you want to add the "PC Product Grid" custom element.
• Then you can easily add listed PCuikit custom builder element PC Product Grid from the list of PCuikit custom elements.

• Now you can add the PC Products list from the "Add Item" option and select one from the list of your PC store product.

• Repeat the same for adding more products to the grid item.

• You can change the settings for the element under "Settings" tab in which how it will be displayed in your website.

• Once finished all the settings for the element , Click "Save layout" and "Close" the website builder.