Customer catalog

Develope a customer catalog and a detail page.

You need to create 2 elements:

• catalog with the standard template
• detail page with the carousel template

Thanks to templates it's easy to generate this elements with "create datadefID". The placeholders can be adapted fast.

Support is available by discord: K8 Web Kit

This is the default for the detail page.

You adapt:

• the layout
• insert links for:
  • phone
  • email
  • website

The links allows the user open the website, open the email client or to start a phone call.

Your customer form from the first exercise:

• your exercise customer form

Choose your datadefID from the first exercise and edit:

• catalog template: catalog
• detail template: detail carousel

Save

Attention, it's not saved by a red box at the window bottom line! Only by the green "saved" message, you can continue.

Create datadefID

K8 Web Kit creates the html-files:

• catlog_container.html
• catlog_record.html
• detail_container.html
• detail_record.html

Please have a look to the documentation of elements online.

You need to be registerted and logged in. Open "elements online" in your environement "Admin / elements online".

excustomer_catalog_record.html:

Folder: Choose and edit the file:

• <your customer datadefID>_catalog_record.html

In the HTML table are all columns from the database table. In the HTML table a row starts with <tr> and ends with </tr>. Each row contains 2 cells (td). In the left cell is the label, in the right cell the placeholder for the table column is in double brackets:

• <tr><td>name1</td><td>{{name1}}</td></tr>

Change:

• City -> {{country}} {{code}} {{city}}

Please remove this rows:

• clientID
• code
• city
• fax
• facebook
• firstcontact
• representativeID
• memo
• phone
• Mobile
• Email
• Website
• descriptionlong
• categoryID

Change the labels. After changes are done save it!

excustomer_detail_record.html:

Folder: Choose and edit the file:

• <your customer datadefID>_detail_record.html

Please remove this rows:

• clientID
• fax
• facebook
• representativeID
• memo
• datetimecreated

Change the rows

• City -> {{country}} {{code}} {{city}}
• phone
• Mobile
• Email
• Website
• {{categoryID}} -> {{categoryIDtext}}

Change in the bottom:

• {{descriptionlong}} -> {{memo}}

Change the labels. After changes are done save it!

carousel

This property is automatically added in the datadefintion, section masterdata:

• "detail-carousel":true

Excerpt from myproject/excusomer/excustomer_head_end.js:

// detail hyperlinks if(!settingsexcustomer2.masterdata.cbcatLoad)settingsexcustomer2.masterdata.cbcatLoad=[]; settingsexcustomer2.masterdata.cbcatLoad.push(function(options){ let dat=options.dat; let el_rec_record=options.el_rec_record; let el_phone=el_rec_record.querySelector('.js_phone'); if(el_phone)el_phone.href="tel:"+dat.phone.replace(/(\s+|\([^)]+\)|\/|-)/g,''); let el_mobile=el_rec_record.querySelector('.js_mobile'); if(el_mobile)el_mobile.href="tel:"+dat.mobile.replace(/(\s+|\([^)]+\)|\/|-)/g,''); let el_email=el_rec_record.querySelector('.js_email'); if(el_email)el_email.href="mailto:"+dat.email; let el_website=el_rec_record.querySelector('.js_website'); if(el_website)el_website.innerHTML=dat.website.replace('http://','').replace('https://',''); });

Folder: Choose and edit the file:

• <your customer datadefID>_detail_record.html

Add this lines in the JavaScript file of your customer data definition.

Replace settingsexcustomer2 with:

• settings<your customer datadefID>

JavaScript formats links and text:

• phone
• mobile
• email
• website

Save