{"id":5659,"date":"2024-04-14T21:15:43","date_gmt":"2024-04-14T13:15:43","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5659"},"modified":"2024-04-14T21:15:43","modified_gmt":"2024-04-14T13:15:43","slug":"gather-compilation-enumerations","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/gather-compilation-enumerations\/","title":{"rendered":"Gather Compilation enumerations"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Compilation enumerations are one of two methods to incorporate and style dynamic content from a database collection or an Ecommerce compilation. You can introduce compilation enumerations to any variety of page. The alternative method for introducing dynamic content is using <a href=\"https:\/\/help.webflow.com\/article\/collection-pages\">Compilation pages<\/a>.<\/p>\n<p>Once you join 2 Compilation enumerations, it will showcase all items in that Collection.\u00a0<\/p>\n<p>Within this tutorial:<\/p>\n<ul>\n<li>Organize your Compilation enumerations<\/li>\n<li>Generate a multi-reference field<\/li>\n<li>Craft a Compilation enumeration<\/li>\n<li>Embed a Compilation enumeration<\/li>\n<\/ul>\n<p><\/p>\n<h2>Organize your Compilation enumerations<\/h2>\n<p>To construct a nested Compilation, you\u2019ll relate 2 Compilation enumerations (e.g. Taco Bell spots and Site features) in the same project.\u00a0<\/p>\n<p>When you access a Compilation enumeration item, you observe a list of fields \u2014 this constitutes your data.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1600px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94ad0147ed104a9744a37_5ea228bd56201a55ad8dc579_rxxlermk5nmvklmigpdzap3pendq-4mj_zazwlhd75_uca7gsj8zy6kek7iah0hwmargetiyh1fukq-htndkewxcxrkbzkkx50qojkce2qmnhk7szjazgb2pbryefrfqn9dk6j5l.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94ad0147ed104a9744a37_5ea228bd56201a55ad8dc579_rxxlermk5nmvklmigpdzap3pendq-4mj_zazwlhd75_uca7gsj8zy6kek7iah0hwmargetiyh1fukq-htndkewxcxrkbzkkx50qojkce2qmnhk7szjazgb2pbryefrfqn9dk6j5l\"><\/div>\n<\/figure>\n<p>From here you can bring in data from a spreadsheet with a CSV, or manually append a new list item.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1600px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94ad0147ed104a9744a2f_5ea228bd45b14bd3c8bd589f_f20cr6hkrmi0ukoesctbafhzok5q-kyaocs8ikkkwbhz4bvi8dazpll8w8gyv8zaumqcb8i3qei_xmifzeunbkk9gkk2m5rh93r0yqcpvlc7bnpnbzsnt0zos5xx8m_buo3jfxlz.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94ad0147ed104a9744a2f_5ea228bd45b14bd3c8bd589f_f20cr6hkrmi0ukoesctbafhzok5q-kyaocs8ikkkwbhz4bvi8dazpll8w8gyv8zaumqcb8i3qei_xmifzeunbkk9gkk2m5rh93r0yqcpvlc7bnpnbzsnt0zos5xx8m_buo3jfxlz\"><\/div>\n<\/figure>\n<p><\/p>\n<p>To exhibit and nest the data from 2 Compilation enumerations, we must correlate them. To achieve that, let\u2019s formulate a multi-reference field.<\/p>\n<h2>Generate a multi-reference field<\/h2>\n<p>We wish to be capable of referencing multiple fields in our nested Compilation.\u00a0<\/p>\n<p>To accomplish this, within the primary Compilation (the Compilation that will draw in and exhibit the fields of the second Compilation) access your <strong>Settings<\/strong> in the upper right corner.\u00a0<\/p>\n<p>Now tap on <strong>Add New Field<\/strong> and pick <strong>Multi-reference<\/strong>.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409947288\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409947288\"><\/iframe><\/div>\n<\/figure>\n<p>\u200d<\/p>\n<p>Here you can label the field (e.g. Features) and beneath Collection, select the child Compilation you\u2019d want to connect it to (e.g. Location features), and save both the field and the Compilation.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409947342\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409947342\"><\/iframe><\/div>\n<\/figure>\n<p>Access each of the list items of the Compilation you just connected to. Locate the field you recently formulated in the previous step (e.g. Features), open the dropdown, and attach the fields you\u2019d wish to present for each item.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409947414\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409947414\"><\/iframe><\/div>\n<\/figure>\n<h2>Craft a Compilation enumeration<\/h2>\n<p>Let\u2019s verify your design fills in automatically for every linked Compilation (e.g. Location features).\u00a0<\/p>\n<p>When you explore the Navigator panel, you spot the structure of the page components. To include the list items from the primary Compilation (e.g. Locations), go to the <strong>Add panel<\/strong> and extract a <strong>Collection enumeration wrapper<\/strong> and situate it within the top-level container.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409947474\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409947474\"><\/iframe><\/div>\n<\/figure>\n<p>In the <strong>Compilation Enumeration Settings<\/strong> popup, elect the Compilation enumeration you\u2019d prefer to associate with from the Source dropdown menu.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409947513\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409947513\"><\/iframe><\/div>\n<\/figure>\n<p>Each item from your Compilation will now appear as placeholders (blank).<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1600px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94ad0147ed104a9744a33_5ea228be45b14b8503bd58e9_dt0xvc5bkdw-hce3u_ogn-t0pd2cendt8ba2y_k24mf-l8dka1dzm1st1fbndgqfecdgsaztqjlird0ugvh4yobrft0twww9eznbazgsukbfzx2k7hegcquj2tknukm4lzlbac8s.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94ad0147ed104a9744a33_5ea228be45b14b8503bd58e9_dt0xvc5bkdw-hce3u_ogn-t0pd2cendt8ba2y_k24mf-l8dka1dzm1st1fbndgqfecdgsaztqjlird0ugvh4yobrft0twww9eznbazgsukbfzx2k7hegcquj2tknukm4lzlbac8s\"><\/div>\n<\/figure>\n<p><\/p>\n<p>When you move the Card into one of the list items, it replicates itself in each cell and enforces the design to each list item. Which is precisely what we desire to occur.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409947540\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409947540\"><\/iframe><\/div>\n<\/figure>\n<p>Now when you click into a field in any of the cells, an <strong>Inner Text Settings<\/strong> window emerges. From the <strong>Get text from<\/strong> dropdown, choose the respective Compilation enumeration field and the card automatically fills with data from each list item.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409947562\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409947562\"><\/iframe><\/div>\n<\/figure>\n<p>Redo this step for each field you wish to auto populate.<\/p>\n<h2>Embed a Compilation enumeration<\/h2>\n<p>Currently, we\u2019re going to embed a Compilation enumeration by cataloging one Compilation enumeration inside another.<\/p>\n<p>From the<strong>Include a new panel<\/strong>, seize an additional <strong>Group of collections wrapper<\/strong> and drop it into the initial Collection list located underneath the Collection item.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409987292\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409987292\"><\/iframe><\/div>\n<\/figure>\n<p>Within the popup for <strong>Settings of Collection Lists<\/strong>, opt for the Collection list you wish to connect to from the Source dropdown menu.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409947579\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409947579\"><\/iframe><\/div>\n<\/figure>\n<p>Each element from your Collection will now be displayed as empty placeholders.<\/p>\n<blockquote><p><strong>Please note<\/strong>:\u00a0it is advisable to restrict the exhibition of elements in the main collection list to a maximum of 20 items. If the number of items surpasses 20, it is suggested to implement pagination to prevent any performance-related complications due to exceeding a total of 100 CMS items.<\/p><\/blockquote>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1600px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94ad0147ed104a9744a2b_5ea228bd3c04c0fb669a013e_j9kaiasmjesqfgzvsrdvqd927v2og2qh33rzic5xodhv3a6pq4ztuqw5pweyfe9bixzoqdfkzp6gqxydrjz57id9nxyep2fx273xaecumletgpjoi0wq2zdjklnscd1-tacfdqs_.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94ad0147ed104a9744a2b_5ea228bd3c04c0fb669a013e_j9kaiasmjesqfgzvsrdvqd927v2og2qh33rzic5xodhv3a6pq4ztuqw5pweyfe9bixzoqdfkzp6gqxydrjz57id9nxyep2fx273xaecumletgpjoi0wq2zdjklnscd1-tacfdqs_\"><\/div>\n<\/figure>\n<p><\/p>\n<p>To insert information, select a <strong>Text block<\/strong> from the <strong>Include panel <\/strong>and place it within the Collection list wrapper that was just added.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409947595\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409947595\"><\/iframe><\/div>\n<\/figure>\n<p>Similar to the above process, on clicking a field within any of the cells, an <strong>Inner Text Settings<\/strong> window will appear. From the <strong>Retrieve text from<\/strong> dropdown menu, choose the corresponding field of the Collection list and the card will automatically populate with data from each item on the list.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/409987733\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/409987733\"><\/iframe><\/div>\n<\/figure>\n<p>That concludes the process \u2014 you have mastered the art of nesting Collections. Great job!<\/p>\n<p><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Display a Collection list within another Collection list to nest content.","protected":false},"author":2,"featured_media":5660,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[300],"tags":[],"class_list":{"0":"post-5659","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-cms-dynamic-content","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5659"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5660"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}