Virtual Dressing Room
Contents
1. 12 2015 OSF Global Services All Rights Reserved Page 2 7 Global 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com Plugin settings The image below captures the plugin options and its default values fplay js fn fplay defaults MainContainerClass configurator clo AccessoriesContainerClass acs container oriesContainerAllowed L RER LG RC lacs ee LONT CONESA ContainerEmptyClass empty ContainerNotEmptyClass not sanity 3 3 ManipulatorAdditionalClasses 3 XButtonAdditionalClasses btn btn small btn danger ContainerHeadingObject lus mn 3 DraggableObject prod img ResetButtonObject btn reset ItemlopValue A 1 RE ShowEffects false j fn fplay settings 1 y jQuery 1 MainContainerClass Defines the main container class This option should NOT contain multiple classes Default configurator clo Example of custom implementation JOuery fplay MainContainerClass yourMainContainerClass fice This will not work MainContainerClass classl class2 class3 The custom implementation and the customization that will not work also apply for points 2 4 5 6 2015 OSF Global Services All Rights Reserved Page 3 7 Global 6655 Blvd Pierre Bertrand Office 240 Glo2. 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com jJQuery fplay ResetButtonObject some other button Tae This will not work Setting more than one element as the reset button object NOTE If the default is changed please make sure the defined element exists into the template 12 ItemTopValue Defines the top value relative to the container for a dropped product This is used to accommodate the rotation helper please see screen below Default 30px Example of custom implementation jJQuery fplay ItemTopValue W 2 em 2E This will not work Multiple values bogus values and others alike 2015 OSF Global Services All Rights Reserved Page 9 l amp 6655 Blvd Pierre Bertrand Office 240 OSF Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com Add all to cart CATEGORY Mens Sale COLOR BS Sa peu 23 E PRICE 20 49 99 Ji droppable not empt flou visible position absolute w a 4is Site Sites apparel catalogjdef lt Two Sutton Sport Coat Siac 13 ShowEffects Defines whether an item removal explode effect should be shown Default false Example of custom implementation jJQuery fplay ShowEffects true bas This will not work Any other value but true or false 2015
3. G2K 1M1 Canada Phone 1 888 548 4344 www osf global com 4 ContainerGeneralClass Defines the containers general common CSS class This option should NOT contain multiple classes Default conf container Example of custom implementation Please see point 1 5 ContainerEmptyClass Defines the container empty class which is present on an empty container contains no products This option should NOT contain multiple classes Default empty Example of custom implementation Please see point 1 6 ContainerNotEmptyClass Defines the container not empty class which is present on a container which has at least one item added This option should NOT contain multiple classes Default not empty Example of custom implementation Please see point 1 7 ManipulatorAdditionalClasses Defines additional classes for the product rotation helper manipulator bar element with a yellow bullet at the top Default empty Exemple of custom implementation jJQuery fplay ManipulatorAdditionalClasses another Manipulator class jJQuery fplay ManipulatorAdditionalClasses another manipulator class second manipulator class evenAnotherClass 2015 OSF Global Services All Rights Reserved Page 5 7 Global 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com fag This will not w
4. Global amp 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com OSF Virtual Dressing Room Technical User Manual 2015 OSF Global Services All Rights Reserved Page 1 Global 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com Content Plugin M2 0 1 Le CPR 3 Man onanera ae E A E 3 AccessoriesContainerClass iii 4 AccessoriesContainerAllowed nee 4 COIN Ee ORGS IS A VAS Stic aa n 5 ContainerEmptyClass inner 5 ContainerNotEmptyClass cccccccssscsscssscsescssecsescsescesceesseescansesesseesueseseanssensesessenseneneeess 5 ManipulatorAdditionalClasses iris 5 ABURONAddINONAICIASSOS aa a aE 6 ContamerheadingO DJECE aa a be ne 6 DOG ADISO DIE ea a a 7 UE SA 5 10 4 011 10 8j U nenn rnn aE EA E E PE E E E ENE 8 TCEMTOPVAIUC ccecccecceecsescnsseeecsescsseseecseeeseecenessusaeeessuseatseeessauseeessauseuteeeeseaueeeesatseateeeseatens 9 OF OVW TA CS east ed nade beige a ea 10 Initializing the plugin sisicinsetiseeseicivecstceinaeiniinsnterniaine eaten 11 Plugin Initialization with no custom options 11 Plugin Initialization with some custom options 11 Plugin Initialization with all custom options ccccccseceseeeeeeeeeeseeeeeeeeeseeeeeeesaeens 11 Reinitializing the plugin after AJAX calls
5. OSF Global Services All Rights Reserved Page 10 F Global 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com Initializing the plugin Depending on the needs of the user the plugin may be initialized with no customized options at all this will load the default options with custom values for SOME options or by defining custom values for ALL options Plugin Initialization with no custom options jQuery fplay Plugin Initialization with some custom options jJQuery fplay AccessoriesContainerAllowed womens jewelry mens accessories ManipulatorAdditionalClasses another manipulator class ShowEffects true jh Plugin Initialization with all custom options jJQuery fplay MainContainerClass main container AccessoriesContainerClass Ssecond container AccessoriesContainerAllowed categoryl category2 category3 ContainerGeneralClass gt Mcommon container ContainerEmptyClass NO produccus ContainerNotEmptyClass gt wieh products ManipulatorAdditionalClasses manipulator additional class 2015 OSF Global Services All Rights Reserved Page 11 Global amp 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com XButtonAdditionalClasses my fancy button my red utto
6. bal Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com 2 AccessoriesContainerClass Defines the accessories container class This option should NOT contain multiple classes Default acs container Example of custom implementation Please see point 1 3 AccessoriesContainerAllowed Defines an ARRAY of categories whose products are allowed to be dropped into the accessories container Default The default in this case means an empty array hence the option is disabled When the option is disabled all products may be dropped into any of the two containers When the option is enabled which is achieved by defining one or more categories in the array please see Example of custom implementation normal products can t be dropped into the accessories container while accessories can t be dropped into the main container The plugin will automatically drop them in the right container Example of custom implementation jJQuery fplay AccessoriesContainerAllowed jewelry mens accessories ae These will not work e AccessoriesContainerAllowed womens jewelry e AccessoriesContainerAllowed womens jewelry mens accessories e AccessoriesContainerAllowed womens jewelry mens accessories 2015 OSF Global Services All Rights Reserved Page 4 7 Global 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC
7. n ContainerHeadingObject ho DraggableObject prod ct grid img ResetButtonObject gt reset containers ULECONR TtemTopValue s OCD y ShowEffects true Reinitializing the plugin after AJAX calls The plugin has to be reinitialized after an AJAX call e g changing any refinements navigating from the breadcrumbs or pagination and so on This may be done exactly as in the examples above in the callback app ajax load Urls url target Scache gridContainer Callback fLuncri0n jJQuery fplay AccessoriesContainerAllowed jewelry mens accessories app progress hide NOTE Please note that app fplay js also contains four AJAX calls so the plugin initialization has to be copied in those AJAX calls callback methods as well 2015 OSF Global Services All Rights Reserved Page 12 fe Global amp 6655 Blvd Pierre Bertrand Office 240 global amp Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com Thank you for your interest in the Virtual Dressing Room Should you have any questions please contact us at integration support osf global com 2015 OSF Global Services All Rights Reserved Page 13
8. ork ManipulatorAdditionalClasses another manipulator class second manipulator class evenAnotherClass The custom implementation and the customization that will not work also apply for point 8 8 XButtonAdditionalClasses Defines additional classes for the product removal red button Default btn btn small btn danger These classes are set by default in order to accommodate the element with the Twitter Bootstrap CSS framework In case this is not desired just replace the defaults with any other classes which may be needed for proper styling Example of custom implementations jJQuery fplay XButtonAdditionalClasses my button class my red butt n This also works extending the default classes jQuery fplay XButtonAdditionalClasses btn btn small btn danger my button class my red button J a 9 ContainerHeadingObject Defines the heading element for both containers Headings are shown only when a container is empty When at least one product is added the heading will disappear and reappear only after the container gets its empty state back by either manually removing the products or by clicking the Reset button Default n4 2015 OSF Global Services All Rights Reserved Page 6 fe Global amp 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com Example of custom implemen
9. tation jQuery fplay lt ContainerHeadingObject h5 This will not work Setting more than one element as ContainerHeadingObject e g ContainerHeadingObject h1 h2 h3 or any other combination of that kind NOTE If changing the container heading object is desired the element itself has to be changed as well in the ISML template Add alto cart n4 clo pk s px CATEGORY COLOR PRICE 10 DraggableObject Defines the drag able object the product element which can be dragged from the grid into any of the two containers Default prod img Example of custom implementation 2015 OSF Global Services All Rights Reserved Page 7 Global amp 6655 Blvd Pierre Bertrand Office 240 Global Qu bec City QC G2K 1M1 Canada Phone 1 888 548 4344 www osf global com JQuery fplay DraggableObject product grid img pia This will not work Setting more than one element as the drag able object e g DraggableObject product grid img product grid 2 img or any other implementation as such CATEGORY COLOR PRICE 11 ResetButtonObject Defines the button object element which will be used for the reset actions Default btn reset Example of implementation 2015 OSF Global Services All Rights Reserved Page 8 Global
Download Pdf Manuals
Related Search