"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[4629],{1463:(e,t,a)=>{a(6540),a(4848)},2048:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/productdb-f56075018409aad56dc45f9574a0ffe8.png"},3278:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/productlist-6e6c59a3881bea7c45b7f625de3931a9.png"},4553:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/ezsitedb-dad0591807a5f4058504f9224edeae2e.png"},4878:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/productdata-2b325fb8c4f8727a2007ca18f75b0301.png"},6860:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/productprompt-39de63b135a2ddb448ab8967967dd1dd.png"},6882:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>u,frontMatter:()=>d,metadata:()=>s,toc:()=>p});const s=JSON.parse('{"id":"crashCourse/create-product","title":"Create and Display Product Listings","description":"Step 1. Step 1 : Enable  Core Database under Database Settings","source":"@site/userGuide/crashCourse/create-product.md","sourceDirName":"crashCourse","slug":"/crashCourse/create-product","permalink":"/guides/user/crashCourse/create-product","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":18,"frontMatter":{"sidebar_position":18},"sidebar":"sidebar","previous":{"title":"How to Edit Source Code?","permalink":"/guides/user/crashCourse/edit-code"},"next":{"title":"Set Up Unique Key for Your Database Table","permalink":"/guides/user/crashCourse/unique-key"}}');var n=a(4848),i=a(8453),r=(a(1463),a(8175));const d={sidebar_position:18},o="Create and Display Product Listings",c={},p=[{value:"Step 1. Step 1 : Enable <CompanyNameDisplay></CompanyNameDisplay> Core Database under Database Settings",id:"step-1-step-1--enable--core-database-under-database-settings",level:3},{value:"Step 2: Create Products Listing Table in Database",id:"step-2-create-products-listing-table-in-database",level:3},{value:"Step 3: Update Product Data by Clicking \u201cAdd Data\u201d",id:"step-3-update-product-data-by-clicking-add-data",level:3},{value:"Step 4: Prompt to populate product listing on front end web page",id:"step-4-prompt-to-populate-product-listing-on-front-end-web-page",level:3}];function l(e){const t={code:"code",h1:"h1",h3:"h3",header:"header",img:"img",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"create-and-display-product-listings",children:"Create and Display Product Listings"})}),"\n",(0,n.jsxs)(t.h3,{id:"step-1-step-1--enable--core-database-under-database-settings",children:["Step 1. Step 1 : Enable ",(0,n.jsx)(r.A,{})," Core Database under Database Settings"]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(4553).A+"",width:"1488",height:"669"})}),"\n",(0,n.jsx)(t.h3,{id:"step-2-create-products-listing-table-in-database",children:"Step 2: Create Products Listing Table in Database"}),"\n",(0,n.jsx)(t.p,{children:"In the prompt window, type in"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:"Create an oil paintings product table in database including name, description, size (small, medium, large), price, image, artist\n"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(6860).A+"",width:"1054",height:"670"})}),"\n",(0,n.jsx)(t.p,{children:"Go to Project Admin to see the table that has been created with the products."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(2048).A+"",width:"1332",height:"676"})}),"\n",(0,n.jsx)(t.h3,{id:"step-3-update-product-data-by-clicking-add-data",children:"Step 3: Update Product Data by Clicking \u201cAdd Data\u201d"}),"\n",(0,n.jsxs)(t.p,{children:['Navigate to Project Admin, locate the table created in the previous step, and click the "Update" link next to each product to modify its data.\n',(0,n.jsx)(t.img,{src:a(4878).A+"",width:"1337",height:"685"})]}),"\n",(0,n.jsx)(t.h3,{id:"step-4-prompt-to-populate-product-listing-on-front-end-web-page",children:"Step 4: Prompt to populate product listing on front end web page"}),"\n",(0,n.jsx)(t.p,{children:"In the prompt window, enter the text displayed in the screenshot below"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:"Create an oilpaintings collection below hero section, get the collection data from oilpaintings table from database\n"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(8921).A+"",width:"1059",height:"670"})}),"\n",(0,n.jsx)(t.p,{children:"The products are successfully displayed on the web page."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(3278).A+"",width:"1312",height:"613"})})]})}function u(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},8175:(e,t,a)=>{a.d(t,{A:()=>n});a(6540);var s=a(4848);function n(){return(0,s.jsx)("code",{children:"EZsite"})}},8453:(e,t,a)=>{a.d(t,{R:()=>r,x:()=>d});var s=a(6540);const n={},i=s.createContext(n);function r(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function d(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:r(e.components),s.createElement(i.Provider,{value:t},e.children)}},8921:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/productfront-d6d17b5d492e5749176ec3fc0a43e661.png"}}]);