{"type":"doc","content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://github.com/magesuite/product-tile"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"This is a powerful module developed in order to create an extensible product tile, which can be composed with fragments and used in many contexts maintaining the same view and styling.","type":"text"}]},{"type":"paragraph"},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"maxLevel":{"value":"7"},"minLevel":{"value":"1"}},"macroMetadata":{"macroId":{"value":"05c1415b966021bc1800236687add700"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"31ad4665-89cf-4abb-b976-099dbea80c02"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"Installation","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"This module is required by theme-creativeshop","type":"text"}]}]},{"type":"codeBlock","content":[{"text":"composer require \"creativestyle/magesuite-product-tile\" ^2.0.0","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Admin settings","type":"text"}]},{"type":"paragraph","content":[{"text":"MageSuite product tile is switched on by default when the module is installed. There are additional settings in the admin panel:","type":"text"}]},{"type":"paragraph","content":[{"text":"Stores -> Configuration -> MageSuite -> Product Tile","type":"text","marks":[{"type":"code"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1005,"id":"1b3de6d9-01cc-4d35-843a-2b7dc336aff2","collection":"contentId-2295890252","type":"file","height":501}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"The Thumbnail gallery on the tile can be enabled in ","type":"text"},{"text":"Thumbnail","type":"text","marks":[{"type":"code"}]},{"text":" tab. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":317,"id":"7a13dccb-157b-4f6b-b458-676b75a74d53","collection":"contentId-2295890252","type":"file","height":551}}]},{"type":"paragraph","content":[{"text":"As tile gallery is an optional feature, import of scripts and styles must be uncommented in a child theme in entries:","type":"text"}]},{"type":"codeBlock","content":[{"text":"import 'components/tile-gallery';","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Under ","type":"text"},{"text":"Cache","type":"text","marks":[{"type":"code"}]},{"text":" tab","type":"text"}]},{"type":"paragraph","content":[{"text":"Include customer group in cache key","type":"text","marks":[{"type":"strong"}]},{"text":" setting can be enabled or disabled. When enabled product tile will be generated separately for every customer group. Disable only when shop does not differentiate product pricing between customer groups in any way. Disabling it improves shop performance","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Backend","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"TODO BE part is needed.","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Frontend","type":"text"}]},{"type":"paragraph","content":[{"text":"The entry template for product tile is: ","type":"text"},{"text":"magesuite-product-tile/view/frontend/templates/tile.phtml","type":"text","marks":[{"type":"code"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Containers","type":"text"}]},{"type":"paragraph","content":[{"text":"The product tile is composed of smaller containers in ","type":"text"},{"text":"magesuite-product-tile/view/frontend/layout/product_tile.xml","type":"text","marks":[{"type":"code"}]},{"text":" layout. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Containers create HTML elements with defined tag and class. Containers can be nested inside each other. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Example of container:","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"\n \n div\n cs-product-tile__container\n \n","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"All top level containers must be added inside main ","type":"text"},{"text":"product.tile ","type":"text","marks":[{"type":"strong"}]},{"text":"block.","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Linked containers","type":"text"}]},{"type":"paragraph","content":[{"text":"If a container should be wrapped with <","type":"text"},{"text":"a href=\"...\">","type":"text","marks":[{"type":"strong"}]},{"text":" tag that links to product detail page then simple phtml template change is sufficient:","type":"text"}]},{"type":"paragraph","content":[{"text":"template=\"MageSuite_ProductTile::container_linked.phtml\"","type":"text","marks":[{"type":"code"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Fragments","type":"text"}]},{"type":"paragraph","content":[{"text":"Tile fragment is the smallest part that can build a whole product tile. Its main purpose is to display some product data using a custom phtml template. Fragments should be as small as possible. That way there won't be much need to overwrite their templates what improves maintainability.","type":"text"}]},{"type":"paragraph","content":[{"text":"Example of fragment:","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"The following fragments are defined in the module:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":248,"id":"589f0e20-9e54-405f-a1ba-743e9abaac16","collection":"contentId-2295890252","type":"file","height":448}}]},{"type":"paragraph","content":[{"text":"Product object is always available in fragment PHTML template after calling ","type":"text"},{"text":"getProduct","type":"text","marks":[{"type":"code"}]},{"text":" method on $block.","type":"text"}]},{"type":"codeBlock","content":[{"text":"$product = $block->getProduct();","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Tile fragments must be always placed inside container.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Restricting Fragments to be rendered only in specific sections","type":"text"}]},{"type":"paragraph","content":[{"text":"Some tile fragments should be visible only on specific pages.","type":"text"}]},{"type":"paragraph","content":[{"text":"Fragments related to wishlist functionality (eg. removing product from wishlist) should be visible only on wishlist listing page.","type":"text"}]},{"type":"paragraph","content":[{"text":"When rendering tile on specific page you can define which related section displays specific tile. For example on wishlist listing page you can set ","type":"text"},{"text":"wishlist","type":"text","marks":[{"type":"strong"}]},{"text":" section.","type":"text"}]},{"type":"codeBlock","content":[{"text":"getLayout()\n ->createBlock(\\MageSuite\\ProductTile\\Block\\Tile::class)\n ->setSection(['wishlist'])\n ->render($product);\n?>","type":"text"}]},{"type":"paragraph","content":[{"text":"Later on when creating Fragment it is possible to define which sections support specific fragment:","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"c780e2d0-706f-450e-b7ae-2933619b9709"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1,"colwidth":[680.0]},"content":[{"type":"codeBlock","content":[{"text":"\n \n \n \n wishlist\n \n \n \n","type":"text"}]}]}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"Fragment will be displayed everywhere if no supported_areas where passed in it's configuration.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Restricting Fragments to not be rendered in specific sections","type":"text"}]},{"type":"paragraph","content":[{"text":"Some fragments might not be suitable for certain sections. Example would be add to wishlist link fragment that should not be displayed in wishlist listing page (since that product was already added to wishlist)","type":"text"}]},{"type":"paragraph","content":[{"text":"When creating Fragment it is possible to define which sections are not supported:","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"1d4fa127-b283-45e1-9594-ff195c1a3c75"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"background":"initial","rowspan":1,"colwidth":[680.0]},"content":[{"type":"codeBlock","content":[{"text":"\n \n li\n cs-links-block-addto__item cs-links-block-addto__item--wishlist\n \n wishlist\n \n \n","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Tiles structure customization","type":"text"}]},{"type":"paragraph","content":[{"text":"Custom containers and fragments can be added to child projects. Containers and fragments can be moved ore removed just like native Magento blocks.","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"Removing whole containers might not always be the best idea. When container is removed, extensions that add fragment inside it won't work correctly. Removing only specific fragments instead of whole containers might be safer.","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"The tile is divided into 2 main parts: ","type":"text"},{"text":"thumbnail","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"content","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":466,"id":"84c4f404-a172-4665-9c27-4aadc272f933","collection":"contentId-2295890252","type":"file","height":605}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"The styling of content elements is based on CSS grid. Grid is defined on the ","type":"text"},{"text":"main","type":"text","marks":[{"type":"code"}]},{"text":" element of the product tile:","type":"text"}]},{"type":"codeBlock","content":[{"text":".cs-product-tile__main {\n height: 100%;\n display: grid;\n grid-template-columns: minmax(0, 1fr) $product-tile_addtocart-width;\n\n grid-template-areas: \n 'swatches swatches'\n 'name name'\n 'price price'\n 'review addtocart'\n 'stock addtocart'\n 'badges badges'\n 'addto addto';\n}\n","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Every direct child of the main element has ","type":"text"},{"text":"grid-area","type":"text","marks":[{"type":"code"}]},{"text":" value defined according to the following pattern","type":"text"}]},{"type":"codeBlock","content":[{"text":" &__swatches {\n grid-area: swatches;\n }","type":"text"}]},{"type":"paragraph","content":[{"text":"Thanks to grid possibilities child project can easily manipulate the order and position of tile elements. Product tile keeps its own aspect ratio.","type":"text"}]},{"type":"codeBlock","content":[{"text":" aspect-ratio:#{$tile_aspect-ratio-width}/#{$tile_aspect-ratio-height};","type":"text"}]},{"type":"paragraph","content":[{"text":"Values for aspect ratio are defined in variables.scss","type":"text"}]},{"type":"codeBlock","content":[{"text":"// Tile ratio\n$tile_aspect-ratio-width--mobile: 300 !default;\n$tile_aspect-ratio-height--mobile: 400 !default;\n\n$tile_aspect-ratio-width: 310 !default;\n$tile_aspect-ratio-height: 560 !default;","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Separate list view styles","type":"text"}]},{"type":"paragraph","content":[{"text":"Only a limited number of projects introduce, design, and style list view mode for product tile.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":1297,"id":"10dede71-6027-469f-a919-bf0e192d92ed","collection":"contentId-2295890252","type":"file","height":719}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"In order to limit the amount of CSS and make the architecture of the tile easier, list view styles are optional and separated in their own scss file: to ","type":"text"},{"text":"theme-creativeshop/src/components/product-tile-list/product-tile-list.scss ","type":"text","marks":[{"type":"em"}]},{"text":"In order to add them to child theme the following import must be uncommented: ","type":"text"},{"text":"import 'components/product-tile';","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Variables for list view are created according to the following pattern: ","type":"text"},{"text":"$product-tile-list_padding","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Grid and grid template areas for list view of product tile are defined for mobile:","type":"text"}]},{"type":"codeBlock","content":[{"text":" grid-template-columns: repeat(2, minmax(0, 1fr));\n\n grid-template-areas: \n 'name name'\n 'review review'\n 'swatches swatches'\n 'description description'\n 'badges badges'\n 'stock price'\n 'addtocart addtocart'\n 'addto addto';","type":"text"}]},{"type":"paragraph","content":[{"text":"and for bigger resolutions:","type":"text"}]},{"type":"codeBlock","content":[{"text":"grid-template-columns: minmax(0, 1fr) fit-content(10rem) #{$product-tile_general-elements-gutter * 2} 12rem 12rem;\n\ngrid-template-areas: \n 'name review separator badges badges'\n 'swatches swatches separator badges badges'\n 'description description separator stock price'\n 'addto addto separator addtocart addtocart';\n}","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Breakpoints for list view product tile","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"$product-tile-list_column-breakpoint-min: '>=#{$product-tile-list_one-column-breakpoint}'; $product-tile-list_column-breakpoint-max: '<#{$product-tile-list_one-column-breakpoint}';","type":"text"}]},{"type":"paragraph","content":[{"text":"$product-tile-list_one-column-breakpoint: 'laptop' !default;","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Magesuite scenarios for hover effects","type":"text"}]},{"type":"paragraph","content":[{"text":"There are some built-in hover scenarios for indicating that the tile is hovered.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The default scenario","type":"text","marks":[{"type":"strong"}]},{"text":" is to show Add to cart button only on hover. There is also a light border to indicate hover","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"$product-tile_addtocart-show-only-on-hover: true !default;\n$product-tile_addtocart-reduced: true !default;\n$product-tile_initial-border: 1px solid transparent !default;\n$product-tile_hover-border: 1px solid rgba($color_border-500, 0.5) !default;","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":309,"id":"0c4e928a-40ba-4bd2-ac00-ab99607b288b","collection":"contentId-2295890252","type":"file","height":539}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":325,"id":"f11440c3-0f6d-44e4-aad0-d467d1cbcaf9","collection":"contentId-2295890252","type":"file","height":557}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"2. ","type":"text"},{"text":"Addon sliding from the bottom","type":"text","marks":[{"type":"strong"}]},{"text":" hover effect","type":"text"}]},{"type":"paragraph","content":[{"text":"There is a container name ","type":"text"},{"text":"product.tile.container.main.after","type":"text","marks":[{"type":"code"}]},{"text":" prepared in product_tile.xml. To introduce the sliding hover effect move some elements inside it:","type":"text"}]},{"type":"codeBlock","content":[{"text":"","type":"text"}]},{"type":"paragraph","content":[{"text":"With some scss variable changes we can achieve the following effect:","type":"text"}]},{"type":"codeBlock","content":[{"text":"$product-tile_addtocart-show-only-on-hover: false;\n$product-tile_addtocart-reduced: false;\n$product-tile_main-after-height: 6rem;","type":"text"}]},{"type":"paragraph"},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":309,"id":"188f0851-e85b-422e-b480-c61b7de7cd5d","collection":"contentId-2295890252","type":"file","height":489}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":317,"id":"e86b7b92-8d4d-4430-a392-d23048522170","collection":"contentId-2295890252","type":"file","height":500}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Styling","type":"text"}]},{"type":"paragraph","content":[{"text":"Styling for product tile is provided in ","type":"text"},{"text":"theme-creativeshop/src/components/product-tile/product-tile.scss","type":"text","marks":[{"type":"code"}]},{"text":" Long list of customizable variables helps to achieve the desired look&feel for child projects. However, if design on product tile is very simple the better idea might be to create its own, reduced scss file and not include styles for all tile fragments","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"By default only grid view of style is supported. Styles for list view and product gallery on tile are optional and must be enabled in child project in entries:","type":"text"}]},{"type":"codeBlock","content":[{"text":"import 'components/product-tile-list';\nimport 'components/tile-gallery';","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Old documentation","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://creativestyle.atlassian.net/wiki/spaces/CSHOP/pages/41977304"}},{"text":" ","type":"text"}]}],"version":1}